Merge pull request #25 from KevinMidboe/feat/navigation-in-header
Add navigation to the banner
This commit is contained in:
Adrian Thompson
GitHub
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<banner />
|
||||
<banner :routes="routes"/>
|
||||
<router-view />
|
||||
<UpdateToast
|
||||
v-if="showToast"
|
||||
@@ -24,7 +24,29 @@ export default {
|
||||
return {
|
||||
showToast: false,
|
||||
toastText: null,
|
||||
refreshToast: false
|
||||
refreshToast: false,
|
||||
routes: [
|
||||
{
|
||||
name: "Dagens viner",
|
||||
route: "/dagens/"
|
||||
},
|
||||
{
|
||||
name: "Historie",
|
||||
route: "/history/"
|
||||
},
|
||||
{
|
||||
name: "Lotteriet",
|
||||
route: "/lottery/game/"
|
||||
},
|
||||
{
|
||||
name: "Foreslå vin",
|
||||
route: "/request"
|
||||
},
|
||||
{
|
||||
name: "Foreslåtte viner",
|
||||
route: "/requested-wines"
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -45,7 +67,7 @@ export default {
|
||||
methods: {
|
||||
closeToast: function() {
|
||||
this.showToast = false;
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
147
src/styles/banner.scss
Normal file
147
src/styles/banner.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
@import "./media-queries.scss";
|
||||
|
||||
|
||||
// https://codepen.io/erikterwan/pen/EVzeRP
|
||||
@include mobile{
|
||||
#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;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
opacity: 0; /* hide this */
|
||||
z-index: 2; /* and place it over the hamburger */
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Just a quick hamburger
|
||||
*/
|
||||
#menuToggle span
|
||||
{
|
||||
display: block;
|
||||
width: 33px;
|
||||
height: 4px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
|
||||
background: #333333;
|
||||
border-radius: 3px;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
transform-origin: 4px 0px;
|
||||
|
||||
transition: 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
|
||||
{
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
#menuToggle span:nth-last-child(2)
|
||||
{
|
||||
transform-origin: 0% 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Transform all the slices of hamburger
|
||||
* into a crossmark.
|
||||
*/
|
||||
#menuToggle input:checked ~ span
|
||||
{
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) translate(-2px, -1px);
|
||||
background: #232323;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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);
|
||||
}
|
||||
|
||||
/*
|
||||
* Ohyeah and the last one should go the other direction
|
||||
*/
|
||||
#menuToggle input:checked ~ span:nth-last-child(2)
|
||||
{
|
||||
transform: rotate(-45deg) translate(0, -1px);
|
||||
}
|
||||
|
||||
/*
|
||||
* Make this absolute positioned
|
||||
* at the top left of the screen
|
||||
*/
|
||||
#menu
|
||||
{
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
margin: -100px 0 0 -50px;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 125px;
|
||||
|
||||
background-color: $primary;
|
||||
list-style-type: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* to stop flickering of text in safari */
|
||||
|
||||
transform-origin: 0% 0%;
|
||||
transform: translate(-100%, 0);
|
||||
|
||||
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
|
||||
}
|
||||
|
||||
#menu li
|
||||
{
|
||||
padding: 10px 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/*
|
||||
* And let's slide it in from the left
|
||||
*/
|
||||
#menuToggle input:checked ~ ul
|
||||
{
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop{
|
||||
#menuToggle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,18 +1,36 @@
|
||||
<template>
|
||||
<router-link to="/" class="link">
|
||||
<div class="top-banner">
|
||||
<img src="/public/assets/images/knowit.svg" alt="knowit logo" />
|
||||
<div class="clock">
|
||||
<h2 v-if="!fiveMinutesLeft || !tenMinutesOver">
|
||||
<span v-if="days > 0">{{ pad(days) }}:</span>
|
||||
<span>{{ pad(hours) }}</span>:
|
||||
<span>{{ pad(minutes) }}</span>:
|
||||
<span>{{ pad(seconds) }}</span>
|
||||
</h2>
|
||||
<h2 v-if="twoMinutesLeft || tenMinutesOver">Lotteriet er i gang!</h2>
|
||||
</div>
|
||||
<div class="top-banner">
|
||||
<!-- Mobile -->
|
||||
<div id="menuToggle" >
|
||||
<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>
|
||||
|
||||
<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">
|
||||
{{route.name}}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="clock">
|
||||
<h2 v-if="!fiveMinutesLeft || !tenMinutesOver">
|
||||
<span v-if="days > 0">{{ pad(days) }}:</span>
|
||||
<span>{{ pad(hours) }}</span>:
|
||||
<span>{{ pad(minutes) }}</span>:
|
||||
<span>{{ pad(seconds) }}</span>
|
||||
</h2>
|
||||
<h2 v-if="twoMinutesLeft || tenMinutesOver">Lotteriet er i gang!</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -25,12 +43,15 @@ export default {
|
||||
minutes: 0,
|
||||
seconds: 0,
|
||||
distance: 0,
|
||||
enabled: false,
|
||||
code: "38384040373937396665",
|
||||
codeDone: "",
|
||||
interval: null
|
||||
interval: null,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
routes: {
|
||||
required: true,
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initialize(), this.countdown();
|
||||
},
|
||||
@@ -55,19 +76,6 @@ export default {
|
||||
}
|
||||
return num;
|
||||
},
|
||||
listenerFunction: function(event) {
|
||||
this.codeDone += event.keyCode;
|
||||
if (this.code.substring(0, this.codeDone.length) == this.codeDone) {
|
||||
if (this.code == this.codeDone && !this.enabled) {
|
||||
this.enabled = true;
|
||||
this.initialize();
|
||||
this.countdown();
|
||||
this.codeDone = "";
|
||||
}
|
||||
} else {
|
||||
this.codeDone = "";
|
||||
}
|
||||
},
|
||||
initialize: function() {
|
||||
let d = new Date();
|
||||
let dayOfLottery = __DATE__;
|
||||
@@ -115,7 +123,7 @@ export default {
|
||||
this.initialize();
|
||||
}
|
||||
this.interval = setTimeout(this.countdown, 500);
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -123,41 +131,56 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/media-queries.scss";
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/banner.scss";
|
||||
|
||||
.link {
|
||||
text-decoration: none;
|
||||
@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 {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: calc(100% - 80px);
|
||||
margin-top: 0px;
|
||||
padding: 0px 40px;
|
||||
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);
|
||||
|
||||
@include mobile {
|
||||
padding: 0px 40px;
|
||||
|
||||
> img {
|
||||
height: 23px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.clock {
|
||||
text-decoration: none;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
font-family: Arial;
|
||||
h2 {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user