Modified the canvas grid

This commit is contained in:
JKuijperM 2026-05-05 21:14:21 +02:00
parent dfedd64289
commit 496e563acc
2 changed files with 23 additions and 9 deletions

View File

@ -80,7 +80,7 @@ a.danger {
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-template-columns: repeat(2, 1fr);
gap: 20px
}
@ -89,15 +89,14 @@ a.danger {
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
}
.card-chart {
max-width: 300px;
}
.card-chart canvas {
width: 100% !important;
height: 220px !important;
height: 500px;
position: relative;
}
.chart-box {
@ -105,6 +104,19 @@ a.danger {
margin-bottom: 2rem;
}
.canvas-wrapper {
flex-grow: 1;
min-height: 0;
position: relative;
width: 100%;
}
.card-chart canvas {
display: block;
width: 100% !important;
height: 100% !important;
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

View File

@ -149,8 +149,10 @@
<div class="card card-chart">
<h3>{{ acc.name }}</h3>
<p><strong>Saldo actual:</strong> {{ acc.current_balance|floatformat:2 }} €</p>
<canvas id="accountChart{{ acc.id }}"></canvas>
<div class="canvas-wrapper">
<canvas id="accountChart{{ acc.id }}"></canvas>
</div>
</div>
{% endfor %}
</div>