From 86f05f773836134c7943841af5d14180a8445bac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sun, 14 Jun 2020 11:11:37 +0200
Subject: [PATCH] MAPG-137 place static maps into container to avoid large
 layout shifts

---
 public/static/css/maps.css | 9 ++++++++-
 views/maps.php             | 4 +++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/public/static/css/maps.css b/public/static/css/maps.css
index c239535..7d51384 100644
--- a/public/static/css/maps.css
+++ b/public/static/css/maps.css
@@ -26,8 +26,15 @@ div.mapItem>div.title>p.title {
     font-size: 18px;
 }
 
-div.mapItem>img {
+div.mapItem>div.imgContainer {
     width: 100%;
+    padding-top: 50%;
+    background: #cccccc;
+}
+
+div.mapItem>div.imgContainer>img {
+    width: 100%;
+    margin-top: -50%
 }
 
 div.mapItem>div.inner {
diff --git a/views/maps.php b/views/maps.php
index 9740011..b7ee6ef 100644
--- a/views/maps.php
+++ b/views/maps.php
@@ -13,7 +13,9 @@ $cssFiles = [
                 <div class="title">
                     <p class="title"><?= $map['name'] ?></p>
                 </div>
-                <img src="https://maps.googleapis.com/maps/api/staticmap?size=350x175&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>">
+                <div class="imgContainer">
+                    <img src="https://maps.googleapis.com/maps/api/staticmap?size=350x175&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>" alt="Map area">
+                </div>
                 <div class="inner">
                     <div class="info">
                         <p>