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

feat(map): add fullscreen button using browser Fullscreen API
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 32s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m6s
Details
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 31s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
Details

Browse Source 
Button sits top-right of the map (matching Leaflet control style),
toggles expand/compress icon, and syncs state with Escape key via
the fullscreenchange event.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Tudor
2026-03-30 09:21:44 +01:00
parent d6a45b8e12
commit 5aed055331
2 changed files with 69 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
nextjs-app/components/SchoolMap.module.css
View File

@@ -4,6 +4,34 @@
position: relative;
}
.mapWrapper.fullscreen {
width: 100vw;
height: 100vh;
}
.fullscreenBtn {
position: absolute;
top: 0.625rem;
right: 0.625rem;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: white;
border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
cursor: pointer;
color: #333;
transition: background 0.15s ease, color 0.15s ease;
}
.fullscreenBtn:hover {
background: #f4f4f4;
color: #000;
}
.mapLoading {
width: 100%;
height: 100%;