, Teste e correçoes

This commit is contained in:
2026-08-28 13:13:10 -03:00
parent 1143ed373b
commit 19a0c7a302
6 changed files with 157 additions and 76 deletions

View File

@@ -1,40 +1,44 @@
<%# Prévia do PDF em POP-UP, com navegação de veículo igual à do carrossel do
motorista (setas grandes + contador "3 de 72").
<%# Prévia do PDF em POP-UP, com navegação entre as folhas no mesmo desenho do
carrossel do motorista (setas grandes + contador "3 de 72").
── POR QUE É CSS PURO E NÃO JAVASCRIPT ────────────────────────────────────
Abrir/fechar sai do `:target`: o botão é um link para `#previa` e o pop-up só
aparece quando ele é o alvo da URL. As setas são links de verdade para
`?veiculo=X#previa`, então trocar de folha mantém o pop-up aberto.
── O ESTADO "ABERTA" MORA NA URL (?previa=1) ──────────────────────────────
Foram três tentativas até aqui, e cada uma quebrou de um jeito:
Isso não é preciosismo: a prévia é a ÚNICA conferência antes de imprimir e
já morreu três vezes junto com o JavaScript (assets 404 no servidor, com a
tela abrindo normal e o botão sem reação). Do jeito atual ela funciona com o
JS quebrado, sem JS, no celular, e continua endereçável — dá para mandar o
link já com a prévia aberta.
1. modal por JavaScript → morreu junto com os assets 404 no servidor: o
botão não fazia NADA e a tela abria normal, sem erro visível;
2. <details> nativo → funcionava, mas não é pop-up e não dava para
navegar entre as folhas sem fechar;
3. :target (#previa) → abria com o JS fora do ar e parava de abrir
quando ele voltava: o Turbo intercepta o clique, revisita a página e o
hash se perde no caminho. Pior dos mundos — funcionava no ambiente
quebrado e falhava no ambiente são.
`loading="lazy"` no iframe: fechado, o pop-up é `display:none` e o navegador
NÃO busca o PDF. É o que preserva a economia de não gerar um documento a cada
carregamento da tela.
Com a prévia na query string nada disso se aplica: é uma página como outra
qualquer, o Turbo trata como navegação normal, funciona sem JavaScript,
sobrevive ao F5 e ao "voltar", e o link pode ser enviado para outra pessoa
já com a folha aberta.
Fechado, este partial não renderiza NADA: o iframe nem existe, então o
servidor não monta um PDF que ninguém pediu (era o custo do desenho
original, que montava o iframe a cada carregamento da tela).
<iframe> e não <embed>/<object>: o CSP está enforcing com `object_src :none`
e sem `frame_src`, então cai em `default_src :self` — o iframe de mesma
origem passa, os outros dois não.
Fechar leva para `#sem-previa`, um id que não existe em lugar nenhum: o
`:target` deixa de casar e o pop-up some sem o salto ao topo que um `href="#"`
causaria. %>
origem passa, os outros dois não. %>
<% nomes = @veiculos.map(&:veiculo) %>
<% posicao = nomes.index(@veiculo) %>
<% anterior = posicao&.positive? ? nomes[posicao - 1] : nil %>
<% proximo = posicao && posicao < nomes.size - 1 ? nomes[posicao + 1] : nil %>
<% fechar = admin_romaneio_path(@romaneio, veiculo: @veiculo) %>
<div id="previa" data-romaneio-target="overlay"
class="hidden target:flex fixed inset-0 z-50 items-center justify-center p-3 sm:p-6
<div data-romaneio-target="overlay"
class="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-6
bg-black/80 backdrop-blur-sm">
<%# O fundo escuro fecha ao ser clicado — um link cobrindo a área, atrás da
caixa (que é `relative`). Sem isso, só o ✕ fecharia. %>
<a href="#sem-previa" tabindex="-1" aria-label="Fechar prévia" class="absolute inset-0"></a>
<%= link_to '', fechar, tabindex: -1, 'aria-label': 'Fechar prévia',
class: 'absolute inset-0' %>
<div class="relative w-full max-w-6xl h-[92vh] flex flex-col gap-3">
<div class="flex items-center justify-between gap-3">
@@ -46,24 +50,44 @@
pdf_admin_romaneio_path(@romaneio, veiculo: @veiculo),
target: '_blank', rel: 'noopener',
class: 'text-sm text-gray-300 hover:text-white px-3 py-2 rounded-lg hover:bg-white/10' %>
<a href="#sem-previa" aria-label="Fechar prévia"
class="min-w-[48px] min-h-[48px] flex items-center justify-center rounded-xl
bg-[#1a1a1a] border border-white/10 text-white hover:bg-[#242424]">✕</a>
<%= link_to fechar, 'aria-label': 'Fechar prévia',
class: 'min-w-[48px] min-h-[48px] flex items-center justify-center rounded-xl
bg-[#1a1a1a] border border-white/10 text-white hover:bg-[#242424]' do %>
<% end %>
</div>
</div>
<iframe data-romaneio-target="preview" loading="lazy"
<iframe data-romaneio-target="preview"
src="<%= pdf_admin_romaneio_path(@romaneio, veiculo: @veiculo) %>"
class="flex-1 w-full rounded-xl border border-white/10 bg-white"
title="Pré-visualização do romaneio"></iframe>
<%# AVISO SEMPRE VISÍVEL, não um alerta que aparece só no erro: quando o
navegador se recusa a desenhar o PDF, ele não avisa ninguém — o quadro
fica branco e a leitura natural é "o sistema está quebrado". O navegador
tem uma opção, ligada por padrão em algumas instalações, de BAIXAR PDF em
vez de exibir; bloqueador de conteúdo (Brave Shields, uBlock) e bloqueio
de pop-up derrubam o mesmo quadro. Como não dá para detectar isso de
dentro da página (o iframe é opaco por segurança), a saída honesta é
dizer onde fica a alternativa. %>
<p class="text-xs text-gray-400 text-center">
Quadro em branco? O navegador pode estar configurado para <strong>baixar</strong> PDF
em vez de exibir, ou um bloqueador está barrando —
<%= link_to 'abra em outra aba',
pdf_admin_romaneio_path(@romaneio, veiculo: @veiculo),
target: '_blank', rel: 'noopener',
class: 'underline text-gray-300 hover:text-white' %>
ou libere PDF para este site nas permissões (cadeado da barra de endereço).
</p>
<%# Controles no mesmo desenho do carrossel do motorista (redondos, 56px,
próximo em laranja), mas como LINKS: cada folha é uma URL. Na ponta vira
<span> apagado em vez de sumir — botão que some muda o layout no meio da
conferência e o operador perde o alvo do clique. %>
<div class="flex items-center justify-center gap-3">
<% if anterior %>
<%= link_to admin_romaneio_path(@romaneio, veiculo: anterior, anchor: 'previa'),
<%= link_to admin_romaneio_path(@romaneio, veiculo: anterior, previa: 1),
'aria-label': "Folha anterior (#{anterior})",
class: 'w-14 h-14 rounded-full flex items-center justify-center
bg-[#1a1a1a]/90 backdrop-blur border border-white/15 text-white
@@ -83,7 +107,7 @@
</span>
<% if proximo %>
<%= link_to admin_romaneio_path(@romaneio, veiculo: proximo, anchor: 'previa'),
<%= link_to admin_romaneio_path(@romaneio, veiculo: proximo, previa: 1),
'aria-label': "Próxima folha (#{proximo})",
class: 'w-14 h-14 rounded-full flex items-center justify-center
bg-orange-500/90 backdrop-blur border border-orange-400 text-black