/* ============================================================================ responsive.css – Prispôsobenie zobrazenia LiteMail podľa VEĽKOSTI OBRAZOVKY (PC / tablet / úzke okno). Nezisťuje sa konkrétne zariadenie – reaguje sa na reálnu šírku okna, čo je spoľahlivejšie (tablet na šírku ≈ malý notebook, okno sa dá zmenšiť atď.). Načítava sa v AŽ ZA bootstrap.css a themes.css, aby jeho pravidlá vyhrali. Kde treba prebiť inline štýly z DefaultAsync.cshtml, používame !important – ale VŽDY len vnútri @media blokov, takže na veľkých obrazovkách (PC) ostáva pôvodný layout úplne nedotknutý. Hlavná obrazovka je 3-stĺpcová tabuľka #tblHlavna: .lm-iconbar – ľavá lišta ikon (25px) .lm-foldercol – strom priečinkov (#folderTreeContainer, 250px) #modelMenu – zoznam mailov / panely (kalendár, kontakty…) ========================================================================== */ /* ── Breakpoint 1: úzky notebook / veľký tablet na šírku (≤ 1200px) ──────────── Trochu užší strom priečinkov a menšie odsadenia, aby zoznam mailov dostal viac miesta. */ @media (max-width: 1200px) { .lm-foldercol { width: 210px !important; } #folderTreeContainer { width: 210px !important; } .zobrazData { max-width: calc(100vw - 250px) !important; } } /* Pozn.: na PC (bez triedy lm-compact) VÝŠKU #pageWrap / #divHlavna / #tblHlavna zámerne NEPREPISUJEME – pôvodné inline hodnoty (99vh / calc(99vh - 20px)) sú správne. Globálne prepisovanie výšky spôsobovalo pretekanie, preto sa výška mení LEN pre kompaktné zariadenia nižšie. */ /* ── KOMPAKTNÉ ZARIADENIA (tablet / telefón / úzke okno) ────────────────────── Triedu html.lm-compact pridáva JS v _Layout (dotykový vstup alebo úzke okno) – funguje bez ohľadu na to, akú CSS šírku tablet hlási (media query na širšom tablete zlyhávala). Príčina pôvodného problému: appka bola vtesnaná do fixnej výšky 99vh s overflow:hidden. Na tablete/mobile je reálne viditeľná plocha menšia (adresný riadok), takže sa orezal buď horný riadok (vyhľadávanie) alebo spodok (tlačidlo Nastavenia) – podľa toho, čo sa nezmestilo. Riešenie: appku nastavíme presne na REÁLNU viditeľnú výšku okna (nie 99vh, čo na tablete zahŕňa aj adresný riadok). Výšku dáva --lm-vh = window.innerHeight (presné px z JS v _Layout, funguje všade); 100svh je len CSS fallback. Vnútro (strom priečinkov + zoznam mailov) potom vyplní appku a scrolluje sa interne cez existujúci fitScrollAreas – rovnako ako na PC, len s korektnou výškou. Platí len nad 560px (tablety) – na telefónoch (≤560px) sa layout skladá pod seba a scrolluje sa stránka, viď blok ≤560px nižšie. */ @media (min-width: 561px) { html.lm-compact #pageWrap { height: var(--lm-vh, 100svh) !important; overflow: hidden !important; } /* POZOR: #tblHlavna existuje aj VNÚTRI kalendára (navigačná lišta) – rovnaké id! Preto scope-ujeme na hlavnú tabuľku #divHlavna > #tblHlavna, nech sa kalendár nerozbije. */ html.lm-compact #divHlavna, html.lm-compact #divHlavna > #tblHlavna { height: calc(var(--lm-vh, 100svh) - 20px) !important; } } /* Tlačidlo „Nastavenie aplikácie" (inak position:absolute; bottom:0 v stĺpci ikon – pri orezaní zospodu miznulo) dáme do normálneho toku pod ostatné ikony, takže je vždy viditeľné. */ html.lm-compact .lm-iconbar #btnShowNewUser { position: static !important; transform: none !important; display: inline-block; margin-top: 8px; } /* ── Panely Kalendár / Kontakty na KOMPAKTNÝCH zariadeniach (tablet aj mobil) ── Panel je vždy na plnú šírku (inline max-width:calc(100vw-285px) predpokladá bočné stĺpce vľavo – to neplatí univerzálne). Keď je panel otvorený (triedu lm-panel-open pridáva otvorPanel), appka prejde na prirodzenú výšku a scrolluje sa stránka – inak JS stláčal Kalendár/Kontakty do malého okna počítaného pre desktop, takže bol vidieť len na polovicu. */ html.lm-compact #__panelWrap { max-width: 100% !important; width: 100% !important; } /* KĽÚČOVÉ: html a body majú v StyleSheet.css overflow:hidden (desktop fixný layout). Na kompaktnom zariadení s otvoreným panelom (Kalendár/Kontakty) to bránilo SCROLLOVANIU STRÁNKY – obsah pod prvou obrazovkou (mesačná mriežka + spodok formulára a zoznam záznamov) bol nedosiahnuteľný a vyzeralo to ako rez „po Kategóriu". Povolíme zvislé scrollovanie stránky. */ html.lm-compact.lm-panel-open, html.lm-compact.lm-panel-open body { overflow-x: hidden !important; overflow-y: auto !important; height: auto !important; } html.lm-compact.lm-panel-open #pageWrap { height: auto !important; min-height: 100vh; min-height: 100svh; overflow: visible !important; } html.lm-compact.lm-panel-open #divHlavna, html.lm-compact.lm-panel-open #divHlavna > #tblHlavna { height: auto !important; overflow: visible !important; } html.lm-compact.lm-panel-open #__panelWrap { height: auto !important; max-height: none !important; overflow: visible !important; } /* Vnútorné kontajnery majú od JS napevno vypočítanú desktop výšku – zrušíme ich. */ html.lm-compact.lm-panel-open #kalendarWrapper, html.lm-compact.lm-panel-open #divKalendarTable, html.lm-compact.lm-panel-open #kalender, html.lm-compact.lm-panel-open #kalendarData { height: auto !important; max-height: none !important; overflow: visible !important; } html.lm-compact.lm-panel-open #kalendarData { width: 100% !important; max-width: 100% !important; } html.lm-compact.lm-panel-open #contactsTableWrap { /* flex:0 0 auto + min-height:auto zruší zmršťovanie flex-childu na 0 výšku (rodič má na kompakte height:auto → flex:1 1 auto by tabuľku skryl). */ flex: 0 0 auto !important; min-height: auto !important; width: 100% !important; height: auto !important; max-height: none !important; overflow-x: auto; overflow-y: visible !important; } /* ── Breakpoint 2: tablet (≤ 992px) ────────────────────────────────────────── Toolbar (nový mail, hľadanie, odhlásiť…) sa smie zalomiť do viacerých riadkov namiesto orezania. Strom priečinkov ešte užší. */ @media (max-width: 992px) { .lm-foldercol { width: 180px !important; } #folderTreeContainer { width: 180px !important; } .zobrazData { max-width: calc(100vw - 220px) !important; } /* Toolbar: povolené zalomenie – vnútorný flex kontajner v hlavičke tabuľky. */ .lm-toolbar > div { flex-wrap: wrap !important; height: auto !important; row-gap: 4px !important; } .lm-toolbar { height: auto !important; } /* Vyhľadávací panel nech sa tiež zalomí a nezaberá celý riadok napevno. */ #searchBar { margin-left: auto; flex-wrap: wrap; } #searchInput { width: 130px !important; } } /* ── Breakpoint 3: malý tablet / tablet na výšku (≤ 768px) ─────────────────── Ešte kompaktnejšie. Filtre vyhľadávania (Všetko/Odosielateľ/…) sa smú zalomiť pod vstupné pole. */ @media (max-width: 768px) { .lm-foldercol { width: 150px !important; } #folderTreeContainer { width: 150px !important; } .zobrazData { max-width: calc(100vw - 190px) !important; } /* Strom priečinkov: menšie písmo, aby sa názvy zmestili do užšieho stĺpca. */ #folderTreeContainer .folder-path { font-size: 11px !important; } /* Zoznam mailov: mierne menšie písmo. */ .mail-item, .from, .date, .subject { font-size: 9px !important; } } /* ── Breakpoint 4: veľmi úzke okno / telefón (≤ 560px) ──────────────────────── Tabuľkový 3-stĺpcový layout sa preskladá pod seba (block), aby bol použiteľný aj na úzkej obrazovke: hore lišta ikon, pod ňou strom priečinkov (nižší, s vlastným posuvníkom) a naspodku zoznam mailov na plnú šírku. POZOR: výšku #folderTreeContainer a #mailListScroll dopočítava JS (fitScrollAreas v DefaultAsync). Aby stacknutý layout nezískal celú výšku pre strom priečinkov, obmedzujeme ju cez max-height s !important – to JS-om nastavenú inline výšku prebije. */ @media (max-width: 560px) { /* Na telefóne sa nesnažíme vtesnať všetko do jednej obrazovky – appka má prirodzenú výšku a scrolluje sa stránka (stack ikony → priečinky → maily). */ #pageWrap { height: auto !important; min-height: 100vh; min-height: 100svh; overflow: visible !important; } #divHlavna { height: auto !important; overflow: visible !important; } /* Scope na HLAVNÚ tabuľku (#divHlavna > #tblHlavna) – kalendár má vnútri vlastné #tblHlavna s rovnakým id, to sa tu NESMIE preskladať. */ #divHlavna > #tblHlavna, #divHlavna > #tblHlavna > tbody, #divHlavna > #tblHlavna > tbody > tr { display: block !important; width: 100% !important; height: auto !important; } #divHlavna > #tblHlavna > tbody > tr > td { /* display BEZ !important – JS prepína #modelMenu/#zobrazData cez inline display:none/"" (Kalendár/Kontakty). Inline display:none tak správne prebije toto pravidlo (skryje), a keď je prvok viditeľný, platí block. */ display: block; width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Lišta ikon – vodorovne po celej šírke. Tlačidlo Nastavenia (inak absolútne na spodku stĺpca) vraciame do riadku. */ .lm-iconbar { display: flex !important; flex-direction: row !important; justify-content: space-around !important; align-items: center !important; width: 100% !important; } .lm-iconbar #btnShowNewUser { position: static !important; transform: none !important; } /* Strom priečinkov na plnú šírku, obmedzená výška s vlastným scrollom. */ .lm-foldercol { width: 100% !important; } #folderTreeContainer { width: 100% !important; height: 32vh !important; max-height: 32vh !important; } /* Zoznam mailov / panely na plnú šírku. */ #modelMenu, #zobrazData, .zobrazData { width: 100% !important; max-width: 100% !important; } #mailListScroll { max-height: 46vh !important; } /* Toolbar kompaktnejší, filtre hľadania sa zalomia. */ #searchInput { width: 100% !important; flex: 1 1 120px; } /* ── Panel Kalendár / Kontakty na mobile ────────────────────────────────── Wrapper #__panelWrap má inline max-width:calc(100vw - 285px). To 285px = ľavá lišta (25) + strom priečinkov (250) + rezerva, čo platí pri 3-stĺpcovom layoute. Na mobile sú ale tieto stĺpce NAD panelom (stack), takže odpočet nechá len ~75px → obsah sa rozdrví. Vraciame plnú šírku a prirodzenú výšku (scrolluje sa stránka), obsah širší než obrazovka sa dá posúvať vodorovne. */ #__panelWrap { max-width: 100% !important; width: 100% !important; height: auto !important; max-height: none !important; overflow: auto !important; } /* Kalendár: všetky vnútorné kontajnery majú od JS (resizePanelWrap, resizeKalendarTable, resizeKalenderGrid) napevno vypočítanú výšku pre desktop – na mobile to dávalo malé okno s polovicou obsahu. Prepneme na prirodzenú výšku, nech je vidieť celý kalendár a scrolluje sa stránka. Mriežka (~490px) je širšia než telefón → vodorovný scroll cez #__panelWrap. */ #kalendarWrapper, #divKalendarTable, #kalender, #kalendarData { height: auto !important; max-height: none !important; overflow: visible !important; } #kalendarData { width: 100% !important; max-width: 100% !important; } #contactsTableWrap { flex: 0 0 auto !important; min-height: auto !important; width: 100% !important; height: auto !important; max-height: none !important; overflow-x: auto; overflow-y: visible !important; } } /* ── Nastavenia aplikácie (samostatná stránka NastaveniaApp) na úzkom okne ───── .na-page je flex row (sidebar 210px + obsah) s fixnou výškou a vstupmi s pevnými šírkami (220/420/480px) → na telefóne preteká do šírky. Na úzkych obrazovkách sidebar+obsah preskladáme pod seba, taby zalomíme do riadku a vstupy roztiahneme na plnú šírku. responsive.css je načítané aj na tejto stránke (cez _Layout), takže pravidlá platia. */ @media (max-width: 768px) { .na-page { flex-direction: column !important; height: auto !important; min-height: 100vh; min-height: 100svh; } .na-sidebar { width: 100% !important; border-right: none !important; border-bottom: 2px solid cornflowerblue; } /* Taby vedľa seba a zalomené, nech nezaberú celú výšku. */ .na-tabs { flex-direction: row !important; flex-wrap: wrap !important; } .na-tab { width: auto !important; } .na-content { overflow-x: auto !important; } /* Formulár: labely nad vstupmi (jeden stĺpec) a vstupy na plnú šírku. */ .na-grid { grid-template-columns: 1fr !important; max-width: 100% !important; } .na-grid-label { white-space: normal !important; } .nu-input, select#newuserSelect, textarea#TxtPodpis { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } } /* ============================================================================ ZMENŠENIE PÍSMA A PRVKOV NA TELEFÓNE (≤ 560px) Kalendár, Kontakty a Nastavenie aplikácie majú na desktop pevné veľké písma (15–18px) a fixné šírky/výšky prvkov (inline v Razor pohľadoch). Na telefóne sú príliš veľké a nezmestia sa. Tu ich zmenšíme – všetko cez !important, lebo prebíjame inline štýly. Platí LEN na telefóne, PC/tablet ostávajú nedotknuté. POZN.: breakpoint je 768px (nie 560px) – rovnaký, aký funguje pre Nastavenie aplikácie (.na-page). Telefón hlási šírku viewportu širšiu než 560px, takže pravidlá v @media(max-width:560px) sa naň NEAPLIKOVALI (preto to „nič nerobilo"). ========================================================================== */ @media (max-width: 768px) { /* ── KALENDÁR ─────────────────────────────────────────────────────────── */ /* Mriežku (vľavo) a pravý panel (formulár + zoznam záznamov) dáme POD SEBA. Vonkajšia tabuľka #hlavnyKalendar sa preskladá cez display:block na VŠETKÝCH úrovniach (table→tbody→tr→td), aby sa bunky korektne poukladali pod seba. DÔLEŽITÉ: vnútorné tabuľky (#tblHlavna, #kalender, #kalendarData) NECHÁME ako display:table (explicitne), nech sa vykreslia normálne a nič sa neskryje. */ #hlavnyKalendar, #hlavnyKalendar > tbody, #hlavnyKalendar > tbody > tr { display: block !important; width: 100% !important; box-sizing: border-box; } #hlavnyKalendar > tbody > tr > td { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; } /* Vnútorné tabuľky ostávajú tabuľkami a naplnia šírku. */ #hlavnyKalendar #tblHlavna, #kalender, #kalendarData { display: table !important; width: 100% !important; max-width: 100% !important; } /* Mesačná mriežka nech sa zmestí na šírku telefónu (rovnomerné stĺpce). */ #kalender { table-layout: fixed !important; } #kalender col { width: auto !important; } #kalender td { height: 40px !important; font-size: 9px !important; } #kalender input { font-size: 8px !important; } /* Pravý panel – formulár záznamu + zoznam: menšie písmo a prvky. */ #kalendarData { width: 100% !important; } #kalendarData td, #kalendarData label, #kalendarData input, #kalendarData select, #kalendarData button { font-size: 11px !important; } #kalendarData #lblNadpis { font-size: 13px !important; } #kalendarData label { width: auto !important; height: auto !important; } #kalendarData input[type="text"], #kalendarData input[type="datetime-local"], #kalendarData input[type="date"], #kalendarData select { width: 100% !important; max-width: 220px !important; height: 22px !important; box-sizing: border-box; } /* Zoznam záznamov v kalendári. */ #kalendarTable, #kalendarTable td, #kalendarTable th { font-size: 9px !important; } /* ── KONTAKTY ─────────────────────────────────────────────────────────── */ #zobrazData input.form-control, #zobrazData select, #contactSelect { font-size: 11px !important; height: 28px !important; padding: 2px 6px !important; } #contactSelect { width: 100% !important; max-width: 300px !important; } #zobrazData input[type="button"] { font-size: 11px !important; padding: 3px 8px !important; } #contactsTable, #contactsTable td, #contactsTable th { font-size: 10px !important; } /* ── NASTAVENIE APLIKÁCIE (.na-page) ─────────────────────────────────────*/ .na-title { font-size: 12px !important; } .na-tab { font-size: 11px !important; padding: 4px 8px !important; } .na-content, .na-grid, .na-grid-label { font-size: 12px !important; } .nu-input, select#newuserSelect, textarea#TxtPodpis { font-size: 12px !important; } .nu-pass-btn { font-size: 11px !important; padding: 3px 8px !important; } .nu-table th, .nu-table td { font-size: 11px !important; padding: 2px 4px !important; } }