/* ============================================================================= chart-grid.css — chart-dashboard rács (.wireframe) + oszlopszám + „nincs adat" összegző. Korábban az app.css-ben élt. A --chart-cols-t a site.js állítja a attribútumon át (nautechChartSize). ============================================================================= */ .wireframe { display: grid; gap: 3rem; container-type: inline-size; container-name: wireframe-container; } section .wrapper { display: grid; gap: 1rem; } .full { grid-column: 1 / -1; } /* Desktop chart-kártya oszlopszám — a UserSettings ChartCardSize állítja a attribútumon át (site.js nautechChartSize). Default (Large) = 2 oszlop; Medium = 3; Small = 4. A --chart-cols-t KIZÁRÓLAG a @container (min-width:900px) blokkon belül használjuk, ezért mobil (<900px) ÉRINTETLEN: ott a section .wrapper marad egyoszlopos 100%-széles. */ :root { --chart-cols: 2; } :root[data-chart-size="medium"] { --chart-cols: 3; } :root[data-chart-size="small"] { --chart-cols: 4; } /* Kisebb chart-méreteknél a full-width chartok (légnyomás, páratartalom) is a rácshoz igazodjanak (ne nyúljanak teljes sorra), mint a többi grafikon — csak Large-nál full-width. */ :root[data-chart-size="medium"] .full, :root[data-chart-size="small"] .full { grid-column: auto; } @container wireframe-container (min-width: 900px) { section .wrapper { grid-template-columns: repeat(var(--chart-cols, 2), minmax(0, 1fr)); } } /* N11 (user választása: KÖZÖS RÁCS, section-címek nélkül) — kis/közepes chart-méretnél minden chart EGYETLEN egyenletes rácsba folyik; a kategória- és eszköz-fejlécek eltűnnek (minden chart önazonosító: SourceName + SecondLine, pl. „Starboard / Outside temperature"). A .wireframe a @container-elem, ezért a rá vonatkozó szabály csak top-level @media-ban lehet (a container query önmagát nem stílusozza). A section + .wrapper display:contents-szel feloldódik → a chart-divek közvetlen grid-itemek lesznek és egyenletesen töltik a sort. Large (default) ÉS mobil (<900px) érintetlen. */ @media (min-width: 900px) { :root[data-chart-size="small"] .wireframe, :root[data-chart-size="medium"] .wireframe { display: grid; grid-template-columns: repeat(var(--chart-cols), minmax(0, 1fr)); gap: 0.75rem 1rem; align-items: start; } /* Kategória- és eszköz-fejlécek elrejtése (a chartok maguk azonosítják magukat). */ :root[data-chart-size="small"] .wireframe .section-title, :root[data-chart-size="medium"] .wireframe .section-title, :root[data-chart-size="small"] .wireframe .subsection-title, :root[data-chart-size="medium"] .wireframe .subsection-title { display: none; } /* CSAK a chart-szekciók (amelyekben .wrapper van) oldódnak fel → a chartjaik közvetlenül a .wireframe rácsába folynak. A NEM-chart szekciók (pl. Routes oldal: térkép, TripBook) NEM oldódnak fel — teljes sort kapnak (lásd lent), hogy ne préselődjenek egy keskeny rács-cellába. */ :root[data-chart-size="small"] .wireframe > section:has(.wrapper), :root[data-chart-size="medium"] .wireframe > section:has(.wrapper), :root[data-chart-size="small"] .wireframe section .wrapper, :root[data-chart-size="medium"] .wireframe section .wrapper { display: contents; } /* Nem-chart szekciók (térkép, TripBook stb.) teljes sor — ne folyjanak a chart-rácsba, ne préselődjenek egy keskeny cellába (Routes oldal). */ :root[data-chart-size="small"] .wireframe > section:not(:has(.wrapper)), :root[data-chart-size="medium"] .wireframe > section:not(:has(.wrapper)) { grid-column: 1 / -1; } /* Az időtartomány-toolbar teljes szélességű, külön sorban. */ :root[data-chart-size="small"] .wireframe > .dateintervalpicker, :root[data-chart-size="medium"] .wireframe > .dateintervalpicker, :root[data-chart-size="small"] .wireframe > .electrical-toolbar, :root[data-chart-size="medium"] .wireframe > .electrical-toolbar { grid-column: 1 / -1; } } @media (max-width: 900px) { canvas { touch-action: pan-y pinch-zoom !important; } } /* ===== Mobil: adat nélküli chartok a lap végére, listaszerűen ===== Mobilon (<900px) az adat nélküli chart-kártyákat kivesszük a helyükről (display:none), és a nevüket a lap legvégén, a NoDataChartSummary komponens listájában soroljuk fel — így elöl mindig az adattal rendelkező chartok látszanak. A .chart-nodata osztályt a ChartCard teszi a .card-ra, pontosan akkor, amikor a "nincs adat" overlay is látszana (a lista és a rejtés így szinkronban van). Az összegző desktopon rejtett; a chart-oldalakon kívül (nincs .wireframe) semmi nem változik. */ .nodata-summary { display: none; } .nodata-summary__list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; } .nodata-summary__list li { padding: 0.5rem 0.75rem; background-color: var(--list-bg); border: var(--border-thin); border-radius: var(--list-border-radius); color: var(--muted-clr); font-size: 14px; } @media (max-width: 900px) { /* Az összegző lista megjelenítése a lap legvégén. */ .nodata-summary { display: block; } /* Az adat nélküli chart-kártya eltűnik a helyéről (a neve a lenti listába kerül). */ .wireframe .card.chart-nodata { display: none; } /* Ha egy szekció MINDEN chartja adat nélküli, az egész szekció (a címével együtt) eltűnik — nem marad "árva" fejléc üres tartalommal. Betöltés/skeleton közben nincs .chart-nodata, ezért a szekció olyankor NEM tűnik el. */ .wireframe > section:has(.card.chart-nodata):not(:has(.card:not(.chart-nodata))) { display: none; } /* Electrical: ha egy eszköz (h4 + rá következő .wrapper) minden chartja adat nélküli, az eszköz árva címét is elrejtjük (a csoport-szekció maga marad, ha más eszközének van adata). */ .wireframe .electrical-device-title:has(+ .wrapper .card.chart-nodata):not(:has(+ .wrapper .card:not(.chart-nodata))) { display: none; } }