From a2ef9fb343cc87694f5b7aaab59e58a72459c2be Mon Sep 17 00:00:00 2001 From: Djuri Baars Date: Sat, 31 Aug 2024 17:10:26 +0200 Subject: [PATCH] Rewrite display status style --- src/lib/style/app.scss | 207 ++++++++++++++++++------------------- src/routes/+page.svelte | 9 +- src/routes/Control.svelte | 10 +- src/routes/Rendered.svelte | 13 ++- src/routes/Settings.svelte | 46 +++++---- src/routes/Status.svelte | 13 ++- 6 files changed, 163 insertions(+), 135 deletions(-) diff --git a/src/lib/style/app.scss b/src/lib/style/app.scss index 9c06e55..6692403 100644 --- a/src/lib/style/app.scss +++ b/src/lib/style/app.scss @@ -45,59 +45,106 @@ nav { margin-bottom: 15px; } -.splitText div:first-child::after { - display: block; - content: ''; - margin-top: 0px; - border-bottom: 2px solid; - margin-bottom: 3px; -} - #btclock-wrapper { margin: 0 auto; } -//@include media-breakpoint-down(xl) { .btn-group-sm .btn { font-size: 0.8rem; } -//} -.btclock { - border: 1px solid darkgray; - background: #000; - border-radius: 5px; - padding: 10px; - max-width: 700px; - margin: 0 auto; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - align-content: stretch; - font-family: 'Oswald', sans-serif; - font-size: 1vw; - > div { - padding: 5px; +#customText { + text-transform: uppercase; +} + +.rbtclock { + .btclock { + background: #000; + display: flex; + font-size: calc(3vw + 3vh); + font-family: 'Oswald', sans-serif; + font-weight: 800; + padding: 10px; + gap: 10px; + + .digit, + .splitText, + .mediumText { + border: 2px solid gold; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 10px; + width: calc(12vw + 12vh); /* Set a dynamic width based on viewport */ + aspect-ratio: 1 / 1.5; /* Maintain a 1:1 aspect ratio */ + + hr { + width: 80%; /* Line width relative to digit square */ + border: 0; + border-top: 2px solid #fff; + margin: 0; /* Remove default margin */ + padding: 0; + opacity: 1; + } + } + + .mediumText { + font-size: calc(1.25vw + 1.25vh); + } + + .splitText { + flex-direction: column; /* Stack the text and line vertically */ + align-items: center; + justify-content: space-around; /* Distribute items with space between */ + padding: 10px; + } + + .splitText div:first-child::after { + display: block; + content: ''; + margin-top: 0px; + border-bottom: 2px solid; + margin-bottom: 3px; + } + + .splitText { + font-size: calc(1vw + 1vh); + + .top-text, + .bottom-text { + margin: 0; + line-height: 1; + } + + .top-text { + margin-bottom: -25px; + } + + .bottom-text { + margin-top: -25px; + } + } + + .digit-blank { + content: 'abc'; + } + + .digit.icon { + content: 'abc'; + } } - .digit, - .splitText, - .mediumText { - border: 2px solid gold; - border-radius: 8px; + .digit.sats { + font-family: 'Satoshi Symbol', sans-serif; + content: 'a'; + } - @include media-breakpoint-up(sm) { - min-width: 10px; + @media (max-width: 576px) { + .btclock { + font-size: calc(3vw + 3vh); /* Adjust for small screens if necessary */ } - - @include media-breakpoint-up(xxl) { - min-width: 70px; - } - - text-align: center; - color: #fff; } } @@ -106,76 +153,26 @@ nav { border-color: #fff; } -.lightMode .btclock > div { - background: #fff; +.darkMode .btclock > div { + background: #000; + color: #fff; +} + +.lightMode .btclock { + & > div { + background: #fff; + color: #000; + } + + .splitText hr { + border-top: 2px solid #000; + } } .lightMode .btclock > div { color: #000; } -.darkMode .btclock > div { - background: #000; -} - -.splitText { - @include media-breakpoint-up(sm) { - font-size: 1rem; - padding-top: 8px !important; - padding-bottom: 9px !important; - } - @include media-breakpoint-up(xxl) { - font-size: 1.2rem; - padding-top: 2.1rem !important; - padding-bottom: 2.1rem !important; - } - - text-align: center; -} - -.mediumText { - font-size: 3rem; - padding-left: 5px; - padding-right: 5px; - @include media-breakpoint-up(sm) { - font-size: 1.8rem; - padding-top: 13px !important; - padding-bottom: 13px !important; - } - @include media-breakpoint-up(xxl) { - font-size: 3rem; - padding-top: 29px !important; - padding-bottom: 29px !important; - } -} - -.digit { - font-size: 5rem; - @include media-breakpoint-up(sm) { - font-size: 2.5rem; - } - @include media-breakpoint-up(xxl) { - font-size: 5rem; - } - padding-left: 10px; - padding-right: 10px; -} - -.digit.sats { - padding-top: 15px; - padding-bottom: 5px; - font-size: 4.5rem; - font-family: 'Satoshi Symbol', sans-serif; - content: 'a'; -} - -.digit-blank { - content: 'abc'; -} - -#customText { - text-transform: uppercase; -} .system_info { padding: 0; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8a8858c..dec2eb5 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -122,10 +122,11 @@ - - - - + + + +
diff --git a/src/routes/Control.svelte b/src/routes/Control.svelte index 0c6366e..6ed2642 100644 --- a/src/routes/Control.svelte +++ b/src/routes/Control.svelte @@ -95,9 +95,17 @@ }); onDestroy(firstLedDataSubscription); + + // You can also add more props if needed + export let xs = 12; + export let sm = xs; + export let md = sm; + export let lg = md; + export let xl = lg; + export let xxl = xl; - + {$_('section.control.title', { default: 'Control' })} diff --git a/src/routes/Rendered.svelte b/src/routes/Rendered.svelte index 014c55f..3e1c91a 100644 --- a/src/routes/Rendered.svelte +++ b/src/routes/Rendered.svelte @@ -7,16 +7,23 @@ const isSplitText = (str: string) => { return str.includes('/'); }; + + export let className = 'btclock-wrapper'; -
+
{#each status.data as char} {#if isSplitText(char)}
- {#each char.split('/') as part} + {#if char.split('/').length} + {char.split('/')[0]} +
+ {char.split('/')[1]} + {/if} +
{:else if char.startsWith('mdi')}
diff --git a/src/routes/Settings.svelte b/src/routes/Settings.svelte index 476a5eb..8413936 100644 --- a/src/routes/Settings.svelte +++ b/src/routes/Settings.svelte @@ -96,9 +96,17 @@ } }); }; + + // You can also add more props if needed + export let xs = 12; + export let sm = xs; + export let md = sm; + export let lg = md; + export let xl = lg; + export let xxl = xl; - + {$_('section.settings.title', { default: 'Settings' })} @@ -437,7 +445,7 @@ - + - + - + - + - + - + - + - + - + - + - + - + {#if $settings.nostrRelay} - + {/if} {#if 'nostrZapNotify' in $settings} - + {/if} {#if 'bitaxeEnabled' in $settings} - + {/if} {#if $settings.hasFrontlight} - + - + {$_('section.settings.screens')} {#if $settings.screens} {#each $settings.screens as s} - + - + {$_('section.status.title', { default: 'Status' })} @@ -101,8 +108,8 @@
{#if $status.data} -
- +
+
{$_('section.status.screenCycle')}: