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 1/3] 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>

From ba83f73c3125e8473a39e160d3debfa83bce3c23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sun, 14 Jun 2020 11:12:18 +0200
Subject: [PATCH 2/3] MAPG-137 add width and height to images where possible

---
 views/admin/map_editor.php      | 8 ++++----
 views/game.php                  | 2 +-
 views/templates/header.php      | 2 +-
 views/templates/main_header.php | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php
index 12c9a09..fcb92c1 100644
--- a/views/admin/map_editor.php
+++ b/views/admin/map_editor.php
@@ -17,7 +17,7 @@ $jsFiles = [
     <div class="grid">
         <h1>
             <a href="/maps" title="Back to playable maps">
-                <img class="inline" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
+                <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
                 <span>MapGuesser</span>
             </a>
         </h1>
@@ -25,7 +25,7 @@ $jsFiles = [
             <span class="bold"><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
          --><span><!--
                 <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
-             --><svg class="inline" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+             --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
                     <path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
                     <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
@@ -34,14 +34,14 @@ $jsFiles = [
          --></span><!--
          --><span><!--
                 <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
-             --><svg class="inline" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+             --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path d="M15.502 1.94a.5.5 0 0 1 0 .706a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>                    <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                 </svg>
                 <span id="edited" class="bold">0</span><!--
          --></span><!--
          --><span><!--
                 <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
-             --><svg class="inline" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+             --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3.5 8a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.5-.5z"/>
                     <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                 </svg>
diff --git a/views/game.php b/views/game.php
index ef1ef19..d31d7aa 100644
--- a/views/game.php
+++ b/views/game.php
@@ -12,7 +12,7 @@ $jsFiles = [
     <div class="grid">
         <h1>
             <a href="/maps" title="Back to playable maps">
-                <img class="inline" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
+                <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
                 <span>MapGuesser</span>
             </a>
         </h1>
diff --git a/views/templates/header.php b/views/templates/header.php
index b4998c8..62db163 100644
--- a/views/templates/header.php
+++ b/views/templates/header.php
@@ -1,7 +1,7 @@
 <div class="header">
     <h1>
         <a href="/" title="MapGuesser">
-            <img class="inline" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
+            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>">
             MapGuesser
         </a>
     </h1>
diff --git a/views/templates/main_header.php b/views/templates/main_header.php
index 6c2bb17..89b5a87 100644
--- a/views/templates/main_header.php
+++ b/views/templates/main_header.php
@@ -23,7 +23,7 @@
 </head>
 <body>
     <div id="loading">
-        <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>">
+        <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>" width="64" height="64">
     </div>
     <div id="cover"></div>
     <div id="modal" class="modal">

From f85340cd00e65dd60de9fe8c989589cd14a2275e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sun, 14 Jun 2020 11:21:07 +0200
Subject: [PATCH 3/3] MAPG-137 optimize png images (favicons)

---
 public/static/img/favicon/16x16.png   | 4 ++--
 public/static/img/favicon/192x192.png | 4 ++--
 public/static/img/favicon/32x32.png   | 4 ++--
 public/static/img/favicon/96x96.png   | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/public/static/img/favicon/16x16.png b/public/static/img/favicon/16x16.png
index 5600d45..bd8e153 100644
--- a/public/static/img/favicon/16x16.png
+++ b/public/static/img/favicon/16x16.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a294790b57f274ec8833d3abbdb8fd7e8e39b60cfa7ad27e01267dcbf0692b66
-size 713
+oid sha256:ab3b28bea449edcd46bbfc27ecc9f225e766d5415155baf6c56db61e72982442
+size 222
diff --git a/public/static/img/favicon/192x192.png b/public/static/img/favicon/192x192.png
index a80322c..acd9d13 100644
--- a/public/static/img/favicon/192x192.png
+++ b/public/static/img/favicon/192x192.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e74142bd65248bce22e250b3f5ee5a229a7fe7bed138cc9e9461f29ad4c75a76
-size 2018
+oid sha256:6c5150e497aa7fee05052b43239d2832d2424419f01d94702ffe0ffef6e79b18
+size 916
diff --git a/public/static/img/favicon/32x32.png b/public/static/img/favicon/32x32.png
index 22a91e1..cd1960c 100644
--- a/public/static/img/favicon/32x32.png
+++ b/public/static/img/favicon/32x32.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:36a1b35e1b197b2aafd347e82a8f4ccd99224f7b2e4d67f9077c53184098773c
-size 789
+oid sha256:6b4b2b215eb473caa80c83c12eeb5e340b461864925fffa4f13631b124ac8e41
+size 305
diff --git a/public/static/img/favicon/96x96.png b/public/static/img/favicon/96x96.png
index 47e0387..6f468a6 100644
--- a/public/static/img/favicon/96x96.png
+++ b/public/static/img/favicon/96x96.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8306b2942d75f1d864e53f77b623462729d91d61cc852df6ccee82961d56ee78
-size 1295
+oid sha256:46f5728de40e527e438a7c44cf849e42abfc6c597f69832d53ca0eb533fabcb8
+size 542