From 09f486112f0de20e6c6e873dab5115875ed7b7be Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Fri, 17 Feb 2023 05:05:34 +0100
Subject: [PATCH] Imrpove form rendering

---
 examples/index.html          | 39 ++++++++++++++++++++++++++++++++++++
 src/rulesets/base.less       | 12 ++++++-----
 src/selectorsets/module.less |  5 ++---
 src/selectorsets/root.less   |  5 ++---
 4 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index 4fe16d9..b214547 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -1698,6 +1698,45 @@
                         <p>
                             Now, please enter some information about yourself:
                         </p>
+                        <div class="form-flex-choice">
+                            <span>Interests</span>
+                            <div>
+                                <label>
+                                    <input type="checkbox" name="interests"> Living
+                                </label>
+                                <label>
+                                    <input type="checkbox" name="interests"> Sleeping
+                                </label>
+                                <label>
+                                    <input type="checkbox" name="interests"> Not dying
+                                </label>
+                                <label>
+                                    <input type="checkbox" name="interests"> Conspiracy theories
+                                </label>
+                                <label>
+                                    <input type="checkbox" name="interests"> Witchcraft
+                                </label>
+                                <label>
+                                    <input type="checkbox" name="interests"> Weird shenanigans
+                                </label>
+                            </div>
+                            <span></span>
+                        </div>
+                        <div class="form-flex-choice">
+                            <span>Riches</span>
+                            <div>
+                                <label>
+                                    <input type="radio" name="riches"> None
+                                </label>
+                                <label>
+                                    <input type="radio" name="riches"> Few
+                                </label>
+                                <label>
+                                    <input type="radio" name="riches"> Many
+                                </label>
+                            </div>
+                            <span></span>
+                        </div>
                         <label>
                             <span>Lazyness 0%</span>
                             <input type="range">
diff --git a/src/rulesets/base.less b/src/rulesets/base.less
index 64de0f9..04d6471 100644
--- a/src/rulesets/base.less
+++ b/src/rulesets/base.less
@@ -783,18 +783,20 @@
 
         justify-content: stretch;
 
-        > @{element-paragraph} {
+        > @{form-flex-content} {
             margin: 0.5em 0;
         }
 
-        > @{element-label} {
+        > @{form-flex-choice} {
             display: flex;
             gap: 1ex;
+            min-height: 1.675em;  // Not sure why this specific number, but it looks good...
 
             > @{all}:first-child, > @{all}:last-child {
                 margin: auto 0;
                 flex-basis: 15%;
                 flex-grow: 0;
+                flex-shrink: 0;
 
                 .use-font-group(label);
                 .map-hsl-group(current; primary);
@@ -803,9 +805,10 @@
             > @{all} {
                 flex-grow: 1;
                 display: flex;
-                justify-content: start;
+                justify-content: space-between;
+                flex-wrap: wrap;
                 align-items: center;
-                gap: 4px;
+                gap: 1ex;
             }
 
             > @{all}:first-child {
@@ -817,7 +820,6 @@
                 text-align: left;
                 display: block;
             }
-
         }
     }
 
diff --git a/src/selectorsets/module.less b/src/selectorsets/module.less
index 8242af0..21fd849 100644
--- a/src/selectorsets/module.less
+++ b/src/selectorsets/module.less
@@ -96,9 +96,8 @@
 @input-button: ~".input-button";
 
 @form-flex: ~'.form-flex';
-@element-label: ~'.element-label';
-@element-span: ~'.element-span';
-@element-paragraph: ~'.element-paragraph';
+@form-flex-content: ~'.form-flex-content';
+@form-flex-choice: ~'.form-flex-choice';
 
 @text-anchor: ~".text-anchor";
 @text-idiomatic: ~".text-idiomatic";
diff --git a/src/selectorsets/root.less b/src/selectorsets/root.less
index fe7376a..bbf82f6 100644
--- a/src/selectorsets/root.less
+++ b/src/selectorsets/root.less
@@ -96,9 +96,8 @@
 @input-button: ~'input[type="button"], button';
 
 @form-flex: ~'.form-flex';
-@element-label: ~'label';
-@element-span: ~'span';
-@element-paragraph: ~'p';
+@form-flex-content: ~':is(.form-flex-content, p)';
+@form-flex-choice: ~':is(.form-flex-choice, label)';
 
 @text-anchor: ~"a";
 @text-idiomatic: ~"i";