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

MAPG-125 use modal instead of custom box in map editor

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-14 02:31:09 +02:00
parent 171064816c
commit d1d9dede9c
3 changed files with 10 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,3 @@
#metadata {
position: absolute;
top: 50px;
left: 10px;
padding: 10px;
background-color: #eeeeee;
border: solid 1px #555555;
border-radius: 3px;
box-sizing: border-box;
opacity: 0.95;
z-index: 2;
visibility: hidden;
}
#map { #map {
width: 100%; width: 100%;
height: calc(100% - 40px); height: calc(100% - 40px);
@ -61,9 +47,6 @@
} }
@media screen and (max-width: 999px) and (min-height: 600px) { @media screen and (max-width: 999px) and (min-height: 600px) {
#metadata {
width: calc(100% - 155px);
}
#map.selected { #map.selected {
height: calc(50% - 20px); height: calc(50% - 20px);
} }
@ -79,12 +62,6 @@
} }
@media screen and (min-width: 1000px), (max-height: 599px) { @media screen and (min-width: 1000px), (max-height: 599px) {
#metadata {
width: calc(50% - 20px);
}
#metadata.selected {
top: 95px;
}
#map.selected { #map.selected {
width: 50%; width: 50%;
} }

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

@ -22,7 +22,7 @@
document.getElementById('mapName').innerHTML = form.elements.name.value ? form.elements.name.value : '[unnamed map]'; document.getElementById('mapName').innerHTML = form.elements.name.value ? form.elements.name.value : '[unnamed map]';
document.getElementById('metadata').style.visibility = 'hidden'; MapGuesser.hideModal();
document.getElementById('saveButton').disabled = false; document.getElementById('saveButton').disabled = false;
}, },
@ -109,7 +109,6 @@
return; return;
} }
document.getElementById('metadata').classList.add('selected');
document.getElementById('map').classList.add('selected'); document.getElementById('map').classList.add('selected');
document.getElementById('control').classList.add('selected'); document.getElementById('control').classList.add('selected');
document.getElementById('noPano').style.visibility = 'hidden'; document.getElementById('noPano').style.visibility = 'hidden';
@ -215,7 +214,6 @@
}, },
closePlace: function (del) { closePlace: function (del) {
document.getElementById('metadata').classList.remove('selected')
document.getElementById('map').classList.remove('selected'); document.getElementById('map').classList.remove('selected');
document.getElementById('control').classList.remove('selected'); document.getElementById('control').classList.remove('selected');
document.getElementById('noPano').style.visibility = 'hidden'; document.getElementById('noPano').style.visibility = 'hidden';
@ -413,14 +411,7 @@
document.getElementById('mapName').onclick = function (e) { document.getElementById('mapName').onclick = function (e) {
e.preventDefault(); e.preventDefault();
var metadata = document.getElementById('metadata'); MapGuesser.showModal('metadata');
if (metadata.style.visibility === 'visible') {
metadata.style.visibility = 'hidden';
} else {
metadata.style.visibility = 'visible';
document.getElementById('metadataForm').elements.name.select();
}
}; };
document.getElementById('metadataForm').onsubmit = function (e) { document.getElementById('metadataForm').onsubmit = function (e) {
@ -430,7 +421,7 @@
}; };
document.getElementById('closeMetadataButton').onclick = function () { document.getElementById('closeMetadataButton').onclick = function () {
document.getElementById('metadata').style.visibility = 'hidden'; MapGuesser.hideModal();
}; };
document.getElementById('saveButton').onclick = function () { document.getElementById('saveButton').onclick = function () {

13
views/admin/map_editor.php
View File

@ -22,7 +22,7 @@ $jsFiles = [
</a> </a>
</h1> </h1>
<p> <p>
<span class="bold"><a href="javascript:;" id="mapName"><?= $mapName ?></a></span><!-- <span class="bold"><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
--><span><!-- --><span><!--
<?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?> <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
--><svg class="inline" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> --><svg class="inline" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@ -50,13 +50,14 @@ $jsFiles = [
</p> </p>
</div> </div>
</div> </div>
<div id="metadata"> <div id="metadata" class="modal">
<form id="metadataForm"> <h2>Edit map data</h2>
<form id="metadataForm" class="marginTop">
<input class="fullWidth" type="text" name="name" value="<?= $mapName ?>" placeholder="Name of the map"> <input class="fullWidth" type="text" name="name" value="<?= $mapName ?>" placeholder="Name of the map">
<textarea class="fullWidth marginTop" name="description" rows="4" placeholder="Description of the map"><?= $mapDescription ?></textarea> <textarea class="fullWidth marginTop" name="description" rows="4" placeholder="Description of the map"><?= $mapDescription ?></textarea>
<div style="text-align: right;"> <div class="right">
<button id="closeMetadataButton" class="gray marginTop" type="button">Close</button> <button class="marginTop marginRight" type="submit">Apply</button><!--
<button class="marginTop" type="submit">Apply</button> --><button id="closeMetadataButton" class="gray marginTop" type="button">Close</button>
</div> </div>
</form> </form>
</div> </div>