Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MelissaFinanceiro: chart + projecao 50/50, lancamentos full-width

Browse Source 
Wrappa "Receita x Despesa" e "Projecao de Caixa" em .mf-cards-row
flex 50/50 lado a lado em desktop (alturas iguais via align-items:
stretch + body flex: 1 com scroll interno). "Ultimos lancamentos"
fica full-width abaixo.

Mobile empilha (column), chart wrap volta pra altura fixa 240px,
body sem scroll interno (.mf-body ja scrolla).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 14:04:59 -03:00
parent d8ce33f74f
commit ef4c4d0fac
1 changed files with 45 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaFinanceiro.vue
+45 -3
View File
@@ -295,8 +295,9 @@ onMounted(async () => {
</template>
</div>
<div class="mf-cards-row">
<!-- ═══ 2. Gráfico Receita × Despesa ════════════ -->
<div class="mf-card">
<div class="mf-card mf-card--chart">
<div class="mf-card__head">
<div class="mf-card__icon mf-card__icon--primary">
<i class="pi pi-chart-bar" />
@@ -320,7 +321,7 @@ onMounted(async () => {
</div>
<!-- ═══ 3. Projeção de Caixa ════════════════════ -->
<div class="mf-card">
<div class="mf-card mf-card--cashflow">
<div class="mf-card__head">
<div class="mf-card__icon mf-card__icon--primary">
<i class="pi pi-calendar" />
@@ -378,8 +379,10 @@ onMounted(async () => {
</div>
</div>
</div><!-- /.mf-cards-row -->
<!-- ═══ 4. Últimos lançamentos ══════════════════ -->
<div class="mf-card">
<div class="mf-card mf-card--recent">
<div class="mf-card__head">
<div class="mf-card__icon mf-card__icon--primary">
<i class="pi pi-list" />
@@ -671,6 +674,34 @@ onMounted(async () => {
border-color: var(--m-border);
}
/* ─── Row 50/50: Chart + Projeção lado a lado em desktop ─── */
.mf-cards-row {
display: flex;
flex-direction: row;
gap: 12px;
align-items: stretch;
}
.mf-cards-row > .mf-card {
flex: 1 1 50%;
min-width: 0;
display: flex;
flex-direction: column;
}
.mf-cards-row > .mf-card .mf-card__body {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.mf-cards-row > .mf-card--chart .mf-card__body {
display: flex;
flex-direction: column;
}
.mf-cards-row > .mf-card--chart .mf-chart-wrap {
flex: 1;
height: auto;
min-height: 240px;
}
/* ─── Card-base (Gráfico, Projeção, Lançamentos) ─── */
.mf-card {
background: var(--m-bg-soft);
@@ -854,5 +885,16 @@ onMounted(async () => {
order: -1;
margin-left: 0;
}
/* Row 50/50 empilha em mobile, com altura natural por card */
.mf-cards-row {
flex-direction: column;
}
.mf-cards-row > .mf-card .mf-card__body {
overflow-y: visible;
}
.mf-cards-row > .mf-card--chart .mf-chart-wrap {
height: 240px;
min-height: 240px;
}
}
</style>