/* ========================================================================== MACAM Connect — ajustes sobre o django-unfold ========================================================================== As regras antigas eram do jazzmin/Bootstrap 4 (.navbar-warning, .btn-success, .theme-flatly) e nao tinham efeito nenhum aqui. O que sobrou e o que este arquivo faz de fato: dar proporcao as linhas de formulario. O unfold monta uma linha de fieldset com N campos como `grid lg:grid-cols-N`, ou seja, N colunas IGUAIS. Isso da a um campo de UF (2 caracteres) a mesma largura de um logradouro. As regras abaixo redistribuem essas colunas pelo conteudo real, usando as classes `field-` que o unfold ja emite. :has() e usado para identificar a linha pelo campo que ela contem. Onde o navegador nao suportar, cai no comportamento padrao de colunas iguais — pior, mas nunca quebrado. ========================================================================== */ /* --- Escala de larguras por tipo de conteudo ---------------------------- */ @media (min-width: 1024px) { /* IMPORTANTE: cada regra e presa a contagem de colunas que o unfold emitiu (lg:grid-cols-N). Sem isso, uma regra de duas colunas aplicada a uma linha de tres campos joga o terceiro para fora da grade — foi o que aconteceu com "Nacionalidade" ao agrupar o cadastro de colaborador. */ /* Cliente — documento + inscricao: o documento e mais curto. */ .field-row.lg\:grid-cols-2:has(> .field-cnpj) { grid-template-columns: 18rem 1fr; } .field-row.lg\:grid-cols-2:has(> .field-cpf) { grid-template-columns: 14rem 1fr; } /* Colaborador — documento, identidade e pais. */ .field-row.lg\:grid-cols-3:has(> .field-cpf) { grid-template-columns: 12rem 14rem 1fr; } /* Cliente — tipo dispara a exibicao condicional; empresa e um select longo. */ .field-row.lg\:grid-cols-2:has(> .field-tipo) { grid-template-columns: 16rem 1fr; } /* Endereco: CEP curto, logradouro longo, numero curto — mas nao tao curto que o texto de ajuda embaixo quebre em tres linhas e desalinhe a linha. */ .field-row:has(> .field-cep) { grid-template-columns: 13rem 1fr 11rem; } .field-row:has(> .field-cidade) { grid-template-columns: 1fr 11rem; } .field-row:has(> .field-complemento) { grid-template-columns: 1fr 1fr; } /* Colaborador — genero, identidade de genero e nascimento. */ .field-row:has(> .field-genero) { grid-template-columns: 1fr 1fr 13rem; } /* Funcao: atividade principal e a que decide; cargo e CBO sao curtos. */ .field-row:has(> .field-atividade_principal) { grid-template-columns: 1fr 1fr 13rem; } /* Chave PIX e longa; o tipo e um select de quatro opcoes. */ .field-row:has(> .field-tipo_pix) { grid-template-columns: 17rem 1fr; } /* Documento do colaborador e transferencia bancaria. */ .field-row:has(> .field-tipo_documento) { grid-template-columns: 20rem 1fr; } .field-row:has(> .field-data_validade) { grid-template-columns: 1fr 14rem; } .field-row:has(> .field-agencia) { grid-template-columns: 1fr 10rem 12rem; } /* Check-in: coordenada e um par de numeros; a data e curta. */ .field-row:has(> .field-data_hora_checkin) { grid-template-columns: 16rem 1fr; } .field-row:has(> .field-data_hora_checkout) { grid-template-columns: 16rem 1fr; } /* O.S. — datas sao curtas; nao devem ocupar meia tela cada. */ .field-row:has(> .field-data_inicio) { grid-template-columns: 14rem 14rem 1fr; } /* O.S. — fiscal: um checkbox, um percentual e uma referencia. */ .field-row:has(> .field-emitir_nf) { grid-template-columns: 12rem 12rem 1fr; } /* O.S. — vendedor e data de aprovacao (esta e somente leitura). */ .field-row:has(> .field-vendedor) { grid-template-columns: 1fr 16rem; } } /* --- Densidade e ritmo -------------------------------------------------- */ /* O padrao do unfold reserva px-3 py-2.5 por campo. Numa tela de cadastro com ~19 campos isso vira rolagem pura; apertamos o eixo vertical, mantendo o alvo de toque confortavel. */ .change-form .field-line { padding-bottom: 0.5rem; padding-top: 0.5rem; } /* Ritmo: intervalo curto DENTRO de um grupo, largo ENTRE grupos. O padrao aplicava o mesmo valor nos dois casos, e tudo acabava com o mesmo peso. Mais respiro acima de um titulo do que abaixo — o espaco branco pertence a separacao entre grupos, nao ao vinculo titulo/conteudo. */ .change-form fieldset + fieldset { margin-top: 1.25rem; } .change-form fieldset > h2 { margin-bottom: 0; } /* Textos de ajuda: presentes para quem procura, silenciosos para quem nao. */ .change-form .field-line .help, .change-form .field-line .helptext { line-height: 1.35; margin-top: 0.25rem; opacity: 0.75; } /* --- Campos com formato conhecido --------------------------------------- */ /* Documentos, CEP e UF sao dados tabulares: numeros alinhados leem melhor com largura fixa de digito, e UF e sempre maiuscula. */ .field-cpf input, .field-cnpj input, .field-cep input, .field-inscricao_estadual input, .field-rg input { font-variant-numeric: tabular-nums; } .field-uf input { text-transform: uppercase; } /* --- Listagens ---------------------------------------------------------- */ /* Numeros alinham a direita para poderem ser comparados na vertical — e o cabecalho acompanha, senao o titulo fica orfao do lado errado da coluna. */ #result_list td.field-total_formatado, #result_list td.field-itens_total, #result_list td.field-valor_formatado, #result_list td.field-valor_unitario, #result_list td.field-total_linha, #result_list td.field-quantidade { font-variant-numeric: tabular-nums; text-align: right; } #result_list th.column-total_formatado, #result_list th.column-itens_total, #result_list th.column-valor_formatado, #result_list th.column-valor_unitario, #result_list th.column-total_linha, #result_list th.column-quantidade { text-align: right; } #result_list th.column-total_formatado > div, #result_list th.column-itens_total > div, #result_list th.column-valor_formatado > div, #result_list th.column-valor_unitario > div, #result_list th.column-total_linha > div, #result_list th.column-quantidade > div { justify-content: flex-end; } /* A coluna de acoes fecha a linha: encosta a direita e nao cresce. */ #result_list td.field-acoes, #result_list th.column-acoes { text-align: right; width: 1%; } /* Datas e identificadores curtos nao quebram linha. */ #result_list td.field-periodo, #result_list td.field-periodo_item, #result_list td.field-id_os, #result_list td.field-os_numero, #result_list td.field-vencimento { white-space: nowrap; } /* --- Inline de itens da O.S. -------------------------------------------- */ /* O inline e a superficie de trabalho principal do sistema: e nele que a O.S. e montada. As colunas de data e hora recebiam ~225px cada para conteudo de 10 e 5 caracteres, empurrando Quantidade, Valor e Total para fora da tela. A restricao vai no INPUT, nao na celula: numa tabela de layout automatico o `width` de um e apenas uma preferencia, e o navegador estica as colunas para preencher a largura total — foi por isso que limitar o nao surtiu efeito. Limitando o campo, a coluna encolhe junto. */ @media (min-width: 1024px) { /* O unfold define um min-width nos campos do inline, e pela especificacao CSS o min-width VENCE o max-width. Sem zerar isso, limitar a largura nao tem efeito nenhum — foi o que aconteceu na primeira tentativa. */ #itens_os-group td input, #os_supply_itens_infra_os-group td input, #parcelas-group td input { min-width: 0; } #itens_os-group td.field-data_inicio input, #itens_os-group td.field-data_termino input, #os_supply_itens_infra_os-group td.field-data_inicio input { max-width: 8.5rem; } #itens_os-group td.field-horario_inicio input, #itens_os-group td.field-horario_termino input, #os_supply_itens_infra_os-group td.field-horario_inicio input, #os_supply_itens_infra_os-group td.field-horario_termino input { max-width: 6rem; } #itens_os-group td.field-quantidade input { max-width: 4.5rem; } #itens_os-group td.field-valor_venda input, #itens_os-group td.field-total input { max-width: 7rem; } #itens_os-group td.field-descricao input { max-width: 11rem; } /* Limitar o input nao encolhe a coluna: o mantem a largura e o icone de calendario/relogio fica boiando na borda direita. E o CONTAINER da celula que precisa ser limitado — ai a coluna acompanha. */ #itens_os-group td.field-data_inicio > div, #itens_os-group td.field-data_termino > div, #os_supply_itens_infra_os-group td.field-data_inicio > div { max-width: 12rem; } #itens_os-group td.field-horario_inicio > div, #itens_os-group td.field-horario_termino > div, #os_supply_itens_infra_os-group td.field-horario_inicio > div, #os_supply_itens_infra_os-group td.field-horario_termino > div { max-width: 9.5rem; } #itens_os-group td.field-quantidade > div, #itens_os-group td.field-valor_venda > div, #itens_os-group td.field-total > div { max-width: 7.5rem; } #itens_os-group td.field-descricao > div { max-width: 11.5rem; } /* Os atalhos "Hoje/Agora" do Django ocupam ~42px por celula e, com as colunas estreitas, passaram a invadir a coluna vizinha. Nas linhas do inline os campos sao digitados ou colados; o seletor nativo do navegador continua disponivel. */ #itens_os-group .datetimeshortcuts, #os_supply_itens_infra_os-group .datetimeshortcuts, #parcelas-group .datetimeshortcuts { display: none; } /* O select do item e o campo mais importante da linha: fica com a folga. */ #itens_os-group td.field-item { min-width: 15rem; } } /* Se ainda assim a tabela nao couber (telas estreitas, muitas colunas), ela rola DENTRO do proprio bloco. Antes o container era overflow:visible e a tabela simplesmente vazava para fora, sem barra de rolagem e sem aviso. */ #itens_os-group .overflow-x-auto, #itens_os-group > div, #parcelas-group > div, #os_supply_itens_infra_os-group > div { max-width: 100%; overflow-x: auto; } /* Numeros com largura de digito fixa: colunas de dinheiro alinham na vertical e ficam comparaveis de relance. */ #itens_os-group td.field-quantidade input, #itens_os-group td.field-valor_venda input, #itens_os-group td.field-total input, #parcelas-group td.field-valor_parcela input { font-variant-numeric: tabular-nums; text-align: right; } /* Total e calculado: parece leitura, nao entrada. */ #itens_os-group td.field-total input[readonly], [id$="-total"][readonly] { background-color: transparent; border-style: dashed; } /* --- Campos somente leitura -------------------------------------------- */ /* O unfold reserva a mesma altura (38px) para o valor de um campo readonly e para um input, mas o texto fica ancorado no topo enquanto o input e centrado: numa linha com os dois lado a lado o valor "flutua" acima da caixa vizinha. Centrar o texto alinha os dois. */ .field-line > div.grow:not(:has(input, select, textarea, .select2, a, button)) { display: flex; /* column, nao row: este div guarda o VALOR e o texto de ajuda. Em linha, os dois ficavam colados ("AprovadaSe trata do status da O.S. ..."). */ flex-direction: column; justify-content: center; align-items: flex-start; min-height: 38px; } /* --- Telas estreitas ----------------------------------------------------- */ /* O
do unfold vem com min-width: min-content: o texto de ajuda mais longo de um campo passa a ser a largura minima do bloco inteiro, e a pagina estoura para a direita no celular (131px na tela de colaborador). Com min-width: 0 o bloco encolhe e o texto quebra. */ @media (max-width: 1023px) { fieldset.module, fieldset.module .field-row, fieldset.module .field-line { min-width: 0; } fieldset.module .field-line > div { min-width: 0; max-width: 100%; } } /* --- Blocos que nao cabem na tela --------------------------------------- */ /* Medido em /admin/socialaccount/socialapp/add/: o fieldset renderiza 1481px dentro de um contêiner de 1008px e empurra a pagina 473px para a direita em 1024px de largura. A causa e a mesma de antes — min-width: min-content num bloco com conteudo largo (aqui um