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

feat(school-rows): quiet chips for characteristics, uniform sizing
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 17s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 53s
Details
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
Details

Browse Source 
Replace the faint middot separators on the characteristics line with
subtle borderless "quiet chips" so each attribute (type, age, faith,
gender) is its own scannable unit. Keep the coloured phase pill as the
one accent, and align every chip — including phase and provision tags —
to a single size/weight/radius (0.75rem / 600 / 4px).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-07-02 09:22:33 +01:00
co-authored by Claude Opus 4.8
parent b7a94f1a52
commit 7e11129297
4 changed files with 46 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/SchoolRow.module.css
+17 -11
View File
@@ -66,12 +66,12 @@
/* Phase label pill */ /* Phase label pill */
.phaseLabel { .phaseLabel {
display: inline-block; display: inline-block;
padding: 0.0625rem 0.375rem; padding: 0.0625rem 0.4rem;
font-size: 0.6875rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
border-radius: 3px; line-height: 1.4;
border-radius: 4px;
white-space: nowrap; white-space: nowrap;
margin-right: 0.25rem;
} }
.phaseLabelPrimary { background: var(--phase-primary-bg); color: var(--phase-primary-text); } .phaseLabelPrimary { background: var(--phase-primary-bg); color: var(--phase-primary-text); }
@@ -83,15 +83,21 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0; gap: 0.35rem;
font-size: 0.8rem;
color: var(--text-muted, #8a847a);
} }
.line2 span:not(:last-child)::after { /* Quiet chip — one shared size/weight for every attribute (Ages, faith, etc.);
content: '·'; the phase pill keeps its colour but matches this sizing. */
margin: 0 0.4rem; .attr {
color: var(--border-color, #e5dfd5); display: inline-block;
padding: 0.0625rem 0.4rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
border-radius: 4px;
white-space: nowrap;
background: rgba(26, 22, 18, 0.05);
color: var(--text-secondary, #5c564d);
} }
/* Line 3: stats */ /* Line 3: stats */
nextjs-app/components/SchoolRow.tsx
+4 -4
View File
@@ -74,10 +74,10 @@ export function SchoolRow({
{phase.label} {phase.label}
</span> </span>
)} )}
{school.school_type && <span>{school.school_type}</span>} {school.school_type && <span className={styles.attr}>{school.school_type}</span>}
{school.age_range && <span>{formatAgeRange(school.age_range)}</span>} {school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
{showDenomination && <span>{school.religious_denomination}</span>} {showDenomination && <span className={styles.attr}>{school.religious_denomination}</span>}
{showGender && <span>{school.gender}</span>} {showGender && <span className={styles.attr}>{school.gender}</span>}
</div> </div>
{/* Line 3: Key stats */} {/* Line 3: Key stats */}
nextjs-app/components/SecondarySchoolRow.module.css
+23 -17
View File
@@ -68,15 +68,21 @@
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25rem 0; gap: 0.35rem;
font-size: 0.8rem;
color: var(--text-muted, #8a847a);
} }
.line2 > span:not(.provisionTag):not(:last-child)::after { /* Quiet chip — one shared size/weight for every attribute (Ages, type, etc.);
content: '·'; the phase pill keeps its colour but matches this sizing. */
margin: 0 0.4rem; .attr {
color: var(--border-color, #e5dfd5); display: inline-block;
padding: 0.0625rem 0.4rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
border-radius: 4px;
white-space: nowrap;
background: rgba(26, 22, 18, 0.05);
color: var(--text-secondary, #5c564d);
} }
/* Line 3: KS4 stats */ /* Line 3: KS4 stats */
@@ -151,12 +157,12 @@
/* Phase label pill */ /* Phase label pill */
.phaseLabel { .phaseLabel {
display: inline-block; display: inline-block;
padding: 0.0625rem 0.375rem; padding: 0.0625rem 0.4rem;
font-size: 0.6875rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
border-radius: 3px; line-height: 1.4;
border-radius: 4px;
white-space: nowrap; white-space: nowrap;
margin-right: 0.25rem;
} }
.phaseLabelSecondary { background: var(--phase-secondary-bg); color: var(--phase-secondary-text); } .phaseLabelSecondary { background: var(--phase-secondary-bg); color: var(--phase-secondary-text); }
@@ -165,14 +171,14 @@
.provisionTag { .provisionTag {
display: inline-block; display: inline-block;
padding: 0.0625rem 0.375rem; padding: 0.0625rem 0.4rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 600;
background: var(--bg-secondary, #f3ede4); line-height: 1.4;
color: var(--text-secondary, #5c5650); background: rgba(26, 22, 18, 0.05);
border-radius: 3px; color: var(--text-secondary, #5c564d);
border-radius: 4px;
white-space: nowrap; white-space: nowrap;
margin-left: 0.375rem;
} }
.selectiveTag { .selectiveTag {
nextjs-app/components/SecondarySchoolRow.tsx
+2 -2
View File
@@ -83,8 +83,8 @@ export function SecondarySchoolRow({
{phase.label} {phase.label}
</span> </span>
)} )}
{school.school_type && <span>{school.school_type}</span>} {school.school_type && <span className={styles.attr}>{school.school_type}</span>}
{school.age_range && <span>{formatAgeRange(school.age_range)}</span>} {school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
{showGender && ( {showGender && (
<span className={styles.provisionTag}>{school.gender}</span> <span className={styles.provisionTag}>{school.gender}</span>
)} )}