diff options
-rw-r--r-- | module/calp/html/vcomponent.scm | 134 | ||||
-rw-r--r-- | static/style.scss | 37 |
2 files changed, 109 insertions, 62 deletions
diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm index 67634492..54bfb9e8 100644 --- a/module/calp/html/vcomponent.scm +++ b/module/calp/html/vcomponent.scm @@ -125,65 +125,81 @@ optional: (attributes '()) key: (fmt-header list)) `(div (@ (class " eventtext ")) - (div (@ (class "edit-form")) - (h3 (input (@ (type "text") (class "summary") - (placeholder "Sammanfattning") - (name "summary") (required) - (value ,(prop ev 'SUMMARY))))) - - ,@(with-label "Heldag?" `(input (@ (name "wholeday") (type "checkbox")))) - - ,@(let ((start (prop ev 'DTSTART))) - (with-label "Start" - `(div (input (@ (type "date") - (name "dtstart-date") - (value ,(date->string (as-date start))))) - (input (@ ,@(when (date? start) - '((style "display:none"))) - (type "time") - (name "dtstart-end") - (value ,(time->string (as-time start)))))))) - ,@(let ((end (prop ev 'DTEND))) - (with-label "Slut" - `(div (input (@ (type "date") - (name "dtend-date") - ,@(when end `((value ,(date->string (as-date end))))))) - (input (@ ,@(when (date? end) - '((style "display:none"))) - (type "time") - (name "dtend-time") - ,@(when end `((value ,(time->string (as-time end))))) - ))))) - - ,@(with-label - "Plats" - `(input (@ (placeholder "Plats") - (name "location") - (type "text") - (value ,(or (prop ev 'LOCATION) ""))))) - - ,@(with-label - "Beskrivning" - `(textarea (@ (placeholder "Beskrivning") - (name "description")) - ,(prop ev 'DESCRIPTION))) - - ,@(with-label - "Kategorier" - `(div (@ (class "inline-edit")) - ,@(awhen (prop ev 'CATEGORIES) - (map (lambda (c) - `(input (@ (size 2) - (value ,c)))) - it)) - - (input (@ (class "final") - (size 2) - (type "text") - )))) - - (input (@ (type "submit"))) - ))) + (form (@ (class "edit-form")) + (h3 (input (@ (type "text") + (placeholder "Sammanfattning") + (name "summary") (required) + (value ,(prop ev 'SUMMARY))))) + + ,(let ((start (prop ev 'DTSTART)) + (end (prop ev 'DTEND))) + `(div (@ (class "timeinput")) + + (input (@ (type "date") + (name "dtstart-date") + (style "grid-column:1;grid-row:2") + (value ,(date->string (as-date start))))) + + (input (@ (type "date") + (name "dtend-date") + (style "grid-column:1;grid-row:3") + ,@(when end `((value ,(date->string (as-date end))))))) + + ,@(with-label + "Heldag?" + `(input (@ (type "checkbox") (style "display:none") + (name "wholeday")))) + + (input (@ ,@(when (date? start) + '((style "display:none"))) + (type "time") + (name "dtstart-end") + (style "grid-column:3;grid-row:2") + (value ,(time->string (as-time start))))) + + (input (@ ,@(when (date? end) + '((style "display:none"))) + (type "time") + (name "dtend-time") + (style "grid-column:3;grid-row:3") + ,@(when end `((value ,(time->string (as-time end))))) + )))) + + ,@(with-label + "Plats" + `(input (@ (placeholder "Plats") + (name "location") + (type "text") + (value ,(or (prop ev 'LOCATION) ""))))) + + ,@(with-label + "Beskrivning" + `(textarea (@ (placeholder "Beskrivning") + (name "description")) + ,(prop ev 'DESCRIPTION))) + + ,@(with-label + "Kategorier" + `(div (@ (class "inline-edit")) + ,@(awhen (prop ev 'CATEGORIES) + (map (lambda (c) + `(input (@ (size 2) + (value ,c)))) + it)) + + (input (@ (class "final") + (size 2) + (type "text") + )))) + + #; + (input (@ (type "text") + (list "known-fields") + (placeholder "Nytt fält"))) + + + (input (@ (type "submit"))) + ))) ;; Single event in side bar (text objects) diff --git a/static/style.scss b/static/style.scss index 736f170a..c2848940 100644 --- a/static/style.scss +++ b/static/style.scss @@ -704,7 +704,7 @@ along with their colors. &-container { display: none; position: absolute; - z-index: 10; + z-index: 1000; /* ??? */ left: 10px; @@ -814,13 +814,13 @@ along with their colors. [type=radio] { display: none; &:checked ~ label { - z-index: 1; + z-index: 100; /* to align all tab */ border-left: 3px solid transparent; background-color: #dedede; ~ .content { - z-index: 1; + z-index: 100; } } } @@ -848,6 +848,37 @@ along with their colors. input[type='text'], textarea { width: 100%; } + + .timeinput { + + display: grid; + grid-template-columns: 1fr [lbl-start] 1ch 1fr 1ch [lbl-end]; + grid-template-rows: [lbl-start] 0.7fr 1fr 1fr 0.3fr [lbl-end]; + + label { + background-color: rgba(10,20,30,0.7); + color: white; + border-radius: 1em; + + grid-column: lbl-start / lbl-end; + grid-row: lbl-start / lbl-end; + + text-align: center; + + user-select: none; + + z-index: 1; + + } + + input { + z-index: 2; + } + + input:checked ~ input { + z-index: 0; + } + } } |