The column the episode picked and the grid share took the width of the picked episode's title and description, set on one line: 1,300 to 2,300 pixels in a 966-pixel area, so the grid of episodes changed its columns with every pick and ran off the screen. It now keeps to its area, as Recordings' library does. The episode picked also takes the same room whichever it is: room for two lines of title (a longer one ends in "..."), three of description, the actions and the hint, the words at the bottom by the actions. Its picture is its column's width rather than the height of the words, which made it grow past its column. On a phone the actions stay in one row, scrolling sideways, as the guide's do.
- commit
- eb0d5925c0b71bad3e7a6aa5b196779b408ba286
- parent
- 7c7538696d7df66799a95ff8c3c2fe3ab17da0e8
- author
- FelineStateMachine <226808055+FelineStateMachine@users.noreply.github.com>
- kind
- fix risk score 1.5 of 3, Jev's estimate
| M | frontend/ | 25 | ++++++++++++++++++++----- |
@@ -544,8 +544,8 @@ body:not(.mode-guide) .g-cell.rec-on::after { animation: none; } /* hidden, so s
544544 .r-panel { display: none ; min-height: 0; }545545 .r-panel.on { display: grid ; }546546 .r-lib.on { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); gap: 24px; }547-.r-detail { display: grid; grid-template-columns: minmax(0, 1fr) min(34%, 420px); gap: 30px; min-height: var(--pip-h); align-items: end; }548-.r-detail .rd-title { font: 800 clamp(34px, calc(4 * var(--vw)), 54px)/.95 var(--f-display); margin: 6px 0 6px; }547+.r-detail { --rd-title: clamp(34px, calc(4 * var(--vw)), 54px); display: grid; grid-template-columns: minmax(0, 1fr) min(34%, 420px); gap: 30px; min-height: var(--pip-h); align-items: end; }548+.r-detail .rd-title { font: 800 var(--rd-title)/.95 var(--f-display); margin: 6px 0 6px; }549549 .r-detail .rd-kicker { font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }550550 .r-detail .rd-ep { font-style: italic; min-height: 1.4em; }551551 .r-detail .rd-desc { margin: 10px 0 0; color: var(--muted); max-width: 70ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }@@ -596,7 +596,16 @@ body:not(.mode-guide) .g-cell.rec-on::after { animation: none; } /* hidden, so s
596596 597597 /* ---------- Podcasts ---------- */598598 /* Recordings' library, for episodes: the one picked above a grid. */599-.p-main { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 24px; min-height: 0; }599+.p-main { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; }600+/* The episode picked takes the same room whichever it is, so the grid601+ under it stays put: room for the kicker (16px), two lines of title and602+ its margins (12px), three lines of description and its margin (10px),603+ and the actions (32px) and the hint (15px) with theirs (24px). The words604+ sit at the bottom, by the actions; the picture is its column's width. */605+#podcasts .r-detail { height: calc(16px + 1.9 * var(--rd-title) + 12px + 4.2em + 10px + 32px + 15px + 24px); }606+#podcasts .rd-kicker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }607+#podcasts .rd-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }608+#podcasts .rd-art { align-self: end; width: 100%; }600609 .p-menu { overflow: auto; min-height: 0; scrollbar-width: none; }601610 /* Refresh, under the lists: every show listed again now. */602611 .p-refresh { display: grid; gap: 8px; padding: 0 14px; }@@ -786,9 +795,15 @@ body.pf-touch .s-main { grid-template-rows: minmax(0, 1fr); }
786795 body.pf-touch .view.railed { padding-top: 64px; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }787796 body.pf-touch .rm-item .rm-label { font-size: 19px; }788797 body.pf-touch .p-menu .rm-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }789- body.pf-touch .r-detail { min-height: 0; grid-template-columns: minmax(0, 1fr) min(30%, 300px); gap: 20px; }790- body.pf-touch .r-detail .rd-title { font-size: 30px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }798+ body.pf-touch .r-detail { --rd-title: 30px; min-height: 0; grid-template-columns: minmax(0, 1fr) min(30%, 300px); gap: 20px; }799+ body.pf-touch .r-detail .rd-title { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }791800 body.pf-touch .r-detail .rd-desc { -webkit-line-clamp: 2; }801+ /* Two lines of description, no hint, and actions a finger can hit, in802+ one row that scrolls sideways, as the guide's do. */803+ body.pf-touch #podcasts .r-detail { height: calc(16px + 1.9 * var(--rd-title) + 12px + 2.8em + 10px + 44px + 12px); }804+ body.pf-touch #podcasts .rd-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: 8px -4px -4px; }805+ body.pf-touch #podcasts .rd-actions::-webkit-scrollbar { display: none; }806+ body.pf-touch #podcasts .rd-actions > * { flex-shrink: 0; }792807 body.pf-touch .p-main, body.pf-touch .r-lib.on { gap: 14px; }793808 body.pf-touch #banner { padding: 16px 20px 14px; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 20px; }794809 body.pf-touch .bn-num { font-size: 64px; }