tudor/school_compare
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admissions): replace sparse Q&A list with 2×2 stat tiles
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 58s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m2s
Details
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 2m4s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
Details

Browse Source 
The "How Hard to Get Into This School" this-year view rendered four
question/answer rows stretched to fill the trend chart's height, leaving
tall gaps and a long horizontal jump from a small muted question to its
number. Replace with a 2×2 grid of stat tiles — each number paired with
its label directly beneath — so the panel reads quickly and fills the
reserved height without artificial spacing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-06-30 16:07:54 +01:00
co-authored by Claude Opus 4.8
parent 2de1c4e766
commit c40a6a949c
2 changed files with 61 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/SchoolDetailView.tsx
+15 -15
View File
@@ -905,40 +905,40 @@ export function SchoolDetailView({
<div className={styles.admissionsViewport}>
{/* This-year Q&A */}
<div className={styles.admissionsViewYear} hidden={showAdmissionsTrend && admissionsView !== 'year'}>
<dl className={styles.admissionsQa}>
<dl className={styles.admissionsTiles}>
{admissions.places_offered != null && (
<div className={styles.admissionsQaRow}>
<dt className={styles.admissionsQaQuestion}>How many places were offered?</dt>
<dd className={styles.admissionsQaAnswer}>{admissions.places_offered}</dd>
<div className={styles.admissionsTile}>
<dd className={styles.admissionsTileNum}>{admissions.places_offered}</dd>
<dt className={styles.admissionsTileLabel}>Places offered</dt>
</div>
)}
{admissions.first_preference_applications != null && (
<div className={styles.admissionsQaRow}>
<dt className={styles.admissionsQaQuestion}>How many families wanted this school first?</dt>
<dd className={styles.admissionsQaAnswer}>{admissions.first_preference_applications}</dd>
<div className={styles.admissionsTile}>
<dd className={styles.admissionsTileNum}>{admissions.first_preference_applications}</dd>
<dt className={styles.admissionsTileLabel}>Wanted it first</dt>
</div>
)}
{admissions.first_preference_offer_pct != null && (
<div className={styles.admissionsQaRow}>
<dt className={styles.admissionsQaQuestion}>How many got their first choice?</dt>
<dd className={styles.admissionsQaAnswer}>
<div className={`${styles.admissionsTile} ${styles.admissionsTileAccent}`}>
<dd className={styles.admissionsTileNum}>
{admissions.first_preference_offers != null && admissions.first_preference_applications != null ? (
<>
{admissions.first_preference_offers}
<span className={styles.admissionsQaAnswerSub}>
of {admissions.first_preference_applications} ({formatPercentage(admissions.first_preference_offer_pct)})
<span className={styles.admissionsTileSub}>
of {admissions.first_preference_applications} · {formatPercentage(admissions.first_preference_offer_pct)}
</span>
</>
) : (
formatPercentage(admissions.first_preference_offer_pct)
)}
</dd>
<dt className={styles.admissionsTileLabel}>Got their first choice</dt>
</div>
)}
{admissions.total_applications != null && (
<div className={styles.admissionsQaRow}>
<dt className={styles.admissionsQaQuestion}>How many applied in total?</dt>
<dd className={styles.admissionsQaAnswer}>{admissions.total_applications.toLocaleString()}</dd>
<div className={styles.admissionsTile}>
<dd className={styles.admissionsTileNum}>{admissions.total_applications.toLocaleString()}</dd>
<dt className={styles.admissionsTileLabel}>Applied in total</dt>
</div>
)}
</dl>