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

MAPG-107 adapt map editor splitting to screen size

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-02 21:49:37 +02:00
parent 7f8e0fefa9
commit 6acb19ba36
2 changed files with 48 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
public/static/css/map_editor.css
View File

@ -4,24 +4,15 @@
z-index: 1; z-index: 1;
} }
#map.selected {
height: calc(50% - 25px);
}
#panorama { #panorama {
width: 100%; position: absolute;
height: calc(50% - 25px);
display: none;
z-index: 1; z-index: 1;
visibility: hidden;
} }
#noPano { #noPano {
display: flex; display: flex;
position: absolute; position: absolute;
left: 0;
bottom: 0;
right: 0;
height: calc(50% - 25px);
z-index: 2; z-index: 2;
visibility: hidden; visibility: hidden;
background: #cccccc; background: #cccccc;
@ -33,17 +24,53 @@
#control { #control {
position: absolute; position: absolute;
right: 10px;
top: 60px;
width: 125px; width: 125px;
z-index: 3; z-index: 3;
} }
#placeControl { #placeControl {
position: absolute; position: absolute;
right: 10px;
top: calc(50% + 35px);
width: 100px;
z-index: 3; z-index: 3;
width: 100px;
visibility: hidden; visibility: hidden;
} }
@media screen and (max-width: 999px) and (min-height: 600px) {
#map.selected {
height: calc(50% - 25px);
}
#panorama, #noPano {
left: 0;
bottom: 0;
right: 0;
height: calc(50% - 25px);
}
#control {
right: 10px;
top: 60px;
}
#placeControl {
right: 10px;
top: calc(50% + 35px);
}
}
@media screen and (min-width: 1000px), (max-height: 599px) {
#map.selected {
width: 50%;
}
#panorama, #noPano {
top: 50px;
bottom: 0;
right: 0;
width: 50%;
}
#control, #placeControl {
right: 10px;
top: 60px;
}
#control.selected {
right: calc(50% + 10px);
top: 60px;
}
}

8
public/static/js/map_editor.js
View File

@ -4,7 +4,7 @@
panorama: null, panorama: null,
selectedMarker: null, selectedMarker: null,
getPlace: function(placeId) { getPlace: function (placeId) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.responseType = 'json'; xhr.responseType = 'json';
xhr.onload = function () { xhr.onload = function () {
@ -33,8 +33,9 @@
document.getElementById('loading').style.visibility = 'visible'; document.getElementById('loading').style.visibility = 'visible';
document.getElementById('map').classList.add('selected'); document.getElementById('map').classList.add('selected');
document.getElementById('control').classList.add('selected');
document.getElementById('noPano').style.visibility = 'hidden'; document.getElementById('noPano').style.visibility = 'hidden';
document.getElementById('panorama').style.display = 'block'; document.getElementById('panorama').style.visibility = 'visible';
document.getElementById('placeControl').style.visibility = 'visible'; document.getElementById('placeControl').style.visibility = 'visible';
MapEditor.resetSelected(); MapEditor.resetSelected();
@ -109,8 +110,9 @@
document.getElementById('cancelButton').onclick = function () { document.getElementById('cancelButton').onclick = function () {
document.getElementById('map').classList.remove('selected'); document.getElementById('map').classList.remove('selected');
document.getElementById('control').classList.remove('selected');
document.getElementById('noPano').style.visibility = 'hidden'; document.getElementById('noPano').style.visibility = 'hidden';
document.getElementById('panorama').style.display = 'none'; document.getElementById('panorama').style.visibility = 'hidden';
document.getElementById('placeControl').style.visibility = 'hidden'; document.getElementById('placeControl').style.visibility = 'hidden';
MapEditor.resetSelected(); MapEditor.resetSelected();