From 69ab888d5bc643bae89f361be75455da60b30778 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Mon, 9 Sep 2024 00:32:29 -0700
Subject: [PATCH] Simplify control labeling

---
 app-proto/inversive-display/main.css    |  2 +-
 app-proto/inversive-display/src/main.rs | 75 ++++++++++---------------
 2 files changed, 31 insertions(+), 46 deletions(-)

diff --git a/app-proto/inversive-display/main.css b/app-proto/inversive-display/main.css
index 7e8c710..a16d04a 100644
--- a/app-proto/inversive-display/main.css
+++ b/app-proto/inversive-display/main.css
@@ -51,7 +51,7 @@ input[type="radio"] {
   background-color: #333;
 }
 
-label {
+.control > span {
   width: 170px;
 }
 
diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index c3b4a59..6e6a0e8 100644
--- a/app-proto/inversive-display/src/main.rs
+++ b/app-proto/inversive-display/src/main.rs
@@ -484,44 +484,40 @@ fn main() {
                 div { "Mean frame interval: " (mean_frame_interval.get()) " ms" }
                 canvas(ref=display, width="600", height="600")
                 div(ref=gen_controls) {
-                    div(class="control") {
-                        label(for="ctrl-x") { "Sphere 0 depth" }
+                    label(class="control") {
+                        span { "Sphere 0 depth" }
                         input(
                             type="range",
-                            id="ctrl-x",
                             min=-1.0,
                             max=1.0,
                             step=0.001,
                             bind:valueAsNumber=ctrl_x
                         )
                     }
-                    div(class="control") {
-                        label(for="ctrl-y") { "Sphere 1 depth" }
+                    label(class="control") {
+                        span { "Sphere 1 depth" }
                         input(
                             type="range",
-                            id="ctrl-y",
                             min=-1.0,
                             max=1.0,
                             step=0.001,
                             bind:valueAsNumber=ctrl_y
                         )
                     }
-                    div(class="control") {
-                        label(for="radius-x") { "Sphere 0 radius" }
+                    label(class="control") {
+                        span { "Sphere 0 radius" }
                         input(
                             type="range",
-                            id="radius-x",
                             min=0.5,
                             max=1.5,
                             step=0.001,
                             bind:valueAsNumber=radius_x
                         )
                     }
-                    div(class="control") {
-                        label(for="radius-y") { "Sphere 1 radius" }
+                    label(class="control") {
+                        span { "Sphere 1 radius" }
                         input(
                             type="range",
-                            id="radius-y",
                             min=0.5,
                             max=1.5,
                             step=0.001,
@@ -530,66 +526,60 @@ fn main() {
                     }
                 }
                 div(ref=low_curv_controls) {
-                    div(class="control") {
-                        label(for="off-1") { "Sphere 1 offset" }
+                    label(class="control") {
+                        span { "Sphere 1 offset" }
                         input(
                             type="range",
-                            id="off-1",
                             min=-1.0,
                             max=1.0,
                             step=0.001,
                             bind:valueAsNumber=off1
                         )
                     }
-                    div(class="control") {
-                        label(for="off-2") { "Sphere 2 offset" }
+                    label(class="control") {
+                        span { "Sphere 2 offset" }
                         input(
                             type="range",
-                            id="off-2",
                             min=-1.0,
                             max=1.0,
                             step=0.001,
                             bind:valueAsNumber=off2
                         )
                     }
-                    div(class="control") {
-                        label(for="off-3") { "Sphere 3 offset" }
+                    label(class="control") {
+                        span { "Sphere 3 offset" }
                         input(
                             type="range",
-                            id="off-3",
                             min=-1.0,
                             max=1.0,
                             step=0.001,
                             bind:valueAsNumber=off3
                         )
                     }
-                    div(class="control") {
-                        label(for="curv-1") { "Sphere 1 curvature" }
+                    label(class="control") {
+                        span { "Sphere 1 curvature" }
                         input(
                             type="range",
-                            id="curv-1",
                             min=0.0,
                             max=2.0,
                             step=0.001,
                             bind:valueAsNumber=curv1
                         )
                     }
-                    div(class="control") {
-                        label(for="curv-2") { "Sphere 2 curvature" }
+                    label(class="control") {
+                        span { "Sphere 2 curvature" }
                         input(
                             type="range",
-                            id="curv-2",
                             min=0.0,
                             max=2.0,
                             step=0.001,
                             bind:valueAsNumber=curv2
                         )
                     }
-                    div(class="control") {
-                        label(for="curv-3") { "Sphere 3 curvature" }
+                    label(class="control") {
+                        span { "Sphere 3 curvature" }
                         input(
                             type="range",
-                            id="curv-3",
                             min=0.0,
                             max=2.0,
                             step=0.001,
@@ -597,49 +587,44 @@ fn main() {
                         )
                     }
                 }
-                div(class="control") {
-                    label(for="opacity") { "Opacity" }
+                label(class="control") {
+                    span { "Opacity" }
                     input(
                         type="range",
-                        id="opacity",
                         max=1.0,
                         step=0.001,
                         bind:valueAsNumber=opacity
                     )
                 }
-                div(class="control") {
-                    label(for="highlight") { "Highlight" }
+                label(class="control") {
+                    span { "Highlight" }
                     input(
                         type="range",
-                        id="highlight",
                         max=1.0,
                         step=0.001,
                         bind:valueAsNumber=highlight
                     )
                 }
-                div(class="control") {
-                    label(for="turntable") { "Turntable" }
+                label(class="control") {
+                    span { "Turntable" }
                     input(
                         type="checkbox",
-                        id="turntable",
                         bind:checked=turntable
                     )
                 }
-                div(class="control") {
-                    label(for="layer-threshold") { "Layer threshold" }
+                label(class="control") {
+                    span { "Layer threshold" }
                     input(
                         type="range",
-                        id="layer-threshold",
                         max=5.0,
                         step=1.0,
                         bind:valueAsNumber=layer_threshold
                     )
                 }
-                div(class="control") {
-                    label(for="debug-mode") { "Debug mode" }
+                label(class="control") {
+                    span { "Debug mode" }
                     input(
                         type="checkbox",
-                        id="debug-mode",
                         bind:checked=debug_mode
                     )
                 }