Tweak frontend layout and style

frontend/src/page/lights.rs

@@ -3,7 +3,7 @@ use crate::css::C;
 use chrono::{NaiveTime, Weekday};
 use common::{BulbGroup, BulbGroupShape, BulbMap, ClientMessage, ServerMessage};
 use lighter_lib::{BulbId, BulbMode};
-use seed::{attrs, button, div, input, C};
+use seed::{attrs, button, div, h2, input, table, td, tr, C};
 use seed::{prelude::*, IF};
 use seed_router::Page;
 use std::collections::{BTreeMap, HashMap, HashSet};
@@ -235,14 +235,14 @@ impl Page for Model {
                 .and_then(|b| b.wake_schedule.get(&day))
                 .map(|t| t.to_string())
                 .unwrap_or_default();
-            div![
+            tr![
                 C![C.calendar_day],
-                day.to_string(),
-                input![
+                td![day.to_string()],
+                td![input![
                     C![C.calendar_time_input],
                     attrs! {At::Placeholder => time},
                     input_ev(Ev::Input, move |input| Msg::LightTime(input, day))
-                ],
+                ]],
             ]
         };
 
@@ -251,14 +251,14 @@ impl Page for Model {
             div![
                 C![C.bulb_map],
                 attrs! {
-                    At::Style => format!("width: {}rem; height: {}rem;", bulb_map_width, bulb_map_height),
+                    At::Style => format!("min-width: {}rem; height: {}rem;", bulb_map_width, bulb_map_height),
                 },
                 ev(Ev::Click, |_| Msg::DeselectGroups),
                 self.bulb_map.groups.iter().enumerate().map(view_bulb_group),
             ],
             div![
                 C![C.bulb_controls],
-                IF!(selected_bulb.is_none() => C![C.bulb_controls_disable]),
+                IF!(selected_bulb.is_none() => C![C.cross_out]),
                 self.color_picker.view().map_msg(Msg::ColorPicker),
                 button![
                     if selected_bulb.map(|b| b.mode.power).unwrap_or(false) {
@@ -279,13 +279,17 @@ impl Page for Model {
             ],
             div![
                 C![C.calendar_box],
-                calendar_day(Weekday::Mon),
-                calendar_day(Weekday::Tue),
-                calendar_day(Weekday::Wed),
-                calendar_day(Weekday::Thu),
-                calendar_day(Weekday::Fri),
-                calendar_day(Weekday::Sat),
-                calendar_day(Weekday::Sun),
+                IF!(selected_bulb.is_none() => C![C.cross_out]),
+                h2!["Wake Schedule"],
+                table![
+                    calendar_day(Weekday::Mon),
+                    calendar_day(Weekday::Tue),
+                    calendar_day(Weekday::Wed),
+                    calendar_day(Weekday::Thu),
+                    calendar_day(Weekday::Fri),
+                    calendar_day(Weekday::Sat),
+                    calendar_day(Weekday::Sun),
+                ],
             ],
         ]
     }

frontend/static/styles/common.scss

@@ -94,17 +94,12 @@ body {
 }
 
 .bulb_box {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: space-around;
 	width: fit-content;
+	margin: auto;
 }
 
 .bulb_box > * {
-	margin-bottom: 1em;
-	margin-right: 1em;
+	margin-bottom: 1.5rem;
 }
 
 .bulb_controls {
@@ -112,21 +107,20 @@ body {
 	flex-direction: row;
 	align-items: center;
 	padding-right: 0.5em;
-	background: #56636e;
-	border: solid 0.25em #5b3f63;
+	background: #00000000;
 }
 
-.bulb_controls_disable {
+.cross_out {
 	position: relative;
 	overflow: hidden;
+	opacity: 0.5;
 }
 
-.bulb_controls_disable:before {
+.cross_out:before {
 	position: absolute;
 	content: '';
 	display: block;
-	background: #000000;
-	opacity: 0.5;
+	background: #00000000;
 	left: 0;
 	right: 0;
 	top: 0;
@@ -135,7 +129,7 @@ body {
 	z-index: 90;
 }
 
-.bulb_controls_disable:after {
+.cross_out:after {
 	position: absolute;
 	content: '';
 	background: #56636e;
@@ -151,23 +145,24 @@ body {
 	bottom: 0;
 	margin: auto;
 	z-index: 91;
-    animation: to_full_width .2s ease-out 0s 1 forwards;
+    box-shadow: black 0.5rem 0.6rem 1rem 0.3rem;
+    animation: to_width_90 .2s ease-out 0s 1 forwards;
 }
-@keyframes to_full_width { to { width: 100%; } }
+@keyframes to_width_90 { to { width: 90%; } }
 
 .bulb_map {
 	background: url(images/blueprint_bg.png);
 	background-size: auto;
 	background-size: 1em;
 	padding: 2rem;
-	border: solid 0.4rem #5b3f63;
+	border: solid 0.1rem;
+	border-radius: 0.2rem;
 }
 
 .bulb_map::after {
 	position: absolute;
 	width: 100%;
 	height: 100%;
-	content: #0003;
 }
 
 .bulb_group {
@@ -179,6 +174,7 @@ body {
 	font-size: 2em;
 	position: absolute;
 	box-shadow: #0006 0.1em 0.1em 0.1em;
+	user-select: none;
 	transition: 0.3s ease-in-out;
 }
 
@@ -326,7 +322,18 @@ body {
 	//margin-bottom: .7em;
 	margin-left: .5em;
 }
+
 .calendar_box {
-	with: 10em;
+	display: flex;
+	justify-content: center;
+}
+
+.calendar_box > h2 {
+	writing-mode: sideways-lr;
+	margin-top: auto;
+	margin-bottom: auto;
+}
+.calendar_box > * {
+	flex-shrink: 1;
 }