redesign web interface; minor bug fixes

1 files changed, 95 insertions, 73 deletions

diff --git a/web/static/style.css b/web/static/style.css
index 6bd312f..5287cfc 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -3,7 +3,7 @@
 
 body {
 	color: #ddd;
-	background-color: #1a1a1a;
+	background-color: #000;
 	font-family: 'Lato', sans-serif;
 	user-select: none;
 
@@ -12,69 +12,108 @@ body {
 }
 
 div#main {
+	background-color: #1a1a1a;
+
 	height: calc(100vh - 2*2px);
-	width: calc(100vw - 2*2px);
-	margin: 2px;
+	width: min(80vh, calc(100vw - 2*2px));
+	margin: 0 auto;
+	padding: 2px;
 
 	display: grid;
-	grid-template-columns: min-content 2fr;
-	grid-template-rows: min-content 1fr;
-	grid-template-areas: "keypad settings-bar" "keypad match";
+	grid-template-columns: 1fr;
+	grid-template-rows: min-content min-content 2fr 2fr;
+	grid-template-areas: "settings-bar" "rem-bar" "match" "keypad";
 }
 
 div#keypad {
 	grid-area: keypad;
 
-	font-size: 2vh;
-
-	width: clamp(54vh, 30vw, 60vh);
+	font-size: clamp(1.5vh, 2vw, 2vh);
 
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: min-content 2fr;
+	grid-template-rows: 1.2fr;
 	grid-auto-rows: 1fr;
 }
 
 div#oi {
+	visibility: hidden;
+
+	background-color: #1a1a1a;
 	font-size: 2em;
+	height: 1.2em;
+	width: 3ch;
+
+	position: absolute;
+	left: 50%;
+	right: 50%;
+	top: 50%;
+	bottom: 50%;
+	transform: translate(-50%, -50%);
 
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-div#user-rem, div#boat-rem {
-	background-color: #333;
+div#rem-bar {
+	position: relative;
+	grid-column: 1 / span 3;
+
+	font-size: clamp(1.5vh, 2vw, 2vh);
+
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+}
+
+div#user-state, div#boat-state {
+	background-color: #222;
 	font-size: 1.5em;
 
 	margin: 2px;
 	padding: 0.4rem;
 
+	flex-direction: column;
 	display: flex;
 	align-items: center;
-	justify-content: left;
 }
 
-div#boat-rem {
-	grid-column: 3;
+div#user-state.active, div#boat-state.active {
+	background-color: #240;
+}
 
+div#user-rem, div#boat-rem {
+	font-size: 3em;
+	font-weight: bold;
+}
+
+div#boat-rem {
 	justify-content: right;
 }
 
-div#user-rem.active, div#boat-rem.active {
-	background-color: #240;
+div#user-name, div#boat-name {
+	color: #aaa;
+}
+
+div#user-sugg, div#boat-sugg {
+	color: #aaa;
+	font-size: 0.8em;
+}
+
+div#user-sugg:after, div#boat-sugg:after {
+	content: '\200b';
 }
 
 div#prompt-container {
 	grid-column: 1 / span 3;
 
-	background-color: #333;
+	background-color: #222;
 
 	margin: 2px;
 
-	display: grid;
-	grid-template-rows: 1fr 3fr 1fr;
-	grid-template-columns: 1fr;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 div#prompt-msg, div#prompt, div#prompt-sugg {
@@ -82,15 +121,22 @@ div#prompt-msg, div#prompt, div#prompt-sugg {
 
 	display: grid;
 	align-items: center;
-	justify-content: center;
 }
 
-div#prompt {
-	font-size: 5em;
+div#prompt-msg, div#prompt-sugg {
+	flex: 1;
+	color: #aaa;
+	padding: 0 0.4rem;
 }
 
 div#prompt-sugg {
-	color: #aaa;
+	text-align: right;
+}
+
+div#prompt {
+	text-align: center;
+	font-size: 3em;
+	width: 4ch;
 }
 
 div.key {
@@ -124,8 +170,8 @@ div.key.num {
 div#settings-bar {
 	grid-area: settings-bar;
 
-	background-color: #333;
-	font-size: 2vh;
+	background-color: #222;
+	font-size: clamp(1.5vh, 2vw, 2vh);
 
 	margin: 2px;
 	padding: 0.4rem;
@@ -145,7 +191,7 @@ div#settings-bar div.input.first {
 }
 
 div#settings-bar div.input {
-	background-color: #282828;
+	background-color: #333;
 
 	display: flex;
 	flex-wrap: wrap;
@@ -159,7 +205,7 @@ div#settings-bar span {
 
 div#settings-bar input {
 	color: #ddd;
-	background-color: #304;
+	background-color: #3d2466;
 	font-family: inherit;
 	font-size: 1em;
 	text-align: right;
@@ -170,68 +216,62 @@ div#settings-bar input {
 }
 
 div#settings-bar div.help-button {
