From 7c4dda4f90a1929dde13b254ae6f1e5a766cc7f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Sun, 27 Sep 2020 20:53:35 +0200 Subject: Input cleaned up. --- module/calp/html/components.scm | 50 +++++++++++++++++++++++ module/calp/html/vcomponent.scm | 87 +++++++++++++++++++++++------------------ static/style.scss | 19 +++++++-- 3 files changed, 116 insertions(+), 40 deletions(-) diff --git a/module/calp/html/components.scm b/module/calp/html/components.scm index ebc359b8..03e1cef1 100644 --- a/module/calp/html/components.scm +++ b/module/calp/html/components.scm @@ -1,6 +1,8 @@ (define-module (calp html components) :use-module (calp util) :use-module (calp util exceptions) + :use-module (ice-9 curried-definitions) + :use-module (ice-9 match) :export (xhtml-doc) ) @@ -112,6 +114,54 @@ ,key) (div (@ (class "content")) ,body))))) +(define ((set-attribute attr) el) + (match el + [(tagname ('@ params ...) inner-body ...) + `(,tagname (@ ,@(assq-merge params attr)) + ,@inner-body)] + [(tagname inner-body ...) + `(,tagname (@ ,attr) + ,@inner-body)])) + + +(define-public (with-label lbl . forms) + + (define id (gensym "label")) + + (cons `(label (@ (for ,id)) ,lbl) + (let recurse ((forms forms)) + (map (lambda (form) + (cond [(not (list? form)) form] + [(null? form) '()] + [(eq? 'input (car form)) + ((set-attribute `((id ,id))) form)] + [(list? (car form)) + (cons (recurse (car form)) + (recurse (cdr form)))] + [else + (cons (car form) + (recurse (cdr form)))])) + forms)))) + + +(define-public (form elements) + `(form + ,@(map (label self + (lambda (el) + (match el + ((name ('@ tags ...) body ...) + (let ((id (gensym "formelement"))) + (cons + `(label (@ (for ,id)) ,name) + (map + (set-attribute `((name ,name))) + (cons + ((set-attribute `((id ,id))) (car body)) + (cdr body)))))) + ((name body ...) + (self `(,name (@) ,@body)))))) + elements))) + (define-public (include-css path . extra-attributes) `(link (@ (type "text/css") diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm index 8e52ed7c..89020bd8 100644 --- a/module/calp/html/vcomponent.scm +++ b/module/calp/html/vcomponent.scm @@ -7,7 +7,7 @@ :use-module ((text util) :select (add-enumeration-punctuation)) :use-module (calp html util) :use-module ((calp html config) :select (edit-mode)) - :use-module ((calp html components) :select (btn tabset)) + :use-module ((calp html components) :select (btn tabset form with-label)) :use-module ((calp util color) :select (calculate-fg-color)) :use-module ((vcomponent datetime output) :select (fmt-time-span @@ -125,46 +125,59 @@ optional: (attributes '()) key: (fmt-header list)) `(div (@ (class " eventtext ")) - (h3 (input (@ (type "text") (class "summary") - (placeholder "Sammanfattning") - (name "summary") (required) - (value ,(prop ev 'SUMMARY))))) - (div - ,(let ((start (prop ev 'DTSTART)) - (end (prop ev 'DTEND))) - `(table - (tr (td "Heldag?") - (td (input (@ (type "checkbox") - ,@(when (date? start) '((checked))))))) - (tr (td "Start") - (td (input (@ (type "date") (value ,(date->string (as-date start)))))) - (td - (input (@ ,@(when (date? start) - '((style "display:none"))) - (type "time") - (value ,(time->string (as-time start))))))) - (tr (td "Slut") - (td (input (@ (type "date") - ,@(when end `((value ,(date->string (as-date end)))))))) - (td (input (@ ,@(when (date? start) - '((style "display:none"))) - (type "time") - ,@(when end `((value ,(time->string (as-time end))))) - ))))))) + (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))))) + ))))) - (div (b "Plats: ") - (input (@ (name "location") - (value ,(or (prop ev 'LOCATION) ""))))) + ,@(with-label + "Plats" + `(input (@ (placeholder "Plats") + (name "location") + (type "text") + (value ,(or (prop ev 'LOCATION) ""))))) - (div (@ (class "description")) - (textarea ,(prop ev 'DESCRIPTION))) + ,@(with-label + "Beskrivning" + `(textarea (@ (placeholder "Beskrivning") + (name "description")) + ,(prop ev 'DESCRIPTION))) - (div (@ (class "categories")) - ,@(awhen (prop ev 'CATEGORIES) - (map (lambda (c) `(button (@ (class "category")) ,c)) - it)) + ,@(with-label + "Kategorier" + (awhen (prop ev 'CATEGORIES) + (map (lambda (c) `(button (@ (class "category")) ,c)) + it)) - (input (@ (class "category") (type "text") (placeholder "category")))))) + `(input (@ (class "category") + (type "text") + (placeholder "category")))) + ))) ;; Single event in side bar (text objects) diff --git a/static/style.scss b/static/style.scss index 3a2e5ba6..24f88f48 100644 --- a/static/style.scss +++ b/static/style.scss @@ -698,8 +698,8 @@ along with their colors. /* overflow-y: auto; */ max-width: 60ch; max-height: 60ch; - min-width: 40ch; - min-height: 20ch; + min-width: 60ch; + min-height: 30ch; &-container { display: none; @@ -790,7 +790,7 @@ along with their colors. } .tab { - label { + > label { position: absolute; left: 100%; @@ -837,6 +837,19 @@ along with their colors. min-width: 100%; min-height: 100%; } + + + .edit-form { + label { + display: block; + } + + input[type='text'], textarea { + width: 100%; + } + } + + } /* Other -- cgit v1.2.3