66 lines
3.8 KiB
Plaintext
66 lines
3.8 KiB
Plaintext
<%# app/views/shared/_carrossel_controles.html.erb
|
|
Controles do carrossel (ver carrossel_controller.js) em DOIS layouts, porque
|
|
"seta flutuante na lateral" só funciona onde sobra espaço lateral:
|
|
|
|
• tela com espaço (sm+): setas redondas flutuando FORA dos cards,
|
|
centralizadas na altura da lista — o container reserva a faixa com
|
|
`sm:px-16`, senão a seta passa por cima do texto do card;
|
|
• celular: barra flutuante colada no rodapé (sticky), com as duas setas e
|
|
o contador no meio. Na largura de um celular não há faixa lateral livre:
|
|
a seta lateral cobriria o conteúdo, e a barra inferior ainda fica no
|
|
alcance do polegar.
|
|
|
|
⚠️ O container do carrossel precisa de `relative sm:px-16` — ver os usos em
|
|
consolidacoes/_lista, _por_motorista e motorista/dashboard/index.
|
|
|
|
Alvos de 56px: a tela é usada no celular, em movimento.
|
|
|
|
locals: anterior:/proximo: (rótulos acessíveis, opcionais). %>
|
|
<% anterior = local_assigns.fetch(:anterior, 'Itens anteriores') %>
|
|
<% proximo = local_assigns.fetch(:proximo, 'Próximos itens') %>
|
|
|
|
<%# ── Setas laterais (sm+) ─────────────────────────────── %>
|
|
<div data-carrossel-target="controles" class="hidden">
|
|
<button type="button" data-action="carrossel#anterior" data-carrossel-target="anterior"
|
|
class="hidden sm:flex absolute top-1/2 -translate-y-1/2 left-0 z-20
|
|
w-14 h-14 rounded-full items-center justify-center
|
|
bg-[#1a1a1a]/90 backdrop-blur border border-white/15 shadow-lg shadow-black/50
|
|
text-white hover:bg-[#1a1a1a] hover:border-orange-500 transition-colors"
|
|
aria-label="<%= anterior %>">
|
|
<%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
|
</button>
|
|
|
|
<button type="button" data-action="carrossel#proxima" data-carrossel-target="proximo"
|
|
class="hidden sm:flex absolute top-1/2 -translate-y-1/2 right-0 z-20
|
|
w-14 h-14 rounded-full items-center justify-center
|
|
bg-orange-500/90 backdrop-blur border border-orange-400 shadow-lg shadow-black/50
|
|
text-black hover:bg-orange-500 transition-colors"
|
|
aria-label="<%= proximo %>">
|
|
<%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
|
</button>
|
|
|
|
<%# Contador embaixo, centralizado (vale para os dois layouts em sm+). %>
|
|
<div class="hidden sm:flex justify-center mt-4">
|
|
<span data-carrossel-target="indicador"
|
|
class="bg-[#1a1a1a] border border-[#2a2a2a] text-gray-300 text-sm font-semibold rounded-full px-4 py-1.5"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<%# ── Barra flutuante no rodapé (celular) ──────────────── %>
|
|
<div data-carrossel-target="controles" class="hidden sm:hidden sticky bottom-4 z-20 mt-4 flex justify-center">
|
|
<div class="flex items-center gap-3 bg-[#1a1a1a]/95 backdrop-blur border border-white/15
|
|
shadow-lg shadow-black/60 rounded-full pl-2 pr-2 py-2">
|
|
<button type="button" data-action="carrossel#anterior" data-carrossel-target="anterior"
|
|
class="w-14 h-14 rounded-full flex items-center justify-center bg-[#0a0a0a] border border-white/15 text-white"
|
|
aria-label="<%= anterior %>">
|
|
<%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
|
</button>
|
|
<span data-carrossel-target="indicador" class="text-gray-200 text-base font-semibold px-1"></span>
|
|
<button type="button" data-action="carrossel#proxima" data-carrossel-target="proximo"
|
|
class="w-14 h-14 rounded-full flex items-center justify-center bg-orange-500 text-black"
|
|
aria-label="<%= proximo %>">
|
|
<%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
|
</button>
|
|
</div>
|
|
</div>
|