Add vertical screen description option

This commit is contained in:
Djuri 2024-12-18 00:45:26 +01:00
parent 653a39d0a3
commit 266a99be96
8 changed files with 38 additions and 14 deletions

View file

@ -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} -->

View file

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

View file

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