-	background-color: #304;
-	font-weight: bold;
+	background-color: #3d2466;
+	font-weight: 700;
 
 	padding: 0 0.4em;
 }
 
 @media (hover: hover) and (pointer: fine) {
 	div#settings-bar input:hover {
-		background-color: #608;
+		background-color: #5c3699;
 	}
 
 	div#settings-bar div.help-button:hover {
-		background-color: #608;
+		background-color: #5c3699;
 	}
 }
 
-div#settings-bar input#stdev:focus {
+div#settings-bar input:focus {
 	color: #fff;
-	background-color: #80a;
+	background-color: #6e41b8;
+	outline: #5a0 solid 3px;
 }
 
 div#settings-bar div.help-button:active {
 	color: #fff;
-	background-color: #80a;
-}
-
-div#settings-bar input#stdev:focus {
-	outline: #5a0 solid 3px;
+	background-color: #6e41b8;
 }
 
 div#match {
 	grid-area: match;
 
-	background-color: #333;
-	font-size: 2vh;
+	background-color: #222;
+	font-size: clamp(1.5vh, 2vw, 2vh);
 
-	overflow-y: scroll;
+	overflow: auto;
+	scrollbar-gutter: stable both-edges;
 	margin: 2px;
 	padding: 0.4rem;
 
 	display: grid;
-	grid-template-columns: repeat(6, max-content);
+	grid-template-columns: 1.5ch repeat(5, 2fr) 1.5ch;
 	grid-auto-rows: min-content;
 	grid-row-gap: 0.3em;
-	grid-column-gap: 1.5em;
 }
 
 div#match div {
-	font-size: 1.5em;
-	font-family: monospace;
-	white-space: pre;
+	font-size: 2em;
 
-	min-width: 3ch;
+	min-width: 0;
 
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-div#match .user-name { color: #aaa; background-color: #444; grid-column: 2 / span 2; justify-content: center; }
-div#match .boat-name { color: #aaa; background-color: #444; grid-column: 4 / span 2; justify-content: center; }
-div#match .visit-no { color: #888; grid-column: 1; }
+div#match .visit-col1 { grid-column: 2; }
+div#match .visit-col3 { color: #888; grid-column: 4; }
 div#match .p0 { color: #f00; font-weight: bold; }
 div#match .p1 { color: #f00; }
 div#match .p20 { color: #f60; }
@@ -240,7 +280,7 @@ div#match .p60 { color: #dd0; }
 div#match .p100 { color: #2c2; }
 div#match .p140 { color: #0f0; }
 div#match .p180 { color: #0f0; font-weight: bold; }
-div#match .darts { color: #888; justify-content: left; }
+div#match .visit-col6 { color: #888; justify-content: left; font-family: monospace; white-space: pre; }
 
 .modal {
 	background-color: rgba(0, 0, 0, 0.6);
@@ -256,7 +296,7 @@ div#match .darts { color: #888; justify-content: left; }
 }
 
 .modal-content {
-	background-color: #333;
+	background-color: #222;
 	font-size: 1.4em;
 	font-family: 'Source Serif Pro', serif;
 
@@ -290,24 +330,7 @@ a:hover {
 	color: #7d0;
 }
 
-@media (max-aspect-ratio: 1/1) {
-	div#main {
-		grid-template-columns: 1fr;
-		grid-template-rows: min-content 1fr 3fr;
-		grid-template-areas: "settings-bar" "match" "keypad";
-	}
-
-	div#keypad, div#match, div#settings-bar {
-		font-size: clamp(1.5vh, 2vw, 2vh);
-	}
-
-	div#keypad {
-		width: auto;
-	}
-}
-
-/*
-@media (max-aspect-ratio: 3/5) {
+@media (max-aspect-ratio: 9/20) {
 	div#settings-bar div.input {
 		display: flex;
 		flex-direction: column;
@@ -321,4 +344,3 @@ a:hover {
 		font-size: 3em;
 	}
 }
-*/