From 645c0f7d494f2c5ef01c4f065aeac923cf9ff4ef Mon Sep 17 00:00:00 2001
From: Djuri Baars <dsbaars@users.noreply.github.com>
Date: Sat, 31 Aug 2024 17:56:35 +0200
Subject: [PATCH] Small screen fixes

---
 src/lib/style/app.scss   | 28 +++++++++++++++++++++++++++-
 src/routes/Status.svelte | 27 ++++++++++++++++++++++++++-
 2 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/lib/style/app.scss b/src/lib/style/app.scss
index 86f1ecc..f9464b2 100644
--- a/src/lib/style/app.scss
+++ b/src/lib/style/app.scss
@@ -133,6 +133,10 @@ nav {
 
 		.digit.icon {
 			content: 'abc';
+
+			svg {
+				width: 100%;
+			}
 		}
 	}
 
@@ -143,7 +147,29 @@ nav {
 
 	@media (max-width: 576px) {
 		.btclock {
-			font-size: calc(3vw + 3vh); /* Adjust for small screens if necessary */
+			font-size: calc(2vw + 2vh); /* Adjust for small screens if necessary */
+
+			.digit,
+			.splitText,
+			.mediumText {
+				padding: 5px;
+			}
+
+			.splitText {
+				.top-text,
+				.bottom-text {
+					margin: 0;
+					line-height: 1;
+				}
+
+				.top-text {
+					margin-bottom: -10px;
+				}
+
+				.bottom-text {
+					margin-top: -10px;
+				}
+			}
 		}
 	}
 }
diff --git a/src/routes/Status.svelte b/src/routes/Status.svelte
index 1286b64..b34f33b 100644
--- a/src/routes/Status.svelte
+++ b/src/routes/Status.svelte
@@ -21,6 +21,16 @@
 	export let settings;
 	export let status: writable<object>;
 
+	// Function to split array into chunks
+	const chunkArray = (array, chunkSize) => {
+		const result = [];
+		for (let i = 0; i < array.length; i += chunkSize) {
+			result.push(array.slice(i, i + chunkSize));
+		}
+		return result;
+	};
+	let buttonChunks = chunkArray([], 6);
+
 	const toTime = (secs: number) => {
 		var hours = Math.floor(secs / (60 * 60));
 
@@ -65,6 +75,8 @@
 
 	settings.subscribe((value: object) => {
 		lightMode = value.bgColor > value.fgColor;
+
+		if (value.screens) buttonChunks = chunkArray(value.screens, 5);
 	});
 
 	const setScreen = (id: number) => () => {
@@ -95,7 +107,20 @@
 		</CardHeader>
 		<CardBody>
 			{#if $settings.screens}
-				<div class="d-flex justify-content-center">
+				<div class=" d-block d-sm-none mx-auto text-center">
+					{#each buttonChunks as chunk}
+						<ButtonGroup size="sm" class="mx-auto mb-1">
+							{#each chunk as s}
+								<Button
+									color="outline-primary"
+									active={$status.currentScreen == s.id}
+									on:click={setScreen(s.id)}>{s.name}</Button
+								>
+							{/each}
+						</ButtonGroup>
+					{/each}
+				</div>
+				<div class="d-flex justify-content-center d-none d-sm-flex">
 					<ButtonGroup size="sm">
 						{#each $settings.screens as s}
 							<Button