KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

reworked header to be one component scaling on css properties

Browse Source
This commit is contained in:
Adrian Thompson
2020-09-02 12:52:45 +02:00
parent e86f956b03
commit e481b6a812
4 changed files with 238 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/ui/Banner.vue
View File

@@ -1,23 +1,36 @@
<template>
<router-link to="/" class="link">
<div class="top-banner">
<img src="/public/assets/images/knowit.svg" alt="knowit logo" />
<div v-for="(route, index) in routes" :key="index" >
<router-link :to="route.route" class="__routes">
{{route.name}}
<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>
</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>
</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>
@@ -34,30 +47,14 @@ export default {
code: "38384040373937396665",
codeDone: "",
interval: null,
routes: [
{
name: "Dagens viner",
route: "/dagens/"
},
{
name: "History",
route: "/history/"
},
{
name: "Lotteriet",
route: "/lottery/game/"
},
// {
// name: "Foreslå vin",
// route: "/request"
// },
// {
// name: "Foreslåtte viner",
// route: "/all-requested-wines"
// },
]
};
},
props: {
routes: {
required: true,
type: Array
}
},
mounted() {
this.initialize(), this.countdown();
},
@@ -150,40 +147,52 @@ export default {
<style lang="scss" scoped>
@import "../styles/media-queries.scss";
@import "../styles/variables.scss";
@import "../styles/banner.scss";
.link {
text-decoration: none;
color: #333333;
@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);
.__routes{
.clock {
text-decoration: none;
color: #333333;
display: flex;
font-family: Arial;
font-size: 0.8em;
h2 {
display: flex;
}
}
}
.clock {
text-decoration: none;
color: #333333;
display: flex;
font-family: Arial;
h2 {
display: flex;
}
}
</style>