diff options
| -rw-r--r-- | TODO | 7 | ||||
| -rw-r--r-- | module/git.scm | 7 | ||||
| -rw-r--r-- | module/output/html.scm | 132 | ||||
| -rw-r--r-- | static/style.css | 244 |
4 files changed, 236 insertions, 154 deletions
@@ -39,6 +39,13 @@ HTML Icke-linjär tidsskala --------------------- +Brädd på elementen vid smal skärm. +---------------------------------- +"Sido"-panelen lägger sig under inehållet när sidan blir för smal. +Cutoff-punkten är dock lite för smal. Kom på hur minimi-brädden på +<main/> beräknas, för att sätta ett korrekt värde. + + ICS === diff --git a/module/git.scm b/module/git.scm index dfb60526..d3de8c5b 100644 --- a/module/git.scm +++ b/module/git.scm @@ -5,8 +5,9 @@ :export (get-git-version)) (define (get-git-version) - (-> "git rev-parse HEAD" - open-input-pipe - read-line)) + (values (-> "git rev-parse HEAD" + open-input-pipe read-line) + (-> "git rev-parse --short HEAD" + open-input-pipe read-line))) diff --git a/module/output/html.scm b/module/output/html.scm index 49b98585..14912490 100644 --- a/module/output/html.scm +++ b/module/output/html.scm @@ -526,8 +526,9 @@ (body (div (@ (class "root")) + ;; Actuall calendar (main - ;; Actuall calendar + (@ (style "grid-area: main")) ,(render-calendar calendars: calendars events: events start-date: start-date @@ -536,67 +537,74 @@ post-end: post-end next-start: next-start prev-start: prev-start - ) - - ;; Page footer - (footer (span "Page generated " ,(date->string (current-date))) - (span (a (@ (href ,(repo-url) "/calparse")) - "Source Code")) - ,(let* ((hash (get-git-version)) - (url (format #f "~a/calparse/commit/?id=~a" - (repo-url) hash))) - `(span "Version " (a (@ (href ,url)) ,hash))) - (span (@ (class "nav")) - "View " - (a (@ (href "/week/" ,(date->string - (if (= 1 (day start-date)) - (start-of-week start-date (get-config 'week-start)) - start-date) - "~1") - ".html")) - "weekly") - ", " - (a (@ (href "/month/" ,(date->string (set (day start-date) 1) "~1") ".html")) - "monthly") - ".") - )) - - ;; Whole sidebar - (aside (@ (class "sideinfo")) - ;; Small calendar and navigation - (div (@ (class "about")) - ;; prev button - ,(nav-link "«" (prev-start start-date)) - - ;; calendar table - ;; TODO - (div ,(cal-table start-date: start-date end-date: end-date - next-start: next-start - prev-start: prev-start - )) - - ;; next button - ,(nav-link "»" (next-start start-date))) - - - ;; List of events - (div (@ (class "eventlist")) - ;; List of calendars - (div (@ (class "calendarlist")) - (ul ,@(map (lambda (calendar) - `(li (@ (class "CAL_bg_" ,(html-attr (attr calendar 'NAME)))) - ,(attr calendar 'NAME))) - calendars))) - - ;; Events which started before our start point, but "spill" into our time span. - (section (@ (class "text-day")) - (header (h2 "Tidigare")) - ,@(stream->list - (stream-map fmt-single-event - (stream-take-while (compose (cut date/-time<? <> start-date) - (extract 'DTSTART)) - (cdr (stream-car evs)))))) - ,@(stream->list (stream-map fmt-day evs))))))))) + )) + + ;; Page footer + (footer + (@ (style "grid-area: footer")) + (span "Page generated " ,(date->string (current-date))) + (span (a (@ (href ,(repo-url) "/calparse")) + "Source Code")) + ,(let* ((long-hash short-hash (get-git-version)) + (url (format #f "~a/calparse/commit/?id=~a" + (repo-url) long-hash))) + `(span "Version " (a (@ (href ,url)) ,short-hash)))) + + ;; Small calendar and navigation + (nav (@ (class "calnav") (style "grid-area: cal")) + (div (@ (class "change-view")) + (a (@ (href "/week/" ,(date->string + (if (= 1 (day start-date)) + (start-of-week start-date (get-config 'week-start)) + start-date) + "~1") + ".html")) + "weekly") + + + (a (@ (href "/month/" ,(date->string (set (day start-date) 1) "~1") + ".html")) + "monthly")) + + (details (@ (open) (style "grid-area: details")) + (summary "Month overwiew") + (div (@ (class "smallcall-head")) ,(string-titlecase (date->string start-date "~B ~Y"))) + (div (@ (class "smallcal")) + ;; prev button + ,(nav-link "«" (prev-start start-date)) + + ;; calendar table + ;; TODO + (div ,(cal-table start-date: start-date end-date: end-date + next-start: next-start + prev-start: prev-start + )) + + ;; next button + ,(nav-link "»" (next-start start-date))))) + + + ;; List of calendars + (details (@ (class "calendarlist") + (style "grid-area: details")) + (summary "Calendar list") + (ul ,@(map (lambda (calendar) + `(li (@ (class "CAL_bg_" ,(html-attr (attr calendar 'NAME)))) + ,(attr calendar 'NAME))) + calendars))) + + ;; List of events + (div (@ (class "eventlist") + (style "grid-area: events")) + ;; Events which started before our start point, but "spill" into our time span. + (section (@ (class "text-day")) + (header (h2 "Tidigare")) + ,@(stream->list + (stream-map fmt-single-event + (stream-take-while (compose (cut date/-time<? <> start-date) + (extract 'DTSTART)) + (cdr (stream-car evs)))))) + ,@(stream->list (stream-map fmt-day evs)))))))) (define-public (html-chunked-main count calendars events start-date chunk-length) diff --git a/static/style.css b/static/style.css index c9110a8c..e871d1fd 100644 --- a/static/style.css +++ b/static/style.css @@ -8,53 +8,136 @@ html, body { } .root { - display: flex; + display: grid; margin: 0; max-width: 100%; height: 100%; - flex-direction: row; + grid-template-columns: auto auto 20em; + grid-template-rows: auto; + + grid-template-areas: + "main main cal" + "main main nav" + "main main details" + "main main events" + "footer footer events"; } @media (max-aspect-ratio: 3/4) { .root { + grid-template-areas: + "main main" + "cal events" + "details events" + ". events" + "footer events"; + grid-template-rows: 70% auto; + grid-template-columns: 50% auto; + } +} + +.hidelink { + color: inherit; + text-decoration: none; +} + +.root main { + min-width: 0; /* for wide */ + min-height: 0; /* for tall */ +} + +/* Page footer +---------------------------------------- +*/ +.root footer { + margin: 0.5em; + color: ray; + font-size: 8pt; + + display: flex; + justify-content: space-between; + + flex-direction: row; +} + +@media (max-aspect-ratio: 3/4) { + .root footer { flex-direction: column; } } -.small-calendar { - text-align: right; - border-collapse: collapse; +.root footer span { + margin: 0 1em; + white-space: nowrap; } -.small-calendar thead { - border-bottom: 1px solid black; + +/* Change View +---------------------------------------- +"Buttons" for changing between weekly and monthly layout +*/ + + +.change-view { + display: flex; + flex-direction: row; + justify-content: space-evenly; } -.small-calendar .prev, -.small-calendar .next { - color: grey; +.change-view a { + padding: 0.5em; + border: 1px solid black; + border-radius: 0.5em; + background-color: #ECECEC; + text-decoration: none; + color: black; } -.small-calendar td { - padding: 5px; +/* Eventlist +---------------------------------------- +The sidebar with all the events +*/ + +.eventlist { + min-height: 0; + overflow: scroll; } -.calendarlist li { - list-style-type: none; - border-left-width: 1em; +.eventlist { + overflow: scroll; + border-top: 3px solid gray; +} + +.eventlist article { + border-bottom: 1px solid black; + margin-top: 1em; border-left-style: solid; - padding-left: 1ex; + border-left-width: 6px; + padding-left: 2px; +} - /* force to single line */ - overflow: hidden; - white-space: nowrap; +.eventlist { + white-space: pre-line; + font-size: 10pt; } -.small-calendar .today { - border: 1px solid black; +.eventlist h3 { + font-size: 12pt; + border-bottom: 1px solid gray; + margin-bottom: 0; + font-weight: 300; +} + +.eventlist article.tentative { + border-left-style: dashed; } +/* Text day +---------------------------------------- +Each event within the eventlist +*/ + .text-day { border-left: 2px solid black; border-top: 2px solid black; @@ -68,83 +151,78 @@ html, body { font-size: 14pt; } -.sideinfo { - display: flex; +/* Small calendar +---------------------------------------- +*/ - width: 20em; - height: 100%; - flex-direction: column; +.smallcal { + display: flex; + justify-content: center; } -@media (max-aspect-ratio: 3/4) { - .sideinfo { - width: 100%; - height: 20em; - flex-direction: row; - } +.smallcall-head { + text-align: center; + font-weight: bold; } -.sideinfo .nav { - height: 100%; +.smallcal .nav { + /* height: 100%; */ display: flex; flex-direction: column; justify-content: center; font-size: 150%; } -.sideinfo .about { - display: flex; - justify-content: center; - - margin: 0 1em; - border-bottom: 2px solid gray; -} - -.sideinfo .small-calendar { +.smallcal .small-calendar { margin-left: 1em; - margin-right: 1em; + margin-right: 1em; } -.sideinfo .eventlist { - overflow: scroll; +.small-calendar { + text-align: right; + border-collapse: collapse; } -.sideinfo .eventlist article { +.small-calendar thead { border-bottom: 1px solid black; - margin-top: 1em; - border-left-style: solid; - border-left-width: 6px; - padding-left: 2px; } -.sideinfo .eventlist { - white-space: pre-line; - font-size: 10pt; +.small-calendar .prev, +.small-calendar .next { + color: grey; } -.sideinfo .eventlist h3 { - font-size: 12pt; - border-bottom: 1px solid gray; - margin-bottom: 0; - font-weight: 300; +.small-calendar td { + padding: 5px; } -.hidelink { - color: inherit; - text-decoration: none; -} +/* Calendar List +---------------------------------------- +The list of all the loaded calendars, +along with their colors. +*/ -.root main { - display: flex; - flex-direction: column; - flex-grow: 1; +/* .calendarlist {} */ - min-width: 0; /* for wide */ - min-height: 0; /* for tall */ +.calendarlist li { + font-size: 8pt; + list-style-type: none; + border-left-width: 1em; + border-left-style: solid; + padding-left: 1ex; + + /* force to single line */ + overflow: hidden; + white-space: nowrap; } +.small-calendar .today { + border: 1px solid black; +} -/* ---------------------------------------- */ +/* Caltable +---------------------------------------- +*/ .caltable { flex-grow: 10; @@ -203,7 +281,9 @@ html, body { color: gray; } -/* ---------------------------------------- */ +/* Weekly calendar +---------------------------------------- +*/ .calendar { width: 100%; @@ -309,20 +389,6 @@ html, body { font-size: 8pt; } -.root footer { - font-family: monospace; - margin: 0.5em; - - display: flex; - justify-content: space-between; -} - -.root footer span { - margin: 0 1em; -} - -/* */ - .events .event.continuing { border-bottom: none; background-image: linear-gradient(to top, #0007 0%,#FFF0 2em); @@ -346,10 +412,6 @@ html, body { border: 3px dashed black; } -.eventlist article.tentative { - border-left-style: dashed; -} - /* */ .longevents .event { @@ -404,6 +466,10 @@ html, body { height: 100%; } +/* Popups +---------------------------------------- +*/ + .event-inner .popup { visibility: hidden; position: absolute; |