1
0
Fork 0
forked from btclock/webui

Rewrite display status style

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

View file

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

View file

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

View file

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

View file

@ -7,16 +7,23 @@
const isSplitText = (str: string) => {
return str.includes('/');
};
export let className = 'btclock-wrapper';
</script>
<div class="btclock-wrapper" id="btclock-wrapper">
<div class={className}>
<div class="btclock">
{#each status.data as char}
{#if isSplitText(char)}
<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>
{/each}
{/each} -->
</div>
{:else if char.startsWith('mdi')}
<div class="digit icon">

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

View file

@ -79,9 +79,16 @@
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>
<Col>
<Col {xs} {sm} {md} {lg} {xl} {xxl}>
<Card>
<CardHeader>
<CardTitle>{$_('section.status.title', { default: 'Status' })}</CardTitle>
@ -101,8 +108,8 @@
</div>
<hr />
{#if $status.data}
<section class={lightMode ? 'lightMode' : ''}>
<Rendered status={$status}></Rendered>
<section class={lightMode ? 'lightMode' : 'darkMode'}>
<Rendered status={$status} className="rbtclock"></Rendered>
</section>
{$_('section.status.screenCycle')}:
<a