style(frontend): make layout more mobile friendly

Adjust card dimensions and add margins for a mobile-first approach
Data5tream · Jun 27, 2023 · 55310df · 55310df
1 parent 88df0e8
commit 55310df
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/frontend/src/lib/components/PageFooter.svelte b/frontend/src/lib/components/PageFooter.svelte
@@ -14,9 +14,14 @@
 
 	.content {
 		max-width: 1400px;
-		margin: 0 auto;
+		margin: 0 16px;
 		font-family: monospace;
 		font-size: 14px;
+
+    @media screen and (min-width: 1432px) {
+      width: 100%;
+      margin: 0 auto;
+    }
 	}
 
 	a {

diff --git a/frontend/src/lib/components/StatusList.svelte b/frontend/src/lib/components/StatusList.svelte
@@ -15,10 +15,18 @@
 	{/if}
 </div>
 
-<style>
+<style lang='scss'>
 	.list-container {
-		display: flex;
-		flex-wrap: wrap;
+		display: grid;
+		grid-template-columns: 1fr;
 		gap: 16px;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+		}
+
+    @media (min-width: 1280px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
 	}
 </style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -9,7 +9,7 @@
 
 <main>
 	<h1>Simple Status Page</h1>
-	{#if !data.status.is_valid}
+	{#if data.status && !data.status.is_valid}
 		<span class="error">Error loading status data :(</span>
 	{:else}
 		<StatusList bind:data={data.status.watchpoints} />
@@ -19,9 +19,13 @@
 
 <style lang="scss">
 	main {
-		width: 100%;
 		max-width: 1400px;
-		margin: 0 auto;
+		margin: 0 16px;
+
+		@media screen and (min-width: 1432px) {
+			width: 100%;
+			margin: 0 auto;
+    }
 	}
 
 	h1 {