Add: minor improvement of mobile [style]

Add: code review feedback

Fix: unbalanced paren

Fix: all the other stuff

2 files changed, 55 insertions, 26 deletions

diff --git a/playlist.lisp b/playlist.lisp
index ad111bf..7c5a9b6 100644
--- a/playlist.lisp
+++ b/playlist.lisp
@@ -245,16 +245,17 @@
               (span (:bind time))
               (span (:content " / "))
               (span (:bind dur)))
-           (button (:content "⏮" :bind back ))
-           (button (:content "⏵" :bind play ))
-           (button (:content "⏭" :bind forward )))
+           (div (:class "controls")
+		(button (:content "⏮" :bind back ))
+		(button (:content "⏵" :bind play ))
+		(button (:content "⏭" :bind forward ))))
     (setf (np-title ctl) title
           (np-artist ctl) artist
           (np-thumb ctl) thumb
           (np-dur ctl) dur
           (np-time ctl) time
           (np-play ctl) play) 
-    (setf (height thumb) "100px")
+    (setf (height thumb) "300px")
     (set-on-click back 'previous-now-playing)
     (set-on-click forward 'advance-now-playing)
     (set-on-click play 'toggle-now-playing)))
@@ -420,22 +421,22 @@
       (with-clog-create body
           (div ()
                (navigation-header ())
-               (div (:class "row")
-                    (div ()
-                         (now-playing-display (ctl)))
-                    (div ()
-                         (:span (:bind edit-indicator))
-                         (section (:h2)
-                                  (:span (:bind title-elem :content (playlist-title pl)))
-                                  (form-element (:text :bind input))
-                                  (:span (:content " -- "))
-                                  (:span (:bind dur-elem :content (secs-to-hms (playlist-duration pl)))))
-                         (span (:content "by ")
-                               (a (:link (url-to-user (playlist-user pl))
-                                   :content (format nil "~a" (user-name (playlist-user pl))))))
-                         (p (:bind collaborators-elem))
-                         (track-listing (pl))))
-               (div (:class "row")
+               (div (:class "player")
+		    (now-playing-display (ctl))
+		    (div (:class "playlist-display")
+			 (:span (:bind edit-indicator))
+			 (section (:h2)
+				  (:span (:bind title-elem :content (playlist-title pl)))
+				  (form-element (:text :bind input))
+				  (:span (:content " -- "))
+				  (:span (:bind dur-elem :content (secs-to-hms (playlist-duration pl)))))
+			 (span (:content "by ")
+			       (a (:link (url-to-user (playlist-user pl))
+				   :content (format nil "~a" (user-name (playlist-user pl))))))
+			 (p (:bind collaborators-elem))
+			 (track-listing (pl))))
+
+	       (div (:class "row")
                     (div ()
                          (new-track-form (pl))
                          (editor-managment (pl)))))
diff --git a/static/css/main.css b/static/css/main.css
index 1303fca..665eb76 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -32,12 +32,16 @@ button:hover {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-evenly;
     align-content: baseline;
 }
 
-.row>div {
-    margin: 30px;
+.column {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: baseline;
 }
 
 .centered-column {
@@ -57,17 +61,41 @@ button:hover {
     background-color: #454545;
 }
 
+.player {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
 .now-playing {
-    position: sticky;
-    top: 2em;
+    display: flex;
     width: 300px;
+    flex-direction: column;
+}
+
+.controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 }
 
-.now-playing button {
+.controls button {
     font-size: 2em;
+    width: -moz-available;
+    width: -webkit-fill-available;
+    width: stretch;
 }
 
 .now-playing-track {
     background-color: #454545;
 }
 
+.playlist-display {
+    margin-top: 2em;
+    width: auto;
+    display: flex;
+    flex-direction: column;
+    height: 600px;
+    overflow-y: auto;
+}