diff options
| -rw-r--r-- | module/output/html.scm | 20 | ||||
| -rw-r--r-- | static/style.css | 26 |
2 files changed, 28 insertions, 18 deletions
diff --git a/module/output/html.scm b/module/output/html.scm index 4fbe0a4d..5380d354 100644 --- a/module/output/html.scm +++ b/module/output/html.scm @@ -289,16 +289,16 @@ ;; each day. It should show all the actual events. ;; (stream event-group) -> sxml (define (render-calendar-table event-groups) - `(table (@ (border 1)) - (thead (tr ,@(map (lambda (d) `(th ,(week-day-name d))) - (weekday-list (week-start))))) - (tbody - ,@(tablify (stream->list (stream-map - (match-lambda - [(day-date . events) - `(td ,(stream-length events))]) - event-groups)) - 7)))) + `(div (@ (class "caltable")) + ,@(map (lambda (d) `(div (@ (class "thead")) ,(week-day-name d))) + (weekday-list (week-start))) + ,@(stream->list + (stream-map + (match-lambda + [(day-date . events) + `(div (@ (class "tbody")) + ,(stream-length events))]) + event-groups)))) ;;; NOTE diff --git a/static/style.css b/static/style.css index 11565ff7..810fa0b4 100644 --- a/static/style.css +++ b/static/style.css @@ -117,20 +117,30 @@ body { flex-grow: 1; } -main table { - width: 100%; - height: 90%; /* TODO */ - border-collapse: collapse; +/* ---------------------------------------- */ + +.caltable { + flex-grow: 10; + + display: grid; + grid-template-columns: repeat(7, 1fr); + /* This is for the first name, the week days. + NOTE that I'm not sure this is actually the + correct way to do it. */ + grid-template-rows: 2em; } -main table thead { - height: 1em; +.caltable .thead { + font-weight: bold; + text-align: center; } -main table td { - width: calc(100%/7); +.caltable div { + border: 1px solid gray; } +/* ---------------------------------------- */ + .calendar { width: 100%; height: 100%; |