From b34b18ad3797f5c2177460a8c57df585e721d0c7 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Sun, 27 Aug 2023 13:54:16 +0200
Subject: [PATCH] Navigation arrow top left for going to /brews list page

---
 src/routes/brews/[date]/+page.svelte | 59 +++++++++++++++++++++-------
 1 file changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/routes/brews/[date]/+page.svelte b/src/routes/brews/[date]/+page.svelte
index b217484..bfeb7ff 100644
--- a/src/routes/brews/[date]/+page.svelte
+++ b/src/routes/brews/[date]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Graph from '../../../lib/components/Graph.svelte';
+  import ArrowRight from '../../../lib/icons/ArrowRight.svelte';
   import IChartFrame from '../../../lib/interfaces/IChartFrame';
   let height: number;
 
@@ -19,12 +20,23 @@
   const wizards = brew.by.join(', ');
 </script>
 
+<a href="/brews" class="nav-back">
+  <ArrowRight />
+</a>
+
 <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" />
   </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>
 
     <div class="links">
@@ -57,7 +69,10 @@
       </tbody>
     </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" />
     </div>
 
@@ -66,17 +81,15 @@
 
     <div class="graph-container">
       {#if temperatureData && temperatureData?.length}
-        <div class="graph">
-          <h3>Temperature during fermentation</h3>
-          <Graph dataFrames="{temperatureData}" name="Temperature" hideTitle="{true}" />
-        </div>
-      {/if}
-
-      {#if humidityData && temperatureData?.length}
-        <div class="graph">
-          <h3>Humidity during carbonation</h3>
-          <Graph dataFrames="{humidityData}" name="Humidity" hideTitle="{true}" />
-        </div>
+      <div class="graph">
+        <h3>Temperature during fermentation</h3>
+        <Graph dataFrames="{temperatureData}" name="Temperature" hideTitle="{true}" />
+      </div>
+      {/if} {#if humidityData && temperatureData?.length}
+      <div class="graph">
+        <h3>Humidity during carbonation</h3>
+        <Graph dataFrames="{humidityData}" name="Humidity" hideTitle="{true}" />
+      </div>
       {/if}
     </div>
 
@@ -101,6 +114,24 @@
 <style lang="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 {
     @import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@200;300;400;500;600;700;800&display=swap');
     font-family: 'Epilogue', sans-serif;