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;
}
#map.selected {
height: calc(50% - 25px);
}
#panorama {
width: 100%;
height: calc(50% - 25px);
display: none;
position: absolute;
z-index: 1;
visibility: hidden;
}
#noPano {
display: flex;
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: calc(50% - 25px);
z-index: 2;
visibility: hidden;
background: #cccccc;
@ -33,17 +24,53 @@
#control {
position: absolute;
right: 10px;
top: 60px;
width: 125px;
z-index: 3;
}
#placeControl {
position: absolute;
right: 10px;
top: calc(50% + 35px);
width: 100px;
z-index: 3;
width: 100px;
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,
selectedMarker: null,
getPlace: function(placeId) {
getPlace: function (placeId) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onload = function () {
@ -33,8 +33,9 @@
document.getElementById('loading').style.visibility = 'visible';
document.getElementById('map').classList.add('selected');
document.getElementById('control').classList.add('selected');
document.getElementById('noPano').style.visibility = 'hidden';
document.getElementById('panorama').style.display = 'block';
document.getElementById('panorama').style.visibility = 'visible';
document.getElementById('placeControl').style.visibility = 'visible';
MapEditor.resetSelected();
@ -109,8 +110,9 @@
document.getElementById('cancelButton').onclick = function () {
document.getElementById('map').classList.remove('selected');
document.getElementById('control').classList.remove('selected');
document.getElementById('noPano').style.visibility = 'hidden';
document.getElementById('panorama').style.display = 'none';
document.getElementById('panorama').style.visibility = 'hidden';
document.getElementById('placeControl').style.visibility = 'hidden';
MapEditor.resetSelected();