forked from btclock/webui
Rewrite display status style
This commit is contained in:
Djuri Baars
parent
21a7192e6d
commit
a2ef9fb343
6 changed files with 163 additions and 135 deletions
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue