Merge pull request #34 from KevinMidboe/enhancement/header-rework

Rework the banner

src/components/RegisterPage.vue

@@ -491,7 +491,7 @@ h2 {
   text-decoration: none;
   font-weight: bold;
   cursor: pointer;
-  border-bottom: 1px solid #ff5fff;
+  border-bottom: 1px solid $link-color;
 }
 
 hr {

src/components/RequestWine.vue

@@ -158,7 +158,7 @@ input[type="text"] {
     font-family: Arial;
     text-decoration: none;
     font-weight: bold;
-    border-bottom: 1px solid #ff5fff;
+    border-bottom: 1px solid $link-color;
     width: fit-content;
   }
 

src/components/TodaysPage.vue

@@ -33,6 +33,7 @@ export default {
 
 <style lang="scss" scoped>
 @import "./src/styles/media-queries";
+@import "./src/styles/variables";
 
 .wine-image {
   height: 250px;
@@ -110,7 +111,7 @@ a:visited {
   font-family: Arial;
   text-decoration: none;
   font-weight: bold;
-  border-bottom: 1px solid #ff5fff;
+  border-bottom: 1px solid $link-color;
   width: fit-content;
 }
 </style>

src/components/VinlottisPage.vue

@@ -48,7 +48,6 @@ import PurchaseGraph from "@/ui/PurchaseGraph";
 import TotalBought from "@/ui/TotalBought";
 import Highscore from "@/ui/Highscore";
 import WinGraph from "@/ui/WinGraph";
-import Banner from "@/ui/Banner";
 import Wines from "@/ui/Wines";
 import Vipps from "@/ui/Vipps";
 import Countdown from "@/ui/Countdown";
@@ -60,7 +59,6 @@ export default {
     TotalBought,
     Highscore,
     WinGraph,
-    Banner,
     Wines,
     Vipps,
     Countdown
@@ -241,7 +239,7 @@ h1 {
 
 .generator-link {
   font-weight: bold;
-  border-bottom: 1px solid #ff5fff;
+  border-bottom: 1px solid $link-color;
 }
 
 .win,

src/components/VirtualLotteryPage.vue

@@ -234,7 +234,7 @@ export default {
 
 .generator-link {
   font-weight: bold;
-  border-bottom: 1px solid #ff5fff;
+  border-bottom: 1px solid $link-color;
 }
 </style>
 

src/styles/banner.scss

@@ -1,147 +1,211 @@
 @import "./media-queries.scss";
+@import "./variables.scss";
 
+.top-banner{
+  display: grid;
+  grid-template-columns: 0.5fr 1fr 0.5fr;
+  grid-template-areas: "menu logo clock";
+  grid-gap: 1em;
+  align-items: center;
+  justify-items: center;
+  background-color: $primary;
+  -webkit-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
+  -moz-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
+  box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
+}
 
-// https://codepen.io/erikterwan/pen/EVzeRP
+.company-logo{
-@include mobile{
+  grid-area: logo;
-  #menuToggle
+}
-  {
-    display: block;
-    position: relative;
-    margin: 7px;
-    
-    z-index: 1;
-    
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  #menuToggle a
-  {
-    text-decoration: none;
-    color: #333333;
-    
-    transition: color 0.3s ease;
-  }
-
-
-  #menuToggle input
-  {
-    display: block;
-    width: 40px;
-    height: 32px;
-    position: absolute;
-    top: -7px;
-    left: -5px;
 
+.menu-toggle-container{
+  grid-area: menu;
+  color: #1e1e1e;
+  border-radius: 50% 50%;
+  z-index: 3;
+  width: 42px;
+  height: 42px;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 4px;
+  &:hover{
     cursor: pointer;
-    
-    opacity: 0; /* hide this */
-    z-index: 2; /* and place it over the hamburger */
-    
-    -webkit-touch-callout: none;
   }
 
-  /*
+  span{
-  * Just a quick hamburger
-  */
-  #menuToggle span
-  {
     display: block;
-    width: 33px;
-    height: 4px;
-    margin-bottom: 5px;
     position: relative;
-    
-    background: #333333;
     border-radius: 3px;
-    
+    height: 3px;
+    width: 18px;
+    background: #111;
     z-index: 1;
-    
     transform-origin: 4px 0px;
-    
+    transition: 
-    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+      transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
       background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
       opacity 0.55s ease;
   }
   
-  #menuToggle span:first-child
+  span:first-child{
-  {
     transform-origin: 0% 0%;
   }
 
-  #menuToggle span:nth-last-child(2)
+  span:nth-last-child(2){
-  {
     transform-origin: 0% 100%;
   }
 
-  /* 
+  &.open{
-  * Transform all the slices of hamburger
+    span{
-  * into a crossmark.
-  */
-  #menuToggle input:checked ~ span
-  {
       opacity: 1;
-    transform: rotate(45deg) translate(-2px, -1px);
+      transform: rotate(-45deg) translate(2px, -2px);
       background: #232323;
     }
 
-  /*
+    span:nth-last-child(2){
-  * But let's hide the middle one.
-  */
-  #menuToggle input:checked ~ span:nth-last-child(3)
-  {
       opacity: 0;
       transform: rotate(0deg) scale(0.2, 0.2);
     }
 
-  /*
+    span:nth-last-child(3){
-  * Ohyeah and the last one should go the other direction
+      transform: rotate(45deg) translate(3.5px, -2px);
-  */
+    }
-  #menuToggle input:checked ~ span:nth-last-child(2)
-  {
-    transform: rotate(-45deg) translate(0, -1px);
   }
 
-  /*
+  &.open{
-  * Make this absolute positioned
+    background: #fff;
-  * at the top left of the screen
-  */
-  #menu
-  {
-    position: absolute;
-    width: 100vw;
-    margin: -100px 0 0 -50px;
-    padding-bottom: 10px;
-    padding-top: 125px;
     
+  }
+}
+
+.menu{
+  position: fixed;
+  top: 0;
   background-color: $primary;
-    list-style-type: none;
+  width: 100%;
-    -webkit-font-smoothing: antialiased;
+  z-index: 2;
-    /* to stop flickering of text in safari */
+  overflow: hidden;
+  transition: max-height 0.5s ease-out;
+  height: 100vh;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: 3em;
 
-    transform-origin: 0% 0%;
+  &.collapsed{
-    transform: translate(-100%, 0);
+    max-height: 0%;
-    
-    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
   }
 
-  #menu li
+  a{
-  {
+    text-decoration: none;
-    padding: 10px 0;
-    font-size: 22px;
   }
 
-  /*
+  .single-route{
-  * And let's slide it in from the left
+    font-size: 3em;
-  */
+    outline: 0;
-  #menuToggle input:checked ~ ul
+    text-decoration: none;
-  {
+    color: #1e1e1e;
-    transform: none;
+    border-bottom: 4px solid transparent;
+    display: block;
+
+    &.open{
+      -webkit-animation: fadeInFromNone 3s ease-out;
+      -moz-animation: fadeInFromNone 3s ease-out;
+      -o-animation: fadeInFromNone 3s ease-out;
+      animation: fadeInFromNone 3s ease-out;
+    }
+
+    &:hover{
+      cursor: pointer;
+      border-color: $link-color;
+    }
   }
 }
 
-@include desktop{
+@-webkit-keyframes fadeInFromNone {
-  #menuToggle{
+  0% {
       display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+@-moz-keyframes fadeInFromNone {
+  0% {
+      display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+@-o-keyframes fadeInFromNone {
+  0% {
+      display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+@keyframes fadeInFromNone {
+  0% {
+      display: none;
+      opacity: 0;
+  }
+
+  10% {
+      display: block;
+      opacity: 0;
+  }
+
+  100% {
+      display: block;
+      opacity: 1;
+  }
+}
+
+.clock {
+  grid-area: clock;
+  text-decoration: none;
+  color: #333333;
+  display: flex;
+  font-family: Arial;
+  @include mobile {
+    font-size: 0.8em;
+    margin-right: 1rem;
+  }
+  h2 {
+    display: flex;
   }
 }

src/styles/global.scss

@@ -170,7 +170,7 @@ textarea {
 
 .vin-link {
   font-weight: bold;
-  border-bottom: 1px solid #ff5fff;
+  border-bottom: 1px solid $link-color;
   font-size: 1rem;
   margin-left: 15px;
 }

src/styles/variables.scss

@@ -15,3 +15,5 @@ $dark-yellow: #ecc31d;
 $light-red: #fbd7de;
 $red: #ef5878;
 $dark-red: #ec3b61;
+
+$link-color: #ff5fff;

src/ui/Banner.vue

@@ -1,26 +1,22 @@
 <template>
   <div class="top-banner">
     <!-- Mobile -->
-    <div id="menuToggle" >
+    <router-link to="/" class="company-logo">
-      <input type="checkbox" />
-      <span></span>
-      <span></span>
-      <span></span>
-      <ul id="menu">
-        <router-link v-for="(route, index) in routes" :key="index" :to="route.route">
-          <li>{{route.name}}</li>
-        </router-link>
-      </ul>
-    </div>
-    
-    <router-link to="/">
       <img src="/public/assets/images/knowit.svg" alt="knowit logo" />
     </router-link>
-    <div v-for="(route, index) in routes" :key="index" class="desktop">
+
-      <router-link :to="route.route" class="routes">
+    <a class="menu-toggle-container" aria-label="show-menu" @click="toggleMenu" :class="isOpen ? 'open' : 'collapsed'" >
-        {{route.name}}
+      <span class="menu-toggle"></span>
+      <span class="menu-toggle"></span>
+      <span class="menu-toggle"></span>
+    </a>
+
+    <nav class="menu" :class="isOpen ? 'open' : 'collapsed'" >
+      <router-link v-for="(route, index) in routes" :key="index" :to="route.route" class="menu-item-link" >
+        <a @click="toggleMenu" class="single-route" :class="isOpen ? 'open' : 'collapsed'">{{route.name}}</a>
       </router-link>
-    </div>
+    </nav>
+    
     <div class="clock">
       <h2 v-if="!fiveMinutesLeft || !tenMinutesOver">
         <span v-if="days > 0">{{ pad(days) }}:</span>
@@ -37,6 +33,7 @@
 export default {
   data() {
     return {
+      isOpen: false,
       nextLottery: null,
       days: 0,
       hours: 0,
@@ -70,6 +67,9 @@ export default {
     }
   },
   methods: {
+    toggleMenu(){
+      this.isOpen = this.isOpen ? false : true;
+    },
     pad: function(num) {
       if (num < 10) {
         return `0${num}`;
@@ -129,58 +129,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/media-queries.scss";
-@import "../styles/variables.scss";
 @import "../styles/banner.scss";
-
-@include mobile {
-  .desktop {
-    display: none;
-  }
-}
-
-@include desktop {
-  
-  .top-banner{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    width: calc(100% - 20px);
-    
-    .routes {
-      text-decoration: none;
-      color: #333333;
-    }
-  }
-}
-
-.top-banner {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: calc(100% - 20px);
-  padding: 5px 10px;
-  background-color: $primary;
-  -webkit-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
-  -moz-box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
-  box-shadow: 0px 0px 22px -8px rgba(0, 0, 0, 0.65);
-
-  .clock {
-    text-decoration: none;
-    color: #333333;
-    display: flex;
-    font-family: Arial;
-    margin-right: 2rem;
-    @include mobile {
-      font-size: 0.8em;
-      margin-right: 1rem;
-    }
-    h2 {
-      display: flex;
-    }
-  }
-}
-
 </style>

src/ui/Wine.vue

@@ -165,7 +165,7 @@ a:visited {
   font-family: Arial;
   text-decoration: none;
   font-weight: bold;
-  border-bottom: 1px solid #ff5fff;
+  border-bottom: 1px solid $link-color;
   width: fit-content;
 }
 

src/ui/Wines.vue

@@ -153,6 +153,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "./src/styles/variables";
 @import "../styles/media-queries.scss";
 .wine-window-outer {
   position: fixed;
@@ -261,7 +262,7 @@ ol {
   text-decoration: none;
   font-weight: bold;
   cursor: pointer;
-  border-bottom: 1px solid #ff5fff;
+  border-bottom: 1px solid $link-color;
 }
 
 .truncate {