/* Sublima 2026 — regole responsive (tablet/mobile) Scope: solo .s2026 (e .artedit2026, stesso wrapper). Nessun impatto sulle pagine legacy. Le regole @media specifiche di componente restano qui invece che sparse in sublima2026.css o nei singoli template, cosi' la gestione mobile/tablet del template principale ha un solo punto di manutenzione. Dipende dai token in sublima2026_tokens.css e dai componenti in sublima2026.css: va caricato DOPO entrambi. */ /* Breakpoint di riferimento (allineati a Bootstrap 5): >=1200px desktop 992-1199.98px desktop stretto / tablet landscape 768-991.98px tablet <768px mobile */ /* ===== >=768px — spostate da sublima2026.css ===== Fix centratura orizzontale: lo shim BS3 (bootstrap.css) forza margin/width sul .modal-dialog e annulla l'auto-centering BS5 → la modale si appoggia a sinistra. Qui ripristiniamo le auto-margins (specificità più alta dello shim) sopra il breakpoint md, dove la modale è "a finestra" (sotto md è fullscreen). */ @media (min-width: 768px) { .s2026-preview-modal .modal-dialog { margin-right: auto; margin-left: auto; } .s2026-modal .modal-dialog { margin-right: auto; margin-left: auto; } } @media (max-width: 1199.98px) { } /* ===== <=991px — spostata da sublima2026.css ===== */ @media (max-width: 991px) { .art-toolbar { position: static; } .art-kpi .kpi-value { font-size: 14px; } } @media (max-width: 767.98px) { /* Articolo rapido (add_fast_articolo.html): sotto md la card immagine non sta piu' accanto agli Identificativi e prende tutta la larghezza. Il riquadro foto e' un flex-grow dentro una card a colonna, quindi si allungava in una fascia vuota alta ~150px messa fra i primi campi e la Classificazione. Qui la card diventa una riga: miniatura a sinistra, "Gestisci immagine" che si prende il resto. Le classi .artedit2026-img-* esistono solo in quel template (stili base in sublima2026.css). */ .artedit2026 .artedit2026-img-card .artedit2026-card__body { flex-direction: row; align-items: center; gap: 12px; } .artedit2026 .artedit2026-img-box { flex: 0 0 84px; height: 84px; min-height: 0; margin-bottom: 0; } .artedit2026 .artedit2026-img-actions { flex: 1 1 auto; } /* nel riquadro da 84px il 40% del segnaposto sarebbe un'icona di 33px */ .artedit2026 .artedit2026-img-empty { max-width: 62%; max-height: 62%; } } /* ===== <=991.98px — topbar mobile: solo logo, campanella, dark toggle, hamburger (richiesta utente 2026-08-10). Bell e dark-toggle vivono dentro #navbarSupportedContent, il collapse desktop-only di navbar.html (.collapse.navbar-collapse.d-none.d-lg-flex) — non li spostiamo nel markup: sotto lg forziamo quel collapse a ricomparire ma solo per questi due elementi (nascondiamo il resto: menu principale #navbaaaa e menu utente), riposizionandolo in overlay nella topbar accanto all'hamburger. Selettori con specificita' piu' alta di ".navbar-nav .nav-link" (regola generica mobile in navbar.html) per non ereditarne lo stile a pillola bianca. */ @media (max-width: 991.98px) { /* ─── Queste due regole stavano sotto 575.98px, ma servono DOVE CI SONO LE CARD ─── La vista a card di bootstrap-table si attiva a `data-min-width="991"` (la stessa larghezza a cui la navbar cede al menu mobile, qui sotto). Fra 576 e 991 le card c'erano ma queste no, e si vedeva: 1) `SublimaUI.fitTableResize` impone SEMPRE un'altezza al contenitore (l'opzione `height` di resetView), calcolata per una tabella. Con le card, che sono piu' alte, la griglia finiva a scorrere DENTRO quella scatola invece della pagina — la lista sembrava tagliata; 2) `sublima_new.css` mette `touch-action:none` su `.tab-content` per bloccare lo swipe orizzontale fra tab: `none` blocca anche il pan verticale, quindi su un tablet fra 768 e 991 lo scorrimento col dito dentro la lista non funzionava. NB: la colonna singola (`grid-template-columns: 1fr`) resta sotto 576 di proposito: nella fascia tablet le card DEVONO stare su piu' colonne. */ .s2026 .tab-content, .s2026 .fixed-table-container, .s2026 .fixed-table-body { height: auto !important; max-height: none !important; overflow-y: visible !important; } .s2026 .tab-content { touch-action: pan-y !important; } .navbar-mobile-username { display: none; } #navbarSupportedContent { display: flex !important; position: absolute !important; top: 0 !important; right: 46px !important; height: 100% !important; width: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; } #navbarSupportedContent > #navbaaaa, #navbarSupportedContent .navbar-nav.ml-auto > .dropdown.nav-item { display: none !important; } #navbarSupportedContent .navbar-nav.ml-auto { display: flex !important; flex-direction: row; align-items: center; margin: 0; background: transparent !important; border: none !important; border-radius: 0 !important; } #navbarSupportedContent .navbar-nav.ml-auto > .nav-item { margin-right: 2px !important; } #navbarSupportedContent .bell-link, #navbarSupportedContent #sublima_dark_toggle { background: transparent !important; border: none !important; box-shadow: none !important; padding: 6px !important; } .navbar-toggler-sublima { background: transparent !important; border: none !important; box-shadow: none !important; } .navbar-toggler-sublima:focus { background: transparent !important; box-shadow: none !important; } /* Barra azioni dell'header delle liste (Aggiorna/Statistiche/Filtri/…): e' un flex SENZA wrap, quindi quando i bottoni non ci stanno non vanno a capo — escono dal bordo della card e fanno scorrere l'intera pagina in orizzontale. Il wrap non cambia niente dove ci stavano gia': si vede solo dove oggi si vede il difetto. */ .s2026 .page-header--incard .ms-auto.d-flex { flex-wrap: wrap; } /* ─── Header dell'edit (ae-header): titolo su una riga, tab scorrevoli ─── Stava sotto 575.98px, ma la soglia era troppo bassa. sublima2026.css tiene l'header su una riga sola (flex-wrap:nowrap) coi tab a larghezza fissa (.ms-auto flex:0 0 auto) e il titolo a min-width:0, cioe' comprimibile fino a zero: con 3 tab larghi (padding 8px 18px + fs-md) il blocco tab da solo supera i 500px, quindi gia' a 740px il titolo collassa a ~90px — "CAFFETTERIA" diventa "CAF…" e l'occhiello "CONFIGURAZIONE" va a capo a meta' parola. Sotto i 992px titolo e tab vanno su due righe e i tab scorrono in orizzontale invece di stringersi. 991.98 e' la stessa soglia della navbar mobile qui sopra e della card-view di bootstrap-table: sotto di essa la pagina e' gia' trattata come "stretta" ovunque. */ .artedit2026 .ae-header.page-header { flex-wrap: wrap; gap: 8px; } .artedit2026 .ae-header .page-header__title { flex: 1 1 100%; } .artedit2026 .ae-header > .ms-auto { flex: 1 1 100%; width: 100%; margin-left: 0; } .artedit2026 .ae-header #myTab.segmented { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .artedit2026 .ae-header #myTab.segmented::-webkit-scrollbar { display: none; } .artedit2026 .ae-header #myTab.segmented .nav-item { flex: 0 0 auto; } /* Barra azioni (Salva/Chiudi) raggiungibile senza scorrere tutto il form. Su desktop e' statica in fondo alla card (sublima2026.css, ".artedit2026.ae-shell .artedit2026-actions{position:static}") e va bene: li' scorre solo la .tab-content, con altezza fissa, quindi la barra resta comunque a vista. Sotto i 992px la prima regola di questo blocco toglie quell'altezza fissa e a scorrere e' l'intera pagina — la barra finisce in fondo al form, cioe' dopo la griglia articoli, e per salvare bisogna percorrere tutta la scheda. Torna sticky (non fixed: sotto i 576px c'e' gia' la variante fixed a fine file, che vince essendo piu' avanti). */ .artedit2026.ae-shell .artedit2026-actions { position: sticky; bottom: 8px; box-shadow: 0 -2px 14px rgba(15, 23, 42, .10); } } /* ===== 992-1279.98px — la terra di nessuno dell'header di modifica ===== Sopra i 992px l'header dell'edit sta su una riga sola (sublima2026.css:1915, flex-wrap:nowrap, .ms-auto flex:0 0 auto e titolo flex:1 1 auto con min-width:0). Con tre o quattro tab va bene. Con otto o nove — ae_pos, ae_articolo, ae_documento, ae_barrieraCasse — la sola barra supera i 1000px: il titolo e' l'unica parte comprimibile, si schiaccia a pochi pixel e le tab sforano comunque, portandosi dietro la barra di scorrimento orizzontale della pagina. L'h1 e' nowrap+ellipsis e sparisce in silenzio, ma l'occhiello no: si impila una lettera per riga, ed e' il "PUNTO CASSA" letto in verticale. Visto su touch 1024x768, che e' ancora una risoluzione di campo. La cura e' quella che c'e' gia' sotto i 992px, ma senza imporla: qui l'header PUO' andare a capo, non ci va d'ufficio. Il wrap del flexbox scatta solo quando titolo e barra non stanno affiancati, quindi una scheda con due tab resta su una riga sola e non paga 40px di altezza — che su 768 di schermo contano. Quando invece le tab vanno a capo si prendono la riga e scorrono al proprio interno, invece di stringersi fino a spezzare le etichette. ⚠ `.segmented` generico e non `#myTab` come nel blocco <=992: la barra di ae_pos e' l'unica dell'edit senza quell'id (ae_pos.html:83) ed e' proprio quella che sfora di piu'. L'id non glielo aggiungo: quella scheda si apre in un pannello sopra una lista che un `#myTab` ce l'ha gia'. */ @media (min-width: 992px) and (max-width: 1279.98px) { .artedit2026 .ae-header.page-header { flex-wrap: wrap; row-gap: 8px; } /* Pavimento del titolo. Senza, nel caso "ci stanno per un pelo" non scatta il wrap e il titolo si comprime lo stesso fino a collassare: con un minimo sono le tab a dover cedere, e cedendo scorrono. */ .artedit2026 .ae-header .page-header__title { min-width: 200px; } /* L'occhiello non ha il nowrap dell'h1: e' lui a verticalizzarsi. */ .artedit2026 .ae-header .page-header__eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* `0 1 auto` invece di `0 0 auto`: la barra deve poter cedere, altrimenti una volta a capo sborda dalla card invece di scorrere dentro di se'. */ .artedit2026 .ae-header > .ms-auto { flex: 0 1 auto; min-width: 0; } .artedit2026 .ae-header .segmented { flex-wrap: nowrap; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .artedit2026 .ae-header .segmented::-webkit-scrollbar { display: none; } .artedit2026 .ae-header .segmented .nav-item { flex: 0 0 auto; } } /* ===== <=575.98px — spostate da sublima2026.css ===== MOBILE (F9) — sotto 576px il footer di paginazione va su più righe (page-size + info + bottoni non stanno più su una riga sola): s2026ResizeTable (ac_Articolo.js) sottrae dall'altezza disponibile solo la toolbar, non ricalcola quella (maggiore) della paginazione andata a capo, quindi l'altezza risultante di .fixed-table-body può arrivare a 0 e la lista sparisce sotto lo strip KPI. Sotto il breakpoint disabilitiamo l'altezza fissa/scroll interno (impostata via JS con height inline, quindi serve !important) e lasciamo scorrere la pagina intera: la card-view di bootstrap-table (già attiva qui sotto i 562px, estensione mobile) non ha bisogno di un riquadro ad altezza fissa. */ @media (max-width: 575.98px) { /* Scrollbar nativa della pagina: sui touch device reali e' overlay e invisibile a riposo, ma in emulazione/desktop e' "classica" e il browser la disegna SOPRA il contenuto, inclusi gli elementi position:fixed (es. la barra azioni dell'edit, sotto) — sembra un difetto ma e' solo la scrollbar che si vede dove su un telefono vero non si vedrebbe. La nascondiamo per coerenza con l'aspetto reale su mobile; lo scroll (touch/trackpad) resta invariato. */ html, body { scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } /* Toast (SublimaUI.toast, sublima2026_ui.js): l'host e' un .toast-container BS5 con classi inline "position-fixed top-0 end-0" (ancorato in alto a destra, pensato per desktop). Su mobile lo spostiamo in alto al centro, a ridosso del bordo superiore del viewport — sopra la navbar, ignorando l'offset usato su desktop per non sovrapporsi ai suoi controlli. left:50%+translateX(-50%) sovrascrive end-0 (right:0) senza doverlo rimuovere dal markup. */ .s2026-toast-host { left: 50% !important; right: auto !important; top: 8px !important; transform: translateX(-50%); } /* Form di edit (.artedit2026 .ae-shell .tab-content, es. Nuovo Articolo): la regola sopra libera solo overflow-y, ma qui .artedit2026.ae-shell .tab-content (sublima2026.css) imposta anche overflow-x:hidden. Per spec CSS quando un asse e' hidden e l'altro visible, il browser forza quest'ultimo ad "auto" (non puo' restare visible se l'altro clippa) — cosi' l'elemento resta un container di scroll interno a se stante e sul touch lo swipe dentro la card non fa scrollare la pagina (bisogna uscire dalla card). Liberiamo anche overflow-x. */ .artedit2026.ae-shell .tab-content { overflow-x: visible !important; } /* Barra azioni (Salva/Duplica/Chiudi): da desktop e' "statica" in fondo alla card (.artedit2026.ae-shell .artedit2026-actions, sublima2026.css) perche' il tab-content ha altezza fissa con scroll interno e la barra resta sempre a vista. Sotto i 576px la regola sopra toglie l'altezza fissa e fa scrollare l'intera pagina: la barra torna in fondo al form, irraggiungibile senza scrollare tutto. La fissiamo al bordo inferiore del viewport cosi' resta sempre visibile, e aggiungiamo un padding in fondo al tab-content per non far sparire l'ultimo campo sotto la barra. */ .artedit2026.ae-shell .artedit2026-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; margin: 0; border-radius: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); } .artedit2026.ae-shell .tab-content { /* la barra a griglia 2x2 e' alta ~110px (misurato) + safe-area del device */ padding-bottom: calc(120px + env(safe-area-inset-bottom)); } /* Card principale dell'edit (.artedit2026.ae-shell > .card, sublima2026.css: margin:6px su ogni lato) sommato al padding orizzontale di .container-fluid (6px, globale) lascia ~13px di bordo per lato: sotto i 576px, dove lo schermo e' gia' stretto, si nota. Riduciamo solo il margine della card (scoped all'edit, non tocca .container-fluid che e' condiviso da tutte le pagine s2026). */ .artedit2026.ae-shell > .card { margin: 2px; } /* Stessa riduzione per la card principale delle liste. Era scoped su .art-list-shell (presente solo in ac_Articolo.html) proprio per NON toccare le altre ~90 pagine: ora l'obiettivo e' l'opposto — una sola resa responsive per tutte le liste — quindi la regola vale per qualunque wrapper .s2026 con una colonna diretta. Verificato: 90 anagrafiche su 92 hanno la struttura .s2026 > .col-* > .card (86 con `col-xs-12 w-100`). Restano fuori per struttura diversa, da guardare a mano: ac_Operazione.html (primo figlio .clearfix) e ac_Stoccaggio.html (.s2026 annidato). .art-list-shell resta nel selettore: la classe e' ancora in ac_Articolo.html. */ .s2026 > [class*="col-"] > .card, .art-list-shell > .col-xs-12 > .card { margin: 2px; } /* report_button/print_button vengono dal partial condiviso _table_toolbar_left.html (incluso da ~15 pagine lista): nascosti su mobile per tutte le pagine .s2026 che lo includono, non solo ac_Articolo. */ .s2026 .report_button, .s2026 .print_button { display: none !important; } /* Toolbar anagrafiche su mobile (stesso partial _table_toolbar_left.html): restano visibili solo add_row_button (+), info_button e la ricerca. Stampa/report (sopra) e Azioni sono azioni secondarie che su schermo stretto affollano la riga. ⚠ `.add_row_button_fast` (il vecchio fulmine affiancato al +) resta elencato solo per le pagine che ancora lo mostrano: l'anagrafica articoli non lo usa piu', li' il rapido lo governa la soglia dei 992px. ⚠⚠ NON aggiungere qui `.sempl-stretto`: sotto i 992 il + apre gia' il rapido, e quel bottone e' l'UNICA strada rimasta verso la scheda completa. Nascondendolo sul telefono si crea un vicolo cieco — ed e' esattamente il difetto che si vedeva prima, quando sotto i 576 il fulmine spariva. */ .s2026 #toolbar .add_row_button_fast, .s2026 #toolbar .print_button_sla, .s2026 #toolbar .report_button_documenti, .s2026 #toolbar .report_button_clienti, .s2026 #toolbar #azioni_btn, .s2026 #toolbar #report_btn, .s2026 #toolbar .e-fatt_btn, .s2026 #toolbar #stampa_selezionati_btn { display: none !important; } /* Bottoni solo-icona (testo nascosto, vedi .btn-label sotto): la action bar passa da griglia 2x2 a riga singola flessibile, cosi' si adatta da sola a 2, 3 o 4 bottoni (incluso il nuovo trigger dell'offcanvas riepilogo) senza lasciare celle vuote o righe spaiate. */ .artedit2026 .artedit2026-actions { display: flex; gap: 8px; } .artedit2026 .artedit2026-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: normal; text-align: center; padding: 8px 6px; font-size: 12px; } .artedit2026 .artedit2026-btn--close { margin-left: 0; } /* Salva/Decontabilizza (l'azione primaria) resta con testo e occupa 1/3 della barra; gli altri bottoni (Riepilogo, Chiudi, Stampa, XML) restano solo icona e si dividono lo spazio residuo. */ .artedit2026 .artedit2026-btn--primary { flex: 0 0 33%; } /* ...ma se il primario e' l'unico bottone della barra (articolo rapido: c'e' solo Salva) il 33% lo lascia rannicchiato a sinistra di una barra fissa larga tutto lo schermo. Da solo prende tutta la riga. */ .artedit2026 .artedit2026-actions .artedit2026-btn--primary:only-child { flex: 1 1 auto; } .artedit2026 .artedit2026-btn:not(.artedit2026-btn--primary) .btn-label { display: none; } .artedit2026 .artedit2026-btn:not(.artedit2026-btn--primary) i { font-size: 18px; } /* Offcanvas riepilogo (mobile): dal basso, fino a meta' schermo. */ #riepilogoOffcanvas { height: 50vh; } /* Vista card (bootstrap-table cardView, stile in sublima2026.css): su schermo stretto una sola card per riga, identica al desktop — i campi restano appaiati su due colonne come da sublima2026.css. */ .s2026 .fixed-table-container.has-card-view table.table > tbody { grid-template-columns: 1fr; } /* Striscia KPI (ac_Articolo e simili): 5 box con flex-wrap vanno su 2 righe sotto i 576px, allungando la testata prima della lista. Diventa una riga sola scorrevole in orizzontale — i box non si comprimono (flex:0 0 auto), lo swipe la esplora tutta. */ .s2026 .kpi-strip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; -ms-overflow-style: none; } .s2026 .kpi-strip::-webkit-scrollbar { display: none; } .s2026 .kpi-strip .kpi { flex: 0 0 auto; } /* sublima_new.css ha "header{padding-top:0!important;padding-bottom:20px!important}" sotto i 767px: l'header e' un
, quindi il tag-selector legacy colpisce anche qui e lascia 20px vuoti sotto la striscia KPI prima del bottone Filtri. Ripristiniamo il padding simmetrico (8px, come da desktop) — serve !important per pareggiare quello legacy. */ .s2026 .page-header--incard { padding-top: 8px !important; padding-bottom: 8px !important; } /* L'header e' un flex a riga unica su desktop (titolo | kpi-strip | filtri) con gap:24px per separarli in orizzontale. Sotto i 576px va a capo su 3 righe (flex-wrap) e quello stesso gap:24px diventa spazio verticale sopra/sotto la striscia KPI. Lo riduciamo solo qui, dove serve solo a staccare le righe. */ .s2026 .page-header--incard { gap: 10px; } /* I box KPI a larghezza intrinseca (flex:0 0 auto sopra) restano piccoli come da desktop: sotto i 576px c'e' spazio per farli piu' leggibili al tocco, valore e label ingranditi. */ .s2026 .kpi-strip .kpi { padding: 10px 16px; } .s2026 .kpi-strip .kpi__label { font-size: var(--s2026-fs-xs); } .s2026 .kpi-strip .kpi__value { font-size: var(--s2026-fs-2xl); } /* Riga "Filtri" + tab Articoli/Anteprima nell'header (.ms-auto la spinge a destra e va a capo sotto ai KPI su schermo stretto): sotto i 576px occupa tutta la larghezza della card invece di restare ancorata a destra con vuoto a sinistra — bottone Filtri e segmented si dividono lo spazio. */ .s2026 .page-header--incard .ms-auto.d-flex { width: 100%; margin-left: 0; } .s2026 .page-header--incard .ms-auto.d-flex .btn-ghost { flex: 1 1 0; justify-content: center; } /* Un bottone PIENO nella stessa barra (l'azione primaria della pagina: "NUOVA PRATICA" del Centro Ticket, e i casi analoghi di ac_Progetto, ac_Stoccaggio, ac_FileTerminalinoStore) non e' .btn-ghost, quindi la regola qui sopra non lo tocca e resta della sua larghezza naturale: accanto a quattro ghost su 400px finiva tagliato fuori dallo schermo. Va a capo e si prende la riga intera — e' l'azione principale, non un bottone da spremere. :not(.artedit2026): nelle schede di modifica la stessa struttura .page-header--incard > .ms-auto.d-flex contiene i tab, non dei bottoni. */ .s2026:not(.artedit2026) .page-header--incard .ms-auto.d-flex > .btn:not(.btn-ghost) { flex: 1 1 100%; justify-content: center; } /* Tab Lista/Anteprima (#anagraficatab): sotto i 576px la vista e' sempre a colonna singola (niente split-view da alternare), quindi le tab non hanno piu' funzione — restava solo il bottone Filtri, che occupa la riga intera ereditando flex:1 1 0 dal genitore ora che e' l'unico figlio visibile. Selettore per id (non .segmented generico): l'header di modifica (.artedit2026 .ae-header.page-header, es. Nuovo Articolo) ha la stessa struttura .page-header--incard > .ms-auto.d-flex > ul.segmented per le sue tab (Dati principali/Dati fisici/...), che restano necessarie anche su mobile e non vanno nascoste. */ .s2026 .page-header--incard .ms-auto.d-flex #anagraficatab.segmented { display: none; } /* Barra di ricerca in #toolbar: e' float-right con min/max-width pensati per il desktop (320-520px accanto ai bottoni azione) — sotto i 576px i bottoni vanno a capo e la ricerca segue attaccata, stretta al suo min-width invece di riempire la card. Tolto il float rimane a larghezza piena sulla propria riga, con margine sopra per staccarla dai bottoni. */ .s2026 #toolbar .search { float: none; display: block; width: 100%; min-width: 0; max-width: none; margin-top: 10px; } /* Pannelli "Filtri" (id="filtriOffcanvas", classe fk-wide): la larghezza e' fissata via utility Bootstrap w-50/w-75 direttamente nell'html di ogni lista (ac_Articolo, ac_Cliente, ac_Documento, ac_Fornitore, ac_ListinoArticolo, ac_Stoccaggio — vedi commento su .fk-wide in sublima2026.css: in BS 5.1.1 non esiste --bs-offcanvas-width). Sotto i 576px il 50%/75% lascia il pannello stretto — qui va sempre a piena larghezza. !important richiesto: le utility w-* di Bootstrap lo sono. */ .s2026 #filtriOffcanvas.fk-wide { width: 85% !important; } /* Paginazione: .pagination-detail e .pagination sono float-left/float-right (bootstrap-table), affiancati sulla stessa riga — sotto i 576px la somma delle due larghezze supera quella della card e la lista pagine/jump-to esce dal bordo. Le impiliamo verticalmente e permettiamo ai numeri di pagina di andare a capo invece di sforare. */ .s2026 .fixed-table-pagination { display: flex; flex-direction: column; gap: 8px; } .s2026 .fixed-table-pagination .float-left.pagination-detail, .s2026 .fixed-table-pagination .float-right.pagination { float: none; width: 100%; } .s2026 .fixed-table-pagination .pagination-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Il div "float-right pagination" (bootstrap-table) e' anch'esso flex-nowrap: mette ul.pagination e .page-jump-to sulla stessa riga, schiacciando la ul che di conseguenza va a capo internamente. In colonna ul.pagination ha tutta la larghezza della card per stare su una riga sola, jump-to va sotto. */ .s2026 .fixed-table-pagination .float-right.pagination { flex-direction: column; } .s2026 .fixed-table-pagination ul.pagination { flex-wrap: wrap; row-gap: 4px; width: 100%; } .s2026 .fixed-table-pagination .page-jump-to { margin-top: 4px; } /* Tab del segmented (#anagraficatab, es. Articoli/Anteprima): l'etichetta e' {{pageData["whereiam"]}} quindi in alcune anagrafiche e' lunga (es. "Elenco Fornitori") e non ci sta nella pillola stretta di mobile. Sotto i 576px si nasconde il testo e resta solo l'icona: font-size:0 sul link azzera il nodo di testo (bare, non in uno span), poi lo si ripristina sull'icona bi che ha il proprio font-size esplicito. Selettore con id (#anagraficatab.segmented) per pareggiare la specificita' di "#anagraficatab li a.active" in sublima_new.css (font-size:16px senza !important, ma con l'id vince a parita' di !important sulla sola classe). */ .s2026 #anagraficatab.segmented .nav-link { display: inline-flex; font-size: 0; padding-left: 10px; padding-right: 10px; gap: 0; justify-content: center; } .s2026 #anagraficatab.segmented .nav-link .bi { font-size: var(--s2026-fs-lg); } /* NB: le regole di wrap dell'ae-header (titolo su una riga, tab scorrevoli) stavano qui e sono salite al blocco <=991.98px: il difetto che curavano si vede gia' a 740px, non solo sotto i 576. Da li' valgono anche per questa fascia, perche' 991.98 la contiene. */ } /* ============================================================================ EDITOR DOCUMENTO SEMPLIFICATO — soglia di visibilita' dei suoi bottoni ============================================================================ Con la chiave `__documenti_editor_semplificato` su "auto" (il predefinito) il telefono accanto alla matita e il bottone "Semplificato" in toolbar si vedono solo su schermo stretto: da PC la coppia di bottoni non serve e allunga la barra delle azioni. La soglia sta QUI e non nel JS di proposito — con `matchMedia`/`resize` andrebbe riapplicata a ogni ridimensionamento e a ogni ridisegno della tabella, che si ridisegna a ogni pagina, filtro e ordinamento. Con "sempre" la classe non viene proprio scritta nel markup, quindi questa regola non ha bersaglio; con "mai" il bottone non esiste. Niente `!important`: il concorrente e' `.btn{display:inline-block}` di Bootstrap, stessa specificita' ma caricato prima — questo foglio e' l'ultimo dei tre (head.html:88-90). */ @media (min-width: 992px) { /* `.sempl-stretto` e' l'alias neutro: la stessa soglia serve ora anche all'editor rapido degli articoli, e la soglia resta un numero solo. */ .doc-sempl-stretto, .sempl-stretto { display: none; } } /* Gemella speculare, aggiunta il 2026-08-17 con la revisione dello scambio: i due bottoni della toolbar documenti sono ALTERNATIVI, perche' ognuno serve solo dove il `+` fa l'altra cosa. Sotto la soglia il + apre il semplificato, quindi serve "Completo" (.doc-sempl-stretto); sopra il + apre il completo, quindi serve "Semplificato" (.doc-sempl-largo). Tenerle adiacenti e' voluto: la soglia e' un numero solo e va cambiata in tutte e due insieme. */ @media (max-width: 991.98px) { .doc-sempl-largo, .sempl-largo { display: none; } } /* ============================================================================ SETUP SUBLIMA — sidebar a scomparsa e Salva ancorato (sotto lg) ============================================================================ Su desktop il Setup e' a due colonne: elenco sezioni a sinistra (col-lg-3, `.setup2026-col`) e scheda a destra. Sotto lg le due colonne si impilano e l'elenco — 18 voci, misurate 1583px — diventa due schermate intere da scorrere PRIMA di vedere un solo campo; e per cambiare sezione si risale tutto. Stessa sorte al Salva, che nel markup sta in fondo alla colonna di sinistra: finiva sepolto a meta' documento mentre si compila 1500px piu' sotto. Qui la sidebar diventa un pannello che entra da sinistra (aperto dal bottone "Sezioni" in testata, `#setupMenuBtn`) e il Salva una barra ancorata in fondo allo schermo — lo stesso trattamento che sotto 576px riceve `.artedit2026-actions`, cosi' il Setup si comporta come le altre pagine. Il pannello e' `.setup2026-side` e NON l'intera `.setup2026-col`: il Salva e' figlio della colonna, e un antenato con `transform` rende `position:fixed` relativo a quell'antenato invece che al viewport — dentro un drawer traslato la barra in fondo non funzionerebbe. Lasciando fuori la colonna, il Salva resta ancorabile e il drawer si porta via solo l'elenco. Niente componente `offcanvas` di Bootstrap: quello responsive (`.offcanvas-lg`) esiste da BS 5.2 e qui siamo su 5.1.1 — l'offcanvas di serie sarebbe a scomparsa a TUTTE le larghezze, desktop compreso. */ @media (max-width: 991.98px) { /* `fitSetup()` (setup_sublima.html) scrive height al pixel sulla colonna per il layout a due colonne ad altezza di viewport: inline, quindi serve !important. Sotto lg non c'e' niente da far combaciare, la pagina scorre. */ .setup2026 .setup2026-col { height: auto !important; display: block; } .setup2026 .setup2026-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1046; /* sopra il backdrop (1045) e la navbar */ width: min(310px, 86vw); height: auto; max-height: none; padding: 12px 8px 12px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--s2026-bg-panel); border-right: 1px solid var(--s2026-rule); border-bottom: none; /* il filetto sopra il Salva qui non ha senso */ box-shadow: 6px 0 24px rgba(0, 0, 0, .18); transform: translateX(-100%); transition: transform .22s ease; } .setup2026 .setup2026-side.is-open { transform: translateX(0); } /* Chi non puo' vedere l'animazione non deve subire lo scatto a meta'. */ @media (prefers-reduced-motion: reduce) { .setup2026 .setup2026-side { transition: none; } } /* Velo: esiste sempre nel markup, si accende con .is-open. Non usiamo il backdrop di Bootstrap perche' lo crea il componente offcanvas, che qui non istanziamo. */ .setup2026-side-backdrop { position: fixed; inset: 0; z-index: 1045; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity .22s ease; } .setup2026-side-backdrop.is-open { opacity: 1; pointer-events: auto; } /* Salva: pillola sospesa in fondo, non barra a tutta larghezza appoggiata al bordo. Al 90% della viewport e staccata dal fondo si legge come un'azione che galleggia sopra la scheda, e si vede che sotto il contenuto continua a scorrere. `left:50%` + `translateX(-50%)` la centra senza dover togliere il `right`; lo stacco dal basso somma la safe-area del device, altrimenti sui telefoni con la barra gesture ci finisce sotto. `margin` e `justify-content` arrivano dalla regola inline della pagina (`.setup2026-col #submitButton2`), scritta per il footer di colonna: il margine qui va azzerato. Selettore con la colonna dentro (0,2,1) per battere quel `.setup2026-col #submitButton2` (0,1,1): il suo