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

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

Browse Source 
Rework the banner
This commit is contained in:
Adrian Thompson
2020-09-09 09:54:41 +02:00
committed by GitHub
parent a2fbbf0715 45d47924e9
commit 4e6121e618
11 changed files with 213 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/RegisterPage.vue
View File

@@ -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 {

2
src/components/RequestWine.vue
View File

@@ -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;
}

3
src/components/TodaysPage.vue
View File

@@ -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>

4
src/components/VinlottisPage.vue
View File

@@ -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,

2
src/components/VirtualLotteryPage.vue
View File

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

304
src/styles/banner.scss
View File

@@ -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
@include mobile{
#menuToggle
{
display: block;
position: relative;
margin: 7px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
.company-logo{
grid-area: logo;
}
#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;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
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: 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;
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
{
span:first-child{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
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;
&.open{
span{
opacity: 1;
transform: rotate(-45deg) translate(2px, -2px);
background: #232323;
}
span:nth-last-child(2){
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
span:nth-last-child(3){
transform: rotate(45deg) translate(3.5px, -2px);
}
}
/*
* 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;
&.open{
background: #fff;
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;
.menu{
position: fixed;
top: 0;
background-color: $primary;
width: 100%;
z-index: 2;
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;
&.collapsed{
max-height: 0%;
}
a{
text-decoration: none;
}
.single-route{
font-size: 3em;
outline: 0;
text-decoration: none;
color: #1e1e1e;
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;
}
}
}
@-webkit-keyframes fadeInFromNone {
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;
}
}

2
src/styles/global.scss
View File

@@ -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;
}

2
src/styles/variables.scss
View File

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

87
src/ui/Banner.vue
View File

@@ -1,26 +1,22 @@
<template>
<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="/">
<router-link to="/" class="company-logo">
<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}}
<a class="menu-toggle-container" aria-label="show-menu" @click="toggleMenu" :class="isOpen ? 'open' : 'collapsed'" >
<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>

2
src/ui/Wine.vue
View File

@@ -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;
}

3
src/ui/Wines.vue
View File

@@ -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 {