optimized onboarding tutorial for mobile screens

public/js/onboarding.js

@@ -1,6 +1,7 @@
 // =====================================================================
 // WebGIS Citizen Participation Portal — Onboarding Tour
-// Guides Users through the Participation Portal
+// Guides Users through the Participation Portal.
+// On Mobile centered Overlays. On Desktop attached to User Interface.
 // =====================================================================
 
 
@@ -17,6 +18,11 @@ const ONBOARDING_MODE = 'once';
 // Prevents double Initialization
 let onboardingStarted = false;
 
+// Detects Mobile Viewport
+function isMobile() {
+    return window.innerWidth < 769;
+}
+
 
 // =================================================================
 // Block 2: Tour Initialization
@@ -40,7 +46,7 @@ function initOnboardingTour() {
 
 
 // =================================================================
-// Block 3: Modal Watcher — Starts Tour other Welcome and Login Modals closed
+// Block 3: Modal Watcher — Starts Tour after Welcome and Login Modals closed
 // =================================================================
 
 function waitForModalsToClose(callback) {
@@ -74,8 +80,10 @@ function startTour() {
     if (onboardingStarted) return;
     onboardingStarted = true;
 
+    const mobile = isMobile();
+
     const tour = new Shepherd.Tour({
-        useModalOverlay: true,
+        useModalOverlay: !mobile,
         defaultStepOptions: {
             cancelIcon: { enabled: true },
             scrollTo: false,
@@ -90,13 +98,13 @@ function startTour() {
 
 
     // -----------------------------------------------------------------
-    // Step 1: Welcome
+    // Step 1: Welcome (identical on Mobile and Desktop)
     // -----------------------------------------------------------------
     tour.addStep({
         id: 'welcome',
-        title: '<i class="fa-solid fa-hand-wave"></i> Wilkommen bei der Mitmachkarte!',
+        title: '<i class="fa-solid fa-hand-wave"></i> Willkommen bei der Mitmachkarte!',
-        text: 'Dieses interaktive Tutorial zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
+        text: 'Dieses <strong>interaktive Tutorial</strong> zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
-              '<br><br><span style="font-size:0.8rem;color:var(--color-text-secondary);">Sie können das Tutorial jederzeit durch den Hilfe-Tab der Seitenleiste wiederholen.</span>',
+              '<br><br><span style=color:var(--color-text-secondary);">Sie können das Tutorial jederzeit über den Hilfe-Tab der Seitenleiste wiederholen.</span>',
         buttons: [
             {
                 text: 'Überspringen',
@@ -115,20 +123,9 @@ function startTour() {
     // -----------------------------------------------------------------
     // Step 2: Drawing Tools
     // -----------------------------------------------------------------
-    tour.addStep({
+    var drawingStep = {
         id: 'drawing-tools',
         title: '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen',
-        text: 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.',
-        attachTo: {
-            element: '.leaflet-pm-toolbar',
-            on: 'left'
-        },
-        beforeShowPromise: function () {
-            return new Promise(function (resolve) {
-                sidebar.close();
-                setTimeout(resolve, 300);
-            });
-        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -141,20 +138,32 @@ function startTour() {
                 classes: 'shepherd-button-primary'
             }
         ]
+    };
+
+    if (mobile) {
+        drawingStep.text = 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong> ' +
+            '<i class="fa-solid fa-location-dot"></i> ' +
+            'rechts, um Hinweise als Punkte, Linien oder Flächen hinzuzufügen.';
+    } else {
+        drawingStep.text = 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.';
+        drawingStep.attachTo = { element: '.leaflet-pm-toolbar', on: 'left' };
+        drawingStep.beforeShowPromise = function () {
+            return new Promise(function (resolve) {
+                sidebar.close();
+                setTimeout(resolve, 300);
             });
+        };
+    }
+
+    tour.addStep(drawingStep);
 
 
     // -----------------------------------------------------------------
     // Step 3: Address Search
     // -----------------------------------------------------------------
-    tour.addStep({
+    var searchStep = {
         id: 'address-search',
         title: '<i class="fa-solid fa-magnifying-glass"></i> Adresssuche',
-        text: 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.',
-        attachTo: {
-            element: '.leaflet-control-geocoder',
-            on: 'left'
-        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -167,20 +176,25 @@ function startTour() {
                 classes: 'shepherd-button-primary'
             }
         ]
-    });
+    };
+
+    if (mobile) {
+        searchStep.text = 'Verwenden Sie die <strong>Adresssuche</strong> ' +
+            '<i class="fa-solid fa-magnifying-glass"></i> rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.';
+    } else {
+        searchStep.text = 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.';
+        searchStep.attachTo = { element: '.leaflet-control-geocoder', on: 'left' };
+    }
+
+    tour.addStep(searchStep);
 
 
     // -----------------------------------------------------------------
     // Step 4: Layer Control
     // -----------------------------------------------------------------
-    tour.addStep({
+    var layerStep = {
         id: 'layer-control',
         title: '<i class="fa-solid fa-layer-group"></i> Kartenansicht',
-        text: 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.',
-        attachTo: {
-            element: '.leaflet-control-layers',
-            on: 'left'
-        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -193,26 +207,25 @@ function startTour() {
                 classes: 'shepherd-button-primary'
             }
         ]
-    });
+    };
+
+    if (mobile) {
+        layerStep.text = 'Wechseln Sie über das <strong>Layer-Symbol</strong> ' +
+            '<i class="fa-solid fa-layer-group"></i> oben rechts zwischen verschiedenen Hintergrundkarten und Satellitenbildern.';
+    } else {
+        layerStep.text = 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.';
+        layerStep.attachTo = { element: '.leaflet-control-layers', on: 'left' };
+    }
+
+    tour.addStep(layerStep);
 
 
     // -----------------------------------------------------------------
     // Step 5: Sidebar
     // -----------------------------------------------------------------
-    tour.addStep({
+    var sidebarStep = {
         id: 'sidebar',
         title: '<i class="fa-solid fa-bars"></i> Seitenleiste',
-        text: 'In der Seitenleiste finden Sie <strong>Hilfestellungen</strong>, <strong>Listenansichten</strong> und <strong>Neuigkeiten</strong>.',
-        attachTo: {
-            element: '#sidebar',
-            on: 'right'
-        },
-        beforeShowPromise: function () {
-            return new Promise(function (resolve) {
-                sidebar.open('tab-help');
-                setTimeout(resolve, 400);
-            });
-        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -220,12 +233,29 @@ function startTour() {
                 classes: 'shepherd-button-secondary'
             },
             {
-                text: 'Tutorial abschließen <i class="fa-solid fa-check"></i>',
+                text: 'Beenden <i class="fa-solid fa-check"></i>',
                 action: tour.next,
                 classes: 'shepherd-button-primary'
             }
         ]
+    };
+
+    if (mobile) {
+        sidebarStep.text = 'In der <strong>Seitenleiste</strong> ' +
+            '<i class="fa-solid fa-house"></i> ' +
+            'links finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.';
+    } else {
+        sidebarStep.text = 'In der <strong>Seitenleiste</strong> finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.';
+        sidebarStep.attachTo = { element: '#sidebar', on: 'right' };
+        sidebarStep.beforeShowPromise = function () {
+            return new Promise(function (resolve) {
+                sidebar.open('tab-help');
+                setTimeout(resolve, 400);
             });
+        };
+    }
+
+    tour.addStep(sidebarStep);
 
 
     // -----------------------------------------------------------------
@@ -234,11 +264,13 @@ function startTour() {
     tour.on('complete', function () {
         markOnboardingDone();
         onboardingStarted = false;
+        if (mobile) sidebar.close();
     });
 
     tour.on('cancel', function () {
         markOnboardingDone();
         onboardingStarted = false;
+        if (mobile) sidebar.close();
     });
 
     tour.start();