From b9a36e5ccf63fc2c20f5f5d6473b77587a308e8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sat, 30 May 2020 19:11:38 +0200
Subject: [PATCH] MAPG-85 make static map's width mobile friendly further style
 improvements on map selection page

---
 public/static/css/mapguesser.css | 23 ++++++++++++++++-------
 views/maps.php                   |  2 +-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css
index b4b3c0e..56b0f59 100644
--- a/public/static/css/mapguesser.css
+++ b/public/static/css/mapguesser.css
@@ -47,7 +47,6 @@ p {
 
 img {
     display: block;
-    max-width: 100%;
 }
 
 .mono {
@@ -136,7 +135,7 @@ div.header {
     color: white;
 }
 
-div.header > div.grid {
+div.header>div.grid {
     display: grid;
     grid-template-columns: auto auto;
 }
@@ -163,7 +162,7 @@ div.mapContainer {
 }
 
 div.mapItem {
-    width: 375px;
+    width: 350px;
     background-color: #eeeeee;
     border-radius: 3px;
     margin: 10px auto;
@@ -182,6 +181,10 @@ div.mapItem>div.title>p.title {
     font-size: 18px;
 }
 
+div.mapItem>img {
+    width: 100%;
+}
+
 div.mapItem>div.inner {
     padding: 8px;
 }
@@ -306,30 +309,36 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
     display: none;
 }
 
-@media screen and (min-width: 1600px) {
+@media screen and (min-width: 1504px) {
     div.mapContainer {
         grid-template-columns: auto auto auto auto;
     }
 }
 
-@media screen and (min-width: 1200px) and (max-width: 1599px) {
+@media screen and (min-width: 1134px) and (max-width: 1503px) {
     div.mapContainer {
         grid-template-columns: auto auto auto;
     }
 }
 
-@media screen and (min-width: 800px) and (max-width: 1199px) {
+@media screen and (min-width: 764px) and (max-width: 1133px) {
     div.mapContainer {
         grid-template-columns: auto auto;
     }
 }
 
-@media screen and (max-width: 799px) {
+@media screen and (max-width: 763px) {
     div.mapContainer {
         grid-template-columns: auto;
     }
 }
 
+@media screen and (max-width: 374px) {
+    div.mapItem {
+        width: initial;
+    }
+}
+
 @media screen and (max-width: 599px) {
     div.header.small h1 span {
         display: none;
diff --git a/views/maps.php b/views/maps.php
index 074420e..4aaf4a9 100644
--- a/views/maps.php
+++ b/views/maps.php
@@ -25,7 +25,7 @@
                     <div class="title">
                         <p class="title"><?= $map['name'] ?></p>
                     </div>
-                    <img src="https://maps.googleapis.com/maps/api/staticmap?size=375x200&visible=<?= $map['bound_south_lat'] . ',' . $map['bound_west_lng'] . '|' . $map['bound_north_lat'] . ',' . $map['bound_east_lng'] ?>&key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>" width="375" height="200">
+                    <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="inner">
                         <div class="info">
                             <p>