diff options
| -rw-r--r-- | playlist.lisp | 41 | ||||
| -rw-r--r-- | static/css/main.css | 40 |
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; +} |