From f0344bfc6ca1295a75b14b887a877f445ce23113 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Thu, 21 May 2020 03:24:09 +0200
Subject: [PATCH] MAPG-35 further adaptations for mobile devices implicitely
 fix issue MAPG-17

---
 public/static/css/mapguesser.css | 23 +++++++++++++++++++++--
 public/static/js/mapguesser.js   | 13 +++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css
index be56808..c93a739 100644
--- a/public/static/css/mapguesser.css
+++ b/public/static/css/mapguesser.css
@@ -194,15 +194,22 @@ div.buttonContainer.bottom {
     }
 
     #guess {
+        width: 500px;
+        height: 350px;
+        opacity: 0.95;
+    }
+
+    #guess.adapt {
+        top: initial;
         width: 250px;
-        height: 150px;
+        height: 175px;
         opacity: 0.5;
         transition-property: width, height, opacity;
         transition-duration: 0.1s;
         transition-delay: 0.8s;
     }
 
-    #guess:hover {
+    #guess.adapt:hover {
         width: 500px;
         height: 350px;
         opacity: 0.95;
@@ -227,4 +234,16 @@ div.buttonContainer.bottom {
     #scoreBarBase {
         width: 60%;
     }
+
+     @media screen and (max-height: 389px) {
+        #guess {
+            top: 20px;
+            height: initial;
+        }
+
+        #guess.adapt:hover {
+            top: 20px;
+            height: initial;
+        }
+    }
 }
diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js
index 1da83ee..b45208a 100644
--- a/public/static/js/mapguesser.js
+++ b/public/static/js/mapguesser.js
@@ -4,6 +4,7 @@
 
         realPosition: null,
         panorama: null,
+        adaptGuess: false,
         guessMap: null,
         guessMarker: null,
         resultMap: null,
@@ -37,6 +38,10 @@
 
             document.getElementById('loading').style.visibility = 'hidden';
 
+            if (Core.adaptGuess) {
+                document.getElementById('guess').classList.add('adapt');
+            }
+
             Core.panorama.setVisible(true);
             Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 0 });
             Core.panorama.setPano(data.location.pano);
@@ -120,6 +125,10 @@
         }
     };
 
+    if (!('ontouchstart' in document.documentElement)) {
+        Core.adaptGuess = true;
+    }
+
     Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
         disableDefaultUI: true,
         clickableIcons: false,
@@ -248,6 +257,10 @@
         Core.resultMarkers.guess.setMap(null);
         Core.resultMarkers.guess = null;
 
+        if (Core.adaptGuess) {
+            document.getElementById('guess').classList.remove('adapt');
+        }
+
         document.getElementById('showGuessButton').style.visibility = null;
         document.getElementById('guess').style.visibility = null;
         document.getElementById('result').style.visibility = null;