Add some padding for the song list when playing, other UI tunings
This commit is contained in:
parent
4cb116bd75
commit
05af712644
2 changed files with 31 additions and 15 deletions
|
@ -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
30
style.css
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue