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);

20
custom/plugins/page/petition-map.php
View file

@ -52,7 +52,8 @@ function petitionMapBuildData(string $csvPath): array {
$anonymous = ($display === 'anonymous');
$name = $anonymous ? null : trim($row[2] ?? '');
if ($name !== null) {
$name = mb_substr($name, 0, 50);
// First name only — take the first word to keep map labels compact
$name = mb_substr(explode(' ', $name)[0], 0, 50);
if ($name === '') $name = null;
}
@ -116,7 +117,7 @@ function petitionMapGetData(string $csvPath): array {
/**
* Render the map widget HTML block.
*/
function petitionMapRenderWidget(Context $ctx): string {
function petitionMapRenderWidget(Context $ctx, bool $fullpage = false): string {
$langPrefix = $ctx->get('langPrefix', '');
// CSS hash for cache busting
@ -138,11 +139,21 @@ function petitionMapRenderWidget(Context $ctx): string {
$html .= '<link rel="stylesheet" href="/petition-map.css?v=' . $cssHash . '">';
// Map container
$html .= '<section class="petition-map-section escape">';
$sectionClass = 'petition-map-section escape' . ($fullpage ? ' petition-map-section--fullpage' : '');
$html .= '<section class="' . $sectionClass . '">';
$html .= '<h1 id="petition-map-count" class="petition-map-count" aria-live="polite"></h1>';
$html .= '<div id="petition-map" aria-label="Kart over underskrifter i Norge">';
$html .= '<div class="map-loading" id="map-loading" aria-live="polite">Laster kart…</div>';
$iconExpand = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="10 2 14 2 14 6"/><polyline points="6 14 2 14 2 10"/><line x1="14" y1="2" x2="9" y2="7"/><line x1="2" y1="14" x2="7" y2="9"/></svg>';
if (!$fullpage) {
$html .= '<a href="' . $langPrefix . '/underskriftskampanje/medisinsk-cannabis-pa-resept/kart/" class="petition-map-fullscreen-btn" title="Fullskjerm" aria-label="Åpne kart i fullskjerm">' . $iconExpand . '</a>';
}
if ($fullpage) {
$iconCollapse = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="10" y1="14" x2="3" y2="21"/><line x1="21" y1="3" x2="14" y2="10"/></svg>';
$html .= '<a href="' . $langPrefix . '/underskriftskampanje/medisinsk-cannabis-pa-resept/#petition-map" class="petition-map-fullscreen-btn petition-map-fullscreen-btn--minimize" title="Minimer" aria-label="Gå tilbake til underskriftssiden">' . $iconCollapse . '</a>';
}
$html .= '</div>';
$html .= '<a href="' . $langPrefix . '/underskriftskampanje/medisinsk-cannabis-pa-resept/#sign-now" class="petition-map-cta-btn">Signer nå!</a>';
$html .= '</section>';
// Config for JS
@ -187,7 +198,8 @@ Hooks::add(Hook::TEMPLATE_VARS, function(array $vars, Context $ctx) {
petitionMapGetData($csvPath);
// Inject widget HTML as template variable
$vars['petition_map'] = petitionMapRenderWidget($ctx);
$fullpage = !empty($metadata['map_fullpage']);
$vars['petition_map'] = petitionMapRenderWidget($ctx, $fullpage);
return $vars;
});