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

MAPG-125 add modal design

Browse Source
This commit is contained in:
Bence Pőcze 2020-06-14 02:30:15 +02:00
parent f8bb7bd092
commit 171064816c
3 changed files with 122 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,10 +89,18 @@ sub {
margin-top: 10px; margin-top: 10px;
} }
.marginLeft {
margin-left: 10px;
}
.marginBottom { .marginBottom {
margin-bottom: 10px; margin-bottom: 10px;
} }
.marginRight {
margin-right: 10px;
}
.right { .right {
text-align: right; text-align: right;
} }
@ -230,6 +238,29 @@ input.big:focus, select.big:focus, textarea.big:focus {
padding: 4px; padding: 4px;
} }
div.modal {
position: fixed;
top: 100px;
background-color: #ffffff;
border-radius: 3px;
padding: 20px;
box-sizing: border-box;
z-index: 3;
visibility: hidden;
}
#cover {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #000000;
opacity: 0.5;
z-index: 2;
visibility: hidden;
}
p.formError { p.formError {
color: #7f2929; color: #7f2929;
font-weight: 500; font-weight: 500;
@ -313,7 +344,19 @@ div.box {
padding: 0; padding: 0;
width: 100%; width: 100%;
} }
div.modal {
left: 20px;
right: 20px;
}
div.box { div.box {
width: initial; width: initial;
} }
} }
@media screen and (min-width: 600px) {
div.modal {
width: 540px;
left: 50%;
margin-left: -270px;
}
}

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

@ -18,6 +18,75 @@ var MapGuesser = {
} else { } else {
xhr.send(); xhr.send();
} }
},
showModal: function (id) {
document.getElementById(id).style.visibility = 'visible';
document.getElementById('cover').style.visibility = 'visible';
},
showModalWithContent: function (title, body, extraButtons) {
if (typeof extraButtons === 'undefined') {
extraButtons = [];
}
MapGuesser.showModal('modal');
document.getElementById('modalTitle').textContent = title;
if (typeof body === 'object') {
document.getElementById('modalText').appendChild(body);
} else {
document.getElementById('modalText').textContent = body;
}
var buttons = document.getElementById('modalButtons');
buttons.textContent = '';
for (extraButton of extraButtons) {
var button = document.createElement(extraButton.type);
if (extraButton.type === 'a') {
button.classList.add('button');
}
for (className of extraButton.classNames) {
button.classList.add(className);
}
button.classList.add('marginTop');
button.classList.add('marginRight');
button.textContent = extraButton.text;
if (extraButton.type === 'a') {
button.href = extraButton.href;
} else if (extraButton.type === 'button') {
button.onclick = extraButton.onclick;
}
buttons.appendChild(button);
}
var closeButton = document.createElement('button');
closeButton.classList.add('gray');
closeButton.classList.add('marginTop');
closeButton.textContent = 'Cancel';
closeButton.onclick = function () {
MapGuesser.hideModal();
};
buttons.appendChild(closeButton);
},
hideModal: function () {
var modals = document.getElementsByClassName('modal');
for (modal of modals) {
modal.style.visibility = 'hidden';
}
document.getElementById('cover').style.visibility = 'hidden';
} }
}; };
@ -31,4 +100,8 @@ var MapGuesser = {
} }
} }
} }
document.getElementById('cover').onclick = function () {
MapGuesser.hideModal();
};
})(); })();

6
views/templates/main_header.php
View File

@ -24,4 +24,10 @@
<body> <body>
<div id="loading"> <div id="loading">
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>"> <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/loading.svg?rev=<?= REVISION ?>">
</div>
<div id="cover"></div>
<div id="modal" class="modal">
<h2 id="modalTitle"></h2>
<p id="modalText" class="marginTop"></p>
<div id="modalButtons" class="right"></div>
</div> </div>