/* ========================================================================= Portale Giacenze — strato adattivo ------------------------------------------------------------------------- Perché esiste, invece di essere sparso dentro style.css: si aggiunge in fondo alla catena e non toglie niente. Se un giorno dà fastidio, si leva la riga del e il portale torna esattamente com'era. Risolve tre cose che si vedevano male, e sempre per lo stesso motivo: la testata sta appiccicata in alto e occupa spazio vero (220 px e passa), ma tutto il resto del foglio faceva finta che non ci fosse. 1. Le intestazioni interne (nome del gruppo, riga delle colonne) usavano `top: 0` e quindi si appiccicavano SOTTO la testata, cioè sparivano. Adesso usano `--h-testata`, che adattivo.js tiene sempre aggiornata con l'altezza vera, qualunque sia la larghezza dello schermo. 2. Il riquadro della tabella aveva un'altezza calcolata su un numero fisso (100vh − 250px). Su schermi bassi o con la testata più alta il fondo finiva sotto il bordo della finestra. Ora si calcola sulla testata vera, e in `dvh`, che sul telefono tiene conto della barra degli indirizzi. 3. Quando si scorre, la testata si stringe: il sottotitolo e le due sezioni lasciano il posto ai dati. Risalendo di un dito tornano. In più: quando una tabella continua a destra, il bordo lo dice. ========================================================================= */ :root { --h-testata: 0px; /* misurata da adattivo.js */ --h-gruppo: 0px; /* altezza della barra col nome del gruppo */ } /* ------------------------------------------------------------ testata che si stringe */ .testata { transition: padding .18s ease; } .titolo span { transition: opacity .15s ease, max-height .18s ease; } body.testata-compatta .testata { padding-top: calc(7px + env(safe-area-inset-top)); padding-bottom: 0; } body.testata-compatta .titolo { font-size: 15px; } body.testata-compatta .titolo span { opacity: 0; max-height: 0; overflow: hidden; } body.testata-compatta .testata-riga { margin-bottom: 8px; } body.testata-compatta .sezioni { display: none; } body.testata-compatta .barra-ricerca { margin-bottom: 8px; } /* Schermi bassi (portatili con poca altezza, telefono in orizzontale): la testata parte già stretta, se no dei dati non resta niente. */ @media (max-height: 620px) { .titolo span { display: none; } .testata { padding-top: calc(8px + env(safe-area-inset-top)); } body.testata-compatta .barra-ricerca { display: none; } } /* ------------------------------------------------------------ intestazioni interne */ /* Il riquadro del gruppo aveva `overflow: hidden` per arrotondare gli angoli. Ma `hidden` fa diventare quel riquadro un contenitore di scorrimento, e dentro un contenitore così il `position: sticky` non si appiccica più a niente: era questo che impediva all'intestazione di restare in vista. `clip` taglia gli angoli allo stesso modo senza creare il contenitore. */ .famiglia { overflow: clip; } /* L'elenco puo superare 2.600 righe. Il browser conserva tutte le funzioni e tutti i dati nel DOM, ma evita layout e disegno delle righe molto lontane dallo schermo. In stampa si disattiva: il foglio deve contenere tutto. */ @supports (content-visibility: auto) { .famiglia-riga { content-visibility: auto; contain-intrinsic-size: auto 43px; } @media (max-width: 699px) { .famiglia-riga { contain-intrinsic-size: auto 118px; } } @media print { .famiglia-riga { content-visibility: visible; contain-intrinsic-size: none; } } } /* Il nome del gruppo resta in vista, ma SOTTO la testata, non dietro. */ .famiglia-testa { top: var(--h-testata); z-index: 20; } /* La riga delle colonne segue il nome del gruppo: è quella che dice cosa sono i numeri, ed è proprio quella che prima spariva per prima. */ .famiglia-intestazione { position: sticky; top: calc(var(--h-testata) + var(--h-gruppo)); z-index: 19; background: #f7f9fc; } /* Anche l'intestazione della vista a schede, sui monitor grandi. */ @media (min-width: 900px) { .intestazione-colonne:not(.nascosto) { position: sticky; top: var(--h-testata); z-index: 18; background: var(--sfondo); padding-top: 8px; } } /* ------------------------------------------------------------ riquadro della tabella */ .tabella-scorri { /* l'altezza buona è quella che avanza davvero sotto la testata */ max-height: calc(100vh - var(--h-testata) - 28px); max-height: calc(100dvh - var(--h-testata) - 28px); position: relative; } /* Sul telefono conviene lasciare scorrere la pagina intera invece di incastonare un riquadro alto tre righe. */ @media (max-width: 699px) { .tabella-scorri { max-height: none; min-height: 0; } table.tabella-dati th { top: var(--h-testata); } } /* ------------------------------------------------------------ righe leggibili sul telefono */ /* Quando le colonne scelte non ci stanno, la riga passa a blocchi e ogni numero si porta sopra il nome della sua colonna: prima restavano cifre nude (137, 7.340, 14.938) senza modo di sapere quale fosse cosa. La classe `a-blocchi` la mette adattivo.js misurando: dipende dallo schermo E da quante colonne si sono scelte, non da una larghezza indovinata. La griglia arriva come stile in linea da JavaScript, quindi per scavalcarla serve davvero !important. */ .famiglie.a-blocchi .famiglia-intestazione { display: none; } .famiglie.a-blocchi .famiglia-riga { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important; gap: 9px 12px !important; padding: 12px 14px; align-items: start; } /* L'identità della riga — codice, descrizione — prende tutta la larghezza e non porta etichetta: si riconosce da sola. Quali celle siano lo decide adattivo.js guardando le celle, non contando le posizioni: dipende da quale colonna fa da gruppo, e contare a mano faceva sparire l'etichetta a un numero (una giacenza «712,60» senza niente sopra). Tutto il resto sta in colonna, numeri e testi brevi allo stesso modo: prima le colonne di testo che venivano dopo («Ultimo fornitore», «Sottoclasse», «Settimane in cui va») si prendevano una riga a testa e scendevano una sotto l'altra, sprecando mezzo schermo per tre dati corti. */ .famiglie.a-blocchi .famiglia-riga > .cella-guida { grid-column: 1 / -1; } .famiglie.a-blocchi .famiglia-riga > .cella-guida:not(.cella-guida-forte) { font-size: 12px; color: var(--testo-tenue); } .famiglie.a-blocchi .famiglia-riga > .cella-guida-forte { font-weight: 600; font-size: 13.5px; color: var(--testo); } .famiglie.a-blocchi .famiglia-riga > span[data-eti]::before { content: attr(data-eti); display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--testo-tenue); margin-bottom: 1px; /* «Manca alla scorta» in una colonna stretta va a capo, non si tronca: un'etichetta tagliata a metà non dice più che cos'è quel numero. */ white-space: normal; overflow-wrap: anywhere; line-height: 1.2; } .famiglie.a-blocchi .famiglia-riga > span.dx { text-align: left; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ "continua a destra" */ /* Una tabella più larga dello schermo non lo dice: sembra tagliata. Una sfumatura sul bordo, che compare solo quando c'è davvero altro. */ .tabella-scorri::after, .tabella-scorri::before { content: ''; position: sticky; top: 0; display: block; width: 26px; height: 100%; pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 6; } .tabella-scorri::before { float: left; margin-right: -26px; left: 0; background: linear-gradient(to right, rgba(16,26,44,.16), transparent); } .tabella-scorri::after { float: right; margin-left: -26px; right: 0; background: linear-gradient(to left, rgba(16,26,44,.16), transparent); } .tabella-scorri.scorre-sx::before { opacity: 1; } .tabella-scorri.scorre-dx::after { opacity: 1; } /* ------------------------------------------------------------ riepilogo più sobrio */ /* Sul telefono le schede del riepilogo si impilavano: nove riquadri, quasi mille pixel di altezza prima di arrivare a un solo dato. Messe in fila e fatte scorrere di lato costano un decimo dello spazio e non perdono niente: ci sono ancora tutte, basta trascinare. */ @media (max-width: 699px) { .riepilogo { display: flex !important; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .riepilogo::-webkit-scrollbar { height: 0; } .scheda-riepilogo { flex: 0 0 auto; min-width: 156px; max-width: 200px; scroll-snap-align: start; padding: 10px 12px; } .scheda-riepilogo .numero { font-size: 22px; } } /* Su schermi bassi (portatili 720p, finestre affiancate) le schede si stringono un po': stesse informazioni, meno spazio sprecato. */ @media (min-width: 700px) and (max-height: 820px) { .scheda-riepilogo { padding: 10px 12px; } .scheda-riepilogo .numero { font-size: 22px; } } /* ------------------------------------------------------------ niente tagli laterali */ /* Niente `overflow-x: hidden` su html/body, per quanto sia la scorciatoia ovvia: crea un nuovo contenitore di scorrimento e AMMAZZA il `position: sticky` della testata, che sparisce appena si scorre. Provato, e si vede. Chi deve scorrere in orizzontale lo fa dentro il proprio riquadro. */ main { min-width: 0; } .riga-strumenti, .riepilogo { max-width: 100%; } /* ============================================================ cima piu' stretta «rendi questa parte più compatta in modo da dare più spazio ai report di sotto» — Francesco, 22/08. Dentro l'intranet la pagina sta già in una cornice, quindi ogni fascia in cima vale doppio. Le schede del riepilogo erano il pezzo più goloso: nove riquadri alti, ognuno con tre righe di nota. Restano tutte, dicono le stesse cose, ma su una riga sola e in un terzo dello spazio. */ .testata { padding-top: calc(9px + env(safe-area-inset-top)); } .testata-riga { margin-bottom: 8px; } .titolo { font-size: 16px; } .titolo span { font-size: 11px; } .sezioni { padding-bottom: 0; } .barra-ricerca { margin-bottom: 9px; } .barra-ricerca input { padding-top: 9px; padding-bottom: 9px; } .filtri { padding-bottom: 9px; } main { padding-top: 14px; } /* Le schede del riepilogo: erano cinque righe l'una — etichetta, numero e fino a tre note incolonnate. Numero e note stanno benissimo sulla stessa riga, e la scheda passa da cinque righe a due senza perdere un dato. */ .riepilogo { gap: 8px; margin-bottom: 11px; } .scheda-riepilogo { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; row-gap: 1px; padding: 9px 12px; } .scheda-riepilogo .etichetta { flex: 1 1 100%; font-size: 9.5px; letter-spacing: .06em; } .scheda-riepilogo .numero { flex: 0 0 auto; font-size: 21px; line-height: 1.15; margin-top: 1px; } .scheda-riepilogo .nota { flex: 0 1 auto; font-size: 10.5px; line-height: 1.25; margin-top: 0; } /* la riga degli strumenti */ .riga-strumenti { margin: 10px 0 8px; } .conteggio-risultati { font-size: 12.5px; } .riga-strumenti .bottone { padding: 7px 11px; font-size: 12.5px; } .selettore-magazzino { padding: 7px 10px; font-size: 12.5px; } .settimana > span { font-size: 12px; } .settimana button { padding: 5px 9px; } /* Su schermi bassi si stringe ancora: ogni riga di intestazione in meno è una riga di articoli in più, ed è per gli articoli che si è qui. */ @media (max-height: 820px) { .titolo span { display: none; } .scheda-riepilogo { padding: 8px 11px; } .scheda-riepilogo .numero { font-size: 19px; } .riepilogo { gap: 7px; } main { padding-top: 11px; } } /* ============================================================ colonne regolabili La presa sta sul bordo destro di ogni intestazione. La prima versione la mostrava solo al passaggio del mouse: «regolazione delle colonne non lo trovo». Una funzione che non si vede non esiste — adesso il separatore fra le colonne c'è sempre, leggero come in un foglio di calcolo, e si accende quando ci si avvicina. */ .famiglia-intestazione > span { position: relative; } /* Il testo, soprattutto quando e' allineato a destra, non deve arrivare attaccato alla presa verticale della colonna successiva. */ .famiglia-intestazione > span:not(:last-child) { padding-right: 24px; } .presaCol { /* La presa resta sul confine visibile fra le colonne. La distanza dalla scritta viene dal padding dell'intestazione, non dallo spostamento della presa fuori dalla sua cella. */ position: absolute; top: -6px; right: -8px; bottom: -6px; width: 16px; cursor: col-resize; touch-action: none; z-index: 3; } .presaCol::before { content: ''; position: absolute; top: 2px; bottom: 2px; left: 7px; width: 2px; border-radius: 2px; background: var(--bordo); transition: background .12s ease, transform .12s ease; } /* l'ultima colonna non ha niente a destra: il trattino sarebbe solo sporco */ .famiglia-intestazione > span:last-child .presaCol::before { display: none; } .famiglia-intestazione:hover .presaCol::before { background: #b9c4d4; } .presaCol:hover::before, .presaCol.inCorso::before { background: var(--primario); transform: scaleX(1.6); } /* mentre si trascina, il cursore resta quello giusto su tutta la pagina e il testo non si seleziona sotto le dita */ body.staRegolando { cursor: col-resize; user-select: none; } /* a blocchi le colonne non ci sono: niente prese da trascinare */ .famiglie.a-blocchi .presaCol { display: none; } /* I due tasti si accendono come «Anche a zero», che è già la convenzione della barra: non serve inventarne un'altra. */ /* ------------------------------------------------------------ codice sotto la descrizione Nel Sottoscorta il codice non ha più una colonna sua: sta sotto la descrizione, piccolo. Si legge quando serve e non si prende 150 px per stare lì a guardare. */ .famiglia-riga .codSotto { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 500; line-height: 1.18; letter-spacing: .015em; color: var(--testo-tenue); font-variant-numeric: tabular-nums; } /* SOTTOSCORTA: LA DESCRIZIONE NON È IL CODICE. `unisciCodice` toglie la cella «Codice» dalla riga, quindi la descrizione diventa la PRIMA cella — e si prende `.famiglia-riga > span:first-child` di `style.css`, che è grigio 12 px perché era pensato per il codice. Risultato: nella vista a colonne il dato principale della riga era il più smorto della tabella, con sotto il codice in grigio 11: due grigi che si confondono. Nella vista a blocchi non succedeva, per via di `.cella-guida-forte`. */ .famiglie:not(.a-blocchi) .famiglia-riga > span.cella-guida-forte:first-child, .famiglie:not(.a-blocchi) .famiglia-riga > span.cella-guida:first-child { color: var(--testo); font-size: 13.5px; font-weight: 620; line-height: 1.22; } /* ============================================================ leggibilita' tabella La tabella ha molti numeri: il carattere deve creare gerarchia, non rumore. Le intestazioni sono piu' scure e semibold, la descrizione guida la riga, i numeri restano tabulari e fornitore/sottoclasse sono leggermente piu' discreti. La misura resta compatta, ma non minuta. */ .famiglie:not(.a-blocchi) .famiglia-intestazione { align-items: center; padding-top: 9px; padding-bottom: 9px; color: #596679; font-size: 11px; font-weight: 650; line-height: 1.22; letter-spacing: .025em; } .famiglie:not(.a-blocchi) .famiglia-riga { align-items: center; padding-top: 10px; padding-bottom: 10px; font-size: 13.5px; line-height: 1.28; } .famiglie:not(.a-blocchi) .famiglia-riga > span { min-width: 0; } .famiglie:not(.a-blocchi) .famiglia-riga > span.dx { font-weight: 620; } .famiglie:not(.a-blocchi) .famiglia-riga > span:not(.dx):not(.cella-guida):not(.cella-guida-forte) { color: #344054; font-size: 13px; } /* ========================================================================= IL MARCHIO — 23/08/2026 «in giacenze e portale produzione inserisci il logo Di Maria come nel crm» — Francesco. Stesso file del CRM: `logo_gdm_bianco.png`, portato a 42 px sul computer e 34 sul telefono per dare al marchio la giusta evidenza. È la versione BIANCA, quindi vuole un fondo scuro: qui sta nella testata blu, come nel CRM sta nella barra blu in cima. Sta in questo file e non in `tema.css` di proposito: il marchio non è una veste, è l'azienda. Deve restare anche se si torna alla veste classica. ========================================================================= */ .marchio { flex: 0 0 auto; display: flex; align-items: center; } .marchio img { height: 42px; width: auto; display: block; transition: height .18s ease; } /* il titolo si prende quello che resta, così su schermi stretti è lui a stringersi e non il marchio */ .testata-riga .titolo { min-width: 0; flex: 1 1 auto; } body.testata-compatta .marchio img { height: 32px; } @media (max-width: 640px) { .marchio img { height: 34px; } body.testata-compatta .marchio img { height: 28px; } } /* in stampa la testata blu non c'è: un logo bianco su carta bianca sarebbe un buco */ @media print { .marchio { display: none !important; } } /* Sottoscorta: da tasto a tendina (25/08). Deve stare in fila con gli altri comandi e sembrare uno di loro, quindi eredita .bottone-chiaro e si toglie solo l'aspetto di sistema del