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

updates for secondary schools
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 46s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m15s
Details
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 32s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Tudor
2026-03-28 22:36:00 +00:00
parent f3a8ebdb4b
commit e8175561d5
16 changed files with 2170 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

696
nextjs-app/components/SecondarySchoolDetailView.module.css Normal file
View File

@@ -0,0 +1,696 @@
/* SecondarySchoolDetailView — borrows heavily from SchoolDetailView.module.css */
.container {
width: 100%;
}
/* ── Header ──────────────────────────────────────────── */
.header {
background: var(--bg-card, white);
border: 1px solid var(--border-color, #e5dfd5);
border-radius: 10px;
padding: 1.25rem 1.5rem;
margin-bottom: 0;
box-shadow: var(--shadow-soft);
}
.headerContent {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
}
.titleSection {
flex: 1;
}
.schoolName {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary, #1a1612);
margin-bottom: 0.5rem;
line-height: 1.2;
font-family: var(--font-playfair), 'Playfair Display', serif;
}
.badges {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-bottom: 0.5rem;
}
.badge {
font-size: 0.8125rem;
color: var(--text-secondary, #5c564d);
padding: 0.125rem 0.5rem;
background: var(--bg-secondary, #f3ede4);
border-radius: 3px;
}
.badgeSelective {
background: rgba(180, 120, 0, 0.1);
color: #8a6200;
}
.badgeFaith {
background: rgba(45, 125, 125, 0.1);
color: var(--accent-teal, #2d7d7d);
}
.address {
font-size: 0.875rem;
color: var(--text-muted, #8a847a);
margin: 0 0 0.75rem;
}
.headerDetails {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin-top: 0.5rem;
}
.headerDetail {
font-size: 0.8125rem;
color: var(--text-secondary, #5c564d);
}
.headerDetail strong {
color: var(--text-primary, #1a1612);
font-weight: 600;
}
.headerDetail a {
color: var(--accent-teal, #2d7d7d);
text-decoration: none;
}
.headerDetail a:hover {
text-decoration: underline;
}
.actions {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
.btnAdd,
.btnRemove {
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.btnAdd {
background: var(--accent-coral, #e07256);
color: white;
}
.btnAdd:hover {
background: var(--accent-coral-dark, #c45a3f);
transform: translateY(-1px);
}
.btnRemove {
background: var(--accent-teal, #2d7d7d);
color: white;
}
.btnRemove:hover {
opacity: 0.9;
}
/* ── Tab Navigation (sticky) ─────────────────────────── */
.tabNav {
position: sticky;
top: 3.5rem;
z-index: 10;
background: var(--bg-card, white);
border: 1px solid var(--border-color, #e5dfd5);
border-top: none;
border-radius: 0 0 10px 10px;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.tabNav::-webkit-scrollbar {
display: none;
}
.tabNavInner {
display: inline-flex;
gap: 0.25rem;
align-items: center;
}
.backBtn {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.625rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--accent-coral, #e07256);
background: none;
border: 1px solid var(--border-color, #e5dfd5);
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
margin-right: 0.25rem;
}
.backBtn:hover {
background: var(--bg-secondary, #f3ede4);
border-color: var(--accent-coral, #e07256);
}
.tabNavDivider {
width: 1px;
height: 1rem;
background: var(--border-color, #e5dfd5);
margin: 0 0.25rem;
flex-shrink: 0;
}
.tabBtn {
display: inline-block;
padding: 0.3rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
color: var(--text-secondary, #5c564d);
background: none;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.tabBtn:hover {
background: var(--bg-secondary, #f3ede4);
color: var(--text-primary, #1a1612);
}
.tabBtnActive {
background: var(--accent-coral, #e07256);
color: white;
font-weight: 600;
}
.tabBtnActive:hover {
background: var(--accent-coral-dark, #c45a3f);
color: white;
}
/* ── Tab content area ────────────────────────────────── */
.tabContent {
display: flex;
flex-direction: column;
gap: 0; /* cards have their own margin-bottom */
}
/* ── Card ────────────────────────────────────────────── */
.card {
background: var(--bg-card, white);
border: 1px solid var(--border-color, #e5dfd5);
border-radius: 10px;
padding: 1.25rem 1.5rem;
margin-bottom: 1rem;
box-shadow: var(--shadow-soft);
}
/* ── Section Title ───────────────────────────────────── */
.sectionTitle {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary, #1a1612);
margin-bottom: 0.875rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--border-color, #e5dfd5);
font-family: var(--font-playfair), 'Playfair Display', serif;
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
}
.sectionTitle::before {
content: '';
display: inline-block;
width: 3px;
height: 1em;
background: var(--accent-coral, #e07256);
border-radius: 2px;
flex-shrink: 0;
}
.sectionSubtitle {
font-size: 0.85rem;
color: var(--text-muted, #8a847a);
margin: -0.5rem 0 1rem;
}
.subSectionTitle {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary, #5c564d);
margin: 1.25rem 0 0.75rem;
}
.responseBadge {
font-size: 0.75rem;
font-weight: 500;
font-family: var(--font-dm-sans), sans-serif;
color: var(--text-muted, #8a847a);
background: var(--bg-secondary, #f3ede4);
padding: 0.1rem 0.5rem;
border-radius: 999px;
margin-left: auto;
}
/* ── Progress 8 suspension banner ───────────────────── */
.p8Banner {
background: rgba(180, 120, 0, 0.1);
border: 1px solid rgba(180, 120, 0, 0.3);
color: #8a6200;
border-radius: 6px;
padding: 0.625rem 0.875rem;
font-size: 0.825rem;
margin-bottom: 1rem;
line-height: 1.5;
}
/* ── Metrics Grid & Cards ────────────────────────────── */
.metricsGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
}
.metricCard {
background: var(--bg-secondary, #f3ede4);
border: 1px solid var(--border-color, #e5dfd5);
border-radius: 6px;
padding: 0.75rem;
text-align: center;
}
.metricLabel {
font-size: 0.6875rem;
color: var(--text-muted, #8a847a);
margin-bottom: 0.25rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.metricValue {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary, #1a1612);
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
.metricHint {
font-size: 0.7rem;
color: var(--text-muted, #8a847a);
margin-top: 0.3rem;
font-style: italic;
}
/* ── Progress score colours ──────────────────────────── */
.progressPositive {
color: var(--accent-teal, #2d7d7d);
font-weight: 700;
}
.progressNegative {
color: var(--accent-coral, #e07256);
font-weight: 700;
}
/* ── Status colours ──────────────────────────────────── */
.statusGood {
background: var(--accent-teal-bg);
color: var(--accent-teal, #2d7d7d);
}
.statusWarn {
background: var(--accent-gold-bg);
color: #b8920e;
}
/* ── Metric table (row-based) ────────────────────────── */
.metricTable {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.metricRow {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.375rem 0.625rem;
background: var(--bg-secondary, #f3ede4);
border-radius: 4px;
}
.metricName {
font-size: 0.75rem;
color: var(--text-secondary, #5c564d);
}
.metricRow .metricValue {
font-size: 0.875rem;
font-weight: 600;
color: var(--accent-teal, #2d7d7d);
}
/* ── Charts ──────────────────────────────────────────── */
.chartContainer {
width: 100%;
height: 280px;
position: relative;
}
/* ── History table ───────────────────────────────────── */
.tableWrapper {
overflow-x: auto;
margin-top: 0.5rem;
}
.historicalSubtitle {
font-size: 0.8rem;
color: var(--text-muted, #8a847a);
margin: 1.25rem 0 0.25rem;
}
.dataTable {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem;
}
.dataTable thead {
background: var(--bg-secondary, #f3ede4);
}
.dataTable th {
padding: 0.625rem 0.75rem;
text-align: left;
font-weight: 600;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-primary, #1a1612);
border-bottom: 2px solid var(--border-color, #e5dfd5);
}
.dataTable td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border-color, #e5dfd5);
color: var(--text-secondary, #5c564d);
}
.dataTable tbody tr:last-child td {
border-bottom: none;
}
.dataTable tbody tr:hover {
background: var(--bg-secondary, #f3ede4);
}
.yearCell {
font-weight: 600;
color: var(--accent-gold, #c9a227);
}
/* ── Ofsted ──────────────────────────────────────────── */
.ofstedHeader {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1rem;
}
.ofstedGrade {
display: inline-block;
padding: 0.3rem 0.75rem;
font-size: 1rem;
font-weight: 700;
border-radius: 6px;
white-space: nowrap;
}
.ofstedGrade1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); }
.ofstedGrade2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; }
.ofstedGrade3 { background: var(--accent-gold-bg); color: #b8920e; }
.ofstedGrade4 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
.rcGrade1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); }
.rcGrade2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; }
.rcGrade3 { background: var(--accent-gold-bg); color: #b8920e; }
.rcGrade4 { background: rgba(249, 115, 22, 0.12); color: #c2410c; }
.rcGrade5 { background: var(--accent-coral-bg); color: var(--accent-coral, #e07256); }
.safeguardingMet {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.8125rem;
font-weight: 600;
background: var(--accent-teal-bg);
color: var(--accent-teal, #2d7d7d);
}
.safeguardingNotMet {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.8125rem;
font-weight: 700;
background: var(--accent-coral-bg);
color: var(--accent-coral, #e07256);
}
.ofstedDisclaimer {
font-size: 0.8rem;
color: var(--text-muted, #8a847a);
font-style: italic;
margin: 0 0 1rem;
}
.ofstedDate {
font-size: 0.85rem;
color: var(--text-muted, #8a847a);
}
.ofstedPrevious {
font-size: 0.8125rem;
color: var(--text-muted, #8a847a);
font-style: italic;
}
.ofstedReportLink {
font-size: 0.8125rem;
color: var(--accent-teal, #2d7d7d);
text-decoration: none;
margin-left: auto;
white-space: nowrap;
}
.ofstedReportLink:hover {
text-decoration: underline;
}
/* ── Parent View ─────────────────────────────────────── */
.parentRecommendLine {
font-size: 0.85rem;
color: var(--text-secondary, #5c564d);
margin: 0.5rem 0 0;
}
.parentRecommendLine strong {
color: var(--accent-teal, #2d7d7d);
font-weight: 700;
}
.parentViewGrid {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.parentViewRow {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
}
.parentViewLabel {
flex: 0 0 18rem;
color: var(--text-secondary, #5c564d);
font-size: 0.8125rem;
}
.parentViewBar {
flex: 1;
height: 0.5rem;
background: var(--bg-secondary, #f3ede4);
border-radius: 4px;
overflow: hidden;
}
.parentViewFill {
height: 100%;
background: var(--accent-teal, #2d7d7d);
border-radius: 4px;
transition: width 0.4s ease;
}
.parentViewPct {
flex: 0 0 2.75rem;
text-align: right;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-primary, #1a1612);
}
/* Tab link (inline button styled as link) */
.tabLink {
background: none;
border: none;
color: var(--accent-teal, #2d7d7d);
font-size: 0.8125rem;
cursor: pointer;
padding: 0;
margin-top: 0.75rem;
text-decoration: none;
}
.tabLink:hover {
text-decoration: underline;
}
/* ── Admissions ──────────────────────────────────────── */
.admissionsTypeBadge {
border-radius: 6px;
padding: 0.5rem 0.875rem;
font-size: 0.8125rem;
margin-bottom: 1rem;
line-height: 1.5;
}
.admissionsSelective {
background: rgba(180, 120, 0, 0.1);
color: #8a6200;
border: 1px solid rgba(180, 120, 0, 0.25);
}
.admissionsFaith {
background: rgba(45, 125, 125, 0.08);
color: var(--accent-teal, #2d7d7d);
border: 1px solid rgba(45, 125, 125, 0.2);
}
.admissionsBadge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.75rem;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 600;
margin-top: 0.75rem;
}
.sixthFormNote {
margin-top: 1rem;
padding: 0.625rem 0.875rem;
background: var(--bg-secondary, #f3ede4);
border-radius: 6px;
font-size: 0.825rem;
color: var(--text-secondary, #5c564d);
border-left: 3px solid var(--accent-teal, #2d7d7d);
}
/* ── Deprivation ─────────────────────────────────────── */
.deprivationDots {
display: flex;
gap: 0.375rem;
margin: 0.75rem 0 0.5rem;
align-items: center;
}
.deprivationDot {
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: var(--bg-secondary, #f3ede4);
border: 2px solid var(--border-color, #e5dfd5);
flex-shrink: 0;
}
.deprivationDotFilled {
background: var(--accent-teal, #2d7d7d);
border-color: var(--accent-teal, #2d7d7d);
}
.deprivationDesc {
font-size: 0.875rem;
color: var(--text-secondary, #5c564d);
line-height: 1.5;
margin: 0;
}
.deprivationScaleLabel {
display: flex;
justify-content: space-between;
font-size: 0.7rem;
color: var(--text-muted, #8a847a);
margin-top: 0.25rem;
}
/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
.headerContent {
flex-direction: column;
gap: 1rem;
}
.actions {
width: 100%;
}
.btnAdd,
.btnRemove {
flex: 1;
}
.schoolName {
font-size: 1.25rem;
}
.parentViewLabel {
flex-basis: 10rem;
}
}