From 30f32983b97c7c796aca48e70e350d38ac577252 Mon Sep 17 00:00:00 2001 From: mmcw-dev Date: Sat, 21 Oct 2017 22:13:38 -0400 Subject: [PATCH] Add labels to direction UI --- app/www/index.html | 52 ++++++++++++++++++++++++++++++++++++---------- 1 file changed, 41 insertions(+), 11 deletions(-) diff --git a/app/www/index.html b/app/www/index.html index da295f2..f2dce9c 100644 --- a/app/www/index.html +++ b/app/www/index.html @@ -19,7 +19,12 @@ body{ } #app{ - padding: 10% 0; + padding: 20px 10% 0 10%; + } + #bar{ + height: 70px; + border-bottom: 1px solid #444; + width: 100%; } /* The switch - the box around the slider */ .switch { @@ -62,7 +67,7 @@ } input:focus + .slider { - box-shadow: 0 0 1px #2196F3; + } input:checked + .slider:before { @@ -80,8 +85,8 @@ border-radius: 50%; } input[type=number]{ - width: 80%; - border: 1px solid #fff; + width: 100%; + border: 2px solid #fff; border-radius: 5px; color: #fff; font-size: 18px; @@ -93,7 +98,7 @@ box-sizing: border-box; } button{ - width: 80%; + width: 100%; border: 2px solid #fff; border-radius: 5px; color: #fff; @@ -105,37 +110,62 @@ margin: 5px 0; padding: 5px 0; text-align: center; - text-transform: uppercase; } button:focus{ background-color: #20ce45; border-color: #20ce45; color: #212121; + font-weight: bold; + } + #fwdLabel,#bwdLabel{ + display: block; + line-height: 34px; + height: 33px; + color: #444; + } + #fwdLabel.selected, + #bwdLabel.selected{ + color: #fff; + } + #fwdLabel{ + float: left; + } + #bwdLabel{ + float: right; + } + .label{ + text-align: right; + color: #666; } +
+ +
-
Direction
+
Direction
+ FORWARD + BACKWARD
-
Exposure (ms)
+
Exposure (ms)
-
Delay (ms)
+
Delay (ms)
- +
- +