feat: otimiza admin BI executive para mobile/responsivo
Adiciona 3 breakpoints progressivos (900px, 768px, 480px) com: - Touch targets min 44px em botões de filtro e granulação - Filtros empilhados verticalmente no mobile - KPIs: 5→3→2→1 colunas progressivamente - Tabelas com scroll horizontal touch-friendly - Trading terminal compacto em telas pequenas - Charts e gauges redimensionados por breakpoint Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
root
158
src/admin-bi.js
158
src/admin-bi.js
@@ -274,45 +274,139 @@ function buildAdminBIHTML(user) {
|
||||
border-radius: 16px; z-index: 10; font-size: 13px; color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
/* Responsive - Tablet */
|
||||
@media (max-width: 900px) {
|
||||
.trading-terminal { padding: 12px 16px; }
|
||||
.live-rate-bar { flex-wrap: wrap; gap: 10px; justify-content: center; }
|
||||
.live-rate-bar { flex-wrap: wrap; gap: 12px; justify-content: center; }
|
||||
.terminal-title { display: none; }
|
||||
.rate-pair-group { padding: 8px 12px; width: 100%; justify-content: center; }
|
||||
.live-rate-btn { min-width: 120px; padding: 8px 14px; flex: 1; }
|
||||
.live-rate-btn .rate-value { font-size: 18px; }
|
||||
.live-rate-time { width: 100%; text-align: center; }
|
||||
.hero-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.rate-pair-group { padding: 6px 10px; }
|
||||
.live-rate-btn { min-width: 100px; padding: 6px 12px; }
|
||||
.live-rate-btn .rate-value { font-size: 16px; }
|
||||
.rate-separator { display: none; }
|
||||
.hero-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.hero-grid-4 { grid-template-columns: repeat(2, 1fr); }
|
||||
.charts-row { grid-template-columns: 1fr; }
|
||||
.charts-row.equal { grid-template-columns: 1fr; }
|
||||
.charts-row.triple { grid-template-columns: 1fr 1fr; }
|
||||
.charts-row.triple > :last-child { grid-column: span 2; }
|
||||
.filter-divider { display: none; }
|
||||
.filter-bar { gap: 10px; }
|
||||
}
|
||||
|
||||
/* Responsive - Mobile */
|
||||
@media (max-width: 768px) {
|
||||
/* Trading terminal */
|
||||
.trading-terminal { padding: 10px 12px; }
|
||||
.live-rate-bar { gap: 8px; justify-content: center; }
|
||||
.rate-pair-group { padding: 8px 10px; width: 100%; justify-content: center; }
|
||||
.live-rate-btn { min-width: 0; flex: 1; padding: 8px 10px; }
|
||||
.live-rate-btn .rate-value { font-size: 18px; }
|
||||
.live-rate-btn .rate-type { font-size: 8px; }
|
||||
.rate-flags { font-size: 8px; }
|
||||
.live-rate-time { width: 100%; text-align: center; font-size: 9px; }
|
||||
|
||||
/* Filter bar - stack vertically */
|
||||
.filter-bar {
|
||||
padding: 14px 16px; gap: 10px;
|
||||
flex-direction: column; align-items: stretch;
|
||||
}
|
||||
.filter-bar-label { text-align: center; }
|
||||
.filter-presets { flex-wrap: wrap; justify-content: center; }
|
||||
.preset-btn { padding: 10px 14px; min-height: 44px; font-size: 13px; flex: 1; min-width: 70px; text-align: center; }
|
||||
.date-inputs {
|
||||
flex-wrap: wrap; justify-content: center; gap: 6px;
|
||||
}
|
||||
.date-inputs input[type="date"] { flex: 1; min-width: 130px; min-height: 44px; }
|
||||
.period-info { margin-left: 0; width: 100%; text-align: center; }
|
||||
|
||||
/* Hero KPIs */
|
||||
.hero-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.hero-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.hero-card { padding: 16px 18px; border-radius: 12px; }
|
||||
.hero-card:last-child { grid-column: span 2; }
|
||||
.hero-value { font-size: 22px; }
|
||||
.gran-selector { flex-wrap: wrap; }
|
||||
.hero-label { font-size: 10px; }
|
||||
.hero-sub { font-size: 11px; }
|
||||
|
||||
/* Charts - single column */
|
||||
.charts-row, .charts-row.equal, .charts-row.triple { grid-template-columns: 1fr; }
|
||||
.filter-bar { padding: 14px 16px; gap: 10px; }
|
||||
.filter-presets { flex-wrap: wrap; }
|
||||
.period-info { margin-left: 0; width: 100%; text-align: center; }
|
||||
.filter-divider { display: none; }
|
||||
.charts-row.triple > :last-child { grid-column: span 1; }
|
||||
.chart-card { padding: 18px; border-radius: 12px; }
|
||||
.chart-wrap { height: 250px; }
|
||||
|
||||
/* Revenue controls */
|
||||
.revenue-controls { flex-direction: column; align-items: stretch; }
|
||||
.gran-selector { flex-wrap: wrap; justify-content: center; }
|
||||
.gran-btn { padding: 10px 16px; min-height: 44px; flex: 1; min-width: 60px; text-align: center; }
|
||||
.revenue-status { text-align: center; }
|
||||
|
||||
/* Tables - horizontal scroll indicator */
|
||||
.chart-card:has(.data-table) { padding: 18px 0; }
|
||||
.chart-card:has(.data-table) > h3 { padding: 0 18px; }
|
||||
.data-table { font-size: 12px; }
|
||||
.data-table th { padding: 10px 10px; font-size: 10px; white-space: nowrap; }
|
||||
.data-table td { padding: 10px 10px; white-space: nowrap; }
|
||||
[style*="overflow-x:auto"], [style*="overflow:auto"] {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
/* Section titles */
|
||||
.section-title { font-size: 13px; margin-bottom: 12px; }
|
||||
|
||||
/* Metric / Gauge */
|
||||
.gauge-value { font-size: 40px; }
|
||||
.metric-card { padding: 16px; }
|
||||
|
||||
/* Netting */
|
||||
.netting-label { font-size: 12px; }
|
||||
.netting-value { font-size: 14px; }
|
||||
}
|
||||
|
||||
/* Responsive - Small Mobile */
|
||||
@media (max-width: 480px) {
|
||||
.trading-terminal { padding: 10px 12px; }
|
||||
.live-rate-bar { gap: 8px; flex-direction: column; align-items: center; }
|
||||
.rate-pair-group { padding: 10px; gap: 6px; }
|
||||
/* Trading terminal ultra-compact */
|
||||
.trading-terminal { padding: 8px 10px; }
|
||||
.live-rate-bar { flex-direction: column; align-items: center; gap: 6px; }
|
||||
.rate-pair-group { padding: 8px; gap: 4px; }
|
||||
.rate-pair-label { writing-mode: horizontal-tb; font-size: 10px; }
|
||||
.live-rate-btn { min-width: 110px; padding: 8px 12px; }
|
||||
.live-rate-btn .rate-value { font-size: 16px; }
|
||||
.live-rate-btn .rate-type { font-size: 8px; }
|
||||
.rate-flags { font-size: 9px; }
|
||||
.live-rate-time { font-size: 9px; }
|
||||
.hero-grid, .hero-grid-4 { grid-template-columns: 1fr; }
|
||||
.live-rate-btn .rate-type { font-size: 7px; }
|
||||
|
||||
/* Filter compact */
|
||||
.filter-bar { padding: 12px; }
|
||||
.preset-btn { padding: 8px 10px; font-size: 12px; min-height: 40px; }
|
||||
.date-inputs input[type="date"] { font-size: 12px; padding: 8px 10px; min-height: 40px; }
|
||||
|
||||
/* Hero - single column */
|
||||
.hero-grid, .hero-grid-4 { grid-template-columns: 1fr; gap: 10px; }
|
||||
.hero-card { padding: 14px 16px; }
|
||||
.hero-card:last-child { grid-column: span 1; }
|
||||
.hero-value { font-size: 20px; }
|
||||
.chart-card { padding: 16px; }
|
||||
.chart-wrap { height: 220px; }
|
||||
.chart-wrap.short { height: 180px; }
|
||||
.hero-badge { font-size: 10px; padding: 2px 8px; }
|
||||
|
||||
/* Charts compact */
|
||||
.chart-card { padding: 14px; }
|
||||
.chart-wrap { height: 200px; }
|
||||
.chart-wrap.short { height: 160px; }
|
||||
.chart-card h3 { font-size: 13px; }
|
||||
|
||||
/* Tables even more compact */
|
||||
.data-table { font-size: 11px; }
|
||||
.data-table th, .data-table td { padding: 8px 6px; }
|
||||
.gauge-value { font-size: 36px; }
|
||||
.data-table th { padding: 8px 6px; font-size: 9px; }
|
||||
.data-table td { padding: 8px 6px; }
|
||||
.data-table .rank { width: 26px; height: 26px; font-size: 10px; }
|
||||
|
||||
/* Gauge */
|
||||
.gauge-value { font-size: 32px; }
|
||||
.gauge-label { font-size: 11px; }
|
||||
|
||||
/* Granularity buttons */
|
||||
.gran-btn { padding: 8px 12px; font-size: 12px; min-height: 40px; }
|
||||
|
||||
/* Section titles */
|
||||
.section-title { font-size: 12px; letter-spacing: 0.5px; }
|
||||
.section-title .icon { width: 24px; height: 24px; font-size: 12px; }
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -476,12 +570,14 @@ ${buildHeader({ role: role, userName: user.nome, activePage: 'bi' })}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-card" style="overflow:auto;">
|
||||
<div class="chart-card">
|
||||
<h3>Ranking Agentes</h3>
|
||||
<table class="data-table">
|
||||
<thead><tr><th>#</th><th>Agente</th><th>Volume</th><th>Ops</th><th>Spread R$</th><th>Clientes</th></tr></thead>
|
||||
<tbody id="agentTableBody"><tr><td colspan="6" style="text-align:center;color:var(--text-muted);">Carregando...</td></tr></tbody>
|
||||
</table>
|
||||
<div style="overflow-x:auto;-webkit-overflow-scrolling:touch;">
|
||||
<table class="data-table">
|
||||
<thead><tr><th>#</th><th>Agente</th><th>Volume</th><th>Ops</th><th>Spread R$</th><th>Clientes</th></tr></thead>
|
||||
<tbody id="agentTableBody"><tr><td colspan="6" style="text-align:center;color:var(--text-muted);">Carregando...</td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user