popup on top for mobile

index.html

@@ -212,6 +212,10 @@
       content: "✖";
     }
 
+    .ol-overlay-container.ol-selectable {
+      z-index: 9999
+    }
+
     table,
     th,
     td {
@@ -444,7 +448,7 @@
     ]
 }
 </script>
-  <script type="module" crossorigin src="assets/index-DCEZREOk.js"></script>
+  <script type="module" crossorigin src="assets/index-Cn4pc5Hb.js"></script>
   <link rel="stylesheet" crossorigin href="assets/index-8qqDi7_8.css">
 </head>
 
@@ -500,6 +504,8 @@ <h4>Mit dieser Web-Anwendung könnt Ihr Metadaten über die Denkmäler der Stadt
       </p>
       <p>Deine Arbeiten stehen dann wieder allen unter freien Lizenzen zur Verfügung.</p>
 
+      <p>Die Anwendung ist nicht für kleine Mobilgeräte optimiert. In diesem Falle bitte einen Desktop Browser benutzen.
+      </p>
 
       <h2 id="hilfe_anker">Hilfe</h2>
       <h4>Auswahl der zu pflegenden Kategorien</h4>
@@ -856,12 +862,13 @@ <h4 id="data_privacy_statement_text12">Icons</h4>
     <div id="selectstory" class="modal_content">
       <h2 id="story_headline">"Erfolgs"geschichten</h2>
       <p> Kleine Geschichten, rund um das Projekt.</p>
-      <a class="blackdiv" href="#erstes3dmodell_anker">Mein erstes 3D Modell</a><br />
+      <!-- <a class="blackdiv" href="#erstes3dmodell_anker">Mein erstes 3D Modell</a><br /> -->
       <a class="blackdiv" href="#3dganzeinfach_anker">3D Modelle - inzwischen ganz einfach</a><br />
       <a class="blackdiv" href="#maerchen_anker">Warum heißt der Märchenbrunnen in Köln Mülheim eigentlich so?</a><br />
       <hr />
-      <h3 id="erstes3dmodell_anker">Mein erstes 3D Modell</h3>
+      <!--  <h3 id="erstes3dmodell_anker">Mein erstes 3D Modell</h3>
       <hr />
+    -->
       <h3 id="3dganzeinfach_anker">3D Modelle - inzwischen ganz einfach</h3>
       <p>War früher die Erstellung von 3D Modellen Expert*innen vorbehalten, lassen sich heute 3D Modelle mittels
         Smartphone Apps recht einfach erstellen.</p>

src/index.html

@@ -212,6 +212,10 @@
       content: "✖";
     }
 
+    .ol-overlay-container.ol-selectable {
+      z-index: 9999
+    }
+
     table,
     th,
     td {
@@ -498,6 +502,8 @@ <h4>Mit dieser Web-Anwendung könnt Ihr Metadaten über die Denkmäler der Stadt
       </p>
       <p>Deine Arbeiten stehen dann wieder allen unter freien Lizenzen zur Verfügung.</p>
 
+      <p>Die Anwendung ist nicht für kleine Mobilgeräte optimiert. In diesem Falle bitte einen Desktop Browser benutzen.
+      </p>
 
       <h2 id="hilfe_anker">Hilfe</h2>
       <h4>Auswahl der zu pflegenden Kategorien</h4>
@@ -854,12 +860,13 @@ <h4 id="data_privacy_statement_text12">Icons</h4>
     <div id="selectstory" class="modal_content">
       <h2 id="story_headline">"Erfolgs"geschichten</h2>
       <p> Kleine Geschichten, rund um das Projekt.</p>
-      <a class="blackdiv" href="#erstes3dmodell_anker">Mein erstes 3D Modell</a><br />
+      <!-- <a class="blackdiv" href="#erstes3dmodell_anker">Mein erstes 3D Modell</a><br /> -->
       <a class="blackdiv" href="#3dganzeinfach_anker">3D Modelle - inzwischen ganz einfach</a><br />
       <a class="blackdiv" href="#maerchen_anker">Warum heißt der Märchenbrunnen in Köln Mülheim eigentlich so?</a><br />
       <hr />
-      <h3 id="erstes3dmodell_anker">Mein erstes 3D Modell</h3>
+      <!--  <h3 id="erstes3dmodell_anker">Mein erstes 3D Modell</h3>
       <hr />
+    -->
       <h3 id="3dganzeinfach_anker">3D Modelle - inzwischen ganz einfach</h3>
       <p>War früher die Erstellung von 3D Modellen Expert*innen vorbehalten, lassen sich heute 3D Modelle mittels
         Smartphone Apps recht einfach erstellen.</p>

src/main.js

@@ -828,21 +828,27 @@ map.on("singleclick", function (evt) {
             if (fi.features[0].properties.model3d === 'nein') {
               content.innerHTML += '<p><strong>Leider noch kein 3D Modell vorhanden, erstelle doch bitte eins!<img onclick="zurAnleitung()" style="cursor: pointer;" src="images/help-svgrepo-white.svg" height="18" width="18"/></p>';
               content.innerHTML += '<button id=\"careDenkmal\"> Klar, da kümmere ich mich drum!</button></p>';
-
               document.getElementById("careDenkmal").addEventListener("click", careDenkmal);
             }
             if (fi.features[0].properties.model3d === 'work') {
               content.innerHTML += '<p><strong>Um das 3D Modell wird sich bereits gekümmert </strong></p>';
             }
             if (fi.features[0].properties.model3d === 'ja') {
               content.innerHTML += '<p><a target=\"_blank\"href=\"' + fi.features[0].properties.model3durl + '\">Link zum 3d Model </a></p>';
+            }
 
+            // close button 4 mobile
+            /*
+            if (window.matchMedia("(max-width: 700px)").matches) {
+              content.innerHTML += '<button id="popupCloserButton">✖</button>';
+              document.getElementById("popupCloserButton").addEventListener("click", closeFiViaButton);
             }
+            */
+
 
             if (fi.features[0].properties.wiki === 'ja') {
               content.innerHTML += '<br/><a target=\"_blank\"href=\"' + fi.features[0].properties.wikiurl + '\">Link zum Wikipedia Artikel </a>';
             }
-
             overlay.setPosition(coordinate);
           }
         });
@@ -871,7 +877,9 @@ function careDenkmal() {
         var res = JSON.parse(this.response);
         if (res.request === 'done') {
           alert('Danke für´s Kümmern!\n ')
-          wmsLayerSource.refresh();
+          wmsLayerSource.updateParams({
+            'update': Math.random()
+          });
         } else {
           alert("Leider ist etwas schief gelaufen.");
         }
@@ -1158,6 +1166,13 @@ function deleteDenkmal() {
   }
 }
 
+function closeFiViaButton() {
+  overlay.setPosition(undefined);
+  closer.blur();
+  return false;
+};
+
+
 // help
 document.getElementById("helpIcon").addEventListener("click", help);