Add vertical screen description option

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",

src/lib/locales/en.json

@@ -71,7 +71,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",

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",

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",

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 {

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}
+					<div class="textcontainer">
-						<span class="top-text">{char.split('/')[0]}</span>
+						{#if char.split('/').length}
-						<hr />
+							<span class="top-text">{char.split('/')[0]}</span>
-						<span class="bottom-text">{char.split('/')[1]}</span>
+							<span class="bottom-text">{char.split('/')[1]}</span>
-					{/if}
+						{/if}
+					</div>
 					<!-- {#each char.split('/') as part}
 						<div class="flex-items">{part}</div>
 					{/each} -->

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">

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