diff options
| author | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-05-11 18:41:59 +0200 |
|---|---|---|
| committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2021-05-11 18:41:59 +0200 |
| commit | 0a7b3abc53a03b8f117bf5b6962a57b978b35732 (patch) | |
| tree | a13f7cb9832009398f6a4813f6a2d6e2f4b1c3ca | |
| parent | Change clear-input icon. (diff) | |
| download | calp-0a7b3abc53a03b8f117bf5b6962a57b978b35732.tar.gz calp-0a7b3abc53a03b8f117bf5b6962a57b978b35732.tar.xz | |
Add week indicator to week screen.
| -rw-r--r-- | module/calp/html/view/calendar/week.scm | 11 | ||||
| -rw-r--r-- | static/style.scss | 17 |
2 files changed, 24 insertions, 4 deletions
diff --git a/module/calp/html/view/calendar/week.scm b/module/calp/html/view/calendar/week.scm index 111c8f21..fb28923e 100644 --- a/module/calp/html/view/calendar/week.scm +++ b/module/calp/html/view/calendar/week.scm @@ -25,6 +25,12 @@ `((script "const VIEW='week';") (div (@ (class "calendar")) (div (@ (class "days")) + ;; Top left area + (div (@ (class "week-indicator")) + (span (@ (style "font-size: 50%")) "v.") ; figure out if we want this... + ,@(->> (week-number start-date) + number->string string->list + (map (lambda (c) `(span ,(string c)))))) ,@(time-marker-div) (div (@ (class "longevents event-container") (data-start ,(date->string start-date) ) @@ -53,10 +59,7 @@ (define (time-marker-div) - ;; element to make rest of grid align correct. - ;; Could be extended to contain something fun. - `((div (@ (style "grid-row: 1 / span 2"))) - (div (@ (class "sideclock")) + `((div (@ (class "sideclock")) ,@(map (lambda (time) `(div (@ (class "clock clock-" ,time)) (span (@ (class "clocktext")) diff --git a/static/style.scss b/static/style.scss index 202e3a34..7080189d 100644 --- a/static/style.scss +++ b/static/style.scss @@ -439,6 +439,23 @@ along with their colors. grid-column-start: 2; position: relative; } + + .week-indicator { + grid-row: 1 / span 2; + } + + .sideclock { + grid-row: 3; + } +} + +.week-indicator { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 200%; + color: $gray; } .events { |