diff --git a/app/javascript/controllers/carrossel_controller.js b/app/javascript/controllers/carrossel_controller.js index a306cd7..3a53ca0 100644 --- a/app/javascript/controllers/carrossel_controller.js +++ b/app/javascript/controllers/carrossel_controller.js @@ -97,7 +97,7 @@ export default class extends Controller { if (!this.paginando) { this.itemTargets.forEach((item) => item.classList.remove("hidden")) - if (this.hasControlesTarget) this.controlesTarget.classList.add("hidden") + this.controlesTargets.forEach((el) => el.classList.add("hidden")) return } @@ -109,15 +109,18 @@ export default class extends Controller { }) if (!this.hasControlesTarget) return - this.controlesTarget.classList.remove("hidden") + this.controlesTargets.forEach((el) => el.classList.remove("hidden")) - if (this.hasIndicadorTarget) { - // "1–5 de 12" e não "página 1 de 3": quem lê quer saber quantos itens - // existem, não quantas páginas a tela tem. - this.indicadorTarget.textContent = `${inicio + 1}–${Math.min(fim, total)} de ${total}` - } - if (this.hasAnteriorTarget) this.alternar(this.anteriorTarget, this.pagina === 0) - if (this.hasProximoTarget) this.alternar(this.proximoTarget, this.pagina >= this.totalPaginas - 1) + // "1–5 de 12" e não "página 1 de 3": quem lê quer saber quantos itens + // existem, não quantas páginas a tela tem. + const rotulo = `${inicio + 1}–${Math.min(fim, total)} de ${total}` + this.indicadorTargets.forEach((el) => { el.textContent = rotulo }) + + // Plural: o mesmo controle aparece em dois layouts (setas laterais em tela + // com espaço, barra flutuante no rodapé no celular) e os dois precisam + // desabilitar juntos. + this.anteriorTargets.forEach((b) => this.alternar(b, this.pagina === 0)) + this.proximoTargets.forEach((b) => this.alternar(b, this.pagina >= this.totalPaginas - 1)) } // Botão de ponta: desabilitado de verdade (não só apagado), para o toque não diff --git a/app/views/consolidacoes/_lista.html.erb b/app/views/consolidacoes/_lista.html.erb index e359537..5186478 100644 --- a/app/views/consolidacoes/_lista.html.erb +++ b/app/views/consolidacoes/_lista.html.erb @@ -2,7 +2,7 @@ <% if @consolidacoes.any? %> <%# Em celular/monitor pequeno a lista vira carrossel de 10 em 10; em tela grande aparece inteira (ver carrossel_controller.js). %> -
+
<% @consolidacoes.each do |c| %> <%= link_to consolidacao_path(c), diff --git a/app/views/consolidacoes/_por_motorista.html.erb b/app/views/consolidacoes/_por_motorista.html.erb index 06eaf02..d1ddd2a 100644 --- a/app/views/consolidacoes/_por_motorista.html.erb +++ b/app/views/consolidacoes/_por_motorista.html.erb @@ -49,7 +49,7 @@ <%# Em celular/monitor pequeno vira carrossel de 10 em 10; em tela grande sai a lista inteira. O motorista com a composição aberta define a página inicial (data-carrossel-inicial) — senão o clique dele cairia numa página escondida. %> -
+
<% @totais.linhas.each do |linha| %> <% aberto = @detalhe_motorista == linha[:motorista] %> diff --git a/app/views/motorista/dashboard/index.html.erb b/app/views/motorista/dashboard/index.html.erb index ac30001..15069dd 100644 --- a/app/views/motorista/dashboard/index.html.erb +++ b/app/views/motorista/dashboard/index.html.erb @@ -149,7 +149,7 @@

Cada fechamento abaixo entra na soma do card branco.

<% if @consolidacoes.any? %> -
+
<% @consolidacoes.each do |cm| %> <% c = cm.consolidacao %> diff --git a/app/views/shared/_carrossel_controles.html.erb b/app/views/shared/_carrossel_controles.html.erb index 8ab3b90..d51da24 100644 --- a/app/views/shared/_carrossel_controles.html.erb +++ b/app/views/shared/_carrossel_controles.html.erb @@ -1,7 +1,17 @@ <%# app/views/shared/_carrossel_controles.html.erb - Setas + indicador do carrossel (ver carrossel_controller.js). Nascem - escondidos: quem decide se esta tela é pequena o bastante para paginar é o - JS — em monitor grande a lista aparece inteira e estes controles não voltam. + 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. @@ -9,16 +19,47 @@ <% anterior = local_assigns.fetch(:anterior, 'Itens anteriores') %> <% proximo = local_assigns.fetch(:proximo, 'Próximos itens') %> -