Merged in feature/MAPG-35-further-mobile-layout-adaptations (pull request #18)

MAPG-35 further adaptations for mobile devices

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;
+        }
+    }
 }

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;