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

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

@ -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;