[Task] #77 improve responsive design, hide images, status overlays map

Type-Style · Sep 1, 2024 · 76e54a2 · 76e54a2
1 parent c852365
commit 76e54a2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/src/client/css/start.css b/src/client/css/start.css
@@ -19,7 +19,7 @@
 	/* grid layout */
 	height: 100%;
 	display: grid;
-	grid-template-columns: 1fr minmax(18.5rem, 40vmin);
+	grid-template-columns: 1fr minmax(16rem, 40vmin);
 	grid-template-rows: minmax(3em, auto) 1fr 1fr 1fr minmax(3em, auto);
 
 	.grid-item {
@@ -48,6 +48,11 @@
 			margin-right: 1em;
 
 			background-color: color-mix(in oklab, transparent 50%, var(--main));
+
+			@media (max-width: 35em) {
+				grid-column: 1 / -1;
+				margin-right: 0;
+			}
 		}
 
 		&.status {
@@ -86,6 +91,9 @@
 
 			display: grid;
 			overflow: auto;
+			@media (max-width: 35em) {
+				display: none;
+			}
 		}
 
 		.image {
@@ -102,10 +110,11 @@
 		}
 
 		&.subinfo {
-			grid-column: 1;
+			grid-column: 1 / -1;
 			padding: 0.5em 0.8em;
-			@media (min-width: 30em) {
+			@media (min-width: 35em) {
 				padding: 0.7em 2em;
+				grid-column: 1;
 			}
 
 			.MuiLinearProgress-root {

diff --git a/src/client/css/status.css b/src/client/css/status.css
@@ -53,4 +53,18 @@
 	td {
 		padding-inline: 0.2rem;
 	}
+}
+
+@container (max-width: 20rem) {
+	.statusTable {
+		padding: 0.3rem 0.1rem;
+		font-size: 1.15rem;
+	}
+
+	td {
+		padding: 0 0 0 0.1rem;
+		font-stretch: 100%;
+		font-weight: 400;
+		letter-spacing: normal;
+	}
 }