From 9d02424aaceadc8987bc57e95e85cdaa933de7fc Mon Sep 17 00:00:00 2001
From: Ruben <post@rubensolvang.no>
Date: Thu, 26 Feb 2026 22:44:05 +0100
Subject: [PATCH] Add fullscreen map view for petition signatures

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
---
 .../kart/10-map.php                           |  1 +
 .../kart/metadata.ini                         |  4 +
 custom/assets/petition-map.css                | 80 +++++++++++++++++++
 custom/plugins/page/petition-map.php          | 20 ++++-
 4 files changed, 101 insertions(+), 4 deletions(-)
 create mode 100644 content/underskriftskampanje/medisinsk-cannabis-pa-resept/kart/10-map.php
 create mode 100644 content/underskriftskampanje/medisinsk-cannabis-pa-resept/kart/metadata.ini

diff --git a/content/underskriftskampanje/medisinsk-cannabis-pa-resept/kart/10-map.php b/content/underskriftskampanje/medisinsk-cannabis-pa-resept/kart/10-map.php
new file mode 100644
index 0000000..094bd75
--- /dev/null
+++ b/content/underskriftskampanje/medisinsk-cannabis-pa-resept/kart/10-map.php
@@ -0,0 +1 @@
+<?= $petition_map ?? '' ?>
diff --git a/content/underskriftskampanje/medisinsk-cannabis-pa-resept/kart/metadata.ini b/content/underskriftskampanje/medisinsk-cannabis-pa-resept/kart/metadata.ini
new file mode 100644
index 0000000..4f0b1ed
--- /dev/null
+++ b/content/underskriftskampanje/medisinsk-cannabis-pa-resept/kart/metadata.ini
@@ -0,0 +1,4 @@
+title = "Kart over underskrifter"
+plugins = "petition-form, petition-map"
+petition_id = "medisinsk-cannabis-pa-resept"
+map_fullpage = true
diff --git a/custom/assets/petition-map.css b/custom/assets/petition-map.css
index be99ec4..8cb34a6 100644
--- a/custom/assets/petition-map.css
+++ b/custom/assets/petition-map.css
@@ -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);
diff --git a/custom/plugins/page/petition-map.php b/custom/plugins/page/petition-map.php
index e2ddce6..702b0a8 100644
--- a/custom/plugins/page/petition-map.php
+++ b/custom/plugins/page/petition-map.php
@@ -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;
 });