victor/Reem-Notas
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Correção de responsividade e atualização do read.me

Browse Source
This commit is contained in:
victor
2026-07-22 01:37:20 -03:00
parent 3dbb65efd2
commit def8a8314c
6 changed files with 171 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/javascript/controllers/validacao_controller.js
View File

@@ -7,7 +7,7 @@ import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [
"linha", "checkbox", "selecionarTodos", "busca", "buscaVazia",
"barraSelecao", "contadorSelecao",
"grupoPilares", "chipSelecao", "contadorSelecao", "btnLimpar",
"resumo", "listaCol", "btnResumoLabel",
"toggles", "barra", "barraManuais", "percentual", "chipVeiculo",
"consolidarBtn", "consolidarHint",
@@ -102,13 +102,23 @@ export default class extends Controller {
this.atualizarSelecao()
}
// ── Barra de ações em massa: só existe quando há seleção ──
// Sem isto os 5 botões de pilar ficavam fixos no topo o tempo todo, comendo
// a altura da lista para não fazer nada (clicar sem seleção só alertava).
// ── Estado da seleção ──
// Os pilares ficam SEMPRE na tela; sem seleção apenas esmaecem. Esconder e
// remostrar mexia na altura do cabeçalho a cada clique e escondia a ação
// principal justamente de quem ainda não sabe que precisa selecionar antes.
atualizarSelecao() {
const n = this.checkboxTargets.filter(c => c.checked).length
if (this.hasContadorSelecaoTarget) this.contadorSelecaoTarget.textContent = n
if (this.hasBarraSelecaoTarget) this.barraSelecaoTarget.classList.toggle("hidden", n === 0)
if (this.hasChipSelecaoTarget) this.chipSelecaoTarget.classList.toggle("hidden", n === 0)
if (this.hasBtnLimparTarget) this.btnLimparTarget.classList.toggle("hidden", n === 0)
if (this.hasGrupoPilaresTarget) {
this.grupoPilaresTarget.classList.toggle("opacity-40", n === 0)
this.grupoPilaresTarget.title = n === 0
? "Marque ao menos uma entrega para aplicar em massa"
: `Aplicar em ${n} entrega(s) — clique de novo no pilar para remover`
}
}
limparSelecao() {

5
app/views/admin/configuracoes/index.html.erb
View File

@@ -11,7 +11,10 @@
<%# Pilares de preço %>
<div>
<h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"><%= icone :dinheiro, espaco: false %> Pilares de Preço</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<%# auto-fit: `lg:grid-cols-4` mede a JANELA, mas a sidebar come 256px do
conteúdo — os cards de preço ficavam com ~128px úteis e o valor em
moeda espremia. Aqui o número de colunas segue a largura REAL. %>
<div class="grid grid-cols-[repeat(auto-fit,minmax(14rem,1fr))] gap-4">
<% @configuracoes.each do |cfg| %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 group relative">
<div class="flex items-start justify-between mb-4">

5
app/views/configuracoes/index.html.erb
View File

@@ -11,7 +11,10 @@
<%# Pilares de preço %>
<div>
<h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"><%= icone :dinheiro, espaco: false %> Pilares de Preço</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<%# auto-fit: `lg:grid-cols-4` mede a JANELA, mas a sidebar come 256px do
conteúdo — os cards de preço ficavam com ~128px úteis e o valor em
moeda espremia. Aqui o número de colunas segue a largura REAL. %>
<div class="grid grid-cols-[repeat(auto-fit,minmax(14rem,1fr))] gap-4">
<% @configuracoes.each do |cfg| %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6 group relative">
<div class="flex items-start justify-between mb-4">

7
app/views/consolidacao_entregas/revisar.html.erb
View File

@@ -11,8 +11,11 @@
<p class="text-gray-400 text-sm"><%= @consolidacao.nome %></p>
</div>
<%# Resumo por tipo %>
<div class="grid grid-cols-2 md:grid-cols-7 gap-3 mb-6">
<%# Resumo por tipo — auto-fit em vez de `md:grid-cols-7`.
Sete colunas fixas a partir de 768px dão ~55px cada quando a sidebar está
aberta (768 − 256 de menu − padding), destruindo rótulos como
"Extraordinária" e "Termo Especial". O mínimo de 9rem cabe o maior rótulo. %>
<div class="grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-3 mb-6">
<% [
['entrega_normal', 'Normal', 'bg-orange-500 text-black'],
['retirada', 'Retirada', 'bg-orange-800 text-white'],

58
app/views/consolidacao_entregas/validar.html.erb
View File

@@ -147,14 +147,39 @@
abaixo, que carrega os modais) entra NESTA mesma faixa via flex `order`,
sem precisar mover os modais de lugar. %>
<div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-xl px-3 py-2 mb-2 flex flex-wrap items-center gap-x-3 gap-y-2">
<label class="order-1 flex items-center gap-2 text-gray-300 text-sm cursor-pointer select-none h-11">
<label class="order-1 flex items-center gap-2 text-gray-300 text-sm cursor-pointer select-none h-11 whitespace-nowrap">
<input type="checkbox" data-validacao-target="selecionarTodos"
data-action="change->validacao#selecionarTodos"
class="rounded text-orange-500 bg-[#0a0a0a] border-[#2a2a2a] w-5 h-5">
Selecionar todos
Selecionar
<%# Contador aparece só quando há seleção — é o retorno visual de que os
pilares saíram do estado inerte. %>
<span data-validacao-target="chipSelecao"
class="hidden px-2 py-0.5 rounded-full bg-orange-500 text-black text-xs font-bold"><span data-validacao-target="contadorSelecao">0</span></span>
</label>
<div class="order-3 ml-auto flex items-center gap-2">
<%# Pilares SEMPRE visíveis: são a ação principal da tela e o ADM precisa
vê-los para saber o que pode fazer. Sem seleção eles ficam esmaecidos
(não escondidos) — a versão anterior os removia do DOM e obrigava a
descobrir que existiam depois de marcar algo. %>
<div data-validacao-target="grupoPilares"
class="order-2 flex items-center gap-1.5 flex-wrap opacity-40 transition-opacity"
title="Marque ao menos uma entrega para aplicar em massa">
<button data-action="click->validacao#marcarSelecionados" data-tipo="entrega_normal"
class="bg-orange-500 text-black font-bold px-3 h-11 rounded-lg text-xs">Normal</button>
<button data-action="click->validacao#marcarSelecionados" data-tipo="retirada"
class="bg-orange-800 text-white font-bold px-3 h-11 rounded-lg text-xs">Retirada</button>
<button data-action="click->validacao#marcarSelecionados" data-tipo="bonus"
class="bg-white text-black font-bold px-3 h-11 rounded-lg text-xs border border-orange-500">Bônus</button>
<button data-action="click->validacao#marcarSelecionados" data-tipo="desconto"
class="bg-black text-white font-bold px-3 h-11 rounded-lg text-xs border border-gray-700">Desconto</button>
<button data-action="click->validacao#marcarSelecionados" data-tipo="extraordinaria"
class="bg-purple-600 text-white font-bold px-3 h-11 rounded-lg text-xs">Extra</button>
<button type="button" data-action="validacao#limparSelecao" data-validacao-target="btnLimpar"
class="hidden text-gray-400 hover:text-white text-xs underline px-1">limpar</button>
</div>
<div class="order-4 ml-auto flex items-center gap-2">
<%# Oculta/mostra o resumo lateral (mais largura para a lista) %>
<button type="button" data-action="validacao#toggleResumo"
class="text-gray-400 hover:text-white text-sm border border-[#2a2a2a] hover:border-orange-500 px-3 h-11 rounded-lg whitespace-nowrap">
@@ -172,7 +197,7 @@
Fica DENTRO da barra de ações (order-2) para não custar uma linha própria;
os modais são `fixed`, então não afetam o layout da faixa. %>
<% unless @consolidacao.finalizada? && current_user.operador? %>
<div class="order-2 relative"
<div class="order-3 relative"
data-controller="ferramentas apontamento-manual apontamento-termo"
data-apontamento-manual-apontar-manual-url-value="<%= apontar_manual_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
data-apontamento-termo-apontar-termo-url-value="<%= apontar_termo_consolidacao_consolidacao_entregas_path(@consolidacao) %>"
@@ -346,31 +371,6 @@
</div>
<%# Fim da barra de ações %>
<%# Ações em massa — SÓ aparecem quando há entregas selecionadas. Ocupavam
160px fixos para botões que, sem seleção, respondiam com um alerta
pedindo para selecionar algo. %>
<div data-validacao-target="barraSelecao"
class="hidden bg-orange-500/10 border border-orange-500/40 rounded-xl px-3 py-2 mb-2 flex flex-wrap items-center gap-x-3 gap-y-2">
<span class="text-sm text-white font-semibold whitespace-nowrap">
<span data-validacao-target="contadorSelecao">0</span> selecionada(s)
</span>
<span class="text-gray-400 text-xs">aplicar <span class="hidden sm:inline">(clique de novo p/ remover)</span>:</span>
<div class="flex items-center gap-2 flex-wrap">
<button data-action="click->validacao#marcarSelecionados" data-tipo="entrega_normal"
class="bg-orange-500 text-black font-bold px-3 h-11 rounded-lg text-xs">Normal</button>
<button data-action="click->validacao#marcarSelecionados" data-tipo="retirada"
class="bg-orange-800 text-white font-bold px-3 h-11 rounded-lg text-xs">Retirada</button>
<button data-action="click->validacao#marcarSelecionados" data-tipo="bonus"
class="bg-white text-black font-bold px-3 h-11 rounded-lg text-xs border border-orange-500">Bônus</button>
<button data-action="click->validacao#marcarSelecionados" data-tipo="desconto"
class="bg-black text-white font-bold px-3 h-11 rounded-lg text-xs border border-gray-700">Desconto</button>
<button data-action="click->validacao#marcarSelecionados" data-tipo="extraordinaria"
class="bg-purple-600 text-white font-bold px-3 h-11 rounded-lg text-xs">Extra</button>
</div>
<button type="button" data-action="validacao#limparSelecao"
class="ml-auto text-gray-400 hover:text-white text-xs underline whitespace-nowrap">limpar seleção</button>
</div>
</div>
<%# Fim do cabeçalho fixo — abaixo só a lista de NFs rola. %>