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

35
src/Vinlottis.vue
View File

@@ -1,7 +1,6 @@
<template>
<div class="app-container">
<banner v-if="!mobileView"/>
<MobileBanner v-if="mobileView" />
<banner :routes="routes"/>
<router-view />
<UpdateToast
v-if="showToast"
@@ -16,18 +15,38 @@
import ServiceWorkerMixin from "@/mixins/ServiceWorkerMixin";
import banner from "@/ui/Banner";
import UpdateToast from "@/ui/UpdateToast";
import MobileBanner from "@/ui/MobileBanner";
export default {
name: "vinlottis",
components: { banner, UpdateToast, MobileBanner },
components: { banner, UpdateToast },
props: {},
data() {
return {
showToast: false,
toastText: null,
refreshToast: false,
mobileView: 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: "/all-requested-wines"
// },
]
};
},
beforeMount(){
@@ -52,10 +71,6 @@ export default {
closeToast: function() {
this.showToast = false;
},
handleView(){
console.log(window.innerWidth <= 768)
this.mobileView = window.innerWidth <= 768;
}
}
};
</script>
@@ -84,8 +99,10 @@ body {
</style>
<style scoped>
.app-container {
background-color: white;
min-height: 100vh;
}
</style>

147
src/styles/banner.scss Normal file
View 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;
}
}

93
src/ui/Banner.vue
View File

@@ -1,9 +1,23 @@
<template>
<router-link to="/" class="link">
<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 to="/">
<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">
</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>
@@ -17,7 +31,6 @@
<h2 v-if="twoMinutesLeft || tenMinutesOver">Lotteriet er i gang!</h2>
</div>
</div>
</router-link>
</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;
}
}
.top-banner {
text-align: center;
@include desktop {
.top-banner{
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);
.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);
.__routes{
text-decoration: none;
color: #333333;
}
}
.clock {
.clock {
text-decoration: none;
color: #333333;
display: flex;
font-family: Arial;
font-size: 0.8em;
h2 {
display: flex;
}
}
}
</style>

108
src/ui/MobileBanner.vue
View File

@@ -1,108 +0,0 @@
<template>
<main>
<div class="top-banner">
<span class="burger-menu" @click="toggleShowMenu">
<svg viewBox="0 0 100 80" width="40" height="40">
<rect width="100" height="14"></rect>
<rect y="30" width="100" height="14"></rect>
<rect y="60" width="100" height="14"></rect>
</svg>
</span>
<router-link to="/" class="link">
<img src="/public/assets/images/knowit.svg" alt="knowit logo" />
</router-link>
</div>
<section v-if="toggleMenu" class="route-container">
<div v-for="(route, index) in routes" :key="index" class="__routes">
<router-link :to="route.route" class="_specific">
{{route.name}}
</router-link>
</div>
</section>
</main>
</template>
<script>
export default {
data(){
return {
toggleMenu: false,
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"
// },
]
}
},
methods:{
toggleShowMenu(){
this.toggleMenu = this.toggleMenu ? false : true
}
}
}
</script>
<style lang="scss" scoped>
@import "../styles/variables.scss";
.link {
text-decoration: none;
color: #333333;
}
.top-banner {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 0px;
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);
padding: 0px 10px;
img {
height: 23px;
}
.__routes{
text-decoration: none;
color: #333333;
}
}
.route-container{
background-color: $primary;
display: flex;
flex-direction: column;
.__routes{
margin: 10px;
._specific {
text-decoration: none;
color: #333333;
}
}
}
</style>