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

Navigation arrow top left for going to /brews list page

Browse Source
This commit is contained in:
Kevin
2023-08-27 13:54:16 +02:00
parent 0071bd3791
commit b34b18ad37
1 changed files with 45 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/routes/brews/[date]/+page.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import Graph from '../../../lib/components/Graph.svelte'; import Graph from '../../../lib/components/Graph.svelte';
import ArrowRight from '../../../lib/icons/ArrowRight.svelte';
import IChartFrame from '../../../lib/interfaces/IChartFrame'; import IChartFrame from '../../../lib/interfaces/IChartFrame';
let height: number; let height: number;
@@ -19,12 +20,23 @@
const wizards = brew.by.join(', '); const wizards = brew.by.join(', ');
</script> </script>
<a href="/brews" class="nav-back">
<ArrowRight />
</a>
<section class="card"> <section class="card">
<div class="desktop-only image-container" style="height: {height}px; background-color: {brew.color_primary || '#93a4a0'}"> <div
class="desktop-only image-container"
style="height: {height}px; background-color: {brew.color_primary || '#93a4a0'}"
>
<img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" /> <img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
</div> </div>
<div class="beer-container" bind:clientHeight="{height}" style="background-color: {brew.color_secondary || '#DFE6E5'}"> <div
class="beer-container"
bind:clientHeight="{height}"
style="background-color: {brew.color_secondary || '#DFE6E5'}"
>
<h1>{brew.beer.name}</h1> <h1>{brew.beer.name}</h1>
<div class="links"> <div class="links">
@@ -57,7 +69,10 @@
</tbody> </tbody>
</table> </table>
<div class="mobile-only image-container" style="background-color: {brew.color_primary || '#93a4a0'}"> <div
class="mobile-only image-container"
style="background-color: {brew.color_primary || '#93a4a0'}"
>
<img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" /> <img src="/images/{brew.image}" alt="Tuborg Sommerøl" aria-label="Tuborg Sommerøl" />
</div> </div>
@@ -66,17 +81,15 @@
<div class="graph-container"> <div class="graph-container">
{#if temperatureData && temperatureData?.length} {#if temperatureData && temperatureData?.length}
<div class="graph"> <div class="graph">
<h3>Temperature during fermentation</h3> <h3>Temperature during fermentation</h3>
<Graph dataFrames="{temperatureData}" name="Temperature" hideTitle="{true}" /> <Graph dataFrames="{temperatureData}" name="Temperature" hideTitle="{true}" />
</div> </div>
{/if} {/if} {#if humidityData && temperatureData?.length}
<div class="graph">
{#if humidityData && temperatureData?.length} <h3>Humidity during carbonation</h3>
<div class="graph"> <Graph dataFrames="{humidityData}" name="Humidity" hideTitle="{true}" />
<h3>Humidity during carbonation</h3> </div>
<Graph dataFrames="{humidityData}" name="Humidity" hideTitle="{true}" />
</div>
{/if} {/if}
</div> </div>
@@ -101,6 +114,24 @@
<style lang="scss"> <style lang="scss">
@import '../../../styles/media-queries.scss'; @import '../../../styles/media-queries.scss';
.nav-back {
position: fixed;
top: 1.5rem;
left: 1rem;
width: 2rem;
height: 2rem;
transform: rotate(180deg);
cursor: pointer;
transition: all 0.3s ease;
&:hover,
&:focus {
scale: 1.3;
will-change: transform;
color: var(--green);
}
}
section { section {
@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@200;300;400;500;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@200;300;400;500;600;700;800&display=swap');
font-family: 'Epilogue', sans-serif; font-family: 'Epilogue', sans-serif;