/* ===================================================================== * KNIHOVNA CVIKŮ NA PC – mřížka karet místo jednoho sloupce * * Na telefonu (375 px) je svislý seznam správně: palec scrolluje, jméno cviku * má celou šířku. Na monitoru ale stejný seznam nechává 2/3 plochy prázdné * a v 873 cvicích se scrolluje zbytečně dlouho. * * VŠECHNO je proto uvnitř @media (min-width: 820px) – mobilní vzhled se * tímto souborem nemění vůbec. * * Selektory se drží uvnitř #cvik-vypis (kontejner výpisu v knihovně). * .cvik-row se totiž používá i v overlayi „Přidat cviky“, který visí přímo * na – ten musí zůstat seznamem, protože panel je úzký. * ===================================================================== */ @media (min-width: 820px) { /* Karta výpisu se mění z „stohu řádků“ na mřížku dlaždic. * auto-fill + minmax(260px, 1fr): počet sloupců se dopočítá podle šířky * okna, takže to sedí i na úzkém notebooku i na širokém monitoru. */ #cvik-vypis > .cvik-mriz { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); padding-top: var(--sp-2); padding-bottom: var(--sp-2); } /* Řádek → dlaždice. Ruší se věci, které dávaly smysl jen ve svislém * seznamu: záporné okraje (aby linka šla na kraj karty) a dělicí linka. */ #cvik-vypis > .cvik-mriz > .cvik-row { margin: 0; padding: var(--sp-3); gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; transition: background .15s ease-out, border-color .15s ease-out; } /* přebíjí `.cvik-row:last-child { border-bottom: none }` ze screens.css – * v mřížce má poslední dlaždice mít rámeček jako všechny ostatní */ #cvik-vypis > .cvik-mriz > .cvik-row:last-child { border-bottom: 1px solid var(--line); } #cvik-vypis > .cvik-mriz > .cvik-row:hover { background: var(--card2); border-color: var(--border-strong, var(--line)); } #cvik-vypis > .cvik-mriz > .cvik-row:focus-visible { background: var(--card2); } /* Panáček nesmí v užší dlaždici uhnout ani se zdeformovat. */ #cvik-vypis > .cvik-mriz > .cvik-row > .cvik-mini { align-self: flex-start; } /* Název: max 2 řádky, zbytek „…“. Bez tohohle by dlouhé názvy * („Barbell Full Squat with Chains“) natáhly celý řádek mřížky. */ #cvik-vypis > .cvik-mriz .cvik-row-nazev { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.3; } /* Popisek „sval · náčiní“ se vejde na jeden řádek, jinak zkrátit. */ #cvik-vypis > .cvik-mriz .cvik-row-text > .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } /* Šipka „>“ v dlaždici jen ubírá místo textu – klikatelnost nese celá * dlaždice (hover + kurzor), takže se na PC skrývá. */ #cvik-vypis > .cvik-mriz .cvik-row-sip { display: none; } }