tweaking chart sizing

This commit is contained in:
Andy Pack 2022-11-13 21:44:02 +00:00
parent 38a9bed8f4
commit 39864d7c31
Signed by: sarsoo
GPG Key ID: A55BA3536A5E0ED7
2 changed files with 10 additions and 8 deletions

View File

@ -31,8 +31,10 @@ $shadow-color: #1e1e1e;
.chart-card { .chart-card {
// width: 500px; // width: 500px;
width: 100%; margin-top: 10px;
max-width: max-content; margin-bottom: 10px;
// width: 100%;
// max-width: max-content;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
@ -50,10 +52,6 @@ $shadow-color: #1e1e1e;
width: 250px; width: 250px;
} }
.chart-card {
width: 500px;
}
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
@ -61,6 +59,10 @@ $shadow-color: #1e1e1e;
min-width: 200px; min-width: 200px;
max-width: 500px; max-width: 500px;
} }
.chart-card {
width: 500px;
}
} }
.spotify-logo { .spotify-logo {

View File

@ -28,7 +28,7 @@ export let PlayCountChartCard: Vue.Component = {
}, },
template: template:
` `
<div class="card info-card chart-card"> <div class="chart-card card">
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<canvas :id="chartId"></canvas> <canvas :id="chartId"></canvas>
<lastfm-logo :link="link" /> <lastfm-logo :link="link" />
@ -89,7 +89,7 @@ export let CombinedPlayCountChartCard: Vue.Component = {
}, },
template: template:
` `
<div class="card info-card chart-card"> <div class="chart-card card">
<canvas :id="chartId"></canvas> <canvas :id="chartId"></canvas>
<lastfm-logo :link="link" /> <lastfm-logo :link="link" />
</div> </div>