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 ) }