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

Styling to charts for better formatting of size for mobile.

Browse Source
This commit is contained in:
Kevin
2020-01-23 00:21:36 +01:00
parent f103547e6b
commit 2a34a3e421
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/ui/PurchaseGraph.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div> <div class="chart">
<canvas ref="purchase-chart" width="100" height="50"></canvas> <canvas ref="purchase-chart" width="100" height="50"></canvas>
<div ref="chartjsLegend" class="chartjsLegend"></div> <div ref="chartjsLegend" class="chartjsLegend"></div>
</div> </div>
@@ -74,6 +74,7 @@ export default {
type: "line", type: "line",
data: chartdata, data: chartdata,
options: { options: {
maintainAspectRatio: false,
title: { title: {
display: true, display: true,
text: "Antall kjøp" text: "Antall kjøp"
@@ -121,9 +122,14 @@ export default {
border-radius: 25px; border-radius: 25px;
} }
@include mobile { .chart {
canvas { height: 40vh;
@include mobile {
position: relative;
width: 90vw !important;
height: 50vh; height: 50vh;
margin-bottom: 2rem;
} }
} }
</style> </style>

14
src/ui/WinGraph.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div class="chart">
<canvas ref="win-chart" width="100" height="50"></canvas> <canvas ref="win-chart"></canvas>
</div> </div>
</template> </template>
@@ -64,6 +64,7 @@ export default {
type: "bar", type: "bar",
data: chartdata, data: chartdata,
options: { options: {
maintainAspectRatio: false,
title: { title: {
display: true, display: true,
text: "Antall vinn" text: "Antall vinn"
@@ -94,9 +95,14 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../styles/media-queries.scss"; @import "../styles/media-queries.scss";
@include mobile { .chart {
canvas { height: 40vh;
@include mobile {
position: relative;
width: 90vw !important;
height: 50vh; height: 50vh;
margin-bottom: 2rem;
} }
} }
</style> </style>