KevinMidboe/brewpi
1
0
Fork 0
mirror of https://github.com/KevinMidboe/brewPi.git synced 2025-10-29 16:50:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Made progress values more bold & updates colors manually

Browse Source
This commit is contained in:
Kevin
2023-06-02 00:50:02 +02:00
parent 659b657175
commit 38d01399fd
1 changed files with 72 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/lib/components/VerticalSensorDisplay.svelte
View File

@@ -7,7 +7,9 @@
export let outside; export let outside;
let loadedTime: number = new Date().getTime(); let loadedTime: number = new Date().getTime();
let currentTime: number = new Date().getTime() let currentTime: number = new Date().getTime();
let autoReload = false;
const currentGoal = 4;
function updateTime() { function updateTime() {
currentTime = new Date().getTime(); currentTime = new Date().getTime();
@@ -18,11 +20,9 @@
} }
onMount(() => setInterval(updateTime, 1000)); onMount(() => setInterval(updateTime, 1000));
$: secondsSinceUpdate = Math.floor((currentTime - loadedTime) / 1000);
$: secondsSinceUpdate = Math.floor((currentTime - loadedTime) / 1000)
</script> </script>
<div class="card"> <div class="card">
<CardButton> <CardButton>
<Activity on:click={flipCard} /> <Activity on:click={flipCard} />
@@ -30,8 +30,8 @@
<h2>Current target temperature</h2> <h2>Current target temperature</h2>
<div class="sensor-reading"> <div class="sensor-reading">
<div class="red"> <div class="blue">
<span class="value">16</span> <span class="value">{currentGoal}</span>
<span class="unit">°C</span> <span class="unit">°C</span>
</div> </div>
</div> </div>
@@ -51,7 +51,7 @@
<h2>Outside temperature</h2> <h2>Outside temperature</h2>
<div class="sensor-reading"> <div class="sensor-reading">
<div class="blue"> <div class="red">
<span class="value">{outside?.temperature}</span> <span class="value">{outside?.temperature}</span>
<span class="unit">{outside?.temperature_unit}</span> <span class="unit">{outside?.temperature_unit}</span>
</div> </div>
@@ -70,6 +70,8 @@
<div class="button-timer"> <div class="button-timer">
<span>Updated {secondsSinceUpdate === 0 ? 'now' : secondsSinceUpdate + 's ago'}</span> <span>Updated {secondsSinceUpdate === 0 ? 'now' : secondsSinceUpdate + 's ago'}</span>
</div> </div>
</div> </div>
@@ -94,7 +96,7 @@ h2 {
font-size: 2.2rem; font-size: 2.2rem;
line-height: 1; line-height: 1;
font-weight: 500; font-weight: bold;
color: var(--text-color); color: var(--text-color);
@include tablet { @include tablet {
@@ -105,8 +107,14 @@ h2 {
font-size: 3rem; font-size: 3rem;
} }
> div {
display: flex;
white-space: nowrap;
}
.unit { .unit {
font-weight: 300; font-weight: 300;
margin-left: 0.3rem;
} }
.red { .red {
@@ -119,9 +127,13 @@ h2 {
} }
.button-timer { .button-timer {
width: 100%; display: flex;
text-align: right; align-items: center;
color: rgba(0, 0, 0, .5); justify-content: flex-end;
} color: rgba(0, 0, 0, 0.5);
svg {
margin-left: 0.5rem;
}
}
</style> </style>