kdmukai/webui
1
0
Fork 0
forked from btclock/webui
Code Pull requests Activity

Rewrite display status style

Browse source
This commit is contained in:
Djuri Baars 2024-08-31 17:10:26 +02:00
parent 21a7192e6d
commit a2ef9fb343
6 changed files with 163 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

193
src/lib/style/app.scss
View file

@ -45,59 +45,106 @@ nav {
margin-bottom: 15px; margin-bottom: 15px;
} }
.splitText div:first-child::after {
display: block;
content: '';
margin-top: 0px;
border-bottom: 2px solid;
margin-bottom: 3px;
}
#btclock-wrapper { #btclock-wrapper {
margin: 0 auto; margin: 0 auto;
} }
//@include media-breakpoint-down(xl) {
.btn-group-sm .btn { .btn-group-sm .btn {
font-size: 0.8rem; font-size: 0.8rem;
} }
//}
.btclock { #customText {
border: 1px solid darkgray; text-transform: uppercase;
}
.rbtclock {
.btclock {
background: #000; background: #000;
border-radius: 5px;
padding: 10px;
max-width: 700px;
margin: 0 auto;
display: flex; display: flex;
flex-direction: row; font-size: calc(3vw + 3vh);
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
font-family: 'Oswald', sans-serif; font-family: 'Oswald', sans-serif;
font-size: 1vw; font-weight: 800;
> div { padding: 10px;
padding: 5px; gap: 10px;
}
.digit, .digit,
.splitText, .splitText,
.mediumText { .mediumText {
border: 2px solid gold; border: 2px solid gold;
border-radius: 8px; border-radius: 8px;
display: flex;
@include media-breakpoint-up(sm) { align-items: center;
min-width: 10px; justify-content: center;
}
@include media-breakpoint-up(xxl) {
min-width: 70px;
}
text-align: center; text-align: center;
color: #fff; 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.sats {
font-family: 'Satoshi Symbol', sans-serif;
content: 'a';
}
@media (max-width: 576px) {
.btclock {
font-size: calc(3vw + 3vh); /* Adjust for small screens if necessary */
}
} }
} }
@ -106,76 +153,26 @@ nav {
border-color: #fff; border-color: #fff;
} }
.lightMode .btclock > div { .darkMode .btclock > div {
background: #000;
color: #fff;
}
.lightMode .btclock {
& > div {
background: #fff; background: #fff;
color: #000;
}
.splitText hr {
border-top: 2px solid #000;
}
} }
.lightMode .btclock > div { .lightMode .btclock > div {
color: #000; 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 { .system_info {
padding: 0; padding: 0;

9
src/routes/+page.svelte
View file

@ -122,10 +122,11 @@
</svelte:head> </svelte:head>
<Container fluid> <Container fluid>
<Row cols={{ xl: 3, md: 2, sm: 1 }}> <Row>
<Control bind:settings bind:status></Control> <Control bind:settings bind:status lg="3" xxl="4"></Control>
<Status bind:settings bind:status></Status> <Status bind:settings bind:status lg="6" xxl="4"></Status>
<Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData}></Settings> <Settings bind:settings on:showToast={showToast} on:formReset={fetchSettingsData} lg="3" xxl="4"
></Settings>
</Row> </Row>
</Container> </Container>
<div class="position-fixed bottom-0 end-0 p-2"> <div class="position-fixed bottom-0 end-0 p-2">

10
src/routes/Control.svelte
View file

@ -95,9 +95,17 @@
}); });
onDestroy(firstLedDataSubscription); 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;
</script> </script>
<Col> <Col {xs} {sm} {md} {lg} {xl} {xxl}>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle> <CardTitle>{$_('section.control.title', { default: 'Control' })}</CardTitle>

13
src/routes/Rendered.svelte
View file

@ -7,16 +7,23 @@
const isSplitText = (str: string) => { const isSplitText = (str: string) => {
return str.includes('/'); return str.includes('/');
}; };
export let className = 'btclock-wrapper';
</script> </script>
<div class="btclock-wrapper" id="btclock-wrapper"> <div class={className}>
<div class="btclock"> <div class="btclock">
{#each status.data as char} {#each status.data as char}
{#if isSplitText(char)} {#if isSplitText(char)}
<div class="splitText"> <div class="splitText">
{#each char.split('/') as part} {#if char.split('/').length}
<span class="top-text">{char.split('/')[0]}</span>
<hr />
<span class="bottom-text">{char.split('/')[1]}</span>
{/if}
<!-- {#each char.split('/') as part}
<div class="flex-items">{part}</div> <div class="flex-items">{part}</div>
{/each} {/each} -->
</div> </div>
{:else if char.startsWith('mdi')} {:else if char.startsWith('mdi')}
<div class="digit icon"> <div class="digit icon">

46
src/routes/Settings.svelte
View file

@ -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;
</script> </script>
<Col> <Col {xs} {sm} {md} {lg} {xl} {xxl}>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle> <CardTitle>{$_('section.settings.title', { default: 'Settings' })}</CardTitle>
@ -437,7 +445,7 @@
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="ledTestOnPower" id="ledTestOnPower"
bind:checked={$settings.ledTestOnPower} bind:checked={$settings.ledTestOnPower}
@ -446,7 +454,7 @@
label={$_('section.settings.ledPowerOnTest')} label={$_('section.settings.ledPowerOnTest')}
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="ledFlashOnUpd" id="ledFlashOnUpd"
bind:checked={$settings.ledFlashOnUpd} bind:checked={$settings.ledFlashOnUpd}
@ -455,7 +463,7 @@
label={$_('section.settings.ledFlashOnBlock')} label={$_('section.settings.ledFlashOnBlock')}
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="stealFocus" id="stealFocus"
bind:checked={$settings.stealFocus} bind:checked={$settings.stealFocus}
@ -464,7 +472,7 @@
label={$_('section.settings.StealFocusOnNewBlock')} label={$_('section.settings.StealFocusOnNewBlock')}
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="mcapBigChar" id="mcapBigChar"
bind:checked={$settings.mcapBigChar} bind:checked={$settings.mcapBigChar}
@ -473,7 +481,7 @@
label={$_('section.settings.useBigCharsMcap')} label={$_('section.settings.useBigCharsMcap')}
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="otaEnabled" id="otaEnabled"
bind:checked={$settings.otaEnabled} bind:checked={$settings.otaEnabled}
@ -482,7 +490,7 @@
label="{$_('section.settings.otaUpdates')} ({$_('restartRequired')})" label="{$_('section.settings.otaUpdates')} ({$_('restartRequired')})"
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="mdnsEnabled" id="mdnsEnabled"
bind:checked={$settings.mdnsEnabled} bind:checked={$settings.mdnsEnabled}
@ -491,7 +499,7 @@
label="{$_('section.settings.enableMdns')} ({$_('restartRequired')})" label="{$_('section.settings.enableMdns')} ({$_('restartRequired')})"
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="fetchEurPrice" id="fetchEurPrice"
bind:checked={$settings.fetchEurPrice} bind:checked={$settings.fetchEurPrice}
@ -500,7 +508,7 @@
label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})" label="{$_('section.settings.fetchEuroPrice')} ({$_('restartRequired')})"
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="useBlkCountdown" id="useBlkCountdown"
bind:checked={$settings.useBlkCountdown} bind:checked={$settings.useBlkCountdown}
@ -509,7 +517,7 @@
label={$_('section.settings.useBlkCountdown')} label={$_('section.settings.useBlkCountdown')}
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="useSatsSymbol" id="useSatsSymbol"
bind:checked={$settings.useSatsSymbol} bind:checked={$settings.useSatsSymbol}
@ -518,7 +526,7 @@
label={$_('section.settings.useSatsSymbol')} label={$_('section.settings.useSatsSymbol')}
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="suffixPrice" id="suffixPrice"
bind:checked={$settings.suffixPrice} bind:checked={$settings.suffixPrice}
@ -527,7 +535,7 @@
label={$_('section.settings.suffixPrice')} label={$_('section.settings.suffixPrice')}
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="disableLeds" id="disableLeds"
bind:checked={$settings.disableLeds} bind:checked={$settings.disableLeds}
@ -536,7 +544,7 @@
label={$_('section.settings.disableLeds')} label={$_('section.settings.disableLeds')}
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="ownDataSource" id="ownDataSource"
bind:checked={$settings.ownDataSource} bind:checked={$settings.ownDataSource}
@ -546,7 +554,7 @@
/> />
</Col> </Col>
{#if $settings.nostrRelay} {#if $settings.nostrRelay}
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="useNostr" id="useNostr"
bind:checked={$settings.useNostr} bind:checked={$settings.useNostr}
@ -557,7 +565,7 @@
</Col> </Col>
{/if} {/if}
{#if 'nostrZapNotify' in $settings} {#if 'nostrZapNotify' in $settings}
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="nostrZapNotify" id="nostrZapNotify"
bind:checked={$settings.nostrZapNotify} bind:checked={$settings.nostrZapNotify}
@ -568,7 +576,7 @@
</Col> </Col>
{/if} {/if}
{#if 'bitaxeEnabled' in $settings} {#if 'bitaxeEnabled' in $settings}
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="bitaxeEnabled" id="bitaxeEnabled"
bind:checked={$settings.bitaxeEnabled} bind:checked={$settings.bitaxeEnabled}
@ -579,7 +587,7 @@
</Col> </Col>
{/if} {/if}
{#if $settings.hasFrontlight} {#if $settings.hasFrontlight}
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="flAlwaysOn" id="flAlwaysOn"
bind:checked={$settings.flAlwaysOn} bind:checked={$settings.flAlwaysOn}
@ -588,7 +596,7 @@
label={$_('section.settings.flAlwaysOn')} label={$_('section.settings.flAlwaysOn')}
/> />
</Col> </Col>
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="flFlashOnUpd" id="flFlashOnUpd"
bind:checked={$settings.flFlashOnUpd} bind:checked={$settings.flFlashOnUpd}
@ -604,7 +612,7 @@
<h3>{$_('section.settings.screens')}</h3> <h3>{$_('section.settings.screens')}</h3>
{#if $settings.screens} {#if $settings.screens}
{#each $settings.screens as s} {#each $settings.screens as s}
<Col md="6"> <Col md="6" xl="12" xxl="6">
<Input <Input
id="screens_{s.id}" id="screens_{s.id}"
bind:checked={s.enabled} bind:checked={s.enabled}

13
src/routes/Status.svelte
View file

@ -79,9 +79,16 @@
fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`); fetch(`${PUBLIC_BASE_URL}/api/action/timer_restart`);
} }
}; };
export let xs = 12;
export let sm = xs;
export let md = sm;
export let lg = md;
export let xl = lg;
export let xxl = xl;
</script> </script>
<Col> <Col {xs} {sm} {md} {lg} {xl} {xxl}>
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle> <CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
@ -101,8 +108,8 @@
</div> </div>
<hr /> <hr />
{#if $status.data} {#if $status.data}
<section class={lightMode ? 'lightMode' : ''}> <section class={lightMode ? 'lightMode' : 'darkMode'}>
<Rendered status={$status}></Rendered> <Rendered status={$status} className="rbtclock"></Rendered>
</section> </section>
{$_('section.status.screenCycle')}: {$_('section.status.screenCycle')}:
<a <a