From 05af712644524586ccbcb434c672145143fa4da6 Mon Sep 17 00:00:00 2001
From: Mikko Ahlroth <mikko@ahlroth.fi>
Date: Sat, 16 Dec 2023 00:23:45 +0200
Subject: [PATCH] Add some padding for the song list when playing, other UI
 tunings

---
 src/elekf/web/authed_view.gleam | 16 +++++++---------
 style.css                       | 30 ++++++++++++++++++++++++------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/elekf/web/authed_view.gleam b/src/elekf/web/authed_view.gleam
index 64880ec..2d690a0 100644
--- a/src/elekf/web/authed_view.gleam
+++ b/src/elekf/web/authed_view.gleam
@@ -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 {
diff --git a/style.css b/style.css
index 5bdc0f5..4b9cfd9 100644
--- a/style.css
+++ b/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 {