/* responsive.css ============== Nadpisania dla wersji desktopowej (od ~900px szerokosci) - WYLACZNIE media query, zero regul bazowych. MUSI byc zaladowany JAKO OSTATNI plik CSS w (patrz index.html) - w CSS przy rownym priorytecie wygrywa regula zaladowana PoZNIEJ, niezaleznie od tego, czy jest w media query czy nie. Gdyby ten plik ladowal sie wczesniej niz np. map.css/fleet.css, ich bezwarunkowe reguly (dla tych samych selektorow) wygralyby NAWET NA DESKTOPIE, cichutko wylaczajac uklad "mapa + lista obok siebie" z powrotem na wersje mobilna - dokladnie taki blad wystapil pierwotnie po podziale jednego pliku CSS na wiele. */ /* ====================================================================== WERSJA DESKTOPOWA (od ~900px szerokosci) - telefon ponizej tego progu dostaje DOKLADNIE ten sam uklad co do tej pory (bez zadnych zmian). Pierwszy krok: zakladka Flota - duza mapa + lista jako panel boczny, zamiast ulozenia jedno-pod-drugim. Reszta zakladek (Pojazdy/Kierowcy/ Pobrania/nawigacja jako pasek boczny) dojdzie w kolejnych krokach po zatwierdzeniu tego kierunku. ====================================================================== */ @media (min-width: 900px) { /* Domyslna szerokosc dla WSZYSTKICH zakladek oprocz Floty - formularze, czat asystenta, listy kart itp. wygladaja zle rozciagniete na cala szerokosc duzego ekranu, wiec dostaja wygodna, czytelna szerokosc kolumny zamiast pelnej szerokosci okna. Flota (mapa + lista obok siebie) celowo dostaje pelna szerokosc ponizej przez :has(). */ main { max-width: 880px; padding: 24px 32px 40px; } main:has(#view-flota.active) { max-width: none; } /* Te trzy zakladki dostaja siatke wielokolumnowa ponizej (Kierowcy/ Tankowania/Miejsca sa NAPRAWDE listami wielu niezaleznych elementow - w odroznieniu od np. Historii czy Pobran, ktore po wybraniu pojazdu pokazuja JEDEN szczegolowy widok, patrz komentarze przy tych zakladkach w JS: "wybor pojazdu jest teraz obowiazkowy"). Wieksza szerokosc niz reszta zakladek - tak, zeby siatka mogla realnie ulozyc 2-3 kolumny, a nie zostac przy jednej. */ main:has(#view-kierowcy.active), main:has(#view-tankowania.active), main:has(#view-miejsca.active) { max-width: 1400px; } /* Pasek zakladek: na desktopie wracamy do pelnego poziomego rzedu zamiast rozwijanego menu z telefonu (patrz .menu-tabs-toggle / .menu-tabs-list w layout.css) - przycisk-przelacznik chowamy, a liste .menu-tab-btn rozkladamy w jeden rzad o ROWNEJ szerokosci kazdego przycisku (min-width:0 + flex:1 1 0 - bez tego przegladarka liczy szerokosc wedlug dlugosci tekstu i przyciski wychodza rozne). */ .menu-tabs { max-width: 1400px; padding: 10px 0 4px; } .menu-tabs-toggle { display: none; } .menu-tabs-list { display: flex !important; position: static; flex-direction: row; flex-wrap: nowrap; gap: 6px; background: none; border: none; box-shadow: none; padding: 0; width: 100%; } .menu-tabs-list .menu-tab-btn { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: 12.5px; padding: 10px 4px; border-radius: 10px; } .menu-tabs-list .menu-tab-btn.active { background: var(--accent-brand); color: #14181D; border-color: var(--accent-brand); } .fleet-layout { display: flex; gap: 20px; align-items: flex-start; /* Wypelnia dostepna wysokosc okna, odejmujac miejsce na naglowek, pasek zakladek, "ostatnia aktualizacja" i kontrolki floty ponad mapa - tak, zeby mapa i lista nie musialy przewijac calej strony, tylko dzialaly jak dwa niezalezne panele. */ height: calc(100vh - 230px); min-height: 420px; } .fleet-map-container { flex: 1 1 auto; height: 100% !important; margin-bottom: 0; } .fleet-list-panel { flex: 0 0 380px; height: 100%; display: flex; flex-direction: column; } /* Po zwinieciu mapy lista rozklada sie na cala dostepna szerokosc - naturalnie zamienia sie w siatke wielu kolumn (patrz .fleet-row ponizej), zamiast pojedynczej, waskiej kolumny 380px. */ .fleet-layout.map-collapsed .fleet-list-panel { flex: 1 1 auto; } .fleet-layout.map-collapsed #fleet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; align-content: start; } .fleet-search-input { flex-shrink: 0; } #fleet-list { flex: 1 1 auto; overflow-y: auto; padding-right: 4px; } /* --- Zakladka Kierowcy: karta na kierowce, w siatce zamiast jednej dlugiej kolumny (patrz renderKierowcyList w index.html - kazdy kierowca to osobna .driver-summary-card, wstawiana bezposrednio do #kierowcy-content). --- */ #kierowcy-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; } #kierowcy-content .driver-summary-card { margin-bottom: 0; } /* --- Zakladka Tankowania: lista tankowan z calej floty na raz (renderRefuelingsList), NIE ogranicza sie do jednego pojazdu - stad siatka, w odroznieniu np. od Historii zlecen w Pobraniach (to lista TYLKO dla jednego wybranego pojazdu/kierowcy - zostaje w jednej kolumnie, kolejnosc chronologiczna ma tam znaczenie). --- */ #refuelings-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; align-items: start; } #refuelings-list .report-builder-card { margin-bottom: 0; } /* --- Zakladka Miejsca: POI i geostrefy to krotkie wiersze (nazwa + przycisk Usun), niezalezne od siebie - w siatce ukladaja sie w 2-3 kolumny zamiast jednej waskiej, dlugiej listy. Korytarze zostaja w jednej kolumnie pod mapa (maja wlasna wizualizacje na mapie powyzej, kolejnosc/kontekst z mapa ma tu znaczenie). --- */ #miejsca-poi-list, #miejsca-geofence-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 24px; } }