From 43235fddbb5e29f8973fdcd6f77313a519e41cb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Tue, 30 Apr 2019 21:58:14 +0200 Subject: Various HTML fixups and additions. --- module/output/html.scm | 66 ++++++++++++++++++++++++++++++++++---------------- static/style.css | 23 +++++++++++------- 2 files changed, 59 insertions(+), 30 deletions(-) diff --git a/module/output/html.scm b/module/output/html.scm index 841acd97..1c79ad83 100644 --- a/module/output/html.scm +++ b/module/output/html.scm @@ -25,6 +25,11 @@ (define x-pos (make-object-property)) (define width (make-object-property)) +(define (UID ev) + (string-append + (time->string (attr ev 'DTSTART) "~s") + (html-attr (attr ev 'UID)))) + ;; Takes a list of vcomponents, sets their widths and x-positions to optimally ;; fill out the space, without any overlaps. (define (fix-event-widths! start-of-day lst) @@ -75,7 +80,8 @@ ;; height (* 100/24 (time->decimal-hour (event-length/day ev time))))) - `(a (@ (href "#" ,(time->string (attr ev 'DTSTART) "~s") ,(attr ev 'UID))) + `(a (@ (href "#" ,(UID ev)) + (class "hidelink")) (div (@ (class "event CAL_" ,(html-attr (let ((l (attr (parent ev) 'NAME))) (if (pair? l) (car l) l))) ,(when (timestring (attr ev 'DTEND) fmt))) (values start end))) + (define (fmt-single-event ev) - `(article (@ (id ,(time->string (attr ev 'DTSTART) "~s") - ,(html-attr (attr ev 'UID))) + `(article (@ (id ,(UID ev)) (class "eventtext CAL_bg_" ,(html-attr (let ((l (attr (parent ev) 'NAME))) (if (pair? l) (car l) l))))) - (h1 (a (@ (href "#" ,(time-link (attr ev 'DTSTART)))) + (h3 (a (@ (href "#" ,(time-link (attr ev 'DTSTART))) + (class "hidelink")) ,(attr ev 'SUMMARY))) - (main + (div ,(let* ((start end (fmt-time-span ev))) `(div ,start " — " ,end)) ,(when (and=> (attr ev 'LOCATION) (negate string-null?)) @@ -144,11 +151,12 @@ (define (fmt-day day) (let* (((date . events) day)) - `(div (@ (class "text-day")) - ;; TODO this gives date +1 - (header (h2 ,(let ((s (date->string date "~Y-~m-~d"))) - `(a (@ (href "#" ,s)) ,s)))) - ,@(map fmt-single-event (stream->list events))))) + `(section (@ (class "text-day")) + ;; TODO this gives date +1 + (header (h2 ,(let ((s (date->string date "~Y-~m-~d"))) + `(a (@ (href "#" ,s) + (class "hidelink")) ,s)))) + ,@(map fmt-single-event (stream->list events))))) (define (days-in-month n) (cond ((memv n '(1 3 5 7 8 10 12)) 31) @@ -173,6 +181,14 @@ (modulo (1- (date-week-day date)) 7)) ;; date should be start of month +;; @example +;; må ti on to fr lö sö +;; 1 2 3 4 5 6 7 +;; 8 9 10 11 12 13 14 +;; 15 16 17 18 19 20 21 +;; 22 23 24 25 26 27 28 +;; 29 30 +;; @end example (define (cal-table date) (let ((td (lambda (p) (lambda (d) `(td (@ ,p) ,d))))) `(table (@ (class "small-calendar")) @@ -185,7 +201,8 @@ (append (map (td '(class "prev")) (iota month-start (- prev-month-len month-start))) (map (td '(class "cur")) - (map (lambda (d) `(a (@ (href "#" ,(date->string date "~Y-~m-") ,d)) ,d)) + (map (lambda (d) `(a (@ (href "#" ,(date->string date "~Y-~m-") ,d) + (class "hidelink")) ,d)) (iota month-len 1))) (map (td '(class "next")) (iota (modulo (- (* 7 5) month-len month-start) 7) 1)))))) @@ -204,10 +221,17 @@ (define evs (get-groups-between (group-stream events) start end)) + ;; (display "") (newline) ((@ (sxml simple) sxml->xml) - `(html (head + `(html (@ (lang sv)) + (head (title "Calendar") (meta (@ (charset "utf-8"))) + (meta (@ (name viewport) + (content "width=device-width, initial-scale=0.5"))) + (meta (@ (name description) + (content "Calendar for the dates between " (date->string start) + " and " (date->string end)))) ,(include-css "static/style.css") (style ,(format #f "~:{.CAL_~a { background-color: ~a; color: ~a }~%.CAL_bg_~a { border-color: ~a }~%~}" (map (lambda (c) @@ -222,12 +246,12 @@ calendars)))) (body (div (@ (class "root")) - (div (@ (class "calendar")) - ,(time-marker-div) - (div (@ (class "days")) - ,@(stream->list (stream-map lay-out-day evs)))) - (div (@ (class "sideinfo")) - (div (@ (class "about")) - (div ,(cal-table (parse-freeform-date "2019-04-01")))) - (div (@ (class "eventlist")) - ,@(stream->list (stream-map fmt-day evs))))))))) + (main (@ (class "calendar")) + ,(time-marker-div) + (div (@ (class "days")) + ,@(stream->list (stream-map lay-out-day evs)))) + (aside (@ (class "sideinfo")) + (div (@ (class "about")) + (div ,(cal-table (parse-freeform-date "2019-05-01")))) + (div (@ (class "eventlist")) + ,@(stream->list (stream-map fmt-day evs))))))))) diff --git a/static/style.css b/static/style.css index 44ee6e0c..744912a0 100644 --- a/static/style.css +++ b/static/style.css @@ -7,6 +7,11 @@ .small-calendar { text-align: right; + border-collapse: collapse; +} + +.small-calendar thead { + border-bottom: 1px solid black; } .small-calendar .prev, @@ -14,13 +19,12 @@ color: grey; } -.small-calendar td:nth-child(7).cur { - color: red; +.small-calendar td { + padding: 5px; } -.small-calendar a { - color: inherit; - text-decoration: none; +.small-calendar td:nth-child(7).cur { + color: red; } .text-day { @@ -65,13 +69,14 @@ font-size: 10pt; } -.sideinfo .eventlist h1 { +.sideinfo .eventlist h3 { font-size: 12pt; border-bottom: 1px solid gray; margin-bottom: 0; + font-weight: 300; } -.sideinfo .eventlist h1 a { +.hidelink { color: black; text-decoration: none; } @@ -229,11 +234,11 @@ .clock-2 { top: calc(100%/24 * 2); } .clock-4 { top: calc(100%/24 * 4); } .clock-6 { top: calc(100%/24 * 6); } -.clock-8 { top: calc(100%/24 * 8); } +.clock-8 { top: calc(100%/24 * 8); border-width: 2px; } .clock-10 { top: calc(100%/24 * 10); } .clock-12 { top: calc(100%/24 * 12); } .clock-14 { top: calc(100%/24 * 14); } -.clock-16 { top: calc(100%/24 * 16); } +.clock-16 { top: calc(100%/24 * 16); border-width: 2px; } .clock-18 { top: calc(100%/24 * 18); } .clock-20 { top: calc(100%/24 * 20); } .clock-22 { top: calc(100%/24 * 22); } -- cgit v1.2.3