stopplidelsen/innhold
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add fullscreen map view for petition signatures

Browse source 
Add CSS for fullscreen mode with CTA button
Implement first name only display for map markers
Add fullscreen toggle button with proper icons
Update template to support fullpage mode
Add new page with fullscreen map view
This commit is contained in:
Ruben 2026-02-26 22:44:05 +01:00
parent e8919e5842
commit 9d02424aac
4 changed files with 101 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

80
custom/assets/petition-map.css
View file

@ -95,6 +95,86 @@
}
}
/* Fullscreen / minimize button */
.petition-map-fullscreen-btn {
position: absolute;
top: 0.5rem;
right: 2.8rem; /* clear of Leaflet zoom controls */
z-index: 1000;
background: oklch(1 0 0 / 0.9);
color: var(--color-grey);
width: 1.75rem;
height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
text-decoration: none;
box-shadow: 0 1px 4px oklch(0 0 0 / 0.3);
&:hover {
background: oklch(1 0 0);
color: var(--color-green);
}
}
/* CTA button — hidden by default, shown in fullpage mode */
.petition-map-cta-btn {
display: none;
}
.petition-map-section--fullpage {
position: relative;
.petition-map-cta-btn {
display: block;
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
background: var(--color-blue);
color: oklch(1 0 0);
padding: 0.75rem 2rem;
border-radius: 2rem;
font-size: 1.1rem;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 2px 12px oklch(0 0 0 / 0.25);
text-decoration: none;
transition: background 0.15s, transform 0.15s;
&:hover {
background: var(--color-green);
transform: translateX(-50%) translateY(-2px);
}
}
#petition-map {
flex: 1;
height: auto;
min-height: 0;
}
}
/* Fullpage: make main stretch and propagate height into the map */
:has(.petition-map-section--fullpage) main {
display: flex;
flex-direction: column;
> article {
flex: 1;
display: flex;
flex-direction: column;
}
.petition-map-section--fullpage {
flex: 1;
display: flex;
flex-direction: column;
}
}
/* Petition map counter */
#petition-map-count {
background: var(--color-green-light);