/* Table → card restack, below Bootstrap's `md` boundary.
*
* Ship 1 extracted this from `admin_scores.css`, which solved the same problem for one
* screen. Everything here lives inside a single `max-width: 767.98px` block, so desktop
* is untouched, and the breakpoint agrees with `theme.css`'s `.table-scroll-70` rule and
* the `d-md-*` utilities `manage_scores.html` uses.
*
* ---------------------------------------------------------------------------
* Which technique applies, and why this one is the default
* ---------------------------------------------------------------------------
* The repo has both. `manage_scores` renders a second card block behind
* `d-none d-md-block`; `enter_scores` restacks in CSS. The rule Ship 1 settled on is
* **CSS restack by default, duplication only with a stated reason**, and on My Play four
* separate things say so:
*
* * `schedule_list.js` reverts a failed availability toggle through
* `group.querySelector('[data-status="A"]')` — scoped to the clicked button's own
* `.btn-group`. A hidden twin keeps stale state across a resize.
* * `test_data_href_producers.py` asserts the tree holds at least 8 `data-href`
* attributes and it currently holds exactly 8. Converting rows to `` wrappers
* drops below the floor.
* * `test_dnone_cascade.py::test_the_templates_that_rely_on_this_are_the_ones_we_checked`
* asserts an *exact set* of templates using a `d-none d-{bp}-*` combo. A new
* duplicate block goes red there and owes a headless-Chromium measurement.
* * My Results can carry a full season; duplicating doubles the DOM on the longest
* page in the section.
*
* So there is exactly one set of controls on every screen below, and this file only
* changes how they are laid out. No JS needed changing for any of it.
*
* ---------------------------------------------------------------------------
* `attr(data-label)` is a new pattern here, deliberately
* ---------------------------------------------------------------------------
* `admin_scores.css` labels its cells with `:nth-child(n)::before { content: "Home"; }` —
* literal strings, one rule per column. That cannot generalise: a shared file does not
* know any table's columns. So the generic mechanics read the label off the markup with
* `content: attr(data-label)`, and each template says what its own cells are called.
*
* The property `admin_scores.css` was protecting is preserved: the label is still a
* pseudo-element on the `| `, not a node in the DOM, so nothing that walks rows or
* posts fields can see it. `data-label` is an attribute, not text content, so a sweep
* reading `textContent` is unaffected too.
*
* Per-screen sections below supply only `grid-template-areas`. Grid rather than flex is
* the whole point: cells are placed by *area*, so source order is untouched and no
* markup moves.
*/
@media (max-width: 767.98px) {
/* ------------------------------------------------------------- mechanics */
/* `.table-responsive` supplies `overflow-x: auto`, and `theme.css`'s below-md rule
deliberately drops only `max-height` — it cannot touch `overflow` globally, because
every table that is *not* yet restacked still needs the x-scroll to be usable. So
the wrapper of a restacked table opts out by name, exactly as `.enter-scores-wrap`
does. Without this the cards sit inside a scroll container that never scrolls. */
.table-cards-wrap {
max-height: none;
overflow: visible;
}
/* Child combinators throughout, so a nested table is never caught. */
.table-cards,
.table-cards > tbody,
.table-cards > tfoot,
.table-cards > tbody > tr,
.table-cards > tfoot > tr {
display: block;
width: auto;
}
/* `display: block` does not clear a `min-width`, and `schedule_list.html`'s table
carries `table-min-640`. Without this the cards render inside a 640px box on a
390px screen — the restack would be inert and the page would still scroll
sideways. The class stays on the element because desktop still wants it. */
.table-cards {
min-width: 0;
}
/* The column headings are replaced by the per-cell labels below. */
.table-cards > thead {
display: none;
}
/* Card chrome lives on the row; the cells reset to plain blocks. */
.table-cards > tbody > tr {
padding: .75rem .85rem;
border-bottom: 1px solid var(--glass-hairline, rgba(0, 0, 0, .06));
}
.table-cards > tbody > tr:last-child {
border-bottom: 0;
}
.table-cards > tbody > tr > td,
.table-cards > tfoot > tr > th,
.table-cards > tfoot > tr > td {
display: block;
width: auto;
padding: 0;
border: 0;
box-shadow: none;
/* !important because Bootstrap's .text-end / .text-center are !important, and a
right-aligned cell in a card reads as a stray column. */
text-align: left !important;
}
/* The label. `display: block` puts it on its own line above the value; a cell that
wants an inline label overrides that in its own section. */
.table-cards td[data-label]::before {
content: attr(data-label);
display: block;
margin-bottom: .1rem;
font-size: .65rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--iil-text-mute, #706c7a);
}
/* An empty-state row is one full-width cell spanning the whole table. It is not a
card and it has no column, so it gets neither chrome nor a label. */
/* An empty-state row is one cell spanning the whole table. `grid-column: 1 / -1` makes
that true in every per-screen grid below without any of them naming an area for it,
and works unchanged on the rows that stay `display: block`. */
.table-cards > tbody > tr > td[colspan] {
grid-column: 1 / -1;
text-align: center !important;
}
.table-cards > tbody > tr > td[colspan]::before {
content: none;
}
/* Button groups go full-width so `btn-sm` clears a 44px touch target without any
button being restyled. */
.table-cards .btn-group {
display: flex;
width: 100%;
}
.table-cards .btn-group > .btn {
flex: 1;
}
/* ------------------------------------------------------ My Schedule (C1) */
/* Opponent leads, date beneath, then the two control groups. The `col-*` classes were
already in the markup as dead names on the ` | `s — nothing in the tree read them —
so they move to the ` | `s and become the grid hooks. Named classes rather than
`nth-child` so a column reorder cannot silently repoint a cell.
Compound `.table-cards.schedule-cards` so this wins over the generic block's
`display: block` regardless of source order. */
.table-cards.schedule-cards > tbody > tr {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"match result"
"date date"
"avail avail"
"sub sub";
gap: .35rem .5rem;
}
.table-cards.schedule-cards > tbody > tr > td.col-opponent { grid-area: match; font-weight: 600; }
.table-cards.schedule-cards > tbody > tr > td.col-results { grid-area: result; justify-self: end; }
.table-cards.schedule-cards > tbody > tr > td.col-date { grid-area: date; }
.table-cards.schedule-cards > tbody > tr > td.col-available { grid-area: avail; }
.table-cards.schedule-cards > tbody > tr > td.col-subavail { grid-area: sub; }
/* -------------------------------------------------------- My Results (C2) */
.table-cards.results-cards > tbody > tr {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
grid-template-areas:
"opp opp opp pts"
"date date date pts"
"ha slot mate pts"
"res res res res";
gap: .35rem .5rem;
}
.table-cards.results-cards > tbody > tr > td.col-opponent { grid-area: opp; font-weight: 600; }
.table-cards.results-cards > tbody > tr > td.col-date { grid-area: date; }
.table-cards.results-cards > tbody > tr > td.col-ha { grid-area: ha; }
.table-cards.results-cards > tbody > tr > td.col-slot { grid-area: slot; }
.table-cards.results-cards > tbody > tr > td.col-mate { grid-area: mate; }
.table-cards.results-cards > tbody > tr > td.col-result { grid-area: res; }
.table-cards.results-cards > tbody > tr > td.col-points { grid-area: pts; justify-self: end; font-size: 1.15rem; font-weight: 600; }
/* The season total. ` | Season total | ` plus a value — a six-column
span means nothing once the rows are cards, so the row becomes a flex line and the
span collapses to its text. Same shape `admin_scores.css` uses for the Match total. */
.table-cards.results-cards > tfoot > tr {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: .75rem;
padding: .75rem .85rem;
}
.table-cards.results-cards > tfoot > tr > th:empty {
display: none;
}
/* ----------------------------------------------------------- My Subs (C3) */
/* Both tables converge on the shape the Pending list already had — the best-designed
thing in My Play — rather than the reverse. */
.table-cards.subs-cards > tbody > tr {
display: grid;
grid-template-columns: 1fr auto;
gap: .35rem .5rem;
}
.table-cards.subs-cards > tbody > tr > td.col-fixture { grid-area: fixture; font-weight: 600; }
.table-cards.subs-cards > tbody > tr > td.col-date { grid-area: date; }
.table-cards.subs-cards > tbody > tr > td.col-slot { grid-area: slot; }
.table-cards.subs-cards > tbody > tr > td.col-subfor { grid-area: subfor; }
.table-cards.subs-upcoming > tbody > tr {
grid-template-areas:
"fixture fixture"
"date date"
"slot subfor"
"actions actions";
}
/* The Cancel form keeps its `data-confirm`; only the cell it sits in moves. */
.table-cards.subs-upcoming > tbody > tr > td.col-actions { grid-area: actions; }
.table-cards.subs-upcoming > tbody > tr > td.col-actions .btn { width: 100%; }
.table-cards.subs-history > tbody > tr {
grid-template-areas:
"fixture status"
"date date"
"slot subfor";
}
.table-cards.subs-history > tbody > tr > td.col-status { grid-area: status; justify-self: end; }
/* ------------------------------------------------------------ My Team (C4) */
/* First and Last are a desktop affordance; on a card the name reads as one thing, so
the two cells sit adjacent on one row with the rating pushed to the end. Email and
Mobile are frequently "—" — every teammate who has not opted in renders both that
way — so they are labelled rows rather than a contact block that looks broken when
empty. */
.table-cards.team-cards > tbody > tr {
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-areas:
"first last ntrp"
"email email email"
"mobile mobile mobile";
gap: .35rem .4rem;
}
.table-cards.team-cards > tbody > tr > td.col-first { grid-area: first; font-weight: 600; }
.table-cards.team-cards > tbody > tr > td.col-last { grid-area: last; font-weight: 600; }
.table-cards.team-cards > tbody > tr > td.col-ntrp { grid-area: ntrp; justify-self: end; }
.table-cards.team-cards > tbody > tr > td.col-email { grid-area: email; }
.table-cards.team-cards > tbody > tr > td.col-mobile { grid-area: mobile; }
/* --------------------------------------------------- Captain sub market (S2) */
/* Player leads with the team beside it, and the status gets the full width because
it is not one thing: it renders five ways (Confirmed plus a lineup slot or a plan
team and a Cancel form, Requested plus a Cancel form, busy, "Subbing for X", and
Yes plus a Plan button). One full-width area holds all five without any of them
needing a rule of its own.
The generic block's `text-align: left !important` is what neutralises the cell's
`text-center` here — a centred cell in a card reads as a stray column.
`table-min-640` stays on the element for desktop; `.table-cards { min-width: 0 }`
above is what stops it boxing the cards at 640px on a 390px screen. */
.table-cards.submarket-cards > tbody > tr {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"player team"
"status status";
gap: .35rem .5rem;
}
.table-cards.submarket-cards > tbody > tr > td.col-player { grid-area: player; font-weight: 600; }
.table-cards.submarket-cards > tbody > tr > td.col-team { grid-area: team; justify-self: end; }
.table-cards.submarket-cards > tbody > tr > td.col-status { grid-area: status; }
/* The Cancel forms keep their `data-confirm`; only the cell they sit in moves. */
.table-cards.submarket-cards > tbody > tr > td.col-status form { display: inline; }
/* ------------------------------------------- Captain Manage Team (S3, S4) */
/* Two tables, one base and two variants — the shape `subs-cards` uses. They are the
same table apart from their fourth column (Remove vs Left), so the base carries the
grid and the three shared cells and each variant supplies only its own areas.
The departed table's wrapper is a bare `.table-responsive` with no `table-scroll-70`
and no `table-min-*`, unlike the roster table's — derived from the template, not
assumed to mirror it. `table-cards-wrap` is still what clears its `overflow-x`. */
.table-cards.roster-cards > tbody > tr {
display: grid;
grid-template-columns: 1fr auto;
gap: .35rem .5rem;
}
.table-cards.roster-cards > tbody > tr > td.col-name { grid-area: name; font-weight: 600; }
.table-cards.roster-cards > tbody > tr > td.col-ntrp { grid-area: ntrp; justify-self: end; }
.table-cards.roster-cards > tbody > tr > td.col-email { grid-area: email; }
/* Name carries a Pending Invite badge in some states, so it takes the whole first
line rather than sharing it with the rating. */
.table-cards.roster-active > tbody > tr {
grid-template-areas:
"name ntrp"
"email email"
"actions actions";
}
/* Full width, so `btn-sm` clears a 44px touch target without the button being
restyled. `data-player-id` / `data-player-name` are untouched — captain_manage_roster.js
reads them off the clicked button via Bootstrap's `relatedTarget`, never by position.
The cell holds two controls now — Resend Invite / Reset PW beside Remove — so the
row can no longer be "the button, full width". `.roster-actions` is
`d-inline-flex` in the markup and forced to `flex` here for the same reason
`schedule-admin-cards` does it: `d-inline-flex` shrink-wraps, which puts two
sub-full-width buttons on a line that has room for two proper touch targets.
`flex: 1 1 0` on the children splits the row evenly, and each child is a `