[EDIT] - Steps

Author: KoberSascha

herkunftcheck/herkunftcheck2/index.html

@@ -279,10 +279,10 @@ <h1 class="product-name text-left" id="product-step-name">Produktionsschritt</h1
 
       <section class="projects">
         <div class="card-grid mt-2">
-          <div class="project-card light info">
+          <div class="w-100 info">
             <div class="row d-flex align-items-stretch">
-              <div class="col-6">
-
+              <div class="col-5 pt-4 pb-4 pe-0">
+                <div class="project-card light info info-card-border-radius-right-0">
                 <h4>Info</h4>
                 <div class="content">
 
@@ -319,8 +319,9 @@ <h4>Info</h4>
                   </div>
                 </div>
               </div>
+              </div>
 
-              <div class="col-6">
+              <div class="col-7 ps-0">
                 <div id="product-step-image-container"
                   class="info-card p-0 m-0 w-100 product-image-container shadow-none"
                   style="background-image: url('https://smartfarminglab.github.io/data/flasche_stock.jpg');">
@@ -337,7 +338,7 @@ <h2 class="section-heading" id="step-description">
           </h2>
         </div>
 
-        <div class="card-grid mt-2" id="step-entries">
+        <div class="card-grid mt-4" id="step-entries">
 
         </div>
 
@@ -371,6 +372,12 @@ <h2 class="section-heading" id="step-description">
 
     function toggleStepSheet() {
       sheetStep.classList.toggle("open");
+
+
+        if(!sheetStep.classList.contains("open")){
+          removePulse();
+        }
+
     }
 
     /*  sheet.addEventListener("touchstart", e => {
@@ -408,7 +415,9 @@ <h2 class="section-heading" id="step-description">
 
 
 
-    function showSidebarWithStep(step) {
+    function showSidebarWithStep(e, step) {
+
+      console.log(e);
 
       sheetStep.classList.add("open");
 
@@ -443,14 +452,10 @@ <h2 class="section-heading" id="step-description">
 
 <div class="project-card green info" onclick="toogleStepEntry(${index + 1})" id="step-entry-${index + 1}-container">
   <div class="project-title">Eintrag ${index + 1}</div>
-  <div class="content">
-    
-    <div class="toggle-button" style="cursor:pointer;">Hier klicken für mehr Informationen</div>
-    
-    <div class="extra-info hidden" id="step-entry-${index + 1}">
-  
-
-    <div>
+          <div class="content">    
+          <div class="toggle-button" style="cursor:pointer;">Hier klicken für mehr Informationen</div>    
+          <div class="extra-info hidden" id="step-entry-${index + 1}">  
+          <div>
                          <div class="label">
                       <div class="logo-icon">
                         <svg xmlns="http://www.w3.org/2000/svg"
@@ -463,7 +468,7 @@ <h2 class="section-heading" id="step-description">
 
                          <span>Beschreibung</span>
                     </div>
-                    <span>${entry.description || "-"}</span>
+                                        <span>${entry.description || "-"}</span>
 
                   
                
@@ -488,7 +493,11 @@ <h2 class="section-heading" id="step-description">
           entriesContainer.insertAdjacentHTML("beforeend", entryHtml);
         });
       } else {
-        entriesContainer.innerHTML = "<p>Keine Einträge vorhanden.</p>";
+        entriesContainer.innerHTML = ` <div class="project-card green">
+              <div class="project-title">Eintrag</div>
+              <p class="content">Keine Einträge vorhanden</p>
+
+            </div>`;
       }
 
     }

herkunftcheck/herkunftcheck2/script/map_1.1.6.js

@@ -1,3 +1,5 @@
+const markers = [];
+
 function InitializeMapAndData() {
 
 
@@ -33,7 +35,7 @@ function InitializeMapAndData() {
 
     // Create bounds object
     var bounds = L.latLngBounds();
-
+   
     // Fetch and process product batch steps
     fetch("https://smartfarminglab.github.io/data/productpassport.json")
         .then(response => {
@@ -137,8 +139,25 @@ function InitializeMapAndData() {
                             popupAnchor: [0, -10]
                         })
                     }).on('click', function (e) {
-                        showSidebarWithStep(step);
-                    });//.addTo(map)
+
+                        markers.forEach(m => {
+                            const el = m.getElement();
+                            if (el) el.classList.remove('pulse');
+                        });
+                
+                        // Step 3: Add 'pulse' to clicked marker
+                        const el = marker.getElement();
+                        if (el) el.classList.add('pulse');
+
+                        showSidebarWithStep(e, step);
+                    });
+                    
+                    
+                    markers.push(marker);
+                    
+                    
+                    
+                    //.addTo(map)
                     //.bindPopup(`<b>${step.name}</b><br>${step.address.name}, ${step.address.city}`);
 
 
@@ -253,4 +272,12 @@ function InitializeMapAndData() {
         })
         .catch(error => console.error("Error loading data:", error));
 
+}
+
+
+function removePulse(){
+    markers.forEach(m => {
+        const el = m.getElement();
+        if (el) el.classList.remove('pulse');
+    });
 }

herkunftcheck/herkunftcheck2/style/style_v1.2.1.css

@@ -203,6 +203,12 @@ body {
   margin: 6px 0;
 }
 
+.info-card-border-radius-right-0{
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+
+}
+
 .steps-list {
   list-style-type: none;
   padding: 0;
@@ -577,4 +583,19 @@ display: flex;
 }
 .expanded-container .toggle-button{
   max-height: 0;
+}
+
+
+
+.pulse {
+  animation: pulse-animation 2s infinite;
+}
+
+@keyframes pulse-animation {
+  0% {
+    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
+  }
+  100% {
+    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
+  }
 }