Update HTML output, and CSS.

Updated CSS to scroll fancier, and display better.
But since I don't really know how to do stuff properly in CSS (as if
anyone does) it's a bit of a mess.

2 files changed, 63 insertions, 26 deletions

diff --git a/module/output/html.scm b/module/output/html.scm
index 197b0735..d68d8bab 100644
--- a/module/output/html.scm
+++ b/module/output/html.scm
@@ -106,15 +106,23 @@
                (span (@ (class "dayname")) ,(date->string date "~a"))
                (span (@ (class "daydate")) ,(date->string date "~Y-~m-~d")))
           (div (@ (class "events"))
-               " "
+               ,@(map (lambda (time)
+                        `(div (@ (id ,(string-append "clock-" time))
+                                 (class "clock")) " "))
+                      (map number->string (iota 12 0 2)))
                ,@(stream->list (stream-map (lambda (e) (vevent->sxml date e)) events))))))
 
 (define (time-marker-div)
-  (map (lambda (time)
-         `(div (@ (id ,(string-append "clock-" time))
-                  (class "clock"))
-               ,(string-append time ":00")))
-       (map number->string (iota 12 0 2))))
+  `(div (@ (class "sideclock"))
+        (div (@ (class "day"))
+             (div (@ (class "meta")) #\space)
+             (div (@ (class "clockbar"))
+                  ,@(map (lambda (time)
+                           `(div (@ (id ,(string-append "clock-" time))
+                                    (class "clock"))
+                                 (span (@ (class "clocktext"))
+                                       ,(string-append time ":00"))))
+                         (map number->string (iota 12 0 2)))))))
 
 (define (include-css path)
   `(link (@ (type "text/css")
@@ -153,6 +161,6 @@
                                         (or (and=> (attr c 'COLOR) calculate-fg-color) "black")))
                                 calendars))))
           (body (div (@ (class "calendar"))
-                     ,@(time-marker-div)
+                     ,(time-marker-div)
                      (div (@ (class "days"))
                           ,@(stream->list (stream-map lay-out-day evs))))))))
diff --git a/static/style.css b/static/style.css
index 8ac46785..4509dc95 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,19 +1,33 @@
-/*
- * TODO
- * the positioning of the meta information for each day is
- * quite badly done, and mostly a hack.
- */
-
-body {
-	/* This is for the day meta information */
-	padding-top: 50px;
-}
-
 .calendar {
-	height: calc(90vh - 50px);
+	height: 100%;
+	display: flex;
+}
 
+.clockbar {
 	/* This is relative for the .clock */
 	position: relative;
+	height: calc(100% - 50px - 10px);
+	width: 2.5em;
+}
+
+.sideclock {
+	/* border-right: 2px solid gray; */
+	z-index: 1;
+	height: 100%;
+	padding: 0;
+}
+
+.sideclock .meta {
+	border-bottom: 2px solid transparent;
+}
+
+.sideclock .day {
+	border: 1px transparent;
+	min-width: 0;
+}
+
+.days .meta {
+	border-bottom: 2px solid gray;
 }
 
 .days {
@@ -21,6 +35,14 @@ body {
 	width: 100%;
 	height: 100%;
 	padding: 0;
+	overflow-x: scroll;
+	scroll-snap-type: x mandatory;
+}
+
+.events {
+	position: relative;
+	width: 100%;
+	height: calc(100% - 50px);
 }
 
 /*
@@ -37,29 +59,36 @@ body {
 .clock {
 	color: gray;
 	border-top: 1px dotted gray;
-	width: 100000; /* calc(100% + 5ex); */
 }
 
-.days > :first-child {
-	margin-left: 6ex;
+.sideclock .clock {
+	border: none;
+}
+
+.clocktext {
+	z-index: 1;
+	text-align: right;
 }
 
 .day {
 	position: relative;
 
-	height: 100%;
+	height: 99%;
 	width: 100%;
 	min-width: 300px;
 
 	margin-left: 0.5em;
 	border: 1px solid black;
+
+	scroll-snap-align: start;
+}
+
+.day .clock {
+	width: calc(100% + 0.5em);
 }
 
 .meta {
-	position: absolute;
 	height: 50px;
-	top: -50px;
-
 	width: 100%;
 
 }