esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

MAPG-35 further adaptations for mobile devices

Browse Source 
implicitely fix issue MAPG-17
This commit is contained in:
Bence Pőcze 2020-05-21 03:24:09 +02:00
parent b4615c2cdd
commit f0344bfc6c
2 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/static/css/mapguesser.css
View File

@ -194,15 +194,22 @@ div.buttonContainer.bottom {
} }
#guess { #guess {
width: 500px;
height: 350px;
opacity: 0.95;
}
#guess.adapt {
top: initial;
width: 250px; width: 250px;
height: 150px; height: 175px;
opacity: 0.5; opacity: 0.5;
transition-property: width, height, opacity; transition-property: width, height, opacity;
transition-duration: 0.1s; transition-duration: 0.1s;
transition-delay: 0.8s; transition-delay: 0.8s;
} }
#guess:hover { #guess.adapt:hover {
width: 500px; width: 500px;
height: 350px; height: 350px;
opacity: 0.95; opacity: 0.95;
@ -227,4 +234,16 @@ div.buttonContainer.bottom {
#scoreBarBase { #scoreBarBase {
width: 60%; width: 60%;
} }
@media screen and (max-height: 389px) {
#guess {
top: 20px;
height: initial;
}
#guess.adapt:hover {
top: 20px;
height: initial;
}
}
} }

13
public/static/js/mapguesser.js
View File

@ -4,6 +4,7 @@
realPosition: null, realPosition: null,
panorama: null, panorama: null,
adaptGuess: false,
guessMap: null, guessMap: null,
guessMarker: null, guessMarker: null,
resultMap: null, resultMap: null,
@ -37,6 +38,10 @@
document.getElementById('loading').style.visibility = 'hidden'; document.getElementById('loading').style.visibility = 'hidden';
if (Core.adaptGuess) {
document.getElementById('guess').classList.add('adapt');
}
Core.panorama.setVisible(true); Core.panorama.setVisible(true);
Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 0 }); Core.panorama.setPov({ heading: 0, pitch: 0, zoom: 0 });
Core.panorama.setPano(data.location.pano); 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'), { Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
disableDefaultUI: true, disableDefaultUI: true,
clickableIcons: false, clickableIcons: false,
@ -248,6 +257,10 @@
Core.resultMarkers.guess.setMap(null); Core.resultMarkers.guess.setMap(null);
Core.resultMarkers.guess = null; Core.resultMarkers.guess = null;
if (Core.adaptGuess) {
document.getElementById('guess').classList.remove('adapt');
}
document.getElementById('showGuessButton').style.visibility = null; document.getElementById('showGuessButton').style.visibility = null;
document.getElementById('guess').style.visibility = null; document.getElementById('guess').style.visibility = null;
document.getElementById('result').style.visibility = null; document.getElementById('result').style.visibility = null;