Add alt tag to bitaxe logo

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

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

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 {
@@ -293,3 +299,7 @@ nav {
 input[type='number'] {
 	text-align: right;
 }
+
+.lightMode .bitaxelogo {
+	filter: brightness(0) saturate(100%);
+}

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,21 +44,22 @@
 </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} -->
 				</div>
 			{:else if char.startsWith('mdi')}
-				<div class="digit icon">
+				<div class={'digit icon' + (char.endsWith('bitaxe') ? ' icon-img' : '')}>
 					{#if char.endsWith('rocket')}
 						<RocketIcon></RocketIcon>
 					{/if}
@@ -68,6 +69,9 @@
 					{#if char.endsWith('bolt')}
 						<ZapIcon></ZapIcon>
 					{/if}
+					{#if char.endsWith('bitaxe')}
+						<img src="/bitaxe.webp" class="bitaxelogo" alt="BitAxe logo" />
+					{/if}
 				</div>
 			{:else if char === 'STS'}
 				<div class="digit sats">S</div>
@@ -82,8 +86,22 @@
 	</div>
 </div>
 
-<style>
+<style lang="scss">
 	.icon {
 		fill: currentColor;
 	}
+
+	.btclock-wrapper .btclock .icon.icon-img {
+		// padding: 0 15px;
+		aspect-ratio: 1;
+		width: calc(100 / 7);
+
+		img {
+			max-width: 95%;
+		}
+	}
+
+	.bitaxelogo {
+		transform: rotate(-90deg);
+	}
 </style>

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

tests/screenshots/viewport-screenshots.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
 
-import { initMock, settingsJson } from '../shared';
+import { initMock, settingsJson, statusJson } from '../shared';
 
 test.beforeEach(initMock);
 
@@ -69,6 +69,9 @@ test('capture screenshots across devices with bitaxe screens', async ({ page },
 		}
 	];
 
+	statusJson.data = ['mdi:bitaxe', '', 'mdi:pickaxe', '6', '3', '7', 'GH/S'];
+	statusJson.rendered = ['mdi:bitaxe', '', 'mdi:pickaxe', '6', '3', '7', 'GH/S'];
+
 	await page.goto('/');
 	await expect(page.getByRole('heading', { name: 'Control' })).toBeVisible();
 	await expect(page.getByRole('heading', { name: 'Status' })).toBeVisible();