diff options
| -rw-r--r-- | module/output/html.scm | 21 | ||||
| -rw-r--r-- | static/style.css | 66 |
2 files changed, 82 insertions, 5 deletions
diff --git a/module/output/html.scm b/module/output/html.scm index 3e9f71e6..5b06fe01 100644 --- a/module/output/html.scm +++ b/module/output/html.scm @@ -142,6 +142,18 @@ (div ,body)))) +(define (tabset elements) + (define tabgroup (symbol->string (gensym "tabgroup"))) + + `(div (@ (class "tabgroup")) + ,@(for (i (key body)) in (enumerate elements) + (define id (symbol->string (gensym "tab"))) + `(div (@ (class "tab")) + (input (@ (type "radio") (id ,id) (name ,tabgroup) + ,@(when (zero? i) '((checked))))) + (label (@ (for ,id) (style "top: " ,(* 6 i) "ex")) ,key) + (div (@ (class "content")) ,body))))) + (define (popup ev id) `(div (@ (class "popup-container") (id ,id)) (div (@ (class "popup")) @@ -156,7 +168,11 @@ title: "Ladda ner" href: (string-append "/calendar/" (prop ev 'UID) ".ics"))) - ,(fmt-single-event ev)))) + ,(tabset + `(("📅" ,(fmt-single-event ev)) + ;; TODO only on debug/edit? + ("</>" (script (@ (type "application/calendar+xml")) + ,((@ (output xcal) vcomponent->sxcal) ev)))))))) @@ -202,9 +218,6 @@ (eq? 'TENTATIVE (prop ev 'PARTSTAT))) " tentative")) (data-tipped-options ,(format #f "inline: '~a'" popup-id))))) - ,(when (debug) - `(script (@ (type "application/calendar+xml")) - ,((@ (output xcal) vcomponent->sxcal) ev))) ,(when (prop ev 'RRULE) `(span (@ (class "repeating")) "↺")) ,((get-config 'summary-filter) ev (prop ev 'SUMMARY)) diff --git a/static/style.css b/static/style.css index 9b680a52..14ab1e53 100644 --- a/static/style.css +++ b/static/style.css @@ -636,7 +636,7 @@ along with their colors. background-color: #dedede; color: black; - overflow-y: auto; + /* overflow-y: auto; */ max-width: 60ch; max-height: 60ch; min-width: 40ch; @@ -686,5 +686,69 @@ along with their colors. left: -1em; } +/* Tabs +---------------------------------------- +*/ + +.tabgroup { + position: relative; + width: 100%; +} + +.tab label { + position: absolute; + + left: 100%; + top: 0; + display: block; + + max-height: 5ex; + min-height: 5ex; + min-width: 5ex; + max-width: 5ex; + + border: 1px solid #ccc; + border-radius: 0 5px 5px 0; + background-color: #aeaeae; + + display: flex; + justify-content: center; + align-items: center; +} + +.tab [type=radio] { display: none; } + +.tab .content { + position: absolute; + top: 0; + left: 0; + background-color: orange; + right: 0; + bottom: 0; + overflow: auto; +} + +.tpd-content-wrapper { + overflow: visible; +} + + +.tab [type=radio]:checked ~ label { + z-index: 1; + /* to align all tab */ + border-left: 3px solid transparent; + background-color: #dedede; +} + +.tab [type=radio]:checked ~ label ~ .content { + z-index: 1; +} + +script[type="application/calendar+xml"] { + display: block; + font-family: monospace; + font-size: xx-small; +} + /* vim:expandtab:softtabstop=4:shiftwidth=4: */ |