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

better tablet layout

Browse Source
This commit is contained in:
Adrian Thompson
2020-09-11 11:53:05 +02:00
parent d5cf6d31ca
commit 2c9821d753
1 changed files with 57 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/VinlottisPage.vue
View File

@@ -17,9 +17,9 @@
<WinGraph class="win" /> <WinGraph class="win" />
</section> </section>
<TotalBought class="total-bought" /> <TotalBought class="total-bought" />
<Vipps class="vipps-icon" />
<Highscore class="highscore"/> <Highscore class="highscore"/>
<Wines class="wines-container" /> <Wines class="wines-container" />
<Vipps class="vipps-icon" />
</div> </div>
<Countdown :hardEnable="hardStart" @countdown="changeEnabled" /> <Countdown :hardEnable="hardStart" @countdown="changeEnabled" />
</div> </div>
@@ -107,51 +107,92 @@ export default {
} }
.vipps-icon{ .vipps-icon{
margin: auto; margin: 1em;
} }
@include tablet { @include tablet {
margin: 3em; margin: .5em;
.chart-container{ .chart-container {
display: flex; display: flex;
width: 100%; width: 100%;
} }
display: grid;
grid: auto-flow min-content / 1fr 1fr 1fr;
grid-template-areas: "top top top"
"middle-top middle-top middle-top"
"middle-bot-left middle-bot-left middle-bot-right"
"bot-left bot-right bot-right";
.header-and-notification {
grid-area: top;
}
.chart-container {
grid-area: middle-top;
}
.total-bought {
grid-area: middle-bot-left;
}
.highscore {
border-top: 1px solid rgb(237, 237, 237);
grid-area: bot-left;
}
.wines-container {
border-top: 1px solid rgb(237, 237, 237);
padding-left: 1em;
border-left: 1px solid rgb(237, 237, 237);
grid-area: bot-right;
}
.vipps-icon {
padding-left: 1em;
align-self: center;
grid-area: middle-bot-right;
border-left: 1px solid rgb(237, 237, 237);
}
} }
@include desktop { @include desktop {
display: grid; display: grid;
grid: auto-flow min-content / 1fr 1fr 1fr; grid: auto-flow min-content / .5fr 1.5fr 1fr;
grid-template-areas: "top top top" grid-template-areas: "top top top"
"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";
grid-gap: 1em; grid-gap: 1em;
align-items: center;
.header-and-notification { .header-and-notification {
grid-area: top; grid-area: top;
} }
.chart-container{ .chart-container {
grid-area: middle-top; grid-area: middle-top;
} }
.total-bought{ .total-bought {
grid-area: middle-bot; grid-area: middle-bot;
border-bottom: 1px solid rgb(237, 237, 237); border-bottom: 1px solid rgb(237, 237, 237);
} }
.highscore { .highscore {
border: none;
grid-area: bot-left; grid-area: bot-left;
} }
.wines-container{ .wines-container {
border: none;
grid-area: bot-right; grid-area: bot-right;
} }
.vipps-icon{ .vipps-icon {
grid-area: aside; grid-area: aside;
padding-left: 30px; padding-left: 3em;
border-left: 1px solid rgb(237, 237, 237); border-left: 1px solid rgb(237, 237, 237);
} }
} }
@@ -160,6 +201,12 @@ export default {
width: 70%; width: 70%;
max-width: 1800px; max-width: 1800px;
margin: auto; margin: auto;
.vipps-icon {
grid-area: aside;
padding-left: 6em;
border-left: 1px solid rgb(237, 237, 237);
}
} }
} }