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

Condense spacing throughout the website for denser layout
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 34s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m11s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Details

Browse Source 
Reduced padding, margins, and gaps across all components:
- Header: smaller logo, tighter navigation
- FilterBar: compact hero, smaller inputs and toggles
- SchoolCard: reduced padding, smaller fonts and metrics
- HomeView: tighter grid gaps, smaller section headers
- Map view: condensed compact list items

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-02-04 11:18:39 +00:00
parent 1b0d6edb98
commit 85709d99ca
4 changed files with 169 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
nextjs-app/components/HomeView.module.css
View File

@@ -6,20 +6,20 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
gap: 0.75rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.locationBanner {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(45, 125, 125, 0.1);
border: 1px solid rgba(45, 125, 125, 0.3);
border-radius: 10px;
font-size: 0.9375rem;
border-radius: 8px;
font-size: 0.875rem;
color: var(--accent-teal, #2d7d7d);
font-weight: 500;
}
@@ -32,22 +32,22 @@
/* View Toggle */
.viewToggle {
display: flex;
gap: 0.25rem;
gap: 0.2rem;
background: var(--bg-secondary, #f3ede4);
padding: 0.25rem;
border-radius: 8px;
padding: 0.2rem;
border-radius: 6px;
}
.viewToggleBtn {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
gap: 0.25rem;
padding: 0.375rem 0.625rem;
font-size: 0.8125rem;
font-weight: 500;
background: transparent;
border: none;
border-radius: 6px;
border-radius: 5px;
cursor: pointer;
color: var(--text-secondary, #5c564d);
transition: all 0.2s ease;
@@ -68,7 +68,7 @@
}
.results {
margin-top: 2rem;
margin-top: 1rem;
}
.mapViewResults {
@@ -78,13 +78,13 @@
/* Map View Layout */
.mapViewContainer {
display: grid;
grid-template-columns: 1fr 380px;
gap: 1.5rem;
height: 550px;
grid-template-columns: 1fr 340px;
gap: 1rem;
height: 480px;
}
.mapContainer {
border-radius: 12px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border-color, #e5dfd5);
height: 100%;
@@ -93,10 +93,10 @@
.compactList {
display: flex;
flex-direction: column;
gap: 0.75rem;
gap: 0.5rem;
overflow-y: auto;
height: 100%;
padding-right: 0.5rem;
padding-right: 0.375rem;
}
.compactList::-webkit-scrollbar {
@@ -122,17 +122,17 @@
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0.875rem 1rem;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
background: var(--bg-card, white);
border: 1px solid var(--border-color, #e5dfd5);
border-radius: 10px;
border-radius: 8px;
transition: all 0.2s ease;
}
.compactItem:hover {
border-color: var(--accent-coral, #e07256);
box-shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
box-shadow: 0 2px 6px rgba(26, 22, 18, 0.05);
}
.compactItemContent {
@@ -143,13 +143,13 @@
.compactItemHeader {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
gap: 0.375rem;
margin-bottom: 0.125rem;
}
.compactItemName {
font-weight: 600;
font-size: 0.9375rem;
font-size: 0.8125rem;
color: var(--text-primary, #1a1612);
text-decoration: none;
white-space: nowrap;
@@ -163,32 +163,32 @@
.distanceBadge {
flex-shrink: 0;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
padding: 0.0625rem 0.375rem;
font-size: 0.6875rem;
font-weight: 600;
background: var(--accent-teal, #2d7d7d);
color: white;
border-radius: 4px;
border-radius: 3px;
}
.compactItemMeta {
display: flex;
gap: 0.5rem;
font-size: 0.8125rem;
gap: 0.375rem;
font-size: 0.6875rem;
color: var(--text-secondary, #5c564d);
margin-bottom: 0.375rem;
margin-bottom: 0.25rem;
}
.compactItemMeta span:not(:last-child)::after {
content: '·';
margin-left: 0.5rem;
margin-left: 0.375rem;
color: var(--text-muted, #8a847a);
}
.compactItemStats {
display: flex;
gap: 1rem;
font-size: 0.8125rem;
gap: 0.75rem;
font-size: 0.6875rem;
color: var(--text-secondary, #5c564d);
}
@@ -199,18 +199,18 @@
.compactItemActions {
display: flex;
flex-direction: column;
gap: 0.375rem;
gap: 0.25rem;
flex-shrink: 0;
}
.compactBtn {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
background: var(--accent-coral, #e07256);
color: white;
border: none;
border-radius: 6px;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
@@ -232,13 +232,13 @@
}
.compactBtnSecondary {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
font-size: 0.6875rem;
font-weight: 500;
background: transparent;
color: var(--text-secondary, #5c564d);
border: 1px solid var(--border-color, #e5dfd5);
border-radius: 6px;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
@@ -251,13 +251,13 @@
}
.sectionHeader {
margin-bottom: 2rem;
margin-bottom: 1rem;
}
.sectionHeader h2 {
font-size: 1.875rem;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
margin-bottom: 0.5rem;
color: var(--text-primary, #1a1612);
font-family: var(--font-playfair), 'Playfair Display', serif;
}
@@ -266,50 +266,50 @@
.sectionHeader h2::after {
content: '';
display: block;
width: 60px;
height: 3px;
width: 50px;
height: 2px;
background: var(--accent-coral, #e07256);
border-radius: 2px;
margin-top: 0.75rem;
border-radius: 1px;
margin-top: 0.5rem;
}
.sectionDescription {
font-size: 1rem;
font-size: 0.9375rem;
color: var(--text-secondary, #5c564d);
margin: 0;
line-height: 1.6;
line-height: 1.5;
}
.resultsHeader {
margin-bottom: 2rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
padding-bottom: 0.625rem;
border-bottom: 2px solid var(--border-color, #e5dfd5);
}
.resultsHeader h2 {
font-size: 1.5rem;
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary, #1a1612);
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
gap: 0.375rem;
}
.resultsHeader h2::before {
content: '';
display: inline-block;
width: 4px;
height: 1.25em;
width: 3px;
height: 1.125em;
background: var(--accent-coral, #e07256);
border-radius: 2px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
margin-bottom: 1.25rem;
}
/* Staggered grid entry animation */
@@ -341,41 +341,43 @@
.emptyState {
text-align: center;
padding: 4rem 2rem;
padding: 2.5rem 1.5rem;
background: var(--bg-card, white);
border: 1px solid var(--border-color, #e5dfd5);
border-radius: 12px;
border-radius: 10px;
}
.emptyStateTitle {
font-size: 1.5rem;
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary, #1a1612);
margin-bottom: 0.5rem;
margin-bottom: 0.375rem;
font-family: var(--font-playfair), 'Playfair Display', serif;
}
.emptyStateDescription {
font-size: 1rem;
font-size: 0.9375rem;
color: var(--text-secondary, #5c564d);
max-width: 400px;
max-width: 380px;
margin: 0 auto;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.locationBannerWrapper {
flex-direction: column;
align-items: stretch;
margin-bottom: 0.75rem;
}
.locationBanner {
padding: 0.75rem 1rem;
font-size: 0.875rem;
border-radius: 8px;
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
border-radius: 6px;
}
.viewToggle {
@@ -384,24 +386,25 @@
.mapViewContainer {
grid-template-columns: 1fr;
grid-template-rows: 300px auto;
grid-template-rows: 260px auto;
height: auto;
gap: 0.75rem;
}
.mapContainer {
height: 300px;
height: 260px;
}
.compactList {
height: auto;
max-height: 400px;
max-height: 350px;
padding-right: 0;
}
.compactItem {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
gap: 0.5rem;
}
.compactItemActions {
@@ -413,6 +416,6 @@
}
.emptyState {
padding: 3rem 1.5rem;
padding: 2rem 1.25rem;
}
}