Skip to content

Add the Activity rail and mobile panel to /news/ #278

Description

@mmcky

Part of #271 (Phase 4).

Why. Option A, decided in #266: the news cards keep the main column, and an Activity rail beside them shows the latest updates, so anyone glancing at News sees that the project is active. The design is section 2 of the round-2 handoff (see the round 2 outcome), as amended there.

Panel height. Round 2 chose a tinted panel that runs the full height of the news column. With real content it may read as unfinished: with 20 cards the panel is about 3,400px tall at 1440px, beside about 570px of rail content under All, so around 80% of it is empty tint. The fitted fallback is CSS-only: the column goes transparent, and the tint, border and radius sit on the sticky box.

Work.

  • A two-column grid at 1200px and wider. The <aside> comes first in the source. This page's section.inner-page gets overflow: clip, because the site-wide section { overflow: hidden } (main.scss line 779) stops position: sticky working.
  • The rail:
    • the latest 6 rows under Monday–Sunday week headings;
    • a type filter;
    • "View all activity", and the feed link once /activity/feed.xml exists.
  • Stickiness:
    • only the list sticks;
    • it sticks by its bottom edge when it's taller than the screen;
    • a small "Activity" label goes inside the sticky part;
    • build the panel full height as designed, then judge it on this PR's preview at 1280×720 and 1440×900 under All and Translations. If it reads as an unfinished column, switch to the fitted fallback.
  • The mobile panel below 1200px: collapsed, with its summary line plus a short second line such as "Library releases and lecture updates, from GitHub".
  • Fixes the handoff didn't specify:
    • scope the panel-collapse rule to below 1200px; as written, it hides the desktop rail;
    • scroll-padding-top on /news/ too, so keyboard focus never lands under the fixed header (WCAG 2.2 SC 2.4.11);
    • a visually hidden <h2> before the news list, so the posts aren't filed under "Activity";
    • on phones, the title link is stretched over the row rather than wrapping it, so the link doesn't read the whole summary.
  • Remove the intro line under the News h1.

Acceptance criteria (handoff checks)

  • 1: at 390×844, with the sponsor bar shown and the panel collapsed, the newest post's whole title is visible.
  • 2: no horizontal scroll at 320px.
  • 3: at 1280×720 with the sponsor bar, every part of the rail, including "View all activity", can be reached under every filter.
  • 4: the rail's rows and week headings under each filter match the fixture from Compute the Activity rows at build time, with tests #276.
  • 8: AA contrast and visible focus, including tabbing back through a stuck rail.
  • 9: the panel reads "Activity · 6 updates in September · latest Sep 27", with the second line below.
  • Resizing across 1200px with the panel open keeps its state.
  • The panel height is judged on the preview, and the choice is recorded in Design review: Activity and News pages #266's Decisions table.

Activity

  1. added theissue type on Sep 29, 2026
  2. mmcky commented on Sep 29, 2026

    @mmcky
    CollaboratorAuthor

    Decisions for the build (2026-09-29).

    • Merge after the reporter goes live. Build and review now, but merge only after QuantEcon/reports-activity#91's first live run, so the rail never launches showing "latest Sep 27".
    • Copy defaults, reviewed on the preview:
      • the collapsed panel's second line reads "Library releases and lecture updates, from GitHub", on its own line under the heading;
      • a small "Activity" label at the top of the sticky rail, styled like the week headings;
      • a visually hidden "Latest news" heading before the news list.
    • A Books filter in the rail, as on /activity/. Check that five buttons fit.
    • The feed link appears only if /activity/feed.xml exists on main when this is built.
    • Fixed numbers (the rail's rows and "Activity · 6 updates in September · latest Sep 27") are checked against Compute the Activity rows at build time, with tests #276's frozen copy of the data. The preview is checked for layout. The panel height stays the maintainer's call on the preview.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions