From 994f355fa00f47dbbdd0166594be3c44e39cdcb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 17 Aug 2020 19:38:05 +0200 Subject: Move tab positioning to stylesheet. --- module/html/components.scm | 7 ++++++- static/style.scss | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/module/html/components.scm b/module/html/components.scm index 68c8e763..2580ea55 100644 --- a/module/html/components.scm +++ b/module/html/components.scm @@ -101,8 +101,13 @@ `(div (@ (class "tab")) (input (@ (type "radio") (id ,id) (name ,tabgroup) ,@(when (zero? i) '((checked))))) + ;; It would be preferable to place the labels in a separate + ;; div and set that to have fixed position, since we could + ;; then just flow them. That hovever doesn't work since we + ;; need a css-selector for the label to the selected radio + ;; option. (label (@ ,@(assq-merge `((for ,id) - (style "top: " ,(* 6 i) "ex")) + (style "top: calc(var(--tab-size) * " ,i ")")) (kvlist->assq args))) ,key) (div (@ (class "content")) ,body))))) diff --git a/static/style.scss b/static/style.scss index 2e30f029..1d47691a 100644 --- a/static/style.scss +++ b/static/style.scss @@ -761,6 +761,7 @@ along with their colors. position: relative; width: 100%; resize: both; + --tab-size: 6ex; } .tab { -- cgit v1.2.3