/* * Lista em CARTÃO — a mesma tabela, exibida como blocos. * * 🚨 Nada aqui cria elemento novo. O cartão é a PRÓPRIA com display * trocado: as mesmas e e some com a ordenação se ele deixar de existir no layout. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable thead { position: absolute; left: -9999px; top: -9999px; } /* fixedHeader clona o cabeçalho num elemento flutuante — no modo cartão ele apareceria solto no topo da tela, sem tabela embaixo. */ .lista-modo-cartao .fixedHeader-floating, .lista-modo-cartao .lista-cartao-ativo .dataTables_scrollHead { display: none !important; } /* scrollX/scrollY montam .dataTables_scrollBody com overflow nos dois eixos: em cartão não há o que rolar para o lado, e a altura fixa cortaria os blocos. */ .lista-modo-cartao .lista-cartao-ativo .dataTables_scrollBody { overflow: visible !important; max-height: none !important; height: auto !important; width: auto !important; } /* * 🚨 Todo invólucro que recorta precisa parar de recortar no modo cartão. * * `overflow-x: auto` NÃO recorta só na horizontal: o CSS não permite um eixo * `auto` com o outro `visible`, então o navegador promove os dois a `auto` e o * menu de "Ações" some ao passar da borda. Em cartão nada é largo, então tirar * a rolagem daqui não custa nada. * * O seletor exige as três classes juntas — é a assinatura do embrulho de tabela * do tema, e não a utilitária `tw-overflow-x-auto` solta, usada em outros * lugares. */ .lista-modo-cartao .table-responsive, .lista-modo-cartao .tw-mx-4.tw--my-2.tw-overflow-x-auto { overflow: visible !important; } .lista-modo-cartao .tw-inline-block.tw-min-w-full { display: block !important; } /* Largura em pixel gravada inline pelo DataTables (scrollX) precisa ceder. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable { width: 100% !important; border: 0; } /* ---- o cartão ---- */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr { position: relative; margin: 0 0 12px; padding: 0; border: 1px solid #dfe4ea; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); /* * 🚨 SEM overflow:hidden. Ele arredondava os cantos de graça, mas cortava o * menu suspenso de "Ações" na borda do cartão — o operador via metade das * opções e não tinha como chegar no resto. O arredondamento agora sai do * raio nas células das pontas, logo abaixo. * * flex em coluna para poder ORDENAR: a célula do título fica na posição * original da coluna (na lista de produtos, depois de Código), então sem * ordenação o nome do produto aparecia no meio do cartão. */ display: flex; flex-direction: column; } /* Título sempre no topo, ações sempre no rodapé, o resto na ordem das colunas. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-titulo { order: -1; } .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-acao { order: 99; } /* Arredondamento sem cortar conteúdo: raio nas células das pontas. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-titulo { border-radius: 7px 7px 0 0; } .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-acao { border-radius: 0 0 7px 7px; } /* * Cartão com menu aberto vai para a frente. Sem isto o menu passa POR BAIXO dos * cartões seguintes: todos são `position:relative`, e nesse caso quem vem depois * no DOM pinta por cima. A classe é posta pelo lista-cartao.js no evento do * Bootstrap; o `:has` cobre o mesmo caso em navegador que o suporte, caso o JS * do dropdown mude. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr.lista-menu-aberto, .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr:has(.open) { z-index: 30; } /* * 🚨 O menu de "Ações" ABRE DENTRO do cartão, empurrando o conteúdo, em vez de * flutuar por cima. * * Flutuando ele é `position: absolute` e NÃO aumenta a altura da página. No * cartão do meio da lista isso passa despercebido, porque o menu sobrepõe os * cartões seguintes. No ÚLTIMO cartão, os itens de baixo caem além do fim do * documento e não há rolagem que os alcance — medido: o menu passa 231px do * cartão, com 8 itens. * * Empurrando, o cartão cresce, a página cresce junto e todo item fica * alcançável. De quebra some a classe inteira de problema: nada a recortar, * nada de z-index, nada de calcular espaço para abrir para cima. Em tela de * toque ainda é o padrão mais confortável. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr .dropdown-menu { /* * 🚨 `relative`, NUNCA `static`. * * Em tela de toque o Bootstrap 3 injeta um `
` * (position:fixed, z-index:990, cobrindo a viewport inteira) para fechar o menu * ao tocar fora. O `.dropdown-menu` já vem com `z-index: 1000` e por isso fica * na frente dele — mas **z-index não tem efeito em elemento não-posicionado**. * Com `static`, o menu era pintado no fluxo normal, ABAIXO do backdrop: cada * clique num item caía no backdrop, que só fechava o menu. Sintoma: "clico em * Editar e não acontece nada" — em TODAS as ações, de TODAS as listas. * * `relative` sem deslocamento renderiza exatamente igual a `static` (medido: * altura do cartão idêntica, a expansão inline continua empurrando o conteúdo), * mas torna o elemento posicionado, então o z-index passa a valer. */ position: relative; float: none; width: 100%; min-width: 0; margin: 6px 0 0; border-radius: 6px; box-shadow: none; /* lista muito longa não empurra o cartão sem fim */ max-height: 60vh; overflow-y: auto; } /* O menu ocupa a linha inteira do rodapé, embaixo dos botões. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-acao > .dropdown.open, .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-acao > .btn-group.open { flex: 1 1 100%; } /* Área de toque decente nos itens do menu. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr .dropdown-menu > li > a { padding: 9px 14px; white-space: normal; } /* Listra zebrada da tabela não faz sentido em bloco separado. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr:nth-child(even), .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr.odd, .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr.even { background: #fff; } .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: auto !important; max-width: none !important; padding: 7px 12px; border: 0; border-top: 1px solid #f0f2f5; white-space: normal !important; word-break: break-word; text-align: left; font-size: 13px; } /* ⚠️ Nada de `:first-child` aqui: com a ordenação por flex, o primeiro elemento do DOM não é mais o primeiro na tela. Quem não leva linha em cima é o título, que agora é sempre o primeiro visualmente. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-titulo { border-top: 0; } /* Rótulo do campo, vindo do
, os mesmos botões, os mesmos ids. Isso não é * economia de código, é o que evita a classe de bug que derrubou a tentativa * anterior — montar um DOM paralelo duplicaria ids e os handlers ligados por * seletor passariam a achar dois elementos. * * Consequência boa: ordenação, busca, paginação e exportação continuam * funcionando sem saber que existe modo cartão. Se o JS que carimba os rótulos * falhar, a tela volta a ser uma tabela comum — nunca uma tela vazia. * * O rótulo de cada campo vem de `data-rotulo`, carimbado por lista-cartao.js a * partir do correspondente. */ /* O modo é ligado pela classe no , então vale para tabela criada depois. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable, .lista-modo-cartao .lista-cartao-ativo table.dataTable thead, .lista-modo-cartao .lista-cartao-ativo table.dataTable tbody, .lista-modo-cartao .lista-cartao-ativo table.dataTable tr, .lista-modo-cartao .lista-cartao-ativo table.dataTable th, .lista-modo-cartao .lista-cartao-ativo table.dataTable td { display: block; } /* Cabeçalho fora da tela (e não display:none): o DataTables mede as colunas pelo
por data-rotulo. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td::before { content: attr(data-rotulo); flex: 0 0 42%; max-width: 42%; color: #67727f; font-weight: 600; font-size: 12px; line-height: 1.45; } /* Valor alinhado à direita, para a coluna de valores ficar legível na vertical. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td > * { max-width: 100%; } /* ---- papéis especiais, marcados pelo JS ---- */ /* Título: identifica o registro. Ocupa a linha inteira, sem rótulo. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-titulo { display: block; background: #f7f9fb; border-bottom: 1px solid #e6eaef; padding: 10px 12px; font-size: 14px; font-weight: 700; line-height: 1.35; color: #1f2733; } .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-titulo::before { content: none; } /* Ações: rodapé do cartão, botões lado a lado e com área de toque decente. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-acao { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; background: #fcfdfe; border-top: 1px solid #e6eaef; padding: 9px 12px; } .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-acao::before { content: none; } .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-acao .btn, .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-acao .dropdown { margin: 0; } /* Célula sem rótulo (coluna de seleção, expansor, imagem): sem a faixa de 42%. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-sem-rotulo::before { content: none; } /* Célula vazia não vira linha em branco dentro do cartão. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.lista-cel-vazia { display: none; } /* "Nenhum registro encontrado" continua sendo uma frase, não um cartão. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.dataTables_empty { display: block; text-align: center; padding: 22px 12px; color: #67727f; } .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr > td.dataTables_empty::before { content: none; } /* Linha de total do rodapé (tfoot) fica como está — é resumo, não registro. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tfoot { display: table-footer-group; } /* ---- grade de cartões em tela larga ---- Empilhado em largura cheia, um cartão de 1200px com o rótulo a 42% fica ridículo e mostra 3 registros por tela. Em grade cabem 3 ou 4 por linha, que é o desenho aprovado no comparativo. auto-fill com minmax faz o número de colunas sair da largura disponível — sem media query por faixa. */ @media (min-width: 768px) { .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; } .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr { margin: 0; } /* "Nenhum registro" não é um cartão: ocupa a linha toda. */ .lista-modo-cartao .lista-cartao-ativo table.dataTable > tbody > tr:has(> td.dataTables_empty) { grid-column: 1 / -1; border: 0; box-shadow: none; } } /* ---- barra de controles no celular ---- */ @media (max-width: 767px) { .lista-modo-cartao .dataTables_wrapper .dataTables_filter, .lista-modo-cartao .dataTables_wrapper .dataTables_length, .lista-modo-cartao .dataTables_wrapper .dataTables_info, .lista-modo-cartao .dataTables_wrapper .dataTables_paginate { text-align: left; float: none; width: 100%; margin-bottom: 8px; } }