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;