aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--playlist.lisp41
-rw-r--r--static/css/main.css40
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;
+}