tweaking chart sizing
This commit is contained in:
parent
38a9bed8f4
commit
39864d7c31
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user