/* * The application shell — sidebar, top bar, content — shared by the Portal and the back office. * * Lives here, next to AppShell.razor, rather than in either app's tailwind.css: the shell is one * component now, and a stylesheet copied into two apps is what let the two of them drift in the * first place. Everything below is written against the design tokens each app defines on :root, so * it inherits both palettes and the dark theme without knowing either exists. * * The breakpoint is 48rem, the same 768px Tailwind's `md:` uses everywhere else in this codebase. * Below it the sidebar is an off-canvas drawer; at and above it, a static column. wwwroot/js/ * nav-drawer.js owns the open/closed state and writes it as `data-nav-open` on . */ .app-shell { /* 1280 is a reading width. It is right for a form, a bulletin or a settings page, and wrong for a mark sheet: on a 2100px screen a third of the glass was margin while the gradebook's last four columns were off the right. Every school-information system this was checked against — PowerSchool, Infinite Campus, Skyward, Arbor, Bromcom — runs grid screens near full width and keeps the narrow measure for prose. So the shell gets the glass and prose keeps its own max-w-* , which every such page already carries. Beyond this it is the table that scrolls (.tbl-scroll) and never the page. */ max-width: 1600px; margin-inline: auto; min-height: 100vh; min-height: 100dvh; } .app-shell-main { /* Grid children default to min-width:auto, which lets a wide table push the whole column past the viewport instead of scrolling inside itself. */ min-width: 0; } .app-sidebar { background: var(--surface); border-inline-end: 1px solid var(--line); padding: 18px 12px; overflow-y: auto; overscroll-behavior: contain; } .app-content { padding: 24px 26px 60px; } /* Anything the host wants between the top bar and the content — the back office's review bell. */ .app-banner { padding: 12px 26px 0; } /* Everything that only exists to work a drawer is off by default, and switched on below by the phone media query *and* the `data-nav-drawer` flag nav-drawer.js writes on when it loads. That is the whole no-JS story: without the script there is no burger, no close button and no scrim, and the sidebar stays the plain block it always was — poor on a phone but navigable, which a collapsed menu with no way to open it is not. The close control is in the markup at every width rather than rendered conditionally, because a button that leaves the DOM cannot hold focus across a resize. */ .app-nav-close-row, .nav-toggle, .app-scrim { display: none; } .app-nav-close-row { justify-content: flex-end; margin-bottom: 2px; } .app-nav-close { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink-soft); font-size: 15px; line-height: 1; cursor: pointer; } .app-nav-close:hover { background: var(--surface-2); color: var(--ink); } /* The hamburger. Rendered by TopBar so it sits at the head of the app bar, where a phone user's thumb and every other application on their device agree it should be. */ .nav-toggle { width: 36px; height: 36px; flex: none; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; } .nav-toggle:hover { background: var(--surface-2); } .nav-toggle:focus-visible, .app-nav-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ----------------------------------------------------------------- wide tables -------------- */ /* A .tbl is width:100% with nowrap headers, so on a phone it is wider than the screen and the only thing that can absorb the overflow is the document — a swipe on the fees ledger slid the whole page sideways, header and drawer with it. .app-shell-main already sets min-width:0 so the column does not grow; this gives the table somewhere of its own to scroll. Wrap any .tbl that can carry more than two or three columns. On a wide viewport nothing overflows and the rule is inert. */ /* ── The plan pickers (feature 0149) ─────────────────────────────────────────────────────────── Two scrolling checkbox lists side by side: classes left, subjects right. A fixed height rather than a growing one, because a school with forty classes would otherwise push Apply off the screen — which is the defect this feature exists to fix, reintroduced by the fix. */ .plan-picker { border: 1px solid var(--field-line); border-radius: var(--r-sm); padding: 8px; margin: 0; max-height: 14rem; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); } .plan-pick { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: var(--r-sm); font-size: 13px; cursor: pointer; } .plan-pick:hover { background: var(--surface); } /* A subject that cannot carry a plan for any chosen class. Dimmed and not-allowed, with the reason in the checkbox's accessible name — the same rule .btn:disabled learned in 157c: a control that refuses must look like it does, and must be able to say why. */ .plan-pick.is-blocked { opacity: .55; cursor: not-allowed; } .plan-pick.is-blocked input { cursor: not-allowed; } /* ── end plan pickers ──────────────────────────────────────────────────────────────────────── */ /* ── The table (feature 0158, 158b) ──────────────────────────────────────────────────────────── One definition, here, because both planes render the same tables through the same components. It lived in Portal/Styles/tailwind.css and again in Manage/Styles/tailwind.css, and the copies had already drifted — the back office had `white-space: nowrap` on its headers and no `overflow-wrap: break-word` on its cells, so it carried neither of the two fixes the comments below exist to explain. The Portal's is kept, being the one that had learned something. */ .tbl { border-collapse: collapse; width: 100%; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); } /* Wrapping, not `nowrap`. The gradebook puts a whole competency statement in a header cell ("Ability to use English to buy and sell basic necessities"), and `nowrap` made each of those columns as wide as its sentence — which pushed TOTAL, GRADE, RANK and COMMENT off the right of a 2100px screen. Headers elsewhere are one or two words and wrap identically either way. `middle`, not `bottom` (0136 D2a). A header row is as tall as its tallest label, and on the gradebook that is a competency statement three or four lines deep; `bottom` then dropped STUDENT, USI, TOTAL /20, GRADE, RANK and COMMENT to the floor of a tall cell, floating away from the column each one names. Not a gradebook rule — every table in the application has a header row, and this is the only one of them that was ever set deliberately. */ .tbl thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 750; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } /* An email address is one unbreakable token. Without this the staff directory's minimum width is the longest address in the school, and no amount of wrapping elsewhere helps. `break-word` rather than `anywhere`: it breaks a word only when the word alone would overflow, so ordinary names still break at spaces. */ .tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; overflow-wrap: break-word; } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl-hover tbody tr:hover { background: var(--surface-2); } /* A report has many numeric columns but is read as one document. Use the available document width and compact cell padding before asking the reader to scroll. Keep the type size: tiny marks are not a solution to an overflowing report. */ .bulletin-card { max-width: 72rem; } .bulletin-subjects { min-width: 40rem; } .bulletin-subjects thead th { padding: 8px 6px; letter-spacing: normal; overflow-wrap: anywhere; } .bulletin-subjects tbody td { padding: 8px 6px; } /* ── end table ─────────────────────────────────────────────────────────────────────────────── */ /* ── DataGrid (feature 0158, 158a) ───────────────────────────────────────────────────────────── Here rather than in a host stylesheet because the component is in this library and six hosts render it — the same reason .panel-head moved down here, and the defect that taught it: a class defined in the Portal's sheet and nowhere else lays out in the portal and silently does not in the back office. Every directional property is logical (inline-start, not left). `ar` is rtl:true in languages.yaml, so a grid built on physical sides would put its column menu and its sort marks on the wrong side of an Arabic page — and that is the sort of thing nobody notices until a school does. */ .grid-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; } /* 158f: the add is its own band above the strip, not a third item in it. Separated from the strip below it, so an open panel reads as a thing in its own right rather than as furniture attached to the search box it used to sit beside. */ .grid-toolbar { margin-bottom: 12px; } /* The search takes the room and the column menu keeps its size, so the strip does not rewrap at a width nobody chose. The toolbar used to be a third item here, pushed right with an auto margin; since 158f it is its own band above and that rule would have been a contradiction left behind. */ .grid-search { flex: 1 1 12rem; min-width: 0; } .grid-columns { position: relative; flex: none; } .grid-columns > summary { list-style: none; cursor: pointer; } .grid-columns > summary::-webkit-details-marker { display: none; } .grid-columns-menu { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 4px); z-index: 20; min-width: 12rem; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 6px 24px rgb(0 0 0 / 12%); } .grid-columns-item { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; } /* A header that sorts is a button, not a th with a click handler: it has to be reachable from a keyboard and announce itself, and the element that does both already exists. */ .grid-sort { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; text-align: start; } .grid-sort:hover { text-decoration: underline; } .grid-sort-mark { font-size: 11px; opacity: .75; } /* A column's own filter, under its own heading (163c). Full-width so it lines up with the cells it narrows, and lighter than the heading above it: the heading names the column and this is a control on it, so a picker as loud as the word it sits beneath reads as two headings. */ .grid-filter { display: block; width: 100%; margin-top: 6px; padding: 3px 6px; font-size: 12px; font-weight: 400; } /* The panel a row opens, in the row's own place (158b). Tinted rather than bordered: it is the same record as the row above it, and a border between the two would read as a separate entry. The tint is .tbl-hover's own, so the detail does not change under the pointer — there is nothing to click a form's backing row for, and a highlight that follows the mouse across a form says otherwise. */ .grid-row-detail > td { background: var(--surface-2); } /* A cell's intent, not each page's own guess at alignment (158i). Reported from `/assessments`: a dot-separated sentence of whatever length a plan's fields happened to add up to, followed by an Edit button — fifteen rows, fifteen button positions, a visible staircase down the card. A row's height must not depend on its content, so a text cell clamps to a fixed number of lines instead of wrapping without limit; the full value still reaches the reader through `title=`. Clamping and not truncating at a character count, because a count is wrong at every column width and in every one of nine languages. */ .grid-cell-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .grid-cell-identifier { white-space: nowrap; } .grid-cell-number { text-align: end; font-variant-numeric: tabular-nums; } .grid-cell-date { text-align: end; white-space: nowrap; } .grid-cell-status { text-align: center; } /* The action column at the same end of every row, sized to its own content rather than sharing the stretch every other column gets — `width: 1%` is the standard trick for "as narrow as its content allows" in a table whose other columns are unconstrained. `170b` is the shape of the buttons inside it; this is only where the column sits. */ .grid-cell-actions { text-align: end; white-space: nowrap; width: 1%; } /* ── end DataGrid ──────────────────────────────────────────────────────────────────────────── */ /* The head of a panel: a title on one side, a cancel on the other (158a). It lived in the Portal's own stylesheet and in no other, so every .panel-head in Manage.Client rendered as a stacked block with the cancel underneath the title — the same shape of defect as a class nothing defines, except that it looked deliberate. It is here now because it belongs to a component in this library, and a component's furniture has to travel with it. */ .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .panel-head > :first-child { margin-top: 0; } .panel-cancel { flex: none; } .table-scroll { overflow-x: auto; /* The scroll ends at the table's edge instead of handing the rest of the gesture to the page, which on a phone is what turns "I read the last column" into "the screen moved". */ overscroll-behavior-x: contain; /* The card's own rounding would otherwise be clipped square by the scrolling box. */ border-radius: var(--r); } /* ----------------------------------------------------------------- language control -------- */ /* One class, two switchers: the web's form-backed