From 161f85c2fc130f6a60f3f64225966ccc73df4b48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arne=20Schl=C3=BCter?= <arne@schlueter.is>
Date: Wed, 29 Aug 2018 14:30:07 +0200
Subject: [PATCH] Improve player on mobile devices

---
 .../components/audio_player/views.cljs        |  5 ++--
 src/cljs/airsonic_ui/views.cljs               |  1 +
 src/sass/app.sass                             | 25 +++++++++++++------
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/cljs/airsonic_ui/components/audio_player/views.cljs b/src/cljs/airsonic_ui/components/audio_player/views.cljs
index 5148f2a..2bee201 100644
--- a/src/cljs/airsonic_ui/components/audio_player/views.cljs
+++ b/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"])]]))
diff --git a/src/cljs/airsonic_ui/views.cljs b/src/cljs/airsonic_ui/views.cljs
index ad198ea..abd04e5 100644
--- a/src/cljs/airsonic_ui/views.cljs
+++ b/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"]
diff --git a/src/sass/app.sass b/src/sass/app.sass
index 793ebc7..1d0d783 100644
--- a/src/sass/app.sass
+++ b/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,12 +41,22 @@
     .level-left
       flex-grow: 1
       flex-shrink: 0
+
     .level-right
-      flex-grow: 0
-      flex-shrink: 1
-      padding-left: .5rem
-      padding-left: .5rem
-      padding-right: .5rem
+      display: flex
+
+      .buttons-start,
+      .buttons-end
+        margin: 0 .5rem
+
+      =tablet
+        flex-grow: 0
+        flex-shrink: 1
+        padding-left: .5rem
+        padding-right: .5rem
+
+        .buttons-start
+          margin-left: .75rem
 
   .media
     flex-grow: 1