Simplify audio player structure

src/cljs/airsonic_ui/components/audio_player/views.cljs

@@ -95,14 +95,13 @@
         playlist @(subscribe [:audio/playlist])
         playback-status @(subscribe [:audio/playback-status])
         is-playing? @(subscribe [:audio/is-playing?])]
-    [:nav.navbar.is-fixed-bottom.audio-player
-     [:div.navbar-menu.is-active
-      (if current-song
-        ;; show song info, controls, progress bar, etc.
-        [:section.audio-interaction
-         [playback-info current-song playback-status]
-         [progress-indicators current-song playback-status]
-         [playback-controls is-playing?]
-         [playback-mode-controls playlist]]
-        ;; not playing anything
-        [:p.navbar-item.idle-notification "No audio playing"])]]))
+    [:nav.audio-player
+     (if current-song
+       ;; show song info, controls, progress bar, etc.
+       [:section.audio-interaction
+        [playback-info current-song playback-status]
+        [progress-indicators current-song playback-status]
+        [playback-controls is-playing?]
+        [playback-mode-controls playlist]]
+       ;; not playing anything
+       [:p.navbar-item.idle-notification "No audio playing"])]))

src/sass/app.sass

@@ -18,18 +18,19 @@
     +loader
 
 // bottom bar
-.has-navbar-bottom
+.has-navbar-fixed-bottom
   padding-bottom: 64px
 
 .audio-player
+  +navbar-fixed
+  bottom: 0
+
   // first clear some of that navigation styling
   background-color: $dark
-  color: $light
+  color: $dark-invert
   min-height: 64px
-
-  .navbar-menu
-    padding: 0
-    background-color: transparent
+  display: flex
+  align-items: center
 
   // now off to the contents