nicd/elektrofoni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add some padding for the song list when playing, other UI tunings

Browse source
This commit is contained in:
Mikko Ahlroth 2023-12-16 00:23:45 +02:00
parent 4cb116bd75
commit 05af712644
2 changed files with 31 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/elekf/web/authed_view.gleam
View file

@ -186,8 +186,13 @@ pub fn update(model: Model, msg) {
}
pub fn view(model: Model) {
let player_open_attribute = case model.play_status {
HasTracks(_) -> attribute.attribute("data-player-status", "open")
NoTracks -> attribute.attribute("data-player-status", "closed")
}
div(
[attribute.id("authed-view-wrapper")],
[attribute.id("authed-view-wrapper"), player_open_attribute],
[
div(
[attribute.id("library-loading-indicator")],
@ -275,14 +280,7 @@ pub fn view(model: Model) {
div(
[
attribute.id("authed-view-player"),
attribute.class(
"glass-bg glass-shadow glass-blur glass-border " <> case
model.play_status
{
HasTracks(_) -> ""
NoTracks -> "hidden"
},
),
attribute.class("glass-bg glass-shadow glass-blur glass-border"),
],
[
case model.play_status {

30
style.css
View file

@ -24,10 +24,13 @@
--glass-border: 1px solid var(--glass-border-color);
--glass-shadow: 0 4px 30px rgba(0, 0, 0, var(--glass-shadow-opacity));
--button-border-radius-small: 5px;
--button-border-radius: 10px;
--border-radius: 10px;
--button-border-radius-small: calc(var(--border-radius) / 2);
--button-border-radius: var(--border-radius);
--side-margin: 5px;
--double-margin: calc(var(--side-margin) * 2);
--track-thumb-size: 20px;
--track-scale-factor: 4;
@ -120,8 +123,9 @@ single-artist-view {
overflow-y: hidden;
height: calc(
100vh - (var(--library-top-nav-height) + var(--side-margin)) -
var(--side-margin) * 2
var(--double-margin)
);
border-radius: var(--border-radius);
}
#authed-view-wrapper {
@ -145,6 +149,10 @@ single-artist-view {
border-bottom: none;
}
#authed-view-wrapper[data-player-status="closed"] #authed-view-player {
display: none;
}
#player-wrapper {
display: flex;
flex-direction: column;
@ -245,7 +253,7 @@ single-artist-view {
flex-direction: row;
justify-content: space-between;
align-items: stretch;
gap: 10px;
gap: var(--double-margin);
}
#search-bar-input-wrapper {
@ -259,6 +267,11 @@ single-artist-view {
.library-list {
height: 100%;
overflow-y: auto;
padding-bottom: 0;
}
#authed-view-wrapper[data-player-status="open"] .library-list {
padding-bottom: 80px;
}
#artists-view .library-list,
@ -267,7 +280,12 @@ single-artist-view {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-flow: dense;
gap: 10px;
/* Ensure the grid doesn't stretch when there's only a few elements */
grid-auto-rows: min-content;
gap: var(--double-margin);
padding: var(--double-margin);
}
.track-item {
@ -277,7 +295,7 @@ single-artist-view {
.library-list-shuffle-all {
grid-column: 1 / -1;
padding: calc(var(--side-margin) * 2) var(--side-margin);
padding: var(--double-margin) var(--side-margin);
}
.library-item-thumbnail {