Tudor
1d22877aec
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 48s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m13s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 32s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
1. Simpler home page: only search box on landing, no filter dropdowns 2. Advanced filters: hidden behind toggle on results page, auto-open if active 3. Per-school phase rendering: each row renders based on its own data 4. Taller 4-line rows with context line (type, age range, denomination, gender) 5. Result-scoped filters: dropdown values reflect current search results 6. Fix blank filter values: exclude empty strings and "Not applicable" 7. Rankings: Primary/Secondary phase tabs with phase-specific metrics 8. Compare: Primary/Secondary tabs with school counts and phase metrics Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
400 lines
7.1 KiB
CSS
400 lines
7.1 KiB
CSS
.container {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.25rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary, #1a1612);
|
|
margin-bottom: 0.5rem;
|
|
font-family: var(--font-playfair), 'Playfair Display', serif;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Phase Tabs */
|
|
.phaseTabs {
|
|
display: flex;
|
|
gap: 0;
|
|
margin-bottom: 1.5rem;
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
width: fit-content;
|
|
}
|
|
|
|
.phaseTab {
|
|
padding: 0.625rem 1.5rem;
|
|
font-size: 0.9375rem;
|
|
font-weight: 500;
|
|
background: var(--bg-card, white);
|
|
color: var(--text-secondary, #5c564d);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.phaseTab:not(:last-child) {
|
|
border-right: 1px solid var(--border-color, #e5dfd5);
|
|
}
|
|
|
|
.phaseTab:hover {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
}
|
|
|
|
.phaseTabActive {
|
|
background: var(--accent-coral, #e07256);
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.phaseTabActive:hover {
|
|
background: var(--accent-coral, #e07256);
|
|
}
|
|
|
|
/* Filters */
|
|
.filters {
|
|
background: var(--bg-card, white);
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06));
|
|
}
|
|
|
|
.filterGroup {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.filterLabel {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1a1612);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.filterSelect {
|
|
flex: 1;
|
|
padding: 0.625rem 1rem;
|
|
font-size: 0.9375rem;
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 8px;
|
|
background: var(--bg-card, white);
|
|
color: var(--text-primary, #1a1612);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.filterSelect:hover {
|
|
border-color: var(--accent-coral, #e07256);
|
|
}
|
|
|
|
.filterSelect:focus {
|
|
outline: none;
|
|
border-color: var(--accent-coral, #e07256);
|
|
box-shadow: 0 0 0 3px var(--accent-coral-bg);
|
|
}
|
|
|
|
.filterSelect optgroup {
|
|
font-weight: 700;
|
|
color: var(--text-primary, #1a1612);
|
|
background: var(--bg-secondary, #f3ede4);
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.filterSelect option {
|
|
font-weight: 400;
|
|
color: var(--text-secondary, #5c564d);
|
|
padding: 0.375rem 1rem;
|
|
}
|
|
|
|
/* Rankings Section */
|
|
.rankingsSection {
|
|
background: var(--bg-card, white);
|
|
border: 1px solid var(--border-color, #e5dfd5);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.06));
|
|
}
|
|
|
|
.tableWrapper {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.rankingsTable {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.rankingsTable thead {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
}
|
|
|
|
.rankingsTable th {
|
|
padding: 1rem;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #1a1612);
|
|
border-bottom: 2px solid var(--border-color, #e5dfd5);
|
|
white-space: nowrap;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.rankHeader {
|
|
width: 80px;
|
|
}
|
|
|
|
.schoolHeader {
|
|
min-width: 250px;
|
|
}
|
|
|
|
.areaHeader {
|
|
min-width: 150px;
|
|
}
|
|
|
|
.typeHeader {
|
|
min-width: 120px;
|
|
}
|
|
|
|
.valueHeader {
|
|
width: 120px;
|
|
text-align: center;
|
|
}
|
|
|
|
.actionHeader {
|
|
width: 120px;
|
|
text-align: center;
|
|
}
|
|
|
|
.rankingsTable td {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border-color, #e5dfd5);
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
.rankingsTable tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Alternating row backgrounds for visual rhythm */
|
|
.rankingsTable tbody tr:nth-child(even) {
|
|
background: rgba(243, 237, 228, 0.5);
|
|
}
|
|
|
|
.rankingsTable tbody tr:hover {
|
|
background: var(--bg-secondary, #f3ede4);
|
|
}
|
|
|
|
/* Top 3 Highlighting with Gold */
|
|
.rank1 {
|
|
background: linear-gradient(90deg, rgba(201, 162, 39, 0.15) 0%, transparent 100%) !important;
|
|
}
|
|
|
|
.rank2 {
|
|
background: linear-gradient(90deg, rgba(192, 192, 192, 0.15) 0%, transparent 100%) !important;
|
|
}
|
|
|
|
.rank3 {
|
|
background: linear-gradient(90deg, rgba(205, 127, 50, 0.15) 0%, transparent 100%) !important;
|
|
}
|
|
|
|
.rankCell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary, #1a1612);
|
|
}
|
|
|
|
/* Styled rank badges for top 3 */
|
|
.rankBadge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
position: relative;
|
|
}
|
|
|
|
.rankBadge::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
border-radius: 50%;
|
|
border: 2px solid transparent;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent) border-box;
|
|
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
-webkit-mask-composite: xor;
|
|
}
|
|
|
|
.rankBadge1 {
|
|
background: linear-gradient(135deg, #c9a227 0%, #e8c547 50%, #c9a227 100%);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.rankBadge2 {
|
|
background: linear-gradient(135deg, #8c8c8c 0%, #c0c0c0 50%, #8c8c8c 100%);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.rankBadge3 {
|
|
background: linear-gradient(135deg, #a5673f 0%, #cd7f32 50%, #a5673f 100%);
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.rankNumber {
|
|
font-size: 1rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
.schoolCell {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.schoolLink {
|
|
color: var(--text-primary, #1a1612);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.schoolLink:hover {
|
|
color: var(--accent-coral, #e07256);
|
|
}
|
|
|
|
.areaCell,
|
|
.typeCell {
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
.valueCell {
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.valueCell strong {
|
|
color: var(--accent-teal, #2d7d7d);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.actionCell {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Equalise <a> and <button> rendering */
|
|
.actionCell > * {
|
|
height: 2rem;
|
|
line-height: 1;
|
|
font-family: inherit;
|
|
box-sizing: border-box;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
|
|
/* No Results */
|
|
.noResults {
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
color: var(--text-secondary, #5c564d);
|
|
}
|
|
|
|
.noResults p {
|
|
font-size: 1rem;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.header h1 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.filters {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.filterGroup {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
min-width: 100%;
|
|
}
|
|
|
|
.rankingsSection {
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.rankingsTable {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.rankingsTable th,
|
|
.rankingsTable td {
|
|
padding: 0.75rem 0.5rem;
|
|
}
|
|
|
|
.rankBadge {
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.schoolHeader {
|
|
min-width: 180px;
|
|
}
|
|
|
|
.areaHeader,
|
|
.typeHeader {
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
|
|
.limitNote {
|
|
color: var(--text-muted);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.metricDescription {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
margin: -1rem 0 1.5rem;
|
|
max-width: 700px;
|
|
}
|
|
|
|
.progressHint {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
margin: -1rem 0 1.5rem;
|
|
font-style: italic;
|
|
}
|
|
|