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

added link to lottery and fixed flow on safari

Browse Source
This commit is contained in:
Adrian Thompson
2020-09-17 12:33:21 +02:00
parent 3f6b362d5a
commit a5abdfd002
1 changed files with 39 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/VinlottisPage.vue
View File

@@ -2,16 +2,19 @@
<div class="outer"> <div class="outer">
<div class="container"> <div class="container">
<section class="header-and-notification"> <section class="header-and-notification">
<h1 @click="startCountdown">Vinlotteri</h1> <h1 @click="startCountdown">Vinlotteri</h1>
<img <img
src="/public/assets/images/notification.svg" src="/public/assets/images/notification.svg"
alt="Notification-bell" alt="Notification-bell"
@click="requestNotificationAccess" @click="requestNotificationAccess"
class="notification-request-button" class="notification-request-button"
role="button" role="button"
v-if="notificationAllowed" v-if="notificationAllowed"
/> />
</section> </section>
<div class="to-lottery-container">
<a href="#/lottery" class="to-lottery">Vil du til lotteriet?<span class="vin-link">Trykk her</span></a>
</div>
<section class="chart-container"> <section class="chart-container">
<PurchaseGraph class="purchase" /> <PurchaseGraph class="purchase" />
<WinGraph class="win" /> <WinGraph class="win" />
@@ -102,12 +105,21 @@ h1 {
font-family: "knowit"; font-family: "knowit";
} }
.to-lottery{
color: #333;
text-decoration: none;
display: block;
text-align: center;
margin-bottom: 0;
}
.container{ .container{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.header-and-notification{ .header-and-notification{
display: flex; display: flex;
flex-direction: row;
margin: auto; margin: auto;
} }
@@ -123,13 +135,20 @@ h1 {
} }
display: grid; display: grid;
grid-template-areas: "top top top" grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto-flow min-content;
grid-template-areas: "top-top top-top top-top"
"top-bot top-bot top-bot"
"middle-top middle-top middle-top" "middle-top middle-top middle-top"
"middle-bot-left middle-bot-left middle-bot-right" "middle-bot-left middle-bot-left middle-bot-right"
"bot-left bot-right bot-right"; "bot-left bot-right bot-right";
.header-and-notification { .header-and-notification {
grid-area: top; grid-area: top-top;
}
.to-lottery-container{
grid-area: top-bot;
} }
.chart-container { .chart-container {
@@ -163,7 +182,10 @@ h1 {
@include desktop { @include desktop {
display: grid; display: grid;
grid-template-areas: "top top top" grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto-flow min-content;
grid-template-areas: "top-top top-top top-top"
"top-bot top-bot top-bot"
"middle-top middle-top middle-top" "middle-top middle-top middle-top"
"middle-bot middle-bot aside" "middle-bot middle-bot aside"
"bot-left bot-right aside"; "bot-left bot-right aside";
@@ -171,7 +193,11 @@ h1 {
align-items: center; align-items: center;
.header-and-notification { .header-and-notification {
grid-area: top; grid-area: top-top;
}
.to-lottery-container {
grid-area: top-bot;
} }
.chart-container { .chart-container {
@@ -206,9 +232,7 @@ h1 {
margin: auto; margin: auto;
.vipps-icon { .vipps-icon {
grid-area: aside;
padding-left: 6em; padding-left: 6em;
border-left: 1px solid rgb(237, 237, 237);
} }
} }
} }