lzc256
/
AquaDX
mirror of https://github.com/hykilpikonna/AquaDX
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

[S] Responsive chart

pull/10/head
Azalea 2024-02-12 04:49:02 -05:00
parent ac4c66a1f7
commit 97794ce7c5
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
AquaNet/src/pages/UserHome.svelte
View File

@ -64,6 +64,8 @@
</div> </div>
<div class="trend"> <div class="trend">
<!-- ChartJS cannot be fully responsive unless there is a parent div that's independent from its size and helps it determine its size -->
<div class="chartjs-box-reference">
<Line data={{ <Line data={{
datasets: [ datasets: [
{ {
@ -77,6 +79,7 @@
] ]
}} options={CHARTJS_OPT} /> }} options={CHARTJS_OPT} />
</div> </div>
</div>
<div class="info-bottom"> <div class="info-bottom">
{#each d.user.ranks as r} {#each d.user.ranks as r}
@ -259,6 +262,12 @@ $gap: 20px
width: 100% width: 100%
max-width: 790px max-width: 790px
position: relative
> .chartjs-box-reference
position: absolute
inset: 0
@media (max-width: $w-mobile) @media (max-width: $w-mobile)
flex-direction: column flex-direction: column
max-height: unset max-height: unset