/* ============================================================================================ UPRAVITELNÁ HODNOTA (`uh-*`) — podoba „v klidu text, po kliknutí pole". PROČ GLOBÁLNÍ LIST A NE SCOPED CSS: komponenta se vykresluje UVNITŘ CIZÍCH komponent (karta položky, souhrnný pruh, buňka tabulky) a scoped pravidla na ně nedosáhnou — Blazor jim přilepí značku scope a dá ji jen prvkům z toho jednoho souboru. Přesně takhle vylezl anglický souborový vstup na kartě majetku (14. 8. 2026) a přesně proto má vlastní globální list i dialog (ADR-0092). Kdo pravidla opíše jinam, má dvě kopie, které se do měsíce rozejdou. Hlídá `PodobaUpravitelneHodnotyTests`. Slovník tříd: .uh obal (drží stav: .je-uprava, .je-dotaz, .je-jen-cteni) .uh-spust klidový stav s právem zápisu — vypadá jako text, pod kurzorem jako pole .uh-ctenim klidový stav BEZ práva — čistý text, žádná pobídka .uh-odznak barevná značka údaje (pilulka stavu, čtvereček epiky, fotka) vlevo od textu .uh-tuzka značka „tohle jde upravit"; ukáže se pod kurzorem a při zaměření .uh-editor obal otevřeného pole .uh-vstup vlastní pole (třída se předává i do CisloPole / DatumPole) .uh-zrus křížek „nechat beze změny" u nedokončeného doptání .uh-mrizka nepovinný obal seznamu údajů — najetím na NĚJ se odkryjí tečkované linky ============================================================================================ */ .uh { position: relative; display: inline-flex; align-items: flex-start; max-width: 100%; min-width: 0; } /* --- klidový stav ------------------------------------------------------------------------ */ /* Vypadá jako hodnota, ne jako pole. Záporný okraj vyrovná vnitřní odsazení, takže se text v klidu NEPOSUNE oproti okolním řádkům — jinak by se sloupec údajů viditelně roztřásl. */ /* POZOR NA `max-width: 100%` TADY. Šířku tlačítka určuje jeho obsah (`inline-flex` uvnitř obalu, jehož šířku určuje zase obsah), takže se procento vyhodnotí proti ještě neznámému základu — a Chrome pak uřízne text PŘESNĚ o šířku tužky: „178 400 000 Kč" se vykreslilo jako „178 400 0…" a pomlčka u prázdné hodnoty zmizela docela (1 px místo 24). Změřeno na běžící stránce 17. 8. 2026; z CSS to vidět nebylo, ellipsis vypadaly jako dlouhá hodnota. Strop drží OBAL `.uh` (ten má definovanou šířku od rodiče) a tlačítko se v něm smrskne samo, protože je jeho flex-item. */ .uh-spust { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; margin: -2px -6px; padding: 2px 6px; border: 1px solid transparent; border-radius: 4px; background: none; color: inherit; font: inherit; font-variant-numeric: inherit; text-align: left; /* PROSTRKÁNÍ SE DĚDÍ ZE MÍSTA, KAM JE PRVEK VLOŽENÝ (20. 8. 2026). `font: inherit` ho nepokrývá a UA stylopis prohlížeče nastavuje tlačítkům i polím `letter-spacing: normal` — takže nadpis s vlastním prostrkáním (název tiketu má −0,015em) ho po převedení na upravitelnou hodnotu ZTRATIL: kliknutím se text nepatrně roztáhl. Naměřeno v prohlížeči (h2 −0,36 px × `.uh-text` normal); ze zdroje to vidět není. */ letter-spacing: inherit; word-spacing: inherit; /* Kurzor říká „tady se píše", ne „tady se kliká" — a musí přebít `.mck button { cursor: pointer }`. */ cursor: text; transition: background-color 120ms ease, border-color 120ms ease; } .uh-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* MUSÍ BÝT POZNAT, ŽE SE DO TOHO DÁ PSÁT — skrytá funkce je totéž co žádná (nález z tabulky majetku, 11. 8. 2026). Značka je ale jemná: karta nemá vypadat jako mřížka polí. */ .uh-spust:hover { background: var(--barva-povrch); border-color: var(--barva-linka); } .uh-spust:focus-visible { outline: 2px solid var(--barva-text); outline-offset: -1px; } /* ODZNAK VLEVO OD HODNOTY. Leží uvnitř klikací plochy, aby najetí na odznak otevřelo úpravu stejně jako najetí na hodnotu — v návrhu je pilulka stavu součástí téhož tlačítka (`.fv2`). Kde odznak je, se řádek zarovnává NA STŘED, ne na účaří: pilulka a fotka mají vlastní výšku a na účaří by text vedle nich visel. Zbytek prvků (a všechna dosavadní místa) zůstává na `baseline`, aby se sloupec údajů nezačal třást. */ .uh-odznak { flex: none; display: inline-flex; align-items: center; } .uh-spust:has(.uh-odznak), .uh:has(.uh-odznak) { align-items: center; } /* Tužku kreslí sdílená `IkonaTuzka` (28. 8. 2026) — do té doby tu byl znak `✎`, který na detailu tiketu stál vedle vektorové tužky u popisu a byl to jiný obrázek. `font-size` velikost ikony ŘÍDÍ (ikona je 1em): z 11 px na 13, protože kreslená tužka je při 11 px o poznání drobnější než byl znak — ten měl v písmu vlastní vnitřní odsazení. */ .uh-tuzka { flex: none; display: inline-flex; align-items: center; font-size: 13px; line-height: 1; color: var(--barva-text-tlumeny); opacity: 0; transition: opacity 120ms ease; } .uh-spust:hover .uh-tuzka, .uh-spust:focus-visible .uh-tuzka { opacity: 1; } /* DLOUHÁ HODNOTA SE ZALAMUJE A DRŽÍ ŘÁDKY (ALF-16, 24. 8. 2026). `white-space: pre-wrap`, protože text se ukládá jako prostý text s konci řádků — bez toho by z odstavců byla jedna věta. Klikací plocha jde přes celou šířku, aby se dalo kliknout i vedle poslední řádky. */ .uh:has(.uh-text-dlouhy) .uh-spust, .uh:has(.uh-text-dlouhy) { display: flex; width: 100%; } .uh-spust:has(.uh-text-dlouhy) { align-items: flex-start; } .uh-text-dlouhy { white-space: pre-wrap; overflow: visible; text-overflow: clip; text-wrap: pretty; } .uh-spust:has(.uh-text-dlouhy) .uh-tuzka { margin-left: auto; margin-top: .3em; } /* Prázdno nese pomlčku (kreslí ji komponenta) a je tlumené — ať se nečte jako hodnota. */ .uh-spust.je-prazdna .uh-text, .uh-ctenim.je-prazdna { color: var(--barva-text-tlumeny); } /* BEZ PRÁVA ZÁPISU: čistý text. Žádná tužka, žádný rámeček, žádný jiný kurzor — nabízet akci, která skončí odmítnutím, je horší než ji nenabídnout. */ /* Bez `max-width: 100%` z téhož důvodu jako u `.uh-spust` — strop drží obal `.uh`. */ .uh-ctenim { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Najetím na CELÝ SEZNAM ÚDAJŮ se odkryje, co je živé — bez toho by se muselo hledat myší políčko po políčku. Tečkovaná linka je zavedená značka „tenhle údaj se dá přepsat" (týž vzor jako `.bunka-spust` v tabulce). */ .uh-mrizka:hover .uh-spust { border-bottom-color: var(--barva-linka); border-bottom-style: dotted; } .uh-mrizka:hover .uh-spust:hover { border-bottom-style: solid; } /* --- otevřená úprava ---------------------------------------------------------------------- */ .uh-editor { display: inline-flex; align-items: flex-start; gap: 4px; min-width: 0; max-width: 100%; } .uh-vstup { min-width: 0; width: 100%; padding: 1px 6px; border: 1px solid var(--c-zelena-tmava); border-radius: 4px; background: var(--barva-pozadi); color: var(--barva-text); font: inherit; font-variant-numeric: inherit; /* Týž důvod jako u `.uh-spust`: UA stylopis polím prostrkání ruší, takže by se text při otevření úpravy proti klidovému stavu posunul. */ letter-spacing: inherit; word-spacing: inherit; } .uh-vstup:focus { outline: none; } .uh-vstup-dlouhy { min-width: 240px; line-height: 1.45; resize: vertical; } .uh-vstup-cislo, .uh-vstup-datum { min-width: 120px; } .uh-vstup-vyber { padding: 1px 4px; } .uh-zaskrtnuti { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: inherit; cursor: pointer; } .uh-zaskrtnuti input { accent-color: var(--c-zelena-tmava); margin: 0; } /* --- nedokončený rozhovor (doptání / výtka) ------------------------------------------------ */ /* `.zpole` (obal CisloPole a DatumPole) je SVISLÝ flex, takže otázka i výtka rostou POD pole a místo si vezmou samy. Dvě podmínky, aby se to povedlo: 1) `flex: 1` uvnitř svislého rodiče by pole natáhlo do VÝŠKY (ADR-0063 §8) — srážíme ho, 2) hostitel musí přetečení dovolit; buňka tabulky ořezává (`.tabulka td`), takže se u ní váže výjimka na `.je-editovana` — viz tabulka.css. */ .uh .zpole { flex: none; min-width: 0; } .uh.je-uprava { overflow: visible; } /* Buňka husté tabulky obsah OŘEZÁVÁ (`.tabulka td`, jinak by se sloupce slévaly), takže by se otázka „uřízla do škvíry". Ořez ustoupí jen na dobu otevřené úpravy a váže se na STAV ÚPRAVY, ne na rozbalený řádek — to je jiný stav (viz tabulka.css, `.je-editovana`). */ .tabulka td:has(.uh.je-uprava) { overflow: visible; } /* Otázka potřebuje víc místa než jeden řádek. Nezvedáme řádek natrvalo — jen po dobu, kdy otázka opravdu visí, aby se seznam údajů nerozskákal při každém kliknutí. */ .uh.je-dotaz .uh-editor { min-width: 260px; } .uh-zrus { flex: none; border: 0; background: none; color: var(--barva-text-tlumeny); font: inherit; font-size: 15px; line-height: 1; padding: 2px 5px; border-radius: 4px; cursor: pointer; } .uh-zrus:hover { background: var(--barva-povrch); color: var(--barva-text); } .uh-zrus:focus-visible { outline: 2px solid var(--barva-text); outline-offset: -1px; } /* ── V NADPISU (ALF-14: název tiketu) ───────────────────────────────────────────────────── Prvek dědí řez místa, kam ho někdo vloží — jinak by se z nadpisu po kliknutí stalo drobné pole velikosti řádku tabulky. Pravidlo patří SEM, ne do scoped listu té obrazovky: podoba upravitelné hodnoty žije na jednom místě (jinak dvě kopie, které se do měsíce rozejdou). */ .uh-v-nadpisu :is(.uh-spust, .uh-text, .uh-vstup) { font-size: inherit; font-weight: inherit; font-family: inherit; line-height: inherit; } /* PŘES CELOU ŠÍŘKU, TUŽKA U PRAVÉ HRANY (24. 8. 2026, vytkl Pavel na ALF-4: „editace názvu neodpovídá designu"). Do té doby se klikací plocha KRČILA K TEXTU — změřeno 285 px z 1147 možných. Návrh (`.tedit`) má šířku 100 %, tužku odtlačenou `margin-left: auto` a rámeček se ukáže po celé šířce sloupce. Rozdíl není jen vzhledový: u nadpisu je plocha to, co se hledá myší, a 285px terč vedle metrového prázdna vypadá jako že název upravit nejde. A NÁZEV SE ZALAMUJE, neořezává. Zbytek prvku má `nowrap` + „…", což je správné v řádku tabulky, ale u nadpisu by to schovalo přesně to, co si člověk přišel přečíst (návrh `.dt` má `text-wrap: pretty`). */ .uh-v-nadpisu .uh, .uh-v-nadpisu .uh-editor { display: flex; width: 100%; } .uh-v-nadpisu .uh-spust { width: 100%; margin: 5px 0 0; padding: 2px 8px 3px; border-radius: var(--radius-sm, 8px); align-items: flex-start; } /* Návrh mění pod kurzorem JEN rámeček (`.tedit:hover{border-color}`) — pozadí přes celou šířku nadpisu by z něj udělalo pruh. */ .uh-v-nadpisu .uh-spust:hover { background: transparent; } .uh-v-nadpisu .uh-text { white-space: normal; text-overflow: clip; text-wrap: pretty; } .uh-v-nadpisu .uh-tuzka { margin-left: auto; margin-top: .4em; } /* Pole v úpravě (návrh `.tin`): celá šířka, BÍLÉ pozadí a zelený rámeček ze značky. Krémové pozadí zbytku appky se u nadpisu ztrácí v ploše karty. */ .uh-v-nadpisu .uh-vstup { width: 100%; margin: 5px 0 0; padding: 2px 8px 3px; border-radius: var(--radius-sm, 8px); border-color: var(--green-500); background: var(--white); } /* ── V PANELU ÚDAJŮ (Podrobnosti u tiketu; návrh `.fv2` + `.mpick`) ─────────────────────── Druhá polovina téže vytky Pavla: „editace v Podrobnosti neodpovídá designu". Dvě věci: 1) KLIDOVÝ STAV nesahal na celou šířku sloupce hodnot (změřeno 105 px z 236), takže se rámeček pod kurzorem objevoval jen kolem textu a řádky panelu „poskakovaly". 2) VOLIČ BYL NATIVNÍ PRVEK VE VÝCHOZÍ PODOBĚ — 23 px vysoký `