/* css/porovnanie.css */ /* ========================================================================== ⚖️ POROVNANIE BYTOV (sekcia zadania "Implementácia funkcie 'Porovnanie bytov'") - Element A (#porovnanie-lightbox, centrálny lightbox, rovnaký Z-Index ako #gallery-lightbox) + Element B (#porovnanie-pas, spodný pás "Môj výber" cez celú šírku, o niečo nižší Z-Index - vizuálne pod Elementom A, nad zvyškom appky). ========================================================================== */ /* "Porovnať byty" (zadanie, bod 1) - v paneli "Môj výber" (js/favorites.js, vykresliObsahOblubenych), NAD "Zavrieť môj výber". Rovnaký tvar/rozmer ako .favorites-close-btn (css/layout.css) - flex-shrink:0, panel je flex-column, obe tlačidlá tak ostávajú POD scrollovateľným zoznamom. Primárna (zlatá) paleta namiesto sekundárnej - odlišuje ho vizuálne od "Zavrieť môj výber" pod ním ako AKTÍVNU, nie iba uzatváraciu akciu. */ .compare-apartments-btn { flex-shrink: 0; width: 100%; padding: calc(10px * var(--ui-scale-kompenzacia, 1)) 0; margin-top: calc(12px * var(--ui-scale-kompenzacia, 1)); border-radius: 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--btn-primary-text); background: var(--btn-primary-bg); border: 1px solid transparent; cursor: pointer; transition: background 200ms ease, box-shadow 200ms ease; } .compare-apartments-btn:hover, .compare-apartments-btn:focus-visible { background: var(--btn-primary-bg-hover); box-shadow: var(--btn-primary-shadow-hover); } /* Vertikálny panel "Môj výber" (fasáda #apartments-list-panel ALEBO Výber blokov #vyber-blokov-favorites-panel) sa počas porovnávacieho módu iba VIZUÁLNE skryje (js/porovnanie.js), jeho stav/obsah ostáva nedotknutý. #vyber-blokov-favorites-panel má VLASTNÉ ID-úrovňové "display:flex" (css/vyber-blokov.css) - rovnaká "#id.trieda" špecifickosť je preto nevyhnutná aj tu (zdokumentovaný vzor appky), #apartments-list-panel žiadne vlastné ID pravidlo nemá, no píšeme ho rovnako pre konzistenciu. */ #apartments-list-panel.porovnanie-skryty-panel, #vyber-blokov-favorites-panel.porovnanie-skryty-panel { display: none; } /* -------------------------------------------------------------------------- ELEMENT A - CENTRÁLNY POROVNÁVACÍ LIGHTBOX -------------------------------------------------------------------------- */ /* Sekcia zadania "Odstrániť backdrop/stmavovaciu vrstvu z porovnávacieho lightboxu..." - ŽIADNY backdrop/click-catcher element tu (na rozdiel od #gallery-lightbox AJ od #kontextova-sprava-overlay, ktorý aspoň ostáva transparentný ale STÁLE fyzicky blokujúci click-catcher) - toto je ZÁMERNÁ výnimka z oboch vzorov appky, keďže Element B (#porovnanie-pas, spodný pás "Môj výber") musí zostať súčasne klikateľný POD/OKOLO tohto lightboxu. #porovnanie-lightbox je preto pointer-events:none (klik kdekoľvek MIMO rámčekov prejde skrz na appku/pás pod ním - rovnaký princíp ako #vyber-blokov-badges/.blok-badge, css/vyber-blokov.css) a IBA .porovnanie-lightbox-card (rámčeky + šípky + X) si klikateľnosť vracia späť. Appka za rámčekmi (vrátane spodného pásu) tak ostáva plne viditeľná AJ interaktívna - rámčeky namiesto toho "plávajú" nad ňou vďaka výraznému box-shadow (.porovnanie-frame nižšie). */ #porovnanie-lightbox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 300; display: flex; align-items: center; justify-content: center; pointer-events: none; } #porovnanie-lightbox.porovnanie-lightbox-hidden { display: none; } /* -------------------------------------------------------------------------- 📞 CTA "KONTAKTOVAŤ PREDAJCU" - samostatný riadok NAD .porovnanie-lightbox- card, horizontálne centrovaný na jej AKTUÁLNU šírku (VÍŤAZ/2/3 byty majú rôznu šírku karty, css/porovnanie.css nižšie). -------------------------------------------------------------------------- */ /* * Sekcia zadania "Zmena pozície a štýlu CTA 'Kontaktovať predajcu'" - Krok 0 * potvrdil, že #porovnanie-lightbox je flex kontajner s align-items/ * justify-content:center BEZ flex-direction:column, ktorý dnes centruje * .porovnanie-lightbox-card ako JEDINÝ flex item - jednoduché pridanie * ďalšieho flex súrodenca (riadok nad kartou) by menilo TENTO mechanizmus: * buď by sa oba prvky zoradili vedľa seba (row, predvolené), alebo (pri * prepnutí na column) by sa CELÁ dvojica centrovala ako jeden blok, čím by * sa .porovnanie-lightbox-card reálne POSUNULA nadol oproti dnešnému stavu - * presne bug, ktorému sa Krok 0 zadania mal vyhnúť. Riešenie: tlačidlo JE * DOM súrodenec .porovnanie-lightbox-card (rovnaké poradie ako v zadaní - * vykresľované PRED ňou, js/porovnanie.js, vykresliPorovnavaciLightbox), ale * má VLASTNÉ `position:absolute` - vypadáva tak z flex-toku * #porovnanie-lightbox úplne, .porovnanie-lightbox-card zostáva JEDINÝM * flex-participujúcim potomkom a jej centrovanie/rozmer sa touto zmenou * VÔBEC nemení (overené, Krok 3 zadania). * * `left`/`top` nastavuje JS PRI KAŽDOM renderi (vykresliPorovnavaciLightbox, * PO finalizovaní cardEl.style.width) na `cardEl.offsetLeft + * cardEl.offsetWidth/2` / `cardEl.offsetTop` - keďže oba prvky zdieľajú * ROVNAKÉHO offsetParent (#porovnanie-lightbox, position:absolute), toto sú * PRIAME reálne namerané súradnice stredu HORNÉHO okraja karty, nie * duplikovaná/hardcoded kópia jej CSS rozmerovej formuly (tá by sa mohla v * budúcnosti rozísť s realitou) - funguje identicky pre VÍŤAZ (užšia karta, * syntetická šírka "2 karát") aj 2/3-bytový (širšia) stav bez osobitného * vetvenia tu. `transform: translate(-50%, calc(-100% - Gap))` potom v * JEDNOM kroku (a) horizontálne vycentruje tlačidlo na tento bod (vlastná * šírka je `auto`/obsahová - zadanie "nenaťahovať"), (b) posunie tlačidlo o * jeho VLASTNÚ výšku hore (aby jeho DOLNÝ okraj, nie horný, dosadol na * úroveň karty) a (c) pridá K-kompenzovanú medzeru nad kartou (16px * K, * rovnaká základná jednotka rozostupov ako inde v appke, napr. #app-logo * offset od okraja obrazovky) - žiadna z týchto troch vecí nepotrebuje JS * naviac, CSS calc() ich rieši deklaratívne. * * `pointer-events:auto` je NUTNÝ - #porovnanie-lightbox (vyššie) je * pointer-events:none, IBA .porovnanie-lightbox-card si klikateľnosť * vracia späť (existujúci vzor) - toto tlačidlo, hoci JEJ súrodenec nie * potomok, potrebuje ROVNAKÚ výnimku. * * Vizuál (Krok 2 zadania, PREPRACOVANÉ sekciou zadania "Predizajnovať * vizuálny štýl #compare-contact-cta... priblížiť ho k 'glass' jazyku * appky") - PREDOŠLÁ verzia (tmavé --surface-card-rgb pozadie + plný * accent border, rodina .detail-action-btn) nahradená "dymovým sklom" * rovnakého jazyka ako #app-logo (ZDIEĽANÉ premenné --surface-panel-rgb/ * --hairline-rgb + `backdrop-filter:blur(16px)`). * * "Viacnásobný border" - appka nemá vzor na dva SKUTOČNÉ CSS bordery na * jednom elemente naraz (`border` je jediná vlastnosť), preto je zlatý * zvýrazňujúci "border" simulovaný DRUHOU vrstvou v `box-shadow` * (`inset 0 0 0 1px ...`) - žiadny konflikt so skutočným `border` (ten * zostáva jemná hairline vrstva, --hairline-rgb) ani s treťou vrstvou * (vonkajší zlatý glow, PLNE analogický `box-shadow` v * .detail-action-primary:hover/--btn-primary-shadow-hover, base.css - * TERAZ trvalý, nie iba hover) - CSS `box-shadow` prijíma ĽUBOVOĽNÝ počet * čiarkou oddelených vrstiev bez konfliktu, poradie (inset vrstva PRED * neinset) je zámerné (inset sa vykresľuje nad neinset, oboje pod obsahom). * Hover/focus IBA zosilňuje OBE vrstvy (vyššia alfa inset prstenca + PLNÁ * sila `--btn-primary-shadow-hover`, ROVNAKÁ premenná ako predtým) - žiadna * nová farba, iba intenzita. * * (Sekcia zadania "Zviditeľniť zlatý border na CTA AJ na #app-logo") - * inset prstenec PREDTÝM hardcodoval vlastnú `rgba(227, 197, 140, ...)` - * TERAZ číta rovnakú farbu z UŽ EXISTUJÚCEHO zdieľaného tokenu * `--accent-strong-rgb` (base.css, `227 197 140`, predtým používaný iba * ako `color` v gate.css/vr-tours.css) - žiadny nový custom property netreba, * appka ho už mala. Alfa inset vrstvy zvýšená 0.45→0.85 (hover 0.7→1) kvôli * čitateľnosti na svetlom fotografickom pozadí (predošlá hodnota bola na * fotke takmer neviditeľná); glow vrstva mierne zosilnená 0.15→0.2, aby * opticky podporila ostrejší prstenec. #app-logo (css/layout.css) TERAZ * dostáva ROVNAKÝ token pri ROVNAKEJ (nehoverovej) alfe 0.85 - jeden * zdroj pravdy pre farbu tohto accentu, dve samostatné box-shadow * deklarácie (odlišné súbory/kontext, zdieľanie CEZ premennú stačí). * Šírka prstenca (1px) je ZÁMERNE NEŠKÁLOVANÁ K-kompenzáciou - žiadny * border/box-shadow-ako-border v CELEJ appke nepoužíva * `calc(1px * var(--ui-scale-kompenzacia,1))`, tento by bol prvý a jediný * - ponechané konzistentné s existujúcim vzorom. */ #compare-contact-cta { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 16px * var(--ui-scale-kompenzacia, 1))); z-index: 1; pointer-events: auto; cursor: pointer; user-select: none; /* Sekcia zadania "Oprava zalomenia CTA chipov" - Krok 0 diagnostiky (predošlý tiket) zistil, že `width:auto` na absolútne pozicovanom elemente so ZADANÝM `left` (JS, cardEl.offsetLeft+offsetWidth/2 - stred karty, NIE jej ľavý okraj) a BEZ `right` počíta shrink-to-fit rozpočet ako (šírka kontajnera - left) - TEDA PRED aplikovaním `transform:translate(-50%)` nižšie, ktorý box AŽ NESKÔR vizuálne vycentruje späť. Keďže `left` je stred karty (cca stred 1920px referenčného plátna), box tak layoutovo dostával iba ~POLOVICU plátna ako rozpočet, hoci vizuálne (po transforme) mal k dispozícii takmer CELÚ šírku symetricky okolo stredu karty - potvrdené priamym izolačným testom (zmena IBA `left` hodnoty, nič iné, wrap okamžite zmizol). `width:max-content` namiesto `auto` - box TERAZ vždy dostane svoju PRIRODZENÚ (preferovanú) šírku, nezávisle od `left`/ dostupného priestoru v layout kroku - `translate(-50%)` ho po tomto correctly vycentruje okolo skutočného stredu karty, presne ako bolo zamýšľané. `fit-content` (BEZ argumentu, teda `fit-content(stretch)`) bola zvažovaná a ZAMIETNUTÁ - tá by STÁLE capovala box na dostupný priestor (rovnaký `min(max-content, dostupný priestor)` mechanizmus, ktorý spôsobuje TENTO bug), teda by problém vôbec nevyriešila. `max-content` má širokú podporu vo všetkých evergreen prehliadačoch (Chrome/Firefox/Safari), appka už inak používa rovnako moderné CSS (aspect-ratio, cqh jednotky) - žiadne riziko kompatibility. */ width: max-content; /* Sekcia zadania "Oprava zalomenia CTA chipov", bod 4 - bezpečnostný STROP, NIE náhrada za width:max-content vyššie. `max-content` samo osebe nemá HORNÚ hranicu - pri extrémne dlhom obsahu (napr. budúci projekt s výrazne dlhšími ID bytov/názvom bloku, než akých je dnes 17 bytov/blok "A" schopných) by box mohol byť ŠIRŠÍ než samotný viewport a pretiecť CEZ OBA okraje súčasne (potvrdené priamym testom: syntetické dlhé ID/blok cez runtime injekciu, 520×260 viewport → box 902px široký, pretekal ~191px na KAŽDÚ stranu). max-width:100% tu je vzhľadom na najbližšieho pozicovaného predka (#porovnanie- lightbox, samo width:100% voči #app-scale-wrapper, teda efektívne referenčná šírka 1920px) - box sa tak nikdy nemôže stať širším než CELÝ dostupný priestor, nezávisle od toho, kde presne `left` padne. Keď sa strop uplatní, .compare-contact-cta-byty (flex-wrap:wrap, nezmenené) chipy PRIROD ZENE zalomí na viac riadkov namiesto pretečenia - degradácia späť na (kontrolované) zalomenie je prijateľnejšia než box mimo obrazovky. Dnešné reálne dáta (max 676px pri 3 bytoch na 1920px plátne) sú ĎALEKO pod týmto stropom - nemá žiadny efekt na bežné použitie, iba na tento krajný prípad. */ max-width: 100%; /* Sekcia zadania "CTA segmenty bytov s hviezdičkou" - tlačidlo TERAZ nesie DVA vnútorné segmenty (.compare-contact-cta-label + .compare- contact-cta-byty, nižšie), preto flex namiesto predošlého jedného textového uzla - `white-space:nowrap` sa presunulo NA label (ten sa nemá zalamovať), tu na kontajneri by bránilo .compare-contact-cta-byty zalomiť sa na druhý riadok pri nedostatku miesta (Krok 2 zadania). */ display: inline-flex; align-items: center; gap: calc(10px * var(--ui-scale-kompenzacia, 1)); font-family: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--btn-secondary-text-active); padding: calc(12px * var(--ui-scale-kompenzacia, 1)) calc(20px * var(--ui-scale-kompenzacia, 1)); /* Výplň pásu = výplň .porovnanie-lightbox-card (rovnaká premenná --surface-card-rgb, rovnaká alfa 0.94 ako jej základ); na PC/touch- table (media nižšie) plná, rovnako ako lightbox. */ background: rgb(var(--surface-card-rgb) / 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgb(var(--hairline-rgb) / 0.06); border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(var(--accent-strong-rgb) / 0.85), 0 0 12px rgb(var(--accent-strong-rgb) / 0.2); transition: box-shadow 200ms ease; } @media (hover: hover), (pointer: fine) { #compare-contact-cta { background: rgb(var(--surface-card-rgb)); } } #compare-contact-cta:hover, #compare-contact-cta:focus-visible { box-shadow: inset 0 0 0 1px rgb(var(--accent-strong-rgb) / 1), var(--btn-primary-shadow-hover); } /* "KONTAKTOVAŤ PREDAJCU" - pevný textový segment, BEZ rámčeka, preberá farbu z #compare-contact-cta (žiadne vlastné vizuálne pravidlá okrem layoutu - nezalamovať sa slovo v slove). Sekcia zadania "Zväčšenie písma CTA na veľkosť POROVNANIE" - font-size TERAZ PRIAMO preberá ROVNAKÉ hodnoty ako .porovnanie-lightbox-heading ("POROVNANIE" nadpis, vyššie v súbore) - 1.1rem PC/touch-table, na dotyku prepísané na zdieľanú `var(--porovnanie-label-font-size)` (0.9rem, definovaná pri .porovnanie-lightbox-title) - ROVNAKÁ premenná, nie nezávisle duplikovaná kópia hodnoty (jeden zdroj pravdy, rovnaký princíp akým už "POROVNANIE"/"MÔJ VÝBER:"/"MÔJ ZOZNAM:" zdieľajú TÚTO ISTÚ premennú). Žiadny explicitný K-kompenzačný calc() tu netreba - `rem` jednotky sú už implicitne K-kompenzované cez koreňový font-size (css/base.css). */ .compare-contact-cta-label { white-space: nowrap; font-size: 1.1rem; } @media (hover: none) and (pointer: coarse) { .compare-contact-cta-label { font-size: var(--porovnanie-label-font-size); } } /* Rad malých orámovaných segmentov, jeden na KAŽDÝ porovnávaný byt - vizuálna rodina .lightbox-nav-btn (css/okolie.css, prepínač bytov vo VR/Galéria) - ROVNAKÉ premenné pozadia/borderu/farby textu, ale výrazne menšie proporcie (font-size/padding), keďže toto sú read-only informačné tagy VNÚTRI tlačidla, nie samostatné dotykové nav buttony. `flex-wrap:wrap` - Krok 2 zadania, zalomenie riešené TU (nie osobitným media-query breakpointom) - funguje identicky na PC aj dotyku, jediný rozdiel je K-kompenzovaný rozmer segmentov samotných. */ .compare-contact-cta-byty { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(4px * var(--ui-scale-kompenzacia, 1)); } /* Sekcia zadania "Oprava medzery okolo hviezdičky v CTA" - PREDTÝM `display:inline-flex` - formatujIdBlok(byt, true) (js/detail.js) vracia SPRÁVNY reťazec "ID [medzera]★[medzera] – BLOK X" (overené, nedotknuté), ALE flex kontajner s ZMIEŠANÝM obsahom (text + + text) rozdeľuje KAŽDÝ súvislý textový úsek do VLASTNÉHO anonymného flex itemu (CSS Flexbox spec) - okrajová medzera KAŽDÉHO takého itemu (koniec "ID ", začiatok " – BLOK X") sa potom orezáva ako bežná okrajová whitespace bloku, aj keď znak medzery v DOM/texte reálne zostáva (`.textContent` ho preto ukazuje, vizuálne ale zmizne - VIZUÁLNY, nie dátový bug). PLATÍ UNIVERZÁLNE pre KAŽDÝ byt so špeciálnou ponukou, nezávisle od ID/poradia - CSS mechanizmus, nie výnimka pre konkrétny byt. `display:inline-block` (namiesto inline-flex) drží CELÝ obsah v JEDNOM inline formátovacom kontexte - medzery MEDZI text/span uzlami sa TERAZ NEOREZÁVAJÚ (orezáva sa iba whitespace na SAMOTNOM okraji celého bloku, nie medzi jeho vnútornými inline uzlami). Vertikálne centrovanie chipu v rade (.compare-contact-cta-byty, align-items:center) je nezávislé od VLASTNÉHO display chipu - `align-items:center` tu preto už nie je potrebné (odstránené, bezvýznamné na inline-block). Sekcia zadania "Zväčšenie písma CTA na veľkosť POROVNANIE", Krok 1 bod 2 - font-size TU rastie PROPORCIONÁLNE k zväčšeniu .compare-contact-cta- label vyššie (1.1rem PC/touch-table, 0.9rem dotyk), NIE na identickú hodnotu - zachovaný PÔVODNÝ pomer chip/label (0.65rem/0.75rem ≈ 0.867) pri OBOCH nových veľkostiach labelu: 1.1rem × 0.867 ≈ 0.95rem (PC/touch- table), 0.9rem × 0.867 = 0.78rem (dotyk, presné). Padding zväčšený v ROVNAKOM pomere (2px/6px × ~1.5 ≈ 3px/9px) - zadanie výslovne žiada primerane väčší priestor okolo väčšieho textu, nie iba zväčšenie fontu samotného. */ .compare-contact-cta-byt { display: inline-block; white-space: nowrap; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--btn-secondary-text); background: var(--btn-secondary-bg-nested); border: 1px solid var(--btn-secondary-border); border-radius: 6px; padding: calc(3px * var(--ui-scale-kompenzacia, 1)) calc(9px * var(--ui-scale-kompenzacia, 1)); } @media (hover: none) and (pointer: coarse) { .compare-contact-cta-byt { font-size: 0.78rem; } } /* Sekcia zadania "Pridať rámček (kontajner)... konzistentný s existujúcimi lightboxami" - .porovnanie-lightbox-card je TERAZ samotný spoločný ohraničený "box" (rovnaký dark-glass vzor ako .vr-tours-card/.poi-window- card, css/vr-tours.css) obsahujúci VŠETKY viditeľné rámčeky naraz - PREDTÝM to bol iba neviditeľný flex wrapper, jednotlivé .porovnanie-frame pôsobili ako voľne plávajúce samostatné boxy bez spoločného rámu. */ /* Sekcia zadania "Oprava pozície zatváracieho krížika..." - horný padding je VYŠŠÍ než ostatné strany (vyhradený pásik pre .porovnanie-lightbox- close, ktorý je TERAZ celý VNÚTRI kontajnera, nie na jeho okraji/mimo neho), bočný padding je ŠIRŠÍ (bočné medzery vyhradené pre budúce šípky doprava/doľava pri 5+ bytoch, zadanie bod 1 "Dôsledok") - šípky (.porovnanie- lightbox-prev/next) sú aj tak samostatné flex-item súrodenci .porovnanie- lightbox-track (nižšie), tento širší padding im iba dáva viac vlastného "vzduchu" od okraja kontajnera namiesto tesného prilepenia naň. */ .porovnanie-lightbox-card { position: relative; display: flex; align-items: stretch; gap: calc(16px * var(--ui-scale-kompenzacia, 1)); max-width: 92%; padding: calc(60px * var(--ui-scale-kompenzacia, 1)) calc(40px * var(--ui-scale-kompenzacia, 1)) calc(28px * var(--ui-scale-kompenzacia, 1)); background: rgb(var(--surface-card-rgb) / 0.94); /* Sekcia zadania "Zvýšiť čitateľnosť textu v Porovnaní" - hrúbka 2px->1px (tenší rám pôsobí menej ťažko, necháva vyniknúť text vnútri), farba/ premenná (var(--text-strong)) NEZMENENÁ, univerzálne PC/touch-table aj dotyk (rovnako ako predtým, žiadny media gate). */ border: 1px solid var(--text-strong); border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); pointer-events: auto; } /* Sekcia zadania "Krok 1 - oprava priesvitnosti/duchov na pozadí" - Krok 0 diagnostika (getComputedStyle na #porovnanie-lightbox/.porovnanie- lightbox-viewport/.porovnanie-lightbox-track/.porovnanie-lightbox-card, priama pixelová kontrola) potvrdila, že ŽIADNA vlastnosť sa pri zlúčení vykresliPorovnavaciLightbox() nestratila - background (0.94 alfa, base pravidlo vyššie) aj celý reťazec predkov (opacity:1/filter:none/ mix-blend-mode:normal všade) zostali PRESNE také, aké boli - žiaden "mŕtvy kód" (starý PC slice-based render, odpojSwipeLightbox) nikdy nenastavoval vlastné pozadie/opacity cez JS, teda nebolo ani ČO stratiť. SKUTOČNÁ príčina: PREDTÝM (pred týmto sedením) mala karta na PC/touch- table VÝŠKU/ŠÍRKU podľa obsahu (žiadny fixný rozmer, "Element A drag na PC/touch-table" tiket TOTO zmenil na rovnakú fixnú VR/POI formulu ako dotyk) - exponovaná plocha IBA 0.94-nepriehľadného pozadia (bez viewportu/kariet nad ňou) bola PREDTÝM minimálna (karta tesne objímala obsah), TERAZ (fixný, oveľa väčší rámec + prázdne okraje, Krok 2 nižšie) výrazne väčšia - rovnaký 0.94 alfa, doteraz nebadateľný, je TERAZ na veľkej ploche viditeľný (najmä nad svetlými časťami pozadia appky). OPRAVA: 0.94 → PLNE nepriehľadné (žiadna alfa) - ALE iba na PC/touch- table (@media (hover:hover), (pointer:fine) - presná logická negácia touch gate (hover:none) and (pointer:coarse) použitého všade inde v appke, De Morgan: NOT(A AND B) = NOT(A) OR NOT(B)) - dotyková vetva Elementu A OSTÁVA NEDOTKNUTÁ (zadanie, rozsah), jej vlastná (rovnako 0.94-priehľadná) karta je v praxi vždy takmer plne zaplnená rámčekmi (žiadna veľká prázdna plocha), preto tam efekt nebol nahlásený/potrebný. */ @media (hover: hover), (pointer: fine) { .porovnanie-lightbox-card { background: rgb(var(--surface-card-rgb)); } } /* Sekcia zadania "Zjednotenie rozmeru vonkajšieho rámu Porovnania s Detail/ Galéria/VR/POI" - Krok 0 zistil, že .vr-tours-card (css/vr-tours.css) a .poi-window-card (css/okolie.css) zdieľajú IDENTICKÚ (ale ručne DUPLIKOVANÚ na 2 miestach, nie cez jednu CSS premennú - nález, mimo rozsahu tohto zadania) formulu: šírka calc(50% + 600px) (strop 1600px), výška min(646px, calc(96.35cqh - 59px)). .detail-card (css/detail.css, Detail bytu) TÚTO formulu NEzdieľa - má vlastnú (760px*K šírka so 94% stropom) a najmä ŽIADNU pevnú výšku (iba max-height:85cqh, teda auto/obsahom riadenú) - Detail bytu je preto ZÁMERNE vynechaný z tohto zjednotenia (vynucovať mu pevnú výšku by odporovalo jeho vlastnému dizajnu "auto height podľa obsahu" a nemá zmysel pre komponent, ktorého vlastná výška sa má prispôsobovať obsahu). Element A preto na dotykovom zariadení dostáva PRESNE tú istú (VR/POI) formulu - width/max-width/height tu PREPISUJÚ max-width:92% vyššie, veľkosť rámca sa vďaka tomu nemení podľa počtu kariet (2, 3 aj 4+ so swipom - zadanie). justify-content:center - pri 2-3 kartách (nezaplnia celú šírku rámca) rozdelí zvyšný priestor rovnomerne na oboch stranách namiesto predvoleného zarovnania k ľavému okraju (pôsobilo by "rozbito" pri menšom počte bytov). align-items:stretch (rovnaká hodnota ako base pravidlo vyššie, PÍŠE SA TU ZNOVA explicitne kvôli čitateľnosti/dokumentácii tohto bloku, nie preto, že by inak platilo niečo iné) - .porovnanie-lightbox-track (a v ňom rámčeky, default align-items appky ich vlastný stretch v rámci tracku nezasahuje) sa naťahujú na CELÚ výšku tohto teraz pevného rámca. PREDOŠLÁ verzia (align-items:center, sekcia zadania "oprava čierneho priestoru v karte") sa toto pokúšala vyriešiť necentrovaním, ale necentrovaný kompaktný blok namiesto toho pri niektorých kombináciách kariet nechával VIDITEĽNÝ pás pozadia appky (nie karty) nad/pod kompaktným blokom, keďže samotné .porovnanie-frame elementy (karty) sa NEnaťahovali s ním - SPRÁVNA oprava "diery pred cenou" patrí do .porovnanie-frame-rows (nižšie, justify-content:space-between), NIE do tohto align-items - karty preto teraz OPÄŤ naťahujeme na celú výšku (rámček/karta samotná tak VŽDY vyplní CELÚ výšku rámca svojím vlastným pozadím, žiadny pás pozadia appky nemôže byť viditeľný). overflow:hidden - obranná poistka (rovnaká ako .poi-window-card) pre extrémne vysoké K (veľmi malé/úzke zariadenia), kde by K-škálované rámčeky/medzery teoreticky mohli presiahnuť tento NEK-škálovaný rozmer rámca - klip namiesto pretečenia mimo rámca. Sekcia zadania "Element A drag na PC/touch-table, Krok 1" - toto pravidlo PREDTÝM platilo iba na dotyku (@media (hover:none) and (pointer:coarse)) - PC/touch-table dostávalo iba base pravidlo vyššie (max-width:92%, žiadna explicitná width/height) a VLASTNÚ (teraz zrušenú) slice+re-render vetvu bez viewportu/dragu, ktorá pevný rozmer vôbec nepotrebovala. Krok 1 pridáva Elementu A rovnaký drag mechanizmus na PC/touch-table, aký má na dotyku - to VYŽADUJE ROVNAKÝ fixný rozmer (viewport+track architektúra potrebuje deterministickú šírku/výšku, inak drag/rubber-band/snap matematika, zdieľaná s Elementom B, nemá stabilný základ na počítanie). Pravidlo je preto TERAZ univerzálne (media gate zrušený) - POUŽÍVA PRESNE tie isté hodnoty ako predtým (50%+600px/1600px/646px formula, zdieľaná s VR/POI, zadanie "existujúci rozmer sa nesmie zmeniť") - iba rozšírené na obe vetvy, nie nová hodnota. */ .porovnanie-lightbox-card { width: calc(50% + 600px); max-width: 1600px; height: min(646px, calc(96.35cqh - 59px)); justify-content: center; align-items: stretch; overflow: hidden; } /* Sekcia zadania "Oprava pozície zatváracieho krížika..." - PREDTÝM umiestnené na ROHU kontajnera (polovica von, polovica na ňom) - stále čiastočne MIMO vizuálne uzavretého celku. TERAZ je celé VNÚTRI kontajnera (position:absolute vzhľadom na .porovnanie-lightbox-card, s odstupom od jeho vnútorného horného/pravého okraja - rovnaký princíp ako .detail- close-btn na .detail-card, css/detail.css). Vyhradený horný padding kontajnera (60px vyššie) mu dáva vlastný priestor bez zásahu do hlavičiek rámčekov pod ním. */ .porovnanie-lightbox-close { position: absolute; top: calc(16px * var(--ui-scale-kompenzacia, 1)); right: calc(16px * var(--ui-scale-kompenzacia, 1)); } /* Sekcia zadania "Doplnenie textových labelov..." bod 1 - "Môj výber:" v ľavom hornom rohu, NA ROVNAKEJ výškovej úrovni ako .porovnanie-lightbox- close (rovnaký "top" offset), biela farba (var(--text-strong), rovnaký token ako iné nadpisy appky, napr. .project-info-title). Sekcia zadania "Vizuálne orámovanie textových labelov..." - dark-glass chip namiesto holého textu, ZDIEĽANÉ premenné appky (ŽIADNE nové izolované farby): --btn-secondary-bg-nested (rgba(255,255,255,0.03)) + --btn-secondary-border (rgba(255,255,255,0.1) - PRESNE zadaním spomenutá hodnota) - rovnaká dvojica, akú appka už používa napr. na .favorites-close-btn (css/layout.css). border-radius 8px zhodné s .btn-group-box (css/layout.css) - rovnaký "chip" jazyk appky. */ /* Veľké tlačené písmená (sekcia zadania "Zmena textov 'Môj výber:' a 'Môj zoznam:' na veľké tlačené písmo") - text-transform:uppercase, NIE priamo veľké písmená v project.config.js. Appka má na podobné nadpisy OBA vzory (napr. "BLOK A" je priamo veľkými písmenami v configu, kým .favorites-close-btn/.compare-apartments-btn - najbližšia obdoba tohto chipu, rovnaký "malý sekundárny label" charakter - používajú CSS transform na bežne zapísanom texte, css/layout.css) - zvolený tento DRUHÝ, prevažujúci vzor appky pre chip/button-like prvky, zdrojový text v configu ostáva čitateľný v bežnom tvare ("Môj výber"/"Môj zoznam"). Šírka chipu (width:auto/shrink-to-fit - .porovnanie-lightbox-title je position:absolute, .porovnanie-pas-title je flex-item) sa automaticky prispôsobí širším veľkým písmenám, žiadna pevná šírka tu nie je. */ /* Sekcia zadania "zjednotenie font-size labelov" - JEDINÝ zdroj pravdy pre veľkosť "MÔJ VÝBER:"/"MÔJ ZOZNAM:" (obe TU, spoločným pravidlom) AJ "POROVNANIE" (.porovnanie-lightbox-heading nižšie, na dotykovom zariadení preberá TÚTO ISTÚ premennú namiesto vlastnej väčšej PC hodnoty) - PREDTÝM boli na touch breakpointe (nízka výška, @media max-height:430px nižšie) 3 nezávisle zapísané hodnoty (0.9rem chip, 0.7rem lightbox-title override, 0.86rem heading override), ktoré sa navzájom rozišli. */ :root { --porovnanie-label-font-size: 0.9rem; } /* Sekcia zadania "zjednotenie veľkosti písma ID bytu a ceny" - SAMOSTATNÁ premenná od --porovnanie-label-font-size vyššie (tá rieši VONKAJŠIE chipy/ nadpis lightboxu, TÁTO rieši VNÚTORNÝ pár .porovnanie-frame-header (ID bytu)/.porovnanie-frame-price (cena) v rámci JEDNÉHO rámčeka - iný sémantický pár, zámerne bez zdieľania s tým prvým). Hodnota kopíruje AKTUÁLNY font-size ceny na danom touch podrežime (0.9rem všeobecný touch/ PC, 0.8rem nízko-výškový podrežim nižšie, kde ju PREPISUJE) - .porovnanie- frame-price (nižšie) aj .porovnanie-frame-header (touch override, tiež nižšie) obe ČÍTAJÚ TÚTO JEDNU premennú namiesto dvoch nezávislých hodnôt, ktoré by sa mohli budúcou úpravou jednej z nich znova rozísť. */ :root { --porovnanie-frame-id-price-font-size: 0.9rem; } .porovnanie-lightbox-title, .porovnanie-pas-title { background: var(--btn-secondary-bg-nested); border: 1px solid var(--btn-secondary-border); border-radius: 8px; padding: calc(6px * var(--ui-scale-kompenzacia, 1)) calc(12px * var(--ui-scale-kompenzacia, 1)); font-size: var(--porovnanie-label-font-size); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-strong); } .porovnanie-lightbox-title { position: absolute; top: calc(16px * var(--ui-scale-kompenzacia, 1)); left: calc(40px * var(--ui-scale-kompenzacia, 1)); } /* Sekcia zadania "dopln text v centrálnom paneli k môj výber: POROVNANIE (veľkým tlačeným písmom)" - hlavný nadpis CELÉHO centrálneho lightboxu, NAVYŠE popri chipe "Môj výber:" (nie namiesto neho) - vycentrovaný v tej istej hornej vyhradenej oblasti (rovnaký "top" offset ako chip/krížik), výraznejší (väčší font-size, žiadny chip rámik) - jasne pôsobí ako NADPIS, nie ako doplnkový label. text-transform:uppercase (rovnaký "veľké tlačené písmená" princíp ako .porovnanie-lightbox-title vyššie), zdrojový text ostáva čitateľný v configu ("Porovnanie"). 1.1rem tu je PC/touch-table predvolená hodnota (zámerne väčšia než chip label, pozri vyššie) - na dotykovom zariadení ju prepisuje zdieľaná premenná --porovnanie-label-font-size (nižšie, sekcia zadania "zjednotenie font-size labelov"). */ .porovnanie-lightbox-heading { position: absolute; top: calc(20px * var(--ui-scale-kompenzacia, 1)); left: 50%; transform: translateX(-50%); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-strong); } /* Sekcia zadania "krížik od 2 bytov, minimum 1, VÍŤAZ nadpis" - IBA PC/touch-table (trieda sa z JS pridáva výhradne tam, js/porovnanie.js, jeVitaz). Font-size sa NEMENÍ (zadanie) - trieda prepisuje IBA farbu, na PRESNE tú istú premennú, akú má ID bytu v karte (.porovnanie-frame- header, --btn-secondary-text-active, #E3C58C) - jeden zdroj pravdy pre tento zlatožltý odtieň, žiadna nová/podobná farba. */ .porovnanie-lightbox-heading-winner { color: var(--btn-secondary-text-active); /* Ikony (medaila pred, fajka za textom, js/porovnanie.js) - flex IBA tu (POROVNANIE ostáva bez zmeny). Rozmer v em nadpisu, takže škálujú spolu s textom; výška nadpisu sa nemení (1.2em < line-height). */ display: flex; align-items: center; gap: 0.4em; } .porovnanie-vitaz-ikona { width: 1.2em; height: 1.2em; flex: none; pointer-events: none; } .porovnanie-vitaz-medaila-kruh { stroke: rgb(var(--surface-card-rgb)); } /* Sekcia zadania "zjednotenie font-size labelov" - "POROVNANIE" preberá na dotykovom zariadení TÚ ISTÚ premennú ako "MÔJ VÝBER:"/"MÔJ ZOZNAM:" (--porovnanie-label-font-size, definovaná pri .porovnanie-lightbox-title vyššie) - všetky tri labely na touch breakpointe zdieľajú JEDNU hodnotu z JEDNÉHO miesta, žiadne 2-3 nezávisle rozchádzajúce sa čísla. POZOR na poradie v súbore - TENTO blok musí byť AŽ ZA base pravidlom vyššie (nie pred ním, ako v predošlej - chybnej - verzii): pri rovnakej špecificite (jeden triedový selektor v oboch prípadoch, @media špecificitu nemení) víťazí posledné pravidlo V PORADÍ V SÚBORE spomedzi VŠETKÝCH aktuálne platných pravidiel - base pravidlo NIE JE samo o sebe "menej prioritné" len preto, že je mimo media query, takže keď stálo ZA týmto blokom, prepisovalo ho späť na 1.1rem aj na dotyku (potvrdený bug, opravené presunom tohto bloku sem). PC/touch-table (mimo tohto gate) si ponecháva vlastnú väčšiu 1.1rem hodnotu, nedotknuté. */ @media (hover: none) and (pointer: coarse) { .porovnanie-lightbox-heading { font-size: var(--porovnanie-label-font-size); } } .porovnanie-lightbox-track { display: flex; gap: calc(16px * var(--ui-scale-kompenzacia, 1)); } /* Sekcia zadania "reálne posúvanie kariet v Porovnaní" - na dotykovom zariadení (js/porovnanie.js, vykresliPorovnavaciLightbox) drží .porovnanie-lightbox-track VŠETKY rámčeky naraz (nie iba viditeľné okno ako PC vetva) a posúva sa medzi nimi cez transform:translateX(), riadený JS-om (pripojDragElementA/dotiahniElementANaAktualnuPoziciu). Tento viewport je PEVNE široký klip okolo neho - PREDOŠLÁ verzia (".porovnanie- lightbox-track-hint", odstránené) mala ROVNAKÚ šírku+overflow:hidden priamo na tracku a iba STATICKY odkrajovala 4. kartu ako hint pri otvorení; TERAZ sedí na SAMOSTATNOM obale (track sám je teraz širší než viewport, keďže obsahuje VŠETKY rámčeky naraz) - rovnaká šírka (3.5 karty + 3 medzery, rovnaký calc(Npx*K) vzor ako .porovnanie-frame nižšie) tak prirodzene odkrajuje ČASŤ ďalšej karty AJ v pokoji AJ POČAS živého ťahania, vďaka čistej geometrii - žiadna osobitná "hint" JS/CSS vetva navyše netreba. touch-action:pan-y - JS drag handler (pripojDragElementA) si nárokuje VÝHRADNE horizontálne gesto, aby ho prehliadač (pull-to-refresh a pod.) nezachytával paralelne. flex-shrink (viewport) - PÔVODNE tu bolo 0 ("nesmie byť stlačený susednými šípkami"), sekcia zadania "oprava viditeľnosti šípok" toto OBRÁTILA (viď komentár pri samotnom pravidle .porovnanie-lightbox- viewport nižšie) - na extrémnom K táto pôvodná "poistka" namiesto ochrany šípok spôsobovala ich úplné pretečenie/orezanie mimo kartu. Sekcia zadania "Element A drag na PC/touch-table, Krok 1" - tento element PREDTÝM existoval iba na dotyku (gate zhodný s JS podmienkou jeDotykoveZariadenie, PC/touch-table malo VLASTNÚ, teraz zrušenú, slice+re-render vetvu bez viewportu). Krok 1 zjednocuje vykresliPorovnavaciLightbox na JEDNU vetvu pre všetky zariadenia - viewport sa TERAZ renderuje VŽDY. */ .porovnanie-lightbox-viewport { overflow: hidden; } /* Sekcia zadania "oprava čierneho priestoru v karte" - PRÍČINA: .porovnanie-lightbox-card má align-items:stretch, ale to naťahuje IBA jeho PRIAME flex deti (tento viewport) na plnú výšku karty - .porovnanie-lightbox-track VNÚTRI neho NIE JE flex-dieťaťom ničoho (viewport predtým nebol display:flex), takže sa žiadny stretch ĎALEJ NEPRENÁŠAL - track (a v ňom rámčeky) tak ostávali pri svojej PRIRODZENEJ (kompaktnej) výške, kým viewport pod nimi mal neviditeľný "prázdny" zvyšok - cez neho presvitalo priehľadné pozadie appky (fasáda), nie karta, čo pôsobilo ako čierny pás. OPRAVA: viewport TERAZ sám display:flex (align-items:stretch je navyše aj predvolená hodnota flexu, tu explicitne kvôli čitateľnosti) - stretch sa vďaka tomu prenesie AŽ na track (jeho JEDINÉ flex-dieťa) a track (vlastný default align-items:stretch, nikde neprepísaný) ho prenesie ĎALEJ na rámčeky vnútri seba - CELÝ reťazec teraz skutočne naťahuje rámčeky na plnú výšku karty, ich VLASTNÉ pozadie preto vyplní CELÚ výšku, žiadny priestor appky pod nimi už nie je viditeľný. flex-shrink:0 na tracku - viewport je TERAZ flex kontajner, ktorého predvolený flex-shrink:1 by inak (track je širší než viewport, zámerne - obsahuje VŠETKY rámčeky) stláčal track na šírku viewportu namiesto toho, aby zostal svojou prirodzenou (väčšou) šírkou a nechal ho VIEWPORT orezať cez overflow:hidden. Sekcia zadania "oprava viditeľnosti šípok" - Krok 0 zmeralo, prečo šípky mizli na extrémnom K (Galaxy S20 landscape 800×360, K≈1.8): NIE display/opacity/visibility (tie boli VŽDY "visible"/"1") a NIE chybná JS disabled logika (tá bola VŽDY správna) - PRÍČINOU bolo, že CELÝ flex riadok karty (šípka + medzera + viewport width vyššie + medzera + šípka) na tomto K potreboval VIAC šírky, než mala karta k dispozícii (padding odpočítaný) - keďže .porovnanie-lightbox-prev/ next MAJÚ flex-shrink:0 (nižšie v súbore, nesmú sa nikdy zmenšiť) a viewport TU PREDTÝM tiež mal flex-shrink:0, celý PRETEKAJÚCI obsah sa jednoducho vyliať MIMO kartu - .porovnanie-lightbox-card má overflow:hidden (obranná poistka proti presne TOMUTO, zavedená skôr), takže šípky (na oboch okrajoch) sa vizuálne ORESALI preč, hoci v DOM-e aj computed style ostali úplne normálne "viditeľné". flex-shrink:0 -> 1 (default) - viewport je JEDINÝ flexibilný prvok v tomto riadku (šípky ostávajú flex-shrink:0, VŽDY dostanú svoj priestor) - keď obsah nezmestí, prehliadač teraz namiesto pretečenia ZMENŠÍ VÝHRADNE viewport (jeho vlastný overflow:hidden ho navyše už aj tak robí "automatic minimum size:0" spôsobilým na zmrštenie podľa CSS špecifikácie flexboxu - min-width:0 netreba dopĺňať zvlášť) - nižšia (menej "hint" peek ďalšej karty) šírka namiesto úplne zmiznutých šípok. V BEŽNOM (nie extrémnom) K toto NEMÁ žiadny vizuálny efekt (nedostatok priestoru nikdy nenastane, flex-shrink sa neuplatní), width vyššie ostáva nedotknuté ako ideálna/predvolená hodnota. */ .porovnanie-lightbox-viewport { display: flex; align-items: stretch; touch-action: pan-y; width: calc(3.5 * 230px * var(--ui-scale-kompenzacia, 1) + 3 * 16px * var(--ui-scale-kompenzacia, 1)); } /* Sekcia zadania "oprava: swipe/snap v Elemente A po pridaní pôdorysu" - PREDOŠLÝ pokus ("vycentrovanie pri prechode 2->1 karta") tu pridal `justify-content:center` NA CELÉ `.porovnanie-lightbox-viewport` pravidlo (bez podmienky) s odôvodnením "v scenári 5+ bytov (track ŠIRŠÍ než viewport) to nemá žiadny vizuálny efekt, netreba čo centrovať" - TOTO ODÔVODNENIE BOLO CHYBNÉ, potvrdené priamym meraním (getBoundingClientRect): `justify-content:center` na flex kontajneri s PRETEKAJÚCIM (overflow) obsahom NIE je inertné - stále vycentruje pretekajúci obsah okolo stredu (free space = width - content width je ZÁPORNÉ číslo, rozdelí sa symetricky na OBE strany), čím posunie PRIRODZENÚ (pred-transformovú) pokojovú pozíciu tracku o polovicu pretekajúcej šírky DOĽAVA - namerané pri 8 bytoch: viewport 1214.58px (reálnych), track 2160.79px (reálnych), track.left bol o 473px ĽAVEJŠIE než viewport.left AJ pri transform:translateX(0) (index 0, "pokojová" pozícia). `ziskajCielovyOffsetPx`/`aplikujTransformTracku` (js/ porovnanie.js) ale POČÍTAJÚ s tým, že transform:translateX(0) = track flush naľavo s viewportom (offset 0 = "žiadny posun potrebný") - tento predpoklad sa vôbec netýka `justify-content`, je to čisto matematický výpočet nezávislý od CSS zarovnania. Výsledok: PRESNE nahlásené symptómy - prvá karta pri swipe doprava (index 0) orezaná (skutočná pozícia o ~473px ĽAVEJŠIE než kód predpokladal), medzera pred pravou šípkou pri swipe doľava (posledný index) analogicky posunutý. OPRAVA: `justify-content:center` sa TERAZ aplikuje VÝHRADNE cez triedu pridávanú z JS (`.porovnanie-lightbox-viewport-vitaz`, vykresliPorovnavaciLightbox, IBA keď `jeVitaz`) - teda LEN v scenári, kde je track PRESVEDČIVO UŽŠÍ než viewport (1 karta v "zamrznutom" 2-kartovom priestore) a centrovanie je skutočne žiaduce/neškodné. V 5+ scenári (track ŠIRŠÍ než viewport) sa táto trieda NIKDY nepridá - viewport ostáva pri predvolenom `flex-start`, presne ako PRED "vycentrovanie pri prechode 2->1 karta" tiketom (t.j. presne také správanie, aké appka mala PRED celým "krížik od 2/VÍŤAZ" tiketom). */ .porovnanie-lightbox-viewport-vitaz { justify-content: center; } .porovnanie-lightbox-viewport .porovnanie-lightbox-track { flex-shrink: 0; will-change: transform; } /* Jednotlivé rámčeky teraz žijú VNÚTRI spoločného ohraničeného boxu (.porovnanie-lightbox-card vyššie), ktorý už sám nesie hlavný border/ box-shadow/pozadie - rámček preto potrebuje iba JEMNÉ odlíšenie od suseda (rovnaký princíp ako oddelené "karty" v rámci jedného paneľa), nie vlastný silný "plávajúci" tieň ako predtým. Border-width sekcia zadania "Doplnenie textových labelov, hrubšie orámovanie kariet..." - PREDTÝM 1px (takmer neviditeľné, najmä na mobile) - TERAZ 2px, výraznejšia farba (0.1 -> 0.28 alfa) pre lepšiu čitateľnosť/oddelenie kariet od seba, univerzálne na všetkých zariadeniach (nie iba touch-scoped media query). Sekcia zadania "Zvýšiť čitateľnosť textu v Porovnaní" - VRACIA hrúbku späť na 1px (explicitne potvrdené, napriek tomu, že predošlý odsek dokumentuje presne opačný krok 1px->2px zo ROVNAKÉHO dôvodu čitateľnosti/ oddelenia kariet - zámerná zmena smeru, nie prehliadnutie). Farba/alfa (0.28) NEZMENENÁ. */ .porovnanie-frame { position: relative; flex: 0 0 auto; width: calc(230px * var(--ui-scale-kompenzacia, 1)); display: flex; flex-direction: column; padding: calc(16px * var(--ui-scale-kompenzacia, 1)); background: rgb(var(--hairline-rgb) / 0.03); border: 1px solid rgb(var(--hairline-rgb) / 0.28); border-radius: 10px; } /* Sekcia zadania "zjednotenie šírky kariet Elementu A na fixných 300px" - PC/touch-table dostáva JEDNU pevnú šírku karty (300px*K), nezávislú od počtu bytov (nahrádza celú predošlú dynamickú/2-hodnotovú logiku - predošlé tikety striedavo menili .porovnanie-frame šírku medzi 230px (≤4) a JS-dopočítanou hodnotou ~300px (5+) cez inline style.width; TERAZ je to jedna konštantná CSS hodnota, žiadny JS zásah do šírky karty). Dotyk (mimo tohto gate) OSTÁVA pri base 230px*K vyššie - nedotknuté, #porovnanie-lightbox-viewport "3.5 karty" touch peek formula (nižšie v súbore) počíta práve s TOUTO nezmenenou touch hodnotou. */ @media (hover: hover), (pointer: fine) { .porovnanie-frame { width: calc(300px * var(--ui-scale-kompenzacia, 1)); } } .porovnanie-frame-remove { position: absolute; /* Kruh 20px*K; top/right 11px*K (pôvodne 8px*K pri 26px*K) drží STRED kruhu na rovnakom mieste (posun o polovicu zmenšenia, 3px*K). Hitbox ::before je centrovaný na stred kruhu, takže ho nasleduje automaticky. */ top: calc(11px * var(--ui-scale-kompenzacia, 1)); right: calc(11px * var(--ui-scale-kompenzacia, 1)); width: calc(20px * var(--ui-scale-kompenzacia, 1)); height: calc(20px * var(--ui-scale-kompenzacia, 1)); border-radius: 50%; /* Zviditeľnenie X: červená výplň z existujúceho tokenu, biely SVG krížik (rozpätie 15,5/26 + ťah 2,4 => ~62 % priemeru kruhu), hrúbka 2,4 jednotky viewBoxu (~1,7 px pri K=1); SVG vypĺňa kruh, takže sa škáluje s K. */ border: 1px solid var(--status-danger-strong); background: var(--status-danger-strong); color: #fff; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; transition: filter 200ms ease; } .porovnanie-frame-remove-icon { width: 100%; height: 100%; display: block; pointer-events: none; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; } /* Sekcia zadania "Vizuálna oprava centrálneho lightboxu Porovnanie a bottom row panelu na mobile", bod 4 - dotykový cieľ aspoň 44x44px, VIZUÁLNA ikona ostáva malá (20px*K vyššie). Neviditeľný ::before rozširuje VÝHRADNE klikací/dotykový priestor - position:absolute so zápornými top/left:50% + translate(-50%,-50%) ho vycentruje presne na stred rodiča (.porovnanie-frame-remove je jeho containing block), teda symetricky okolo NEZMENENEJ vizuálnej pozície kolieska, nezávisle od akejkoľvek veľkosti samotného tlačidla. Klik kdekoľvek v tomto neviditeľnom štvorci sa vyhodnotí ako klik na samotné tlačidlo (bežná CSS technika rozšírenia tap targetu bez zväčšenia vizuálu, pseudo- element je súčasťou box-modelu rodiča). 73px zvolené tak, aby po vynásobení SKUTOČNÝM K na dotykovom zariadení (K = max(1, uiMinScaleFactor/scale), project.config.js, js/scale.js) vyšla REÁLNA (po-transform) veľkosť >= 44px NEZÁVISLE od scale - kým je K aktívne (dotykové zariadenie, scale < uiMinScaleFactor), platí K*scale == uiMinScaleFactor vždy, teda 73 * 0.6 (dnešná uiMinScaleFactor) = 43.8px, zaokrúhlené na cieľových 44px. Na PC/touch-table (K vždy 1) vyjde neviditeľný štvorec 73px - výrazne viac než treba pre myš, ale neškodné (žiadny vizuálny prejav, iba širší klikací priestor). */ .porovnanie-frame-remove::before { content: ''; position: absolute; top: 50%; left: 50%; width: calc(73px * var(--ui-scale-kompenzacia, 1)); height: calc(73px * var(--ui-scale-kompenzacia, 1)); transform: translate(-50%, -50%); } .porovnanie-frame-remove:hover { filter: brightness(1.12); } /* Sekcia zadania "Krok 1 - zrušenie oddeľovacej čiary pod ID bytu" - RUŠÍ border-bottom + padding-bottom pridané predošlým tiketom "align fixes" (Fix #1 - "header separator line", komentár vyššie v histórii tohto miesta). Univerzálne (bez media gate, teda AJ touch, AJ PC/touch-table) - na rozdiel od predošlých medzerových tiketov sa toto NEMÁ scopovať iba na touch breakpoint. padding-bottom (8px*K) sa odstraňuje SPOLU s čiarou - podľa pôvodného komentára slúžil VÝHRADNE ako odstup TEXTU OD čiary ("padding-bottom DOPĹŇA existujúci margin-bottom"), nie ako univerzálny spacing (ten rieši margin-bottom nižšie, PONECHANÝ bezo zmeny - mimo rozsahu tohto tiketu, podľa merania už správny). Rovnaký (nízko-výškový touch) override padding-bottom (calc(2px*K), nižšie v súbore, @media max-height:430px) sa zo ROVNAKÉHO dôvodu tiež ruší. */ .porovnanie-frame-header { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--btn-secondary-text-active); padding-right: calc(28px * var(--ui-scale-kompenzacia, 1)); margin-bottom: calc(10px * var(--ui-scale-kompenzacia, 1)); } .porovnanie-frame-rows { display: flex; flex-direction: column; gap: calc(8px * var(--ui-scale-kompenzacia, 1)); margin-bottom: calc(12px * var(--ui-scale-kompenzacia, 1)); } .porovnanie-frame-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgb(var(--hairline-rgb) / 0.06); padding-bottom: calc(6px * var(--ui-scale-kompenzacia, 1)); } /* Sekcia zadania "oprava nerovnakých výšok riadkov" - Krok 0 (tento aj predošlé dve zadania) OPAKOVANE nezistilo žiadny SKUTOČNÝ rozdiel vo výške riadkov v žiadnej testovanej kombinácii bytov/zariadení (rowHeight dôsledne identický naprieč VŠETKÝMI riadkami/kartami, valueClientRects vždy 1 = žiadne zalomenie) - napriek tomu white-space:nowrap tu PREVENTÍVNE garantuje CELÚ TRIEDU tohto problému (text sa NIKDY nezalomí na 2 riadky, nezávisle od dĺžky budúcich dát) namiesto špekulatívneho hľadania konkrétnej hodnoty, ktorá by to spôsobovala - zadaním navrhnutá Možnosť 1 ("white-space:nowrap so zmenšením písma/šírky stĺpca"), BEZ zmenšenia písma/šírky (nebolo preukázané, že je potrebné - .porovnanie-frame-row nižšie má justify-content:space-between, label aj value majú svoj vlastný prirodzený priestor, nie pevnú spoločnú šírku, ktorú by bolo treba deliť). */ /* Sekcia zadania "Zväčšiť font-size (a font-weight) labelov v karte bytu Porovnania" - PREDTÝM 0.7rem, font-weight nešpecifikovaný (dedený prehliadačový default 400) - pomer voči .porovnanie-frame-value (0.82rem/ 600) bol 1.17x na veľkosti a citeľne väčší na VNÍMANEJ výške glyfu (weight 400 vs 600 pôsobí menej "plno"). Zväčšené na 0.78rem/500 (predošlý tiket) - font-size pomer klesol na ~1.05x, výška glyfu prakticky zrovnaná, ALE pixelová analýza hustoty vyplnenia glyfu ukázala pretrvávajúci rozdiel (label 4.4% "core" jasných pixelov vs hodnota 24.4%, 5.5x) - weight je dominantný faktor vnímanej "váhy" textu, nie iba výška. Sekcia zadania "Zrovnať font-weight labelu s hodnotou" - TERAZ 600 (zhodné s .porovnanie-frame-value nižšie) - hierarchia label/hodnota sa naďalej drží VÝHRADNE cez farbu (--text-dim vs --text-strong) a mierne menší font-size (0.78rem vs 0.82rem), nie cez weight. */ .porovnanie-frame-label { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .porovnanie-frame-value { font-size: 0.82rem; font-weight: 600; color: var(--text-strong); text-align: right; white-space: nowrap; } /* Sekcia zadania "Krok 2 - zjednotenie čiar v karte na PC/touch-table" - border-top + padding-top (čiara nad cenou) RUŠÍ aj TU (base pravidlo, teda PC/touch-table - dotykové zariadenie už túto čiaru nemá, @media (hover: none) and (pointer:coarse) nižšie ju rušilo skôr, iba PC/touch-table zaostával). margin-top:auto OSTÁVA NEDOTKNUTÉ (zadanie, "nedotýkať sa margin/spacing hodnôt, PC výška karty nie je fixovaná, je to zámerné") - na PC bez pevnej výšky karty je aj tak inertné (žiadny leftover priestor na absorbovanie, komentár nižšie). Skontrolované AJ ostatné čiary medzi dátovými riadkami (.porovnanie-frame-row border-bottom, nižšie) - tá je UNIVERZÁLNA (bez media gate) už predtým, teda IDENTICKÁ na PC aj touch, žiadny rozdiel na odstránenie. */ /* Sekcia zadania "štvorcový náhľad pôdorysu v karte Elementu A" - IBA PC/touch-table (zadanie, mobil/tablet karta sa nemá zmeniť vôbec). .porovnanie-frame-podorys je VÝHRADNE LAYOUT wrapper (žiadny vlastný vizuál - ten nesie AŽ .porovnanie-frame-podorys-box nižšie) - `flex:1 1 auto` ho urobí JEDINÝM rastúcim prvkom v stĺpci (.porovnanie-frame-rows hore má flex:0 1 auto/hug-content, nezmenené), pohltí teda CELÝ leftover priestor medzi ZÁHRADA (posledný dátový riadok) a cenou (ten priestor už dnes existuje - .porovnanie-frame-price margin-top:auto ho posúva na spodok karty, PC/touch-table má od tiketu "Element A drag na PC/touch-table" rovnako pevnú výšku karty ako dotyk). `align-items:center` (row-direction, teda CROSS os = vertikálna) vycentruje samotný štvorec VNÚTRI tohto pohlteného priestoru - .porovnanie-frame-price margin-top:auto ostáva nedotknuté (po tomto wrapperi už nemá čo pohlcovať, cena tak zostáva zarovnaná úplne dole, presne ako dnes). Base (mobil/tablet, mimo media gate) - display:none, element v DOM-e EXISTUJE (jednotný HTML template pre všetky zariadenia, konzistentné s architektúrou appky - rovnaký princíp ako iné jednotné šablóny naprieč appkou), ale je BEZ vplyvu na layout aj vizuál - "karta sa nemá zmeniť vôbec" (zadanie). */ .porovnanie-frame-podorys { display: none; } @media (hover: hover), (pointer: fine) { .porovnanie-frame-podorys { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; } } /* Samotný štvorec - DVE vrstvy, nie jedna (Krok 0 tohto zadania priamym testom v prehliadači odhalil chybu prvého pokusu: keď malo TMAVÉ pozadie IBA samotné, a bolo bez [src] pri opacity:0 - CELÝ element vrátane VLASTNÉHO pozadia je pri opacity:0 neviditeľný, "rámček s tmavou výplňou" sa tak pri chýbajúcom pôdoryse vôbec nezobrazil, presvitalo cez neho iba takmer priehľadné pozadie .porovnanie-frame). Rovnaký dvojvrstvový princíp, aký v skutočnosti používa aj .vr-tours-photo/ .poi-window-photo (OBAL AJ vnútri NEZÁVISLE nesú to isté --media-frame-rgb pozadie, "kryje medzeru pod object-fit:contain vlastnou farbou, NESPOLIEHA SA IBA na presvitajúce pozadie rodiča" - presne to isté vysvetlenie, prehliadnuté pri prvom pokuse): .porovnanie-frame-podorys-box nesie TRVALÉ pozadie/rámik/radius (VŽDY viditeľné, nezávisle od stavu vnútri) - .porovnanie-frame- podorys-img sa už IBA opacity-fade-uje NAD ním, žiadny vlastný border/background netreba (box ho vždy poskytne). */ /* Sekcia zadania "zmena tvaru pôdorysu zo štvorca (1:1) na 4:3" - PREDTÝM width:100% + aspect-ratio:1 (box preberal PRESNE šírku rámčeka, 264px pri K=1, výška z toho vyplynula automaticky). TERAZ box NEMÁ vlastnú CSS šírku/výšku vôbec - OBE rozmery nastavuje VÝHRADNE JS (js/porovnanie.js, vykresliPorovnavaciLightbox, PODORYS_MAX_WIDTH/ HEIGHT/MIN_HEIGHT) po živom DOM meraní dostupného priestoru, pretože nová horná hranica (220x165) je MENŠIA než šírka rámčeka - CSS width:100% by tak dávalo NESPRÁVNU (príliš veľkú, nedodržiavajúcu 4:3) hodnotu. 220x165 nižšie je iba PRED-JS fallback (rovnaká hodnota ako horná hranica JS výpočtu) - v praxi sa nikdy nevykreslí bez okamžitého JS prepisu (beží synchrónne v tom istom tiku ako vytvorenie DOM-u). */ .porovnanie-frame-podorys-box { width: 220px; height: 165px; border: 1px solid rgb(var(--hairline-rgb) / 0.35); border-radius: 8px; background: rgb(var(--media-frame-rgb)); overflow: hidden; } /* object-fit:contain (rovnaký princíp ako .vr-tours-photo img/.poi-window- photo img, NEZMENENÉ touto sekciou zadania) - obrázok sa nikdy neorezáva ani nenaťahuje, zachováva si VLASTNÝ pomer strán nezávisle od tvaru kontajnera (štvorec predtým, 4:3 teraz - img pravidlo sa nemenilo, iba kontajner okolo neho). opacity 0->1 fade-in AŽ keď má reálny [src] (rovnaký pár pravidiel, žiadny nový mechanizmus). Needitovateľné/ neklikateľné - obyčajný , žiadny cursor/pointer-events zásah, žiadny click listener (JS). */ .porovnanie-frame-podorys-img { width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transition: opacity 0.2s ease; } .porovnanie-frame-podorys-img[src]:not([src=""]) { opacity: 1; } /* Sekcia zadania "Pridať oddeľovaciu čiaru nad cenou", ROZSAH OPRAVENÝ nasledujúcou sekciou zadania "Oprava rozsahu z predošlého tiketu" - VRACIA border-top/padding-top, ktoré boli odstránené sériou skorších tiketov ("odstránenie čiary nad cenou" - pôvodne iba dotyk, neskôr "Krok 2 - zjednotenie čiar v karte na PC/touch-table" rozšírilo rovnaké odstránenie aj na PC/touch-table pre medzi-zariadeniovú konzistenciu). Presný PÔVODNÝ zápis čiary nie je v histórii komentárov dohľadateľný (staré komentáre spomínajú iba abstraktne "border-top", nie konkrétnu farbu/hrúbku) - použitá je preto VIZUÁLNE ROVNAKÁ hodnota, akú majú dnešné oddeľovače MEDZI dátovými riadkami (`.porovnanie-frame-row`, `border-bottom: 1px solid rgb(var(--hairline-rgb) / 0.06)`) - rovnaká farba/hrúbka/opacity, nie vymyslená nová hodnota. padding-top rovnako K-kompenzovaný a rovnakou hodnotou (6px*K), ako má `.porovnanie-frame-row` svoj padding- bottom - border samotný ZÁMERNE NEŠKÁLOVANÝ K-kompenzáciou (flat 1px), konzistentné s tým, že žiadny border v appke nepoužíva `calc(Npx*K)`. **IBA PC/touch-table** (na rozdiel od PRVEJ verzie tohto komentára, ktorá toto omylom opísala ako univerzálne) - dotykový override nižšie (@media hover:none/pointer:coarse) TERAZ ZNOVU RUŠÍ border-top/padding-top (rovnako ako pred týmto tiketom), IBA `margin-top:0` tam ostáva (rieši NESÚVISIACI problém, pozri komentár pri tom pravidle). */ .porovnanie-frame-price { margin-top: auto; border-top: 1px solid rgb(var(--hairline-rgb) / 0.06); padding-top: calc(6px * var(--ui-scale-kompenzacia, 1)); font-size: var(--porovnanie-frame-id-price-font-size); font-weight: 700; color: rgb(var(--accent-rgb)); text-align: center; } /* Farby karty bytu (Element A) IBA na mobile/tablete (K>1, trieda ui-k-aktivne na ; NIE @media hover/pointer - zasiahlo by aj touch-desktop s K=1). Svetlá karta s čiernym textom (ID, blok, cena, labely aj hodnoty). Lokálne custom properties platia len v karte; zdieľané :root tokeny sa nemenia. Pravidlá sú adresné (nie .porovnanie-frame *), aby sa nedotkli X, SVG krížika ani pôdorysu; hviezdička má inline farbu zo SPECIAL_OFFER_COLOR (zámerne zlatá), tu sa len zväčšuje (16px * K). Ostatné texty v karte sú x 1,1 oproti základným hodnotám (label, hodnota, hlavička, cena, hviezdička); šírka a výška karty ani rozostup riadkov sa nemenia (riadky rozdeľuje space-between). Hodnoty zodpovedajú základu x 1,1 aj v nízko-výškovom podrežime nižšie. */ .ui-k-aktivne .porovnanie-frame { --porovnanie-karta-vyplna: #f8fafc; --porovnanie-karta-text: #000; --porovnanie-karta-ciara: rgb(0 0 0 / 0.2); background: var(--porovnanie-karta-vyplna); border-color: var(--porovnanie-karta-text); } .ui-k-aktivne .porovnanie-frame-header, .ui-k-aktivne .porovnanie-frame-price { color: var(--porovnanie-karta-text); font-size: calc(var(--porovnanie-frame-id-price-font-size) * 1.1); } .ui-k-aktivne .porovnanie-frame-label { color: var(--porovnanie-karta-text); font-size: calc(0.78rem * 1.1); } .ui-k-aktivne .porovnanie-frame-value { color: var(--porovnanie-karta-text); font-size: calc(0.82rem * 1.1); } .ui-k-aktivne .porovnanie-frame .card-status-star { font-size: calc(16px * var(--ui-scale-kompenzacia, 1)); } .ui-k-aktivne .porovnanie-frame-row { border-bottom-color: var(--porovnanie-karta-ciara); } @media (max-height: 430px) and (hover: none) and (pointer: coarse) { .ui-k-aktivne .porovnanie-frame-label { font-size: calc(0.65rem * 1.1); } .ui-k-aktivne .porovnanie-frame-value { font-size: calc(0.68rem * 1.1); } } /* Sekcia zadania "oprava čierneho priestoru v karte" - na dotykovom zariadení je .porovnanie-lightbox-card teraz pevnej výšky (predošlé zadanie) a align-items:stretch (vyššie v tomto súbore) naťahuje KAŽDÝ .porovnanie-frame na CELÚ túto výšku. Bez tejto úpravy by sa celý leftover priestor zbieral IBA cez .porovnanie-frame-price {margin-top:auto} vyššie do JEDNEJ veľkej medzery tesne NAD cenou (rámček pôsobil "prilepený" k hornému okraju). flex:1 1 auto - .porovnanie-frame-rows (predtým flex:0 1 auto, hug- content) TERAZ namiesto ceny prevezme rolu "absorbovať leftover priestor" - rastie a VYPĹŇA zvyšnú výšku rámčeka. justify-content:space-between - a TENTO leftover priestor rozdelí ROVNOMERNE MEDZI jednotlivé riadky (nie do jednej diery) - 1. riadok ostáva pri hornom okraji kontajnera, POSLEDNÝ riadok presne pri jeho dolnom okraji (space-between nepridáva priestor na krajoch), takže cena hneď pod ním zostáva vizuálne "pripojená" k obsahu, nie odtrhnutá veľkou medzerou. gap (existujúce pravidlo vyššie) ostáva FLOOR minimálny odstup medzi riadkami - space-between pridáva iba PREBYTOČNÝ priestor NAD týmto minimom, riadky sa nikdy nezrazia bližšie než na pôvodný gap. .porovnanie-frame-price margin-top prepísaný na 0 - jeho PÔVODNÁ úloha (absorbovať leftover priestor cez auto) teraz patrí .porovnanie-frame- rows vyššie; ponechanie margin-top:auto by s ním o ten istý priestor súperilo (dvaja "adepti" na tú istú medzeru). PC/touch-table (mimo tohto gate) ostáva NEZMENENÉ - .porovnanie-frame- rows tam zostáva flex:0 1 auto (hug-content) a .porovnanie-frame-price margin-top:auto, presne ako doteraz (na PC .porovnanie-lightbox-card nemá pevnú výšku, preto tam ani predtým nebol žiadny leftover priestor na absorbovanie - bezo zmeny). */ @media (hover: none) and (pointer: coarse) { .porovnanie-frame-rows { flex: 1 1 auto; justify-content: space-between; } /* Sekcia zadania "Oprava rozsahu z predošlého tiketu - čiara nad cenou mala byť IBA PC/touch-table" - predošlý tiket ("Pridať oddeľovaciu čiaru nad cenou") tu OMYLOM prestal prepisovať border-top/padding-top na dotyku, čím sa čiara stala univerzálnou aj na dotyk - to nebol zámer (zadanie tohto tiketu explicitne: "IBA PC/touch-table"). TERAZ VRÁTENÉ späť na pôvodný stav SPRED tamtoho tiketu ("odstránenie čiary nad cenou", predtým tento istý gate) - dotyk čiaru NEMÁ, presne ako pred oboma nedávnymi tiketmi. margin-top:0 OSTÁVA nedotknuté - rieši NESÚVISIACI problém (.porovnanie-frame-rows tu má flex:1 1 auto + justify-content:space-between vyššie, preberá rolu absorbovať leftover priestor karty; ponechanie margin-top:auto TU by s ním o ten istý priestor súperilo - dvaja "adepti" na tú istú medzeru). */ .porovnanie-frame-price { margin-top: 0; padding-top: 0; border-top: none; } /* Sekcia zadania "centrovanie ID bytu" - text-align:center vycentruje "A1.03 – BLOK A" na stred TOHTO elementu; aby sa tento stred zhodoval so stredom .porovnanie-frame-price (ten nemá ŽIADEN vlastný horizontálny padding, iba dedí rovnaký .porovnanie-frame padding zo VŠETKÝCH strán), header musí ZDIEĽAŤ presne tú istú (symetrickú) šírku - padding-right (base pravidlo, 28px*K, PREDTÝM rezervoval miesto pre krížik pri ĽAVO zarovnanom texte) sa preto TU na touch ruší (0), inak by centrovanie prebiehalo v UŽŠOM (asymetrickom) boxe a stred textu by sa od ceny odchýlil o polovicu tejto rezervy. Krížik (.porovnanie-frame-remove) je position:absolute s VLASTNÝMI top/right offsetmi (nezávislé od tohto elementu ani jeho paddingu) - NEPOSÚVA sa touto zmenou. OBMEDZENIE (nahlásené, nie ticho ošetrené): pri VÝRAZNE dlhšom ID/ názve bloku, než aké má súčasných 17 bytov, by sa centrovaný text mohol vizuálne priblížiť/prekryť s krížikom (žiadna kolízna poistka tu zámerne nie je - text sa NEOREZÁVA ani NEZALAMUJE). Overené priamym meraním na reálnych ID (napr. "A3.02 – BLOK A") - bez kolízie. */ .porovnanie-frame-header { text-align: center; padding-right: 0; font-size: var(--porovnanie-frame-id-price-font-size); } } /* .gallery-lightbox-nav (zdieľaná trieda) je predvolene position:absolute (vycentrovaná na výšku svojho rodiča) - na DOTYKU namiesto toho sedí ako bežný flex-item VEDĽA .porovnanie-lightbox-track (rodič .porovnanie- lightbox-card je flex row), aby šípky boli PRI okrajoch samotného rámčekového pásu, nie pri okrajoch celej (širšej) karty - TOTO správanie je od "Krok 2 - usporiadanie rámca a šípok na PC/touch-table" ZÁMERNE OBMEDZENÉ IBA na dotyk (predtým univerzálne, PC malo identické, ale bez viditeľného efektu - PC vtedy nemalo pevnú šírku/výšku karty ani viewport širší než kartu, teraz OBOJE má, "flex-item vedľa tracku" by preto na PC znamenalo šípky centrované UPROSTRED karty namiesto pri jej okrajoch, zadanie "Krok 2" to explicitne nechce). Sekcia zadania "vertikálne centrovanie šípok" - align-self:center. Bez neho tieto tlačidlá (majú VLASTNÚ pevnú width/height, 44px*K, .gallery-lightbox-nav, css/detail.css) pri align-items:stretch rodiča (.porovnanie-lightbox-card, dotykové zariadenie, sekcia zadania "oprava čierneho priestoru v karte") NEDOSTÁVAJÚ stretch (majú DEFINITÍVNU krížovú veľkosť, tá stretch vždy prebije) - namiesto toho sa podľa CSS flexbox špecifikácie umiestnia k ZAČIATKU krížovej osi (fakticky ako align-self:flex-start), teda k HORNÉMU okraju karty, nie do jej stredu (potvrdený bug - predtým to "fungovalo" iba náhodou, keď mala karta align-items:center namiesto stretch, teraz odhalené). align-self:center šípky vycentruje voči CELEJ (teraz pevnej) výške karty nezávisle od akéhokoľvek align-items rodiča. */ @media (hover: none) and (pointer: coarse) { .porovnanie-lightbox-prev, .porovnanie-lightbox-next { position: static; flex-shrink: 0; align-self: center; transform: none; } } /* Sekcia zadania "Krok 2 - usporiadanie rámca a šípok na PC/touch-table" - PC/touch-table (mimo touch gate vyššie) NEPREPISUJE position/transform - .gallery-lightbox-nav (base pravidlo, css/detail.css) tak ostáva v platnosti bezo zmeny: position:absolute; top:50%; transform:translateY (-50%) - vycentruje šípky voči CELEJ výške .porovnanie-lightbox-card (najbližší position:relative predok), nezávisle od flexboxu/paddingu (na rozdiel od dotykovej vetvy vyššie, tu preto NETREBA kompenzačný transform pre asymetrický padding-top/padding-bottom - centrovanie ide priamo voči CELKOVEJ výške boxu, nie voči flex content-boxu). left/right TU dopĺňajú (.gallery-lightbox-prev/next, css/detail.css, majú VLASTNÉ 20px hodnoty pre inú triedu, Porovnanie triedy ich nededia) - šípky sa tak ukotvia PRIAMO K OKRAJOM .porovnanie-lightbox-card (zadanie, "na krajných okrajoch CELÉHO vonkajšieho rámca lightboxu"), nezávisle od šírky/pozície viewportu s kartami vnútri. Hodnota (16px*K) zodpovedá PRESNE rezerve v .porovnanie-lightbox-card.porovnanie-ma-sipky padding nižšie (16+44 šírka šípky+12 medzera = 72px*K) - žiadna medzera medzi šípkou a kartou navyše. */ @media (hover: hover), (pointer: fine) { .porovnanie-lightbox-prev { left: calc(16px * var(--ui-scale-kompenzacia, 1)); } .porovnanie-lightbox-next { right: calc(16px * var(--ui-scale-kompenzacia, 1)); } } /* Sekcia zadania "Krok 2 - usporiadanie rámca a šípok na PC/touch-table" - .porovnanie-lightbox-card dostáva TÚTO širšiu bočnú rezervu IBA keď naozaj obsahuje šípky (trieda "porovnanie-ma-sipky", pridávaná/mazaná JS-om, js/porovnanie.js, presne podľa `potrebneSipky`) - pri 2/4 bytoch (žiadne šípky) ostáva base padding (40px*K, vyššie) nedotknutý, aby dynamické zúženie karty na presný obsah (nastavDynamickuSirkuViewportu, "dynamická šírka rámca pri 2-3 bytoch") nezostalo zbytočne širšie o nevyužitú rezervu. 72px*K = presne 16px*K (odsadenie šípky od okraja karty, vyššie) + 44px*K (šírka šípky, .gallery-lightbox-nav) + 12px*K (medzera pred prvou/poslednou kartou) - viewport TAK VYPĹŇA presne zvyšný vnútorný priestor karty MEDZI šípkami bez medzery navyše (JS, vykresliPorovnavaciLightbox, číta TENTO padding na výpočet dostupnej šírky). */ @media (hover: hover), (pointer: fine) { .porovnanie-lightbox-card.porovnanie-ma-sipky { padding-left: calc(72px * var(--ui-scale-kompenzacia, 1)); padding-right: calc(72px * var(--ui-scale-kompenzacia, 1)); } } /* Sekcia zadania "zväčšiť medzeru medzi chipom a rámcom kariet" - vedľajší účinok zistený VLASTNÝM regresným meraním (nebolo súčasťou zadania, ale scope výslovne vyžaduje nemeniť správanie šípok) - align-self:center (vyššie) centruje VOČI CONTENT-BOXU karty (bez paddingu), nie voči jej celkovej (vizuálne vnímanej) výške. Keďže padding-top karty je INÝ než padding-bottom (horný priestor je vyhradený pre chip/nadpis/krížik), stred content-boxu sa systémovo odchyľuje od vizuálneho stredu karty o (padding-bottom - padding-top)/2 - dovtedy (align-items:center namiesto stretch, predošlé zadanie) táto odchýlka bola malá/nepostrehnuteľná, TERAZ (po zväčšení padding-top pri oprave prekryvu, nižšie v súbore) sa citeľne zväčšila. Namiesto zásahu do samotného zarovnania (mimo rozsahu, riskuje zásah do horizontálnej pozície šípok, dnes fungujúcej) transform DOPĹŇA (nie nahrádza) align-self:center presne o TÚTO odchýlku, späť na vizuálny stred CELEJ karty. POZOR na poradie v súbore (rovnaký bug, aký sa predtým stal pri font-size .porovnanie-lightbox-heading) - TENTO blok musí byť AŽ ZA base pravidlom vyššie (transform:none), inak by pri rovnakej špecificite víťazilo base pravidlo (posledné v poradí v súbore), presne ako sa stalo pri prvom pokuse (overené priamym meraním - transform ostal "none" na tablete, kde base pravidlo bolo ZA touto úpravou). Hodnota tu zodpovedá BASE padding-top/padding-bottom (60px*K/28px*K) - nízko-výškový podrežim (@media max-height:430px nižšie) má VLASTNÚ, odlišnú hodnotu (iný padding-bottom tam), definovanú v jeho vlastnom bloku (musí byť AJ TAM za touto touto istou base transform:none, čo spĺňa - podrežim je fyzicky ešte ďalej v súbore). */ @media (hover: none) and (pointer: coarse) { .porovnanie-lightbox-prev, .porovnanie-lightbox-next { transform: translateY(calc((28px - 60px) / 2 * var(--ui-scale-kompenzacia, 1))); } } /* -------------------------------------------------------------------------- ELEMENT B - SPODNÝ PÁS "MÔJ VÝBER" (transformovaný vertikálny panel, cez celú šírku, univerzálne PC/touch table/mobil/tablet). -------------------------------------------------------------------------- */ /* Sekcia zadania "Pridať rámček (kontajner)..." - PREDTÝM #porovnanie-pas siahal presne od okraja po okraj (left/right:0, iba border-top, žiadny border-radius) - pôsobilo to ako neohraničená čierna plocha, nie ako panel appky. TERAZ nesie ROVNAKÝ dark-glass rám (plný border + border- radius + box-shadow) ako ostatné panely appky (napr. .project-info-panel, css/layout.css). Sekcia zadania "...dynamická šírka bottom row pásu podľa počtu bytov" - left:50%+transform (namiesto PREDOŠLÉHO left/right s rovnakým odsadením, čo ešte stále vynucovalo takmer celú šírku obrazovky bez ohľadu na obsah) + width:fit-content - kontajner sa teraz zmrští na SKUTOČNÚ šírku viditeľných kariet (2 karty = užší pás, 4 karty = širší), vždy centrovaný. max-width zostáva ako obranná poistka (nikdy nepretečie cez okraj obrazovky, nezávisle od budúceho počtu/šírky kariet). */ #porovnanie-pas { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(20px * var(--ui-scale-kompenzacia, 1)); z-index: 260; display: flex; align-items: center; justify-content: center; gap: calc(12px * var(--ui-scale-kompenzacia, 1)); width: fit-content; max-width: calc(100% - 48px * var(--ui-scale-kompenzacia, 1)); padding: calc(14px * var(--ui-scale-kompenzacia, 1)) calc(24px * var(--ui-scale-kompenzacia, 1)); background: rgb(var(--surface-panel-rgb) / 0.85); /* Sekcia zadania "Zjednotiť vonkajší border Elementu B s Elementom A" - PREDTÝM tento 1px hairline border platil VŠADE a bol prepisovaný na 2px solid var(--text-strong) (rovnaká premenná/hrúbka ako Element A, .porovnanie-lightbox-card nižšie v súbore) IBA na PC/touch-table (@media (hover:hover),(pointer:fine) override, sekcia zadania "Redizajn Element A (peek pri 5+ bytoch) + biely rám na Element B"). Element A svoj border NIKDY negoval touch/PC podmienkou (jeho .porovnanie-lightbox-card pravidlo je nepodmienené) - Element B tak na dotyku zostával pri starom takmer neviditeľnom 0.08-alfa hairline, zatiaľ čo Element A tam UŽ mal plný biely 2px rám. Border je TERAZ nepodmienený (rovnako ako na Elemente A) - médiový override nižšie sa stal duplicitným a bol odstránený, nie ponechaný ako mŕtvy kód. Sekcia zadania "Zvýšiť čitateľnosť textu v Porovnaní" - hrúbka 2px->1px (zhodne s Elementom A vyššie), farba/premenná nezmenená. */ border: 1px solid var(--text-strong); border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } #porovnanie-pas.porovnanie-pas-hidden { display: none; } /* Sekcia zadania "Doplnenie textových labelov..." bod 3 - "Môj zoznam:" ako PRVÝ prvok pásu (pred šípkou/kartami), rovnaký dark-glass chip štýl ako .porovnanie-lightbox-title (definovaný vyššie, zdieľaný selektor - pozadie/border/radius/padding/farba). Tu iba DOPLNKOVÉ vlastnosti špecifické pre flex-item kontext pásu (lightbox-title je oproti tomu absolútne pozicovaný, tieto by tam nemali zmysel): flex-shrink:0, aby ho karty/šípky pri width:fit-content kontajneri nikdy nestlačili; white-space:nowrap, aby sa nikdy nezalomil na 2 riadky. */ .porovnanie-pas-title { flex-shrink: 0; white-space: nowrap; } /* Sekcia zadania "Element B - drag mechanika na VŠETKÝCH zariadeniach, Krok 0/1" - NAHRÁDZA predošlé stránkovanie po dávkach (JS slice+plný re-render) rovnakou architektúrou, akú Element A už používal IBA na dotyku: .porovnanie-pas-viewport (NOVÝ, overflow:hidden, pevná "3.5 karty" šírka ako predvolené CSS, JS ju pri <=4 bytoch zmenší PRESNE na obsah - žiadny "kúsok ďalšej karty" ak nie je čo nakuknúť, ziskajMaxViditelnychElementA- analogický princíp, js/porovnanie.js nastavDynamickuSirkuViewportu) > .porovnanie-pas-track (TERAZ "filmstrip" - VŠETKY karty naraz, prirodzená šírka VÄČŠIA než viewport, posúva sa VÝHRADNE cez transform:translateX(), js/porovnanie.js pripojDragTracku/dotiahniElementBNaAktualnuPoziciu). #porovnanie-pas (rodič, width:fit-content vyššie) centruje/objíma CELÝ riadok (title+šípky+viewport) presne ako predtým - iba VNÚTRI viewportu teraz môže byť viac obsahu, než koľko je vidno. Karty (.apartment-card) majú TERAZ VŽDY pevnú (nie min-) width - na OBOCH vetvách (280px*K PC/touch-table, 170px*K dotyk, rovnaké hodnoty ako predtým) - deterministická šírka karty je NUTNÁ pre presný výpočet "3.5 karty" viewportu (rovnaký dôvod, prečo ju má pevnú aj Element A, .porovnanie-frame, base pravidlo vyššie). Predošlý dotykový min-width/overflow-x:auto (natívny scroll fallback pre K-inflovanú šírku) sa RUŠÍ - zadanie "Natívny overflow-x:auto scroll sa nahrádza touto drag mechanikou", K-inflácia sa rieši RATOVNAKO ako pri Elemente A: text je krátky ("BYT X – BLOK A" + 3 parametre), 170px*K sa doteraz nikdy nepretiekol ani bez tejto poistky. */ .porovnanie-pas-track { display: flex; gap: calc(12px * var(--ui-scale-kompenzacia, 1)); flex-shrink: 0; will-change: transform; } /* display:flex JE POTREBNÉ (nie iba kozmetika) - .porovnanie-pas-track vnútri je flex-shrink:0 (vyššie), čo má zmysel IBA ak je track SÁM flex- ITEM (rodič display:flex) - v OBYČAJNOM (block) rodičovi by track ako block-level display:flex prvok dostal width:auto = "vyplň šírku rodiča" (rovnaké ako viewport), NIE svoju prirodzenú (širšiu, VŠETKY karty naraz) šírku - track by sa tak javil RANOVNAKO široký ako viewport (potvrdené priamym meraním, getBoundingClientRect oboch zhodné) a "flush-to-end" výpočet (ziskajCielovyOffsetPx, js/porovnanie.js) by vyšiel nulový offset aj na poslednej karte. Rovnaký mechanizmus ako Element A (.porovnanie- lightbox-viewport, touch-scoped vyššie, rovnaký komentár "oprava viditeľnosti šípok"/"oprava čierneho priestoru v karte"). */ /* Sekcia zadania "Redizajn Element A (peek pri 5+ bytoch) + biely rám na Element B" bod 3 - "3.5 karty" (3 celé + polovica 4.) -> "4.5 karty" (4 celé + polovica 5.), IBA na PC/touch-table. Toto je base pravidlo bez media gate, ale dotyk má VLASTNÝ override (170px šírka, nižšie v súbore, @media (hover:none) and (pointer:coarse)) - pri rovnakej špecificite víťazí posledné pravidlo v poradí v súbore, dotykový override je fyzicky ĎALEJ, takže na dotyku platí NEZMENENÝCH 3.5*170px, zmena TU sa naň nepremieta. */ .porovnanie-pas-viewport { display: flex; overflow: hidden; width: calc(4.5 * 280px * var(--ui-scale-kompenzacia, 1) + 4 * 12px * var(--ui-scale-kompenzacia, 1)); } .porovnanie-pas-track .apartment-card { flex: 0 0 auto; width: calc(280px * var(--ui-scale-kompenzacia, 1)); } .porovnanie-pas-prev, .porovnanie-pas-next { position: static; flex-shrink: 0; transform: none; } @media (hover: none) and (pointer: coarse) { .porovnanie-pas-viewport { width: calc(3.5 * 170px * var(--ui-scale-kompenzacia, 1) + 3 * 12px * var(--ui-scale-kompenzacia, 1)); } .porovnanie-pas-track .apartment-card { width: calc(170px * var(--ui-scale-kompenzacia, 1)); } } /* ========================================================================== 📱 MOBILE LANDSCAPE - NÍZKA VÝŠKA VIEWPORTU (sekcia zadania "Vizuálna oprava centrálneho lightboxu Porovnanie a bottom row panelu na mobile", bod 3) - OVERENÉ priamym testom (900x300 dotykový viewport, byt s Terasou+Záhradou/6 riadkami v porovnaní): Element A (centrálny lightbox) pri PLNOM padding/gap/font-size (vyššie v tomto súbore) mohol svojou výškou zasahovať AŽ DO Elementu B (#porovnanie-pas) - obe sú vertikálne centrované/ukotvené voči TEJ ISTEJ 1920x1080 referenčnej ploche, appka sa ale iba proporčne zmenšuje (js/scale.js, transform:scale) - reálna výška ~360px teda zodpovedá rovnakému pomeru obsahu k výške, aký by mal akýkoľvek iný pomer strán, LEN K-kompenzácia (--ui-scale-kompenzacia, nutná pre čitateľnosť textu na dotykovom zariadení pri nízkom scale) môže spoločne s vysokým počtom riadkov (Podlažie/Izby/Orientácia/Rozloha/ Terasa/Záhrada) narásť natoľko, že sa kartám v tomto konkrétnom extrémnom pomere (široký, ale nízky viewport) nezmestí do dostupnej výšky. Namiesto ĎALŠIEHO zväčšovania K (čo by problém iba zhoršilo) táto vrstva CIELENE redukuje VÝHRADNE vnútorné odsadenia/medzery/font-size Elementu A+B (nie samotný K systém, ten zostáva nedotknutý pre zvyšok appky) - rovnaký calc(Npx * K) vzor ako všade v appke, iba s MENŠÍMI základnými hodnotami Npx pre tento konkrétny komponent v tomto konkrétnom rozsahu výšky. Cena (najvýraznejší prvok karty, zadanie) sa zmenšuje NAJMENEJ zo všetkých hodnôt - ostáva čitateľná aj pri maximálnej kompresii ostatných riadkov. Gate scopovaný AJ na (hover:none) and (pointer:coarse) (rovnaký touch- gate ako `.card-thumb`/iné mobilné úpravy appky vyššie v repozitári) - PC/touch-table s krátkym oknom (K vždy 1, myš namiesto prsta) túto kompresiu nepotrebuje, iba by zbytočne zmenšila text bez dôvodu. max-height:430px zvolené s rezervou nad testovaným "min. výška 360px" (zadanie, bod 5) - pokrýva bežné rozlíšenia mobil/tablet landscape pri nízkej výške (napr. 360-412px), nezasahuje do tablet landscape s väčšou výškou (600px+), kde plné odsadenie vyššie stále komfortne sedí. */ @media (max-height: 430px) and (hover: none) and (pointer: coarse) { /* Sekcia zadania "zväčšiť medzeru medzi chipom a rámcom kariet" - Krok 0 zmeralo SKUTOČNÝ (nie iba domnelý) prekryv: na Galaxy S20 landscape (800×360 aj 915×412, OBE spadajú pod TENTO max-height:430px podrežim) .porovnanie-lightbox-close (base pravidlo, top:16px*K + height:32px*K = spodný okraj v 48px*K referenčných px) fyzicky presahoval DO priestoru prvého riadku karty - PRÍČINA: padding-top tejto karty tu bol IBA 32px*K, teda MENEJ než 48px*K, ktoré chip/krížik potrebuje na to, aby sa doňho vôbec zmestil. Predošlé zadanie "align fixes" (Fix #2) vrátilo top offsety chipov (title/heading/close) na base hodnoty (16px/20px/16px*K), ale NEDOTKLO sa TOHTO padding-top - preto sa overlap nevykázal v JEHO vtedajšom meraní (to merlo odstup medzi chipom a HORNÝM okrajom KARTY, nie medzi chipom a prvým riadkom OBSAHU vnútri nej, ktorý začína PRESNE na hranici padding-top). padding-top preto TU už NEPREPISUJEME (predtým 32px*K) - padá späť na base 60px*K (vyššie v súbore), ktoré dáva krížiku (48px*K) presne 12px*K viditeľnej rezervy - RIEŠENIE potvrdené priamym meraním na 800×360 aj 915×412 (žiadny prekryv), aj konzistentné s tabletom (mimo tohto podrežimu, base 60px*K sa tam už aj tak používal bez problémov). padding-left/padding-right/padding-bottom OSTÁVAJÚ zúžené (mimo rozsahu tejto úpravy - netýkajú sa vertikálneho odstupu chipu). POZOR - pôvodný 3-hodnotový shorthand "padding: top L+R bottom" nastavoval ĽAVÝ AJ PRAVÝ padding NARAZ (20px*K) - prechod na longhand tu preto musí explicitne uviesť OBA (padding-left AJ padding-right), inak by padding-left tichoNEZÁMERNE spadol späť na base 40px*K (nekonzistentné s pravou stranou). */ .porovnanie-lightbox-card { gap: calc(8px * var(--ui-scale-kompenzacia, 1)); padding-left: calc(20px * var(--ui-scale-kompenzacia, 1)); padding-right: calc(20px * var(--ui-scale-kompenzacia, 1)); padding-bottom: calc(12px * var(--ui-scale-kompenzacia, 1)); } /* Šípky - VLASTNÝ (nižší) nízko-výškový padding-bottom tu (12px*K, vyššie) v kombinácii s TERAZ NEPREPÍSANÝM padding-top (60px*K, base) dáva INÚ (väčšiu) asymetriu než všeobecný dotykový blok vyššie v súbore (60px*K/28px*K) - vlastná korekčná hodnota TU preto NIE JE redundantná duplicita, ale nutná (rovnaký princíp, iné číslo, pozri komentár pri všeobecnom pravidle vyššie). */ .porovnanie-lightbox-prev, .porovnanie-lightbox-next { transform: translateY(calc((12px - 60px) / 2 * var(--ui-scale-kompenzacia, 1))); } /* Sekcia zadania "gap medzi chipom a rámcom" - .porovnanie-lightbox- heading a .porovnanie-lightbox-title (aj .porovnanie-lightbox-close nižšie) TU už NEPREPISUJÚ "top"/"font-size" (predtým 10px*K/0.86rem, 8px*K/0.7rem) - táto kompresia bola odladená pre STARÚ (auto, obsahom riadenú, teda pri nízkej výške kontajnera reálne NÍZKU) výšku karty, kde každý px hore šetril miesto pre obsah. Odkedy má karta VŽDY pevnú (VR/POI zjednotenú, výrazne vyššiu) výšku - Krok 1, predošlé zadanie - už to nie je potrebné a namiesto toho pôsobilo ako "MÔJ VÝBER:"/"POROVNANIE" chipy príliš blízko/prekrývajúce sa s horným okrajom karty. font-size padá na --porovnanie-label-font-size (base pravidlo), top padá na base hodnoty (20px*K heading, 16px*K title/ close) vyššie v súbore - žiadna z nich sa už TU neprepisuje. left/padding pri .porovnanie-lightbox-title a right pri .porovnanie- lightbox-close OSTÁVAJÚ (kompaktnejšia šírka/pozícia chipu pri nízkej výške - mimo rozsahu tejto úpravy, tá sa týka VÝHRADNE vertikálneho odstupu). */ .porovnanie-lightbox-title { left: calc(20px * var(--ui-scale-kompenzacia, 1)); padding: calc(4px * var(--ui-scale-kompenzacia, 1)) calc(8px * var(--ui-scale-kompenzacia, 1)); } /* top sa TU už NEPREPISUJE (predtým 6px*K) - rovnaký dôvod/rozsah ako vyššie, padá späť na base 16px*K. right OSTÁVA nedotknuté (mimo rozsahu, netýka sa vertikálneho odstupu). */ .porovnanie-lightbox-close { right: calc(6px * var(--ui-scale-kompenzacia, 1)); } .porovnanie-lightbox-track { gap: calc(8px * var(--ui-scale-kompenzacia, 1)); } /* Sekcia zadania "Oprava '7 rovnakých medzier' systému pre ĽUBOVOĽNÝ počet riadkov" - `justify-content:space-between` TU rozdeľuje CELÝ zvyšný vertikálny priestor karty medzi VŠETKÝCH svojich priamych flex-detí. Predtým to boli iba 3-4 (hlavička/rows-kontajner/[pôdorys, tu vždy display:none]/cena) - PRIAMYCH riadkov medzi hlavičkou a cenou sa to netýkalo (tie boli o úroveň hlbšie, vnútri samostatného `.porovnanie-frame-rows` flex kontajnera, teda MIMO tohto rozpočtu). `.porovnanie-frame-rows` dostáva TU `display:contents` (nižšie) - jej OWN box (aj jej `gap`) tak z layoutu ÚPLNE ZMIZNE, jej DETI (jednotlivé `.porovnanie-frame-row`) sa "vysunú" o úroveň vyššie a stanú sa PRIAMYMI flex-deťmi TOHTO kontajnera - `justify-content: space-between` tak TERAZ automaticky rozdeľuje priestor medzi hlavičku, KAŽDÝ jednotlivý riadok (ľubovoľný počet) AJ cenu naraz, BEZ akéhokoľvek prepočtu/hardcoded počtu - budúci projekt s iným počtom riadkov (menej aj viac) dostane rovnako presné rozdelenie automaticky. NAHRÁDZA predošlý mechanizmus (pevné `margin-bottom: 18.213px*K` na hlavičke aj rows-kontajneri, ručne dopočítané pre PRESNE 6 riadkov matematickou sústavou - fungovalo iba náhodou aj pri 7/8, pretože BALKÓN/LOGGIA sú medzi dátovými riadkami, nie na okrajoch rozpočtu, história výpočtu ostáva nižšie pri jednotlivých pravidlách kvôli kontextu, hodnoty samotné už appka nepoužíva). */ .porovnanie-frame { padding: calc(8px * var(--ui-scale-kompenzacia, 1)); justify-content: space-between; } .porovnanie-frame-remove { top: calc(7px * var(--ui-scale-kompenzacia, 1)); right: calc(7px * var(--ui-scale-kompenzacia, 1)); } /* Sekcia zadania "zjednotenie výšky hlavičkového riadku" - Krok 0 zmeralo hlavičku 3.93px reálne vyššiu než dátové riadky (14.13px vs. 10.2px, identicky na všetkých kartách) - PRÍČINA: padding-bottom (zavedené "Fix #1 - oddeľovacia čiara pod ID bytu", base pravidlo vyššie, 8px*K) NIKDY nedostalo zodpovedajúce zúženie TU, na rozdiel od VŠETKÝCH ostatných vlastností hlavičky na tomto riadku (font-size/ padding-right/margin-bottom) AJ od .porovnanie-frame-row nižšie (6px*K -> 2px*K TU). Neúmyselný vedľajší efekt (nie zámerný dôsledok - krížik na odstránenie je pozicovaný VLASTNÝMI top/right offsetmi, nezávisle od padding-bottom tohto elementu, funkčne túto hodnotu vôbec nepotrebuje). padding-bottom TU preto zúžené na ROVNAKÚ hodnotu, akú má .porovnanie-frame-row (2px*K) - hlavička aj dátové riadky tak zdieľajú IDENTICKÝ odstup pred svojou deliacou čiarou, čiara pod ID bytu (Fix #1) OSTÁVA, iba bližšie k textu. Sekcia zadania "zjednotenie vzdialenosti MEDZI čiarami" (nasledujúce zadanie, presnejšie ako vyššie) - Krok 0 TOHTO zadania zmeralo, že aj PO vyrovnaní vlastnej výšky hlavičky vyššie ostala medzera "ID bytu -> Podlažie" (13.2px reálne) VÝRAZNE menšia než medzery MEDZI dátovými riadkami (23.9px reálne, identicky medzi VŠETKÝMI piatimi). PRÍČINA: .porovnanie-frame-rows (nižšie) má flex:1 1 auto + justify-content:space-between (zadanie "oprava čierneho priestoru v karte") - zvyšný priestor karty rozdeľuje ROVNOMERNE MEDZI SVOJICH 6 VLASTNÝCH flex-detí (dátové riadky), ale hlavička JE MIMO tohto kontajnera (samostatný súrodenec PRED ním) - jej medzera k prvému riadku preto NIKDY nedostáva podiel z tohto rozdeleného priestoru, iba svoj vlastný (pevný, malý) margin-bottom. margin-bottom TU preto zväčšené (5px*K -> 20px*K) - DÔLEŽITÉ, toto NIE JE jednoduché "zmeraj rozdiel raz, priprič ho" - .porovnanie- frame-rows (flex:1 1 auto) SÚPERÍ o TEN ISTÝ (pevný) zvyšný priestor karty s týmto margin-bottom - zväčšenie margin-bottom o Δ zmenší zvyšný priestor pre rows-container o Δ, čo sa space-between rozdelí MEDZI JEHO 5 VNÚTORNÝCH medzier, teda KAŽDÁ z nich sa zmenší o Δ/5 (prvý pokus s 23px*K toto overil - medzera header-> Podlažie vyskočila na 23.99px, ale medzery MEDZI dátovými riadkami klesli z 23.9px na 21.73px). Správna hodnota preto rieši sústavu (13.2+Δ = 23.9-Δ/5), NIE priame dosadenie nameraného rozdielu - 20px*K je výsledok tohto výpočtu, overený priamym opätovným meraním (obe strany konvergujú na ~22.1px). Keďže frame má vždy PEVNÚ výšku a VŽDY PRESNE 6 riadkov (predošlé zadania), tento zvyšný priestor je KONŠTANTNÝ naprieč všetkými kombináciami bytov/počtami kariet, takže táto pevná hodnota zostáva presná univerzálne (nie je odvodená z konkrétneho obsahu tejto jednej testovanej kombinácie). */ /* font-size aj padding-right TU už nie sú prepísané - sekcia zadania "zjednotenie veľkosti písma ID bytu a ceny"/"centrovanie ID bytu" (@media (hover:none) and (pointer:coarse) vyššie) tu už nastavuje font-size (cez --porovnanie-frame-id-price-font-size, PREDEFINOVANÚ nižšie v tomto podrežime na 0.8rem) aj padding-right:0 univerzálne pre CELÝ touch rozsah (vrátane tohto nízko-výškového podrežimu) - vlastná (predtým nezávislá, 0.7rem/20px*K) hodnota TU by ich zbytočne duplikovala/rozchádzala. */ /* Sekcia zadania "Krok 0 - overenie rozporu medzi reportom a realitou" (nové zadanie, po predošlom "finálny prepočet rovnomerných medzier" nižšie v histórii tohto komentára) - priame opätovné meranie (getBoundingClientRect, reálne px, 800x360, byty A3.02/A3.01/A2.01, CDP/headless) VŠETKÝCH 7 medzier na stave PRED touto opravou odhalilo SKUTOČNÚ (nie iba domnelú) asymetriu, potvrdenú aj screenshotom: header->riadok1 9.464px, 5x medzi dátovými riadkami ~9.472px (takmer zhodné navzájom), ALE riadok6->cena 19.666px - VÝRAZNE (~2×) väčšia než zvyšných 6 medzier, nie "0 diffov" stav, ako predošlý zápis tohto komentára tvrdil (19.668px REÁLNE bolo v skutočnosti IBA touto jednou poslednou medzerou, nie spoločným G pre všetkých 7 - predošlý zápis si toto sám protirečil: odvodil G≈19.668px, ale header margin-bottom DOSADIL na 15.78px*K, čo reálne dáva iba 9.468px, teda POLOVICU G, nie G samotné - frame-rows margin-bottom 32.78px*K bolo dosadené správne, header margin-bottom nie). PRÍČINA (vtedy potvrdená, RIEŠENIE ODVTEDY NAHRADENÉ - pozri komentár vyššie pri `.porovnanie-frame` v tomto istom podrežime, sekcia zadania "Oprava '7 rovnakých medzier' systému pre ĽUBOVOĽNÝ počet riadkov"): .porovnanie-frame-rows (flex:1 1 auto + justify-content: space-between, všeobecné touch pravidlo vyššie v súbore, @media (hover:none) and (pointer:coarse) bez max-height gate) ROZDEĽOVALO PEVNÝ zvyšný priestor karty MEDZI svojich vnútorných medzier - margin-bottom hlavičky (medzera header->riadok1) aj margin-bottom rows-kontajnera (medzera posledný_riadok->cena) boli DVA SAMOSTATNÉ, RUČNE dopočítané "knoby" NEZÁVISLÉ od skutočného počtu riadkov - fungovalo to iba PRE PRESNE 6 riadkov (vtedajší jediný stav appky), lebo BALKÓN/LOGGIA (neskôr pridané podmienené riadky) menia počet VNÚTORNÝCH medzier, ale NIE tieto dva krajné knoby, ktoré by tak zostali rovnaké aj pri 7/8 riadkoch - ROZBIJÚC pôvodnú rovnosť (potvrdené priamym meraním v sekcii zadania "Oprava '7 rovnakých medzier'..." vyššie). NOVÉ riešenie (display:contents + justify- content:space-between na `.porovnanie-frame`, komentár vyššie) rieši TOTO architektonicky - žiadny "počet riadkov" sa už nikde nedosádza natvrdo, appka preto zostáva korektná pri ĽUBOVOĽNOM počte riadkov v tomto ALEBO budúcom projekte (CLAUDE.md sekcia 1, appka ako univerzálny template). Pôvodná hodnota (18.213px*K) zostáva zdokumentovaná IBA ako história výpočtu (dosadené z merania na 6 riadkoch, G = (5×priemer_riadkov + header_medzera + cena_medzera) / 7 ≈ 10.928px reálne) - appka ju už nikde nepoužíva. */ /* Base pravidlo (mimo tohto podrežimu) dáva hlavičke margin-bottom 10px*K - ZÚŽENÉ TU na 0. Krok 0 tohto zadania (priame meranie, getBoundingClientRect) odhalilo DÔLEŽITÝ detail box-modelu: `getBoundingClientRect().bottom` UŽ ZAHŔŇA vlastný border/padding elementu (tie sú VNÚTRI jeho box-u), ale NIE jeho margin (ten je MIMO box-u, teda MIMO merania `.bottom`) - riadkový floor (border- bottom + padding-bottom, `.porovnanie-frame-row` nižšie) je preto už "započítaný" v KAŽDOM riadku VLASTNom `.bottom`, zatiaľ čo AKÝKOĽVEK margin-bottom na hlavičke by sa PRIČÍTAL NAVYŠE k priestoru, ktorý `justify-content:space-between` medzi hlavičku a prvý riadok pridá (potvrdené meraním: margin-bottom:2px*K tu predtým spôsobovalo presne o `2px*K*scale` väčšiu prvú medzeru než ostatné, na Galaxy S20 K=1.8/scale=0.3333 presne nameraných +1.2px reálne). `margin-bottom:0` preto - ŽIADEN element v tomto reťazci (hlavička/riadky/cena) nemá vlastný margin prispievajúci NAVYŠE k medzere, `justify-content:space-between` tak rozdeľuje CELÝ zvyšný priestor VÝHRADNE seba samým, rovnako pre KAŽDÚ medzeru nezávisle od počtu riadkov - overené opätovným meraním po tejto oprave (6/7/8 riadkov, všetky medzery konvergujú presne, viď CLAUDE.md). */ .porovnanie-frame-header { margin-bottom: 0; } .porovnanie-frame-rows { /* `display:contents` - box aj VŠETKY jeho vlastné vizuálne/ layoutové vlastnosti (padding/border/background/gap, ak by boli) z layoutu ÚPLNE ZMIZNÚ, DETI (jednotlivé `.porovnanie-frame-row`) sa stanú PRIAMYMI flex-deťmi `.porovnanie-frame` - nutné pre mechanizmus vyššie (`justify-content:space-between` tam potom vidí KAŽDÝ riadok jednotlivo, nie tento kontajner ako JEDEN blok). Base `gap`/`margin-bottom` (mimo tohto podrežimu) sú tu preto zámerne NEPOUŽITÉ/irelevantné - element bez boxu nemá čo takéto vlastnosti aplikovať, žiadny konflikt/duplicita. */ display: contents; } /* Sekcia zadania "Oprava '7 rovnakých medzier' systému..." - riadkový border-bottom/padding-bottom (2px*K) OSTÁVA ako GARANTOVANÉ MINIMUM (rovnaký princíp ako existujúci komentár pri všeobecnom touch `.porovnanie-frame-rows` pravidle vyššie v súbore: "gap ostáva FLOOR minimálny odstup... space-between pridáva iba PREBYTOČNÝ priestor NAD týmto minimom") - `justify-content:space-between` na `.porovnanie-frame` PRIDÁVA rovnomerne rozdelený PREBYTOČNÝ priestor NAD túto hodnotu, riadky sa nikdy nezrazia bližšie než na tento floor, nezávisle od ich počtu. */ .porovnanie-frame-row { padding-bottom: calc(2px * var(--ui-scale-kompenzacia, 1)); } /* padding-top/border-top TU už nie sú prepísané - sekcia zadania "odstránenie čiary nad cenou" (@media (hover:none) and (pointer: coarse) vyššie, PRED týmto podrežimom v poradí súboru) ruší OBOJE univerzálne pre CELÝ touch rozsah - vlastná hodnota TU by nemala k čomu vytvárať odstup (čiara neexistuje) a bola by zbytočná duplicita. (História: medzitiket "Pridať oddeľovaciu čiaru nad cenou" túto čiaru na dotyku dočasne omylom zapol a TU pridal kompenzačný padding-top 2px*K, aby nerozbil "7 rovnakých medzier" nižšie - sekcia zadania "Oprava rozsahu z predošlého tiketu" oboje vrátila späť, keďže čiara na dotyku nikdy nemala byť.) */ /* Sekcia zadania "Zväčšiť font-size... labelov" - PREDTÝM 0.6rem (proti 0.68rem hodnoty, base rule vyššie ju netýka, tento podrežim má vlastný literál) - TERAZ 0.65rem, rovnaký princíp/podobný pomer ako base pravidlo vyššie (~1.05x voči hodnote namiesto ~1.13x). font-weight 500 sa sem dedí z base .porovnanie-frame-label (nie je tu potrebné prepisovať, tento blok mení iba font-size, rovnako ako pred touto zmenou). */ .porovnanie-frame-label { font-size: 0.65rem; } .porovnanie-frame-value { font-size: 0.68rem; } /* font-size je TU predefinovaný cez --porovnanie-frame-id-price-font-size (nižšie v tomto bloku, 0.8rem) namiesto vlastného literálu - .porovnanie- frame-header vyššie číta TÚ ISTÚ premennú, oba tak zdieľajú JEDNU hodnotu aj v tomto podrežime. */ :root { --porovnanie-frame-id-price-font-size: 0.8rem; } #porovnanie-pas { bottom: calc(6px * var(--ui-scale-kompenzacia, 1)); gap: calc(6px * var(--ui-scale-kompenzacia, 1)); padding: calc(6px * var(--ui-scale-kompenzacia, 1)) calc(12px * var(--ui-scale-kompenzacia, 1)); } .porovnanie-pas-track { gap: calc(6px * var(--ui-scale-kompenzacia, 1)); } /* .porovnanie-pas-viewport (base pravidlo, "3.5 karty" formula) počíta s medzerou VŠEOBECNÉHO touch pravidla (12px*K) - TU (nízko-výškový podrežim) je gap iba 6px*K (vyššie), viewport formula preto musí prepočítať S TOUTO menšou medzerou, inak by "3.5 karty" peek vyšiel o pár px nepresný (karta by sa neodkrajovala presne v polovici). */ .porovnanie-pas-viewport { width: calc(3.5 * 170px * var(--ui-scale-kompenzacia, 1) + 3 * 6px * var(--ui-scale-kompenzacia, 1)); } .porovnanie-pas-track .apartment-card { padding: calc(5px * var(--ui-scale-kompenzacia, 1)); } }