Made timeinput checkbox needlesly fancy.

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;
+            }
+        }
     }