From 266a99be96189bea92e0ef593f930bb92d3b5b20 Mon Sep 17 00:00:00 2001
From: Djuri Baars <dsbaars@users.noreply.github.com>
Date: Wed, 18 Dec 2024 00:45:26 +0100
Subject: [PATCH] Add vertical screen description option

---
 src/lib/locales/de.json    |  3 ++-
 src/lib/locales/en.json    |  3 ++-
 src/lib/locales/es.json    |  3 ++-
 src/lib/locales/nl.json    |  3 ++-
 src/lib/style/app.scss     | 10 ++++++++--
 src/routes/Rendered.svelte | 15 ++++++++-------
 src/routes/Settings.svelte |  9 +++++++++
 src/routes/Status.svelte   |  6 +++++-
 8 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/lib/locales/de.json b/src/lib/locales/de.json
index a26ab60..e9756ff 100644
--- a/src/lib/locales/de.json
+++ b/src/lib/locales/de.json
@@ -57,7 +57,8 @@
 			"showAll": "Alle anzeigen",
 			"hideAll": "Alles ausblenden",
 			"flOffWhenDark": "Displaybeleuchtung aus, wenn es dunkel ist",
-			"luxLightToggleText": "Zum Deaktivieren auf 0 setzen"
+			"luxLightToggleText": "Zum Deaktivieren auf 0 setzen",
+			"verticalDesc": "Vrtikale Bildschirmbeschreibung"
 		},
 		"control": {
 			"systemInfo": "Systeminfo",
diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json
index 6e829bd..3ab90ed 100644
--- a/src/lib/locales/en.json
+++ b/src/lib/locales/en.json
@@ -69,7 +69,8 @@
 			"showAll": "Show all",
 			"hideAll": "Hide all",
 			"flOffWhenDark": "Frontlight off when dark",
-			"luxLightToggleText": "Set to 0 to disable"
+			"luxLightToggleText": "Set to 0 to disable",
+			"verticalDesc": "Use vertical screen description"
 		},
 		"control": {
 			"systemInfo": "System info",
diff --git a/src/lib/locales/es.json b/src/lib/locales/es.json
index eb15ced..79b6673 100644
--- a/src/lib/locales/es.json
+++ b/src/lib/locales/es.json
@@ -56,7 +56,8 @@
 			"showAll": "Mostrar todo",
 			"hideAll": "Ocultar todo",
 			"flOffWhenDark": "Luz de la pantalla cuando está oscuro",
-			"luxLightToggleText": "Establecer en 0 para desactivar"
+			"luxLightToggleText": "Establecer en 0 para desactivar",
+			"verticalDesc": "Descripción de pantalla vertical"
 		},
 		"control": {
 			"turnOff": "Apagar",
diff --git a/src/lib/locales/nl.json b/src/lib/locales/nl.json
index b31f7ad..eb5b5af 100644
--- a/src/lib/locales/nl.json
+++ b/src/lib/locales/nl.json
@@ -57,7 +57,8 @@
 			"showAll": "Toon alles",
 			"hideAll": "Alles verbergen",
 			"flOffWhenDark": "Displaylicht uit als het donker is",
-			"luxLightToggleText": "Stel in op 0 om uit te schakelen"
+			"luxLightToggleText": "Stel in op 0 om uit te schakelen",
+			"verticalDesc": "Verticale schermbeschrijving"
 		},
 		"control": {
 			"systemInfo": "Systeeminformatie",
diff --git a/src/lib/style/app.scss b/src/lib/style/app.scss
index 0703d06..8e9115c 100644
--- a/src/lib/style/app.scss
+++ b/src/lib/style/app.scss
@@ -158,12 +158,18 @@ nav {
 			padding: 5px;
 		}
 
-		.splitText div:first-child::after {
+		&.verticalDesc > .splitText:first-child {
+			.textcontainer {
+				transform: rotate(-90deg);
+			}
+		}
+
+		.splitText .textcontainer :first-child::after {
 			display: block;
 			content: '';
 			margin-top: 0px;
 			border-bottom: 2px solid;
-			margin-bottom: 3px;
+			// margin-bottom: 3px;
 		}
 
 		.splitText {
diff --git a/src/routes/Rendered.svelte b/src/routes/Rendered.svelte
index 4c4167b..99c3a26 100644
--- a/src/routes/Rendered.svelte
+++ b/src/routes/Rendered.svelte
@@ -9,7 +9,7 @@
 	};
 
 	export let className = 'btclock-wrapper';
-
+	export let verticalDesc = false;
 	// Define the currency symbols as constants
 	const CURRENCY_USD = '$';
 	const CURRENCY_EUR = '[';
@@ -44,15 +44,16 @@
 </script>
 
 <div class={className} id={className}>
-	<div class="btclock">
+	<div class={'btclock' + (verticalDesc ? ' verticalDesc' : '')}>
 		{#each status.data as char}
 			{#if isSplitText(char)}
 				<div class="splitText">
-					{#if char.split('/').length}
-						<span class="top-text">{char.split('/')[0]}</span>
-						<hr />
-						<span class="bottom-text">{char.split('/')[1]}</span>
-					{/if}
+					<div class="textcontainer">
+						{#if char.split('/').length}
+							<span class="top-text">{char.split('/')[0]}</span>
+							<span class="bottom-text">{char.split('/')[1]}</span>
+						{/if}
+					</div>
 					<!-- {#each char.split('/') as part}
 						<div class="flex-items">{part}</div>
 					{/each} -->
diff --git a/src/routes/Settings.svelte b/src/routes/Settings.svelte
index 77c8a3d..8130940 100644
--- a/src/routes/Settings.svelte
+++ b/src/routes/Settings.svelte
@@ -318,6 +318,15 @@
 									label={$_('section.settings.suffixShareDot')}
 								/>
 							</Col>
+							<Col md="6" xl="12" xxl="6">
+								<Input
+									id="verticalDesc"
+									bind:checked={$settings.verticalDesc}
+									type="switch"
+									bsSize={$uiSettings.inputSize}
+									label={$_('section.settings.verticalDesc')}
+								/>
+							</Col>
 
 							{#if !$settings.actCurrencies}
 								<Col md="6" xl="12" xxl="6">
diff --git a/src/routes/Status.svelte b/src/routes/Status.svelte
index afe2c87..812ee68 100644
--- a/src/routes/Status.svelte
+++ b/src/routes/Status.svelte
@@ -151,7 +151,11 @@
 				<hr />
 				{#if $status.data}
 					<section class={lightMode ? 'lightMode' : 'darkMode'}>
-						<Rendered status={$status} className="btclock-wrapper"></Rendered>
+						<Rendered
+							status={$status}
+							className="btclock-wrapper"
+							verticalDesc={$settings.verticalDesc}
+						></Rendered>
 					</section>
 					{$_('section.status.screenCycle')}:
 					<a