Skip to content

Inset the speaker portal task rows and widen the welcome banner #339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EllAchE wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Inset the speaker portal task rows and widen the welcome banner #339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/portal/[eventSlug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default async function PortalHomePage({
<h1 className={styles.pageTitle}>Hello, {speakerName(me, ctx).split(' ')[0]}</h1>
{branding.welcomeHtml ? (
<div
className={styles.prose}
className={`${styles.prose} ${styles.heroProse}`}
/* Organizer-authored, deliberately trusted: `S-7`. */
dangerouslySetInnerHTML={{ __html: branding.welcomeHtml }}
/>
Expand Down Expand Up @@ -94,7 +94,7 @@ export default async function PortalHomePage({
</div>
) : (
<Card padding="none">
<CardBody>
<CardBody className={styles.checkList}>
{outstanding.slice(0, 6).map((entry) => (
<div key={entry.assignmentId} className={styles.checkRow}>
{entry.overdue ? (
Expand Down
28 changes: 27 additions & 1 deletion app/portal/portal.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,17 @@
padding: var(--space-6);
}

/*
* The organizer's welcome is a banner, not an article. `.prose` caps every other body of text at the
* 68ch reading measure, which is right for a task description or an info page but leaves this block
* wrapping halfway across an empty hero on a wide screen. The hero is already bounded by
* `--content-max`, so the text tracks the container instead of a fixed measure.
*/
.heroProse {
max-width: none;
margin-top: var(--space-2);
}

.statGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
Expand Down Expand Up @@ -360,18 +371,33 @@
align-items: center;
}

/*
* The rows sit inside a `padding="none"` card so the dividers run edge to edge, which means the row
* itself owns the inset. It matches the card default (`md`) so the list lines up with the padded
* cards beside it.
*/
.checkRow {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) 0;
padding: var(--space-3) var(--space-4);
border-bottom: var(--border-width) solid var(--border-hairline);
}

.checkRow:last-child {
border-bottom: 0;
}

/* Rows carry their own vertical padding; the body gap would double it around each divider. */
.checkList {
gap: var(--space-0);
}

/* The final row of the list is not the final row of the card: the footer action still follows it. */
.checkList .checkRow:last-child {
border-bottom: var(--border-width) solid var(--border-hairline);
}

.checkLink {
color: var(--text-strong);
text-decoration: none;
Expand Down