From 06625275c4acf4fb4a55710369907c88582c839c Mon Sep 17 00:00:00 2001 From: iscarelli Date: Thu, 11 Jun 2026 21:09:01 -0300 Subject: [PATCH] =?UTF-8?q?feat(ux):=20listas=20responsivas=20em=20cart?= =?UTF-8?q?=C3=B5es=20no=20celular=20(v1.36.1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tabelas de itens viram cartões empilhados em telas ≤576px (sem rolagem horizontal), via classe .sc-stack + data-label e um único bloco @media; desktop inalterado. Toolbars e barras de ação quebram em linha (flex-wrap), cartões de login/2FA passam a max-width com margem lateral, e toasts/alertas ganham teto de largura na viewport. Co-Authored-By: Claude Opus 4.8 --- CHANGELOG.md | 23 ++++++++++++++ VERSION | 2 +- static/spool.css | 45 +++++++++++++++++++++++++++ templates/admin/backup.html | 10 +++--- templates/admin/update.html | 2 +- templates/admin/users.html | 10 +++--- templates/base.html | 4 +-- templates/dashboard.html | 26 ++++++++-------- templates/filaments/detail.html | 18 +++++------ templates/filaments/list.html | 22 ++++++------- templates/login.html | 4 +-- templates/login_2fa.html | 4 +-- templates/reports/by_location.html | 8 ++--- templates/reports/by_material.html | 20 ++++++------ templates/reports/label_queue.html | 16 +++++----- templates/reports/low_stock.html | 16 +++++----- templates/reports/weight_history.html | 20 ++++++------ templates/search.html | 26 ++++++++-------- templates/spool_models/list.html | 12 +++---- templates/spools/detail.html | 18 +++++------ templates/spools/list.html | 20 ++++++------ 21 files changed, 197 insertions(+), 129 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d39bdcc..1fa6f83 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,29 @@ Versioning follows [SemVer](https://semver.org/): **MAJOR.MINOR.PATCH** --- +## [1.36.1] — 2026-06-11 + +Responsividade no celular. A base já era mobile-first (Bootstrap 5.3, navbar +colapsável, formulários em grid), mas as **listas eram tabelas largas** que rolavam +na horizontal — ruins de ler no telefone — e algumas barras de ação/cabeçalho +estouravam a tela. Só markup/CSS; o desktop não muda. + +### Changed +- **Listas viram cartões empilhados no celular (≤576px).** Toda tabela de itens + (Spools, Filamentos, Fila de Etiquetas, Estoque Baixo, Relatórios por + Material/Local, Histórico de Pesagens, Carretéis Vazios, Busca, Usuários, Backups, + além dos históricos nos detalhes) agora vira um cartão por linha com `rótulo: valor` + — **sem rolagem horizontal**. No desktop continua tabela. Implementado com um único + bloco `@media (max-width:576px)` sobre a classe `.sc-stack` + `data-label` nas + células; o `` é ocultado no celular. +- **Barras de ferramentas e de ações quebram em linha** (`flex-wrap`) nas páginas de + lista e no detalhe do spool, em vez de espremer/transbordar em telas estreitas. +- **Cartões de login e 2FA** passam de largura fixa (`360px`) para + `max-width:360px` com margem lateral, não colando mais nas bordas em telas de + 320–375px. +- **Toasts e alertas** ganham `max-width:calc(100vw - 2rem)` para não vazar a + largura da viewport no celular. + ## [1.36.0] — 2026-06-10 Endurecimento de segurança a partir de um teste externo (caixa-preta). Vários diff --git a/VERSION b/VERSION index 39fc130..f107550 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.36.0 +1.36.1 diff --git a/static/spool.css b/static/spool.css index d7923c0..e545e66 100644 --- a/static/spool.css +++ b/static/spool.css @@ -225,6 +225,51 @@ h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; } border-top-right-radius: 10px; } +/* ── Tabelas viram cartões no celular (.sc-stack) ─────────────────────────── + No desktop a tabela é normal. Em telas ≤576px cada vira um cartão e cada + mostra "rótulo: valor" via data-label. Células sem data-label (donut, ID, + ações) ocupam a linha inteira; donut+ID compartilham a linha de cabeçalho via + .sc-stack-head. */ +@media (max-width: 576px) { + table.sc-stack thead { display: none; } + table.sc-stack, table.sc-stack tbody { display: block; width: 100%; } + table.sc-stack tr { + display: block; + border: 1px solid var(--sc-border); + border-radius: 10px; + padding: .5rem .75rem; + margin: .6rem; + } + table.sc-stack td { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 1rem; + border: none; + padding: .2rem 0; + text-align: right; + } + table.sc-stack td::before { + content: attr(data-label); + font-weight: 600; + color: var(--sc-text-muted); + text-align: left; + white-space: nowrap; + } + /* células sem rótulo: linha inteira, sem "rótulo:" */ + table.sc-stack td:not([data-label]) { display: block; text-align: left; } + table.sc-stack td:not([data-label])::before { content: none; } + /* donut + ID na mesma linha de cabeçalho do cartão */ + table.sc-stack td.sc-stack-head { + display: inline-flex; width: auto; padding: .1rem .4rem .2rem 0; + vertical-align: middle; + } + /* barra de ações: botões à esquerda, com folga acima */ + table.sc-stack td.sc-stack-actions { margin-top: .35rem; } + /* linha "nenhum resultado" (colspan) volta a ser texto simples centralizado */ + table.sc-stack td[colspan] { display: block; text-align: center; } +} + /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { font-weight: 500; diff --git a/templates/admin/backup.html b/templates/admin/backup.html index 36447d3..c27702a 100644 --- a/templates/admin/backup.html +++ b/templates/admin/backup.html @@ -38,7 +38,7 @@
{{ _('Backups automáticos (diários)') }}

{{ _('O sistema mantém um backup por dia da semana (7 no total), sobrescrevendo o do mesmo dia a cada semana.') }}

- +
@@ -47,11 +47,11 @@
{% for b in local_backups %} - + {% if b.exists %} - - - + +
#{{ _('Data') }}{{ _('Tamanho') }}
{{ b.slot }}{{ b.slot }}{{ b.mtime | localdt }}{{ b.size_kb }} KB + {{ b.mtime | localdt }}{{ b.size_kb }} KB
diff --git a/templates/admin/update.html b/templates/admin/update.html index f355468..0e240c7 100644 --- a/templates/admin/update.html +++ b/templates/admin/update.html @@ -87,7 +87,7 @@

{{ _('Atualizações') }}

wrap.style.cssText = 'z-index:1090;pointer-events:none'; wrap.innerHTML = '