, correção de UX para gerara prévia do romaneio

This commit is contained in:
2026-08-28 12:13:42 -03:00
parent b690dfb54c
commit 1143ed373b
6 changed files with 191 additions and 70 deletions

View File

@@ -38,17 +38,30 @@
<% end %>
</div>
<div class="flex gap-2">
<button type="button" data-action="romaneio#anterior" aria-label="Veículo anterior"
class="flex-1 min-h-[48px] bg-[#1a1a1a] border border-white/10 rounded-xl
text-white hover:bg-[#242424]"></button>
<button type="button" data-action="romaneio#proximo" aria-label="Próximo veículo"
class="flex-1 min-h-[48px] bg-[#1a1a1a] border border-white/10 rounded-xl
text-white hover:bg-[#242424]"></button>
<%# Setas para andar na LISTA (a prévia tem as suas). Links de verdade pelo
mesmo motivo dos itens acima: o veículo mora na query string. %>
<div class="flex gap-2 pt-1">
<% nomes_v = @veiculos.map(&:veiculo) %>
<% pos_v = nomes_v.index(@veiculo) %>
<% ant_v = pos_v&.positive? ? nomes_v[pos_v - 1] : nil %>
<% prox_v = pos_v && pos_v < nomes_v.size - 1 ? nomes_v[pos_v + 1] : nil %>
<% base_v = 'flex-1 min-h-[48px] flex items-center justify-center rounded-xl border' %>
<% if ant_v %>
<a href="<%= admin_romaneio_path(@romaneio, veiculo: ant_v) %>" aria-label="Veículo anterior"
class="<%= base_v %> bg-[#1a1a1a] border-white/10 text-white hover:bg-[#242424]"></a>
<% else %>
<span class="<%= base_v %> bg-[#1a1a1a]/50 border-white/5 text-gray-600"></span>
<% end %>
<% if prox_v %>
<a href="<%= admin_romaneio_path(@romaneio, veiculo: prox_v) %>" aria-label="Próximo veículo"
class="<%= base_v %> bg-[#1a1a1a] border-white/10 text-white hover:bg-[#242424]"></a>
<% else %>
<span class="<%= base_v %> bg-[#1a1a1a]/50 border-white/5 text-gray-600"></span>
<% end %>
</div>
<div class="pt-1 border-t border-white/5">
<label class="block text-sm font-medium text-gray-300 mb-1.5 mt-3">
<div class="pt-4 mt-1 border-t border-white/5">
<label class="block text-sm font-medium text-gray-300 mb-1.5">
Motorista deste veículo
<span class="text-gray-500 font-normal">— só na tela</span>
</label>
@@ -62,21 +75,25 @@
</p>
</div>
<div class="space-y-2 pt-1">
<%# A prévia NÃO tem botão aqui: ela é o bloco recolhível no topo da coluna
ao lado (`_previa`), aberto pelo próprio navegador. Um segundo botão que
dependesse de JavaScript para abrir aquele bloco voltaria a ficar morto
quando os assets falhassem — que é justamente o que se está evitando. %>
<div class="space-y-3 pt-4 mt-4 border-t border-white/5">
<%# Link, não botão: abre o pop-up da prévia pelo `:target` do CSS (ver
`_previa`), então continua funcionando com o JavaScript fora do ar — foi
o botão daqui que ficou morto três vezes seguidas. %>
<a href="#previa"
class="w-full min-h-[48px] flex items-center justify-center gap-2 bg-[#1a1a1a]
hover:bg-[#242424] text-white border border-white/10 rounded-xl">
<%= icone :visualizar, cor: nil, espaco: false %> Ver prévia do PDF
</a>
<%= link_to pdf_admin_romaneio_path(@romaneio, veiculo: @veiculo),
target: '_blank', rel: 'noopener',
class: 'w-full min-h-[48px] flex items-center justify-center gap-2 bg-[#1a1a1a]
hover:bg-[#242424] text-white border border-white/10 rounded-xl' do %>
<%= icone :baixar, cor: nil %> PDF deste veículo
<%= icone :baixar, cor: nil, espaco: false %> PDF deste veículo
<% end %>
<%= link_to pdf_admin_romaneio_path(@romaneio),
class: 'w-full min-h-[48px] flex items-center justify-center gap-2 bg-[#f97316]
hover:bg-orange-500 text-white font-semibold rounded-xl' do %>
<%= icone :baixar, cor: nil %> PDF de TODOS os veículos
<%= icone :baixar, cor: nil, espaco: false %> PDF de TODOS os veículos
<% end %>
</div>
</div>