102 lines
5.4 KiB
Plaintext
102 lines
5.4 KiB
Plaintext
<%# Prévia do PDF em POP-UP, com navegação de veículo igual à 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.
|
|
|
|
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.
|
|
|
|
`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.
|
|
|
|
<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. %>
|
|
<% 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 %>
|
|
|
|
<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
|
|
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>
|
|
|
|
<div class="relative w-full max-w-6xl h-[92vh] flex flex-col gap-3">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<h2 class="text-white font-semibold truncate">
|
|
Prévia — <span data-romaneio-target="tituloPreview"><%= @veiculo %></span>
|
|
</h2>
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<%= link_to 'Abrir em outra aba',
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<iframe data-romaneio-target="preview" loading="lazy"
|
|
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>
|
|
|
|
<%# 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'),
|
|
'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
|
|
hover:border-orange-500 transition-colors' do %>
|
|
<%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
|
<% end %>
|
|
<% else %>
|
|
<span class="w-14 h-14 rounded-full flex items-center justify-center
|
|
bg-[#1a1a1a]/50 border border-white/10 text-gray-600 opacity-40">
|
|
<%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<span class="bg-[#1a1a1a] border border-[#2a2a2a] text-gray-200 text-sm font-semibold
|
|
rounded-full px-4 py-2 whitespace-nowrap">
|
|
<%= posicao ? posicao + 1 : 1 %> de <%= nomes.size %> · <%= @veiculo %>
|
|
</span>
|
|
|
|
<% if proximo %>
|
|
<%= link_to admin_romaneio_path(@romaneio, veiculo: proximo, anchor: 'previa'),
|
|
'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
|
|
hover:bg-orange-500 transition-colors' do %>
|
|
<%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
|
<% end %>
|
|
<% else %>
|
|
<span class="w-14 h-14 rounded-full flex items-center justify-center
|
|
bg-orange-500/20 border border-orange-400/30 text-black/40 opacity-40">
|
|
<%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|