preserve height of streetmap section when load button is clicked and …

…notice disappears
entropia · Jun 23, 2023 · 2673e85 · 2673e85
1 parent 7f58628
commit 2673e85
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/public/index.html b/public/index.html
@@ -226,11 +226,13 @@ <h2>Anfahrt</h2>
             alt="Kartenansicht der Adresse: Steinstraße 23, 76133 Karlsruhe"
           >
         </div>
-        <div class="activate-map">
-          <span>
-            <button class="activate-map-trigger" aria-label="Karte laden">Karte laden</button>
-            Nach Klick auf diesen Button werden Inhalte von www.openstreetmap.org geladen. Die Datenschutzbestimmungen von OpenStreetMap sind <a href="https://wiki.osmfoundation.org/wiki/Privacy_Policy" target="_blank" rel="noreferrer noopener">hier</a> nachlesbar.
-          </span>
+        <div class="activate-map-placeholder">
+          <div class="activate-map">
+            <span>
+              <button class="activate-map-trigger" aria-label="Karte laden">Karte laden</button>
+              Nach Klick auf diesen Button werden Inhalte von www.openstreetmap.org geladen. Die Datenschutzbestimmungen von OpenStreetMap sind <a href="https://wiki.osmfoundation.org/wiki/Privacy_Policy" target="_blank" rel="noreferrer noopener">hier</a> nachlesbar.
+            </span>
+          </div>
         </div>
       </section>
 

diff --git a/public/res/css/elements/streetmap.css b/public/res/css/elements/streetmap.css
@@ -14,9 +14,13 @@
   display: none;
 }
 
+.activate-map-placeholder {
+  height: 40px;
+}
+
 .activate-map {
   background-color: var(--color-grey-1);
-  padding: 12px;
+  padding: 8px;
 }
 
 .activate-map span {
@@ -56,7 +60,7 @@
   display: none;
 }
 
-.streetmap.loaded + .activate-map {
+.streetmap.loaded + .activate-map-placeholder > .activate-map {
   display: none;
 }