Skip to content

Commit 9438da9

Browse files
author
Thiago Ferreira
committed
Polish dashboard responsive layout
1 parent 1adb9ee commit 9438da9

2 files changed

Lines changed: 66 additions & 34 deletions

File tree

‎src/components/DashboardCards.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ function EquipmentKpiTable({ summary, t }) {
4040
};
4141

4242
return (
43-
<section className="card table-card dashboard-block">
43+
<section className="card table-card dashboard-block dashboard-block--kpi-table">
4444
<div className="card__head">
4545
<div>
4646
<p className="eyebrow">{t('dashboard.sections.kpisByEquipment')}</p>
@@ -306,7 +306,7 @@ export function DashboardCards({ summary }) {
306306

307307
return (
308308
<div className="dashboard-layout">
309-
<section className="card dashboard-block">
309+
<section className="card dashboard-block dashboard-block--overview">
310310
<div className="card__head">
311311
<div>
312312
<p className="eyebrow">{t('dashboard.sections.kpisOverview')}</p>
@@ -362,7 +362,7 @@ export function DashboardCards({ summary }) {
362362

363363
<EquipmentKpiTable summary={summary} t={t} />
364364

365-
<section className="card dashboard-block">
365+
<section className="card dashboard-block dashboard-block--codes">
366366
<div className="card__head">
367367
<div>
368368
<p className="eyebrow">{t('dashboard.sections.codesByEquipment')}</p>
@@ -390,7 +390,7 @@ export function DashboardCards({ summary }) {
390390
</div>
391391
</section>
392392

393-
<section className="card dashboard-block">
393+
<section className="card dashboard-block dashboard-block--activity">
394394
<div className="card__head">
395395
<div>
396396
<p className="eyebrow">{t('dashboard.sections.equipmentAndActivity')}</p>
@@ -426,7 +426,7 @@ export function DashboardCards({ summary }) {
426426
</div>
427427
</section>
428428

429-
<section className="card dashboard-block">
429+
<section className="card dashboard-block dashboard-block--physical">
430430
<div className="card__head">
431431
<div>
432432
<p className="eyebrow">{t('dashboard.sections.physicalIndicators')}</p>
@@ -457,7 +457,7 @@ export function DashboardCards({ summary }) {
457457
</div>
458458
</section>
459459

460-
<div className="dashboard-columns">
460+
<div className="dashboard-columns dashboard-columns--maintenance">
461461
<BarList
462462
title={t('dashboard.sections.maintenanceByEquipment')}
463463
items={summary.maintenanceByEquipment}
@@ -475,7 +475,7 @@ export function DashboardCards({ summary }) {
475475
/>
476476
</div>
477477

478-
<div className="dashboard-columns">
478+
<div className="dashboard-columns dashboard-columns--operations">
479479
<TargetBarList
480480
title={t('dashboard.sections.mealDaily')}
481481
items={summary.mealAdherenceByEquipment}

‎src/styles.css‎

Lines changed: 59 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
--enaex-line: #E3E6EA;
1313
--enaex-line-strong: #D2D6DB;
1414
--white: #FFFFFF;
15-
--off-white: #FFFFFF;
15+
--off-white: #F6F7F8;
1616
--gray-50: #FFFFFF;
1717
--gray-100: #F5F6F7;
1818
--gray-200: #E3E6EA;
@@ -55,7 +55,8 @@
5555
--enaex-chart-track: #EDEFF2;
5656

5757
/* Tipografia hero para KPIs de destaque */
58-
--enaex-hero-value: 2.25rem;
58+
--enaex-hero-value: 2.1rem;
59+
--app-max-width: 1760px;
5960
}
6061

6162
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -154,9 +155,16 @@ h3 { font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
154155
.status-chip--info { background: var(--blue-light); color: var(--blue); }
155156

156157
/* ── LAYOUT ────────────────────────────────────── */
157-
.app-frame { width: 100%; max-width: 1340px; margin: 0 auto; padding: var(--space-7) var(--space-7) 72px; }
158-
.app-frame--operator { max-width: 1200px; }
159-
.app-body { display: grid; grid-template-columns: 216px 1fr; gap: var(--space-7); align-items: start; }
158+
.app-frame {
159+
display: grid;
160+
gap: var(--space-5);
161+
width: 100%;
162+
max-width: var(--app-max-width);
163+
margin: 0 auto;
164+
padding: var(--space-5) var(--space-7) 72px;
165+
}
166+
.app-frame--operator { max-width: 1280px; }
167+
.app-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
160168
.app-body--client { grid-template-columns: 1fr; }
161169
.app-main { min-width: 0; }
162170

@@ -207,7 +215,7 @@ h3 { font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
207215
.nav-item.is-active small { color: rgba(255,255,255,0.5); }
208216

209217
/* ── PAGE ──────────────────────────────────────── */
210-
.page-stack { display: grid; gap: var(--space-5); }
218+
.page-stack { display: grid; gap: var(--space-4); }
211219

212220
/* Assinatura Enaex: barra vermelha fina abaixo do título das seções */
213221
.card__head h2,
@@ -233,8 +241,8 @@ h3 { font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
233241
.card {
234242
background: var(--white);
235243
border: 1px solid var(--border);
236-
border-radius: var(--radius-lg);
237-
box-shadow: var(--shadow-sm);
244+
border-radius: var(--radius-md);
245+
box-shadow: var(--shadow-xs);
238246
}
239247
.card--shell { background: var(--white); }
240248

@@ -360,6 +368,7 @@ h3 { font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
360368
.dashboard-filters__controls, .form-actions, .export-actions,
361369
.table-actions, .entity-actions, .header-actions,
362370
.fleet-map__summary, .fleet-map__legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
371+
.dashboard-filters__controls label { width: 170px; }
363372

364373
.dashboard-filters__controls label, .filters-grid label,
365374
.form-grid label, .form-grid--two label,
@@ -495,11 +504,13 @@ input::placeholder, textarea::placeholder { color: var(--gray-400); }
495504
.filter-chip__clear:hover { background: var(--white); color: var(--enaex-red); }
496505

497506
/* ── STAT CARDS ────────────────────────────────── */
498-
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
507+
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
499508
.stats-grid--compact { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
500509
.stat-card {
501510
display: grid;
502511
gap: var(--space-1);
512+
align-content: start;
513+
min-height: 118px;
503514
border-radius: var(--radius-md);
504515
border: 1px solid var(--border-light);
505516
border-top: 2px solid var(--enaex-line);
@@ -508,7 +519,7 @@ input::placeholder, textarea::placeholder { color: var(--gray-400); }
508519
transition: box-shadow 140ms ease, transform 140ms ease;
509520
}
510521
.stat-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
511-
.stat-card strong { color: var(--enaex-gray); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
522+
.stat-card strong { color: var(--enaex-gray); font-size: 1.45rem; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
512523
.stat-card p { color: var(--gray-500); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
513524
/* Hero: KPI principal, valor grande em vermelho Enaex (padrão Sismografia) */
514525
.stat-card--hero { border-top-color: var(--enaex-red); }
@@ -534,18 +545,27 @@ input::placeholder, textarea::placeholder { color: var(--gray-400); }
534545
.entity-actions { justify-content: flex-end; }
535546

536547
/* ── DASHBOARD ─────────────────────────────────── */
537-
.dashboard-layout { gap: var(--space-4); }
538-
.dashboard-columns { grid-template-columns: repeat(2, 1fr); }
539-
.dashboard-pie-grid--dense { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
540-
.dashboard-pie-grid--two { grid-template-columns: repeat(2, 1fr); }
548+
.dashboard-filters { padding: var(--space-5) var(--space-6); }
549+
.dashboard-layout {
550+
display: grid;
551+
grid-template-columns: repeat(12, minmax(0, 1fr));
552+
gap: var(--space-4);
553+
align-items: start;
554+
}
555+
.dashboard-layout > .dashboard-block,
556+
.dashboard-layout > .dashboard-columns { grid-column: 1 / -1; }
557+
.dashboard-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
558+
.dashboard-pie-grid--dense { grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); }
559+
.dashboard-pie-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
560+
.dashboard-block--activity { grid-column: 1 / -1; }
541561

542-
.pie-chart-card { overflow: hidden; }
543-
.pie-chart-card__body { display: grid; grid-template-columns: 172px 1fr; gap: var(--space-6); align-items: center; }
562+
.pie-chart-card { overflow: hidden; min-width: 0; }
563+
.pie-chart-card__body { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-5); align-items: center; }
544564
.pie-chart-card__figure { display: grid; place-items: center; }
545565
.pie-chart-card__ring {
546566
display: grid;
547567
place-items: center;
548-
width: 156px;
568+
width: 144px;
549569
aspect-ratio: 1;
550570
padding: 15px;
551571
border-radius: 50%;
@@ -569,7 +589,7 @@ input::placeholder, textarea::placeholder { color: var(--gray-400); }
569589
.pie-chart-card__legend { display: grid; gap: 4px; }
570590
.pie-chart-card__legend-item {
571591
display: grid;
572-
grid-template-columns: 10px 1fr auto;
592+
grid-template-columns: 10px minmax(0, 1fr) auto;
573593
align-items: center;
574594
gap: var(--space-3);
575595
padding: 7px 10px;
@@ -579,20 +599,24 @@ input::placeholder, textarea::placeholder { color: var(--gray-400); }
579599
transition: border-color 120ms ease, background 120ms ease;
580600
}
581601
.pie-chart-card__legend-item:hover { border-color: var(--border); background: var(--gray-50); }
602+
.pie-chart-card__legend-meta { min-width: 0; }
603+
.pie-chart-card__legend-meta strong,
604+
.pie-chart-card__legend-meta small { overflow-wrap: anywhere; }
582605
.pie-chart-card__swatch { width: 10px; height: 10px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(23, 31, 38, 0.06); }
583606
.pie-chart-card__percent { color: var(--enaex-gray); font-weight: 700; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
584607
.pie-chart-card__footnote { margin-top: var(--space-3); color: var(--gray-400); font-size: 0.72rem; }
585-
.pie-chart-card--compact .pie-chart-card__body { grid-template-columns: 1fr; gap: var(--space-4); justify-items: center; }
608+
.pie-chart-card--compact .pie-chart-card__body { grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-5); justify-items: stretch; }
609+
.pie-chart-card--compact .pie-chart-card__figure { align-self: start; }
586610
.pie-chart-card--compact .pie-chart-card__legend { width: 100%; }
587611

588612
/* ── EQUIPMENT STATUS ──────────────────────────── */
589613
.equipment-status-list { display: grid; gap: 4px; }
590-
.equipment-status-item { display: grid; grid-template-columns: 1.25fr 1fr 0.8fr auto; align-items: center; gap: 8px; }
614+
.equipment-status-item { display: grid; grid-template-columns: minmax(120px, 1.25fr) minmax(160px, 1fr) minmax(110px, 0.8fr) auto; align-items: center; gap: 8px; }
591615
.equipment-status-item p { margin-top: 1px; }
592616

593617
/* ── BAR / STACKED / TARGET ────────────────────── */
594618
.bar-list, .stacked-list, .target-list { display: grid; gap: var(--space-2); }
595-
.bar-list__item, .target-list__item { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(120px, 1fr) auto auto; align-items: center; gap: var(--space-4); }
619+
.bar-list__item, .target-list__item { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(140px, 1fr) minmax(112px, auto) auto; align-items: center; gap: var(--space-4); }
596620
.bar-list__track, .target-list__track, .stacked-list__track { overflow: hidden; position: relative; min-height: 8px; border-radius: 999px; background: var(--enaex-chart-track); }
597621
.bar-list__track span, .target-list__track span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--enaex-chart-neutral); transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1); }
598622
/* Primeiro item da lista sempre em vermelho — foco visual no maior valor */
@@ -613,8 +637,8 @@ input::placeholder, textarea::placeholder { color: var(--gray-400); }
613637
.stacked-list__meta { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
614638

615639
/* ── FLEET MAP ─────────────────────────────────── */
616-
.fleet-map { display: grid; grid-template-columns: 1fr 260px; gap: var(--space-3); }
617-
.fleet-map__canvas { position: relative; overflow: hidden; min-height: 360px; border-radius: var(--radius-md); background: var(--gray-100); }
640+
.fleet-map { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); }
641+
.fleet-map__canvas { position: relative; overflow: hidden; min-height: 340px; border-radius: var(--radius-md); background: var(--gray-100); }
618642
.fleet-map__frame, .fleet-map__overlay, .fleet-map__veil, .fleet-map__blocker { position: absolute; inset: 0; }
619643
.fleet-map__frame { width: 100%; height: 100%; border: 0; filter: grayscale(1) brightness(1.04) contrast(0.9); }
620644
.fleet-map__veil, .fleet-map__blocker { pointer-events: none; }
@@ -643,15 +667,15 @@ input::placeholder, textarea::placeholder { color: var(--gray-400); }
643667

644668
/* ── TABLE ─────────────────────────────────────── */
645669
.records-table { width: 100%; border-collapse: collapse; }
646-
.records-table th, .records-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: top; }
670+
.records-table th, .records-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: top; }
647671
.records-table th { color: var(--gray-500); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--gray-50); position: sticky; top: 0; }
648672
.records-table tbody tr { transition: background 100ms ease; }
649673
.records-table tbody tr:hover { background: var(--gray-50); }
650674
.records-table td strong, .records-table td small { display: block; }
651675
.records-table td small { margin-top: 1px; }
652676
.dashboard-kpi-table__total td { background: var(--gray-50); border-top: 1px solid var(--border); }
653677
.dashboard-kpi-table__total td strong { color: var(--enaex-gray); }
654-
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); }
678+
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); max-width: 100%; }
655679
.table-footnote { margin-top: var(--space-2); color: var(--gray-400); font-size: 0.72rem; }
656680
.readonly-pill span, .form-note p, .equipment-status-item small,
657681
.stacked-list__value small, .target-list__label small, .bar-list__label small { color: var(--gray-500); }
@@ -663,6 +687,10 @@ input::placeholder, textarea::placeholder { color: var(--gray-400); }
663687
/* ── RESPONSIVE ────────────────────────────────── */
664688
@media (max-width: 1240px) {
665689
.app-body { grid-template-columns: 188px 1fr; gap: var(--space-5); }
690+
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
691+
.dashboard-pie-grid--dense { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
692+
.pie-chart-card--compact .pie-chart-card__body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
693+
.pie-chart-card--compact .pie-chart-card__legend { width: 100%; }
666694
}
667695

668696
@media (max-width: 1080px) {
@@ -677,8 +705,10 @@ input::placeholder, textarea::placeholder { color: var(--gray-400); }
677705
.page-banner, .operator-topbar { flex-direction: column; align-items: flex-start; }
678706
.operator-live-bar, .form-grid, .filters-grid { grid-template-columns: repeat(2, 1fr); }
679707
.equipment-status-item, .bar-list__item, .target-list__item { grid-template-columns: 1fr; }
680-
.pie-chart-card__body { justify-items: center; text-align: center; }
708+
.pie-chart-card__body,
709+
.pie-chart-card--compact .pie-chart-card__body { justify-items: center; text-align: center; }
681710
.pie-chart-card__legend { width: 100%; }
711+
.dashboard-filters__controls label { width: min(100%, 180px); }
682712
}
683713

684714
@media (max-width: 820px) {
@@ -690,7 +720,9 @@ input::placeholder, textarea::placeholder { color: var(--gray-400); }
690720
.nav-list { grid-auto-flow: row; }
691721
.nav-item { min-width: 0; }
692722
.operator-live-bar, .stats-grid, .stats-grid--compact, .form-grid,
693-
.form-grid--two, .filters-grid, .mini-form, .stacked-list__meta { grid-template-columns: 1fr; }
723+
.form-grid--two, .filters-grid, .mini-form, .stacked-list__meta,
724+
.dashboard-pie-grid--dense { grid-template-columns: 1fr; }
725+
.dashboard-filters__controls label { width: 100%; }
694726
.mini-form input:last-of-type, .mini-form button, .toggle-field--inline { grid-column: auto; }
695727
.card__head { grid-template-columns: 1fr; }
696728
.records-table, .records-table thead, .records-table tbody,

0 commit comments

Comments
 (0)