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

Correção de responsividade

Browse Source
This commit is contained in:
victor
2026-07-22 01:21:32 -03:00
parent dc1b5c1b41
commit 3dbb65efd2
3 changed files with 44 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/views/dashboard/index.html.erb
View File

@@ -117,15 +117,21 @@
</form>
</div>
<%# CARDS GRANDES — KPIs %>
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4">
<%# CARDS GRANDES — KPIs
auto-fit + minmax em vez de `xl:grid-cols-5`: o breakpoint xl olha a JANELA
(1280px), mas com a sidebar aberta sobram ~960px de conteúdo — 5 colunas de
~176px, e "R$ 82.692,00" em text-4xl era cortado pelo overflow-hidden do
card. Com auto-fit o número de colunas cai sozinho quando o menu está
aberto e sobe quando ele é recolhido, sem depender de breakpoint. %>
<div class="grid grid-cols-[repeat(auto-fit,minmax(13rem,1fr))] gap-4">
<%# Card 1: Valor estimado %>
<div class="sm:col-span-2 xl:col-span-1 bg-[#f97316] rounded-2xl p-6 relative overflow-hidden">
<%# Card 1: Valor estimado — sempre 2 faixas: é o maior número da tela %>
<div class="sm:col-span-2 bg-[#f97316] rounded-2xl p-6 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-orange-400/20 to-transparent"></div>
<div class="relative">
<p class="text-orange-100 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :dinheiro, cor: nil, espaco: false %> Valor Estimado</p>
<p class="text-4xl font-black text-white mb-1">
<%# break-words: se ainda faltar espaço, quebra a linha em vez de cortar %>
<p class="text-3xl lg:text-4xl font-black text-white mb-1 break-words">
<%= moeda(@valor_estimado) %>
</p>
<p class="text-orange-200 text-sm">
@@ -178,7 +184,7 @@
</div>
<%# KPIs FINANCEIROS (consolidações finalizadas, já com filtro de operação) %>
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
<div class="grid grid-cols-[repeat(auto-fit,minmax(13rem,1fr))] gap-4">
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<p class="text-gray-400 text-sm font-medium mb-2 flex items-center gap-2"><%= icone :dinheiro, espaco: false %> Custo total</p>
<p class="text-3xl font-black text-white"><%= moeda(@fin_custo_total) %></p>
@@ -445,7 +451,7 @@
<% if @por_operacao.any? %>
<div class="bg-[#1a1a1a] rounded-2xl border border-white/5 p-6">
<h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2"><%= icone :operacao, espaco: false %> Entregas por Local</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
<div class="grid grid-cols-[repeat(auto-fit,minmax(9rem,1fr))] gap-3">
<% total_op = @por_operacao.values.sum.to_f %>
<% @por_operacao.each do |local, qtd| %>
<div class="bg-[#0a0a0a] rounded-xl p-4 border border-white/5 text-center">