Improve player on mobile devices

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

@@ -59,7 +59,8 @@
          [:div.level-left>article.media
           [:div.media-left [cover current-song 48]]
           [:div.media-content [current-song-info current-song playback-status]]]
-         [:div.level-right [song-controls is-playing?]]
-         [:div.level-right [playback-mode-controls playlist]]]
+         [:div.level-right
+          [:div.buttons-start [song-controls is-playing?]]
+          [:div.buttons-end [playback-mode-controls playlist]]]]
         ;; not playing anything
         [:p.has-text-light.navbar-item.idle-notification "Select a song to start playing"])]]))

src/cljs/airsonic_ui/views.cljs

@@ -37,6 +37,7 @@
          [:a.navbar-item {:href (url-for ::routes/library {:criteria "newest"})} "Newest additions"]
          [:a.navbar-item {:href (url-for ::routes/library {:criteria "starred"})} "Starred"]]]
        [:a.navbar-item {} "Podcasts"]
+       [:a.navbar-item {} "Playlists"]
        [:a.navbar-item {} "Shares"]
        [:div.navbar-item.has-dropdown.is-hoverable
         [:div.navbar-link "More"]

src/sass/app.sass

@@ -30,10 +30,9 @@
 
 // bottom bar
 .audio-player
-  background: $dark
-  color: $light
-
   .navbar-menu
+    color: $light
+    background: $dark
     align-items: center
 
   .audio-interaction
@@ -42,13 +41,23 @@
     .level-left
       flex-grow: 1
       flex-shrink: 0
+
     .level-right
+      display: flex
+
+      .buttons-start,
+      .buttons-end
+        margin: 0 .5rem
+
+      =tablet
         flex-grow: 0
         flex-shrink: 1
         padding-left: .5rem
-      padding-left: .5rem
         padding-right: .5rem
 
+        .buttons-start
+          margin-left: .75rem
+
   .media
     flex-grow: 1
     align-items: center