serv/surwiki
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Better styling of popup dialog

Browse source
This commit is contained in:
Magnus Hoff 2017-12-01 16:22:36 +01:00
parent 5ce9b37ab0
commit 578d525e25
2 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/script.js
View file

@ -21,7 +21,7 @@ function isEdited(form) {
} }
function loginDialog(loginUrl) { function loginDialog(loginUrl) {
const loginDialogHtml = "<div class=popup><p>Your changes could not be saved</p><p>Log in and try again</p><div><button>Never mind</button> <a href='' target=login>Open login page</a></div></div>"; const loginDialogHtml = "<div class=popup><div class=message><p>Your changes could not be saved</p><p>Log in and try again</p></div><div class=btn-row><button>Never mind</button> <a href='' target=login>Open login page</a></div></div>";
const dialog = document.createElement("div"); const dialog = document.createElement("div");
dialog.className = "modal-block"; dialog.className = "modal-block";

30
assets/style.css
View file

@ -438,22 +438,40 @@ input[type="search"] {
top: 0; top: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
} }
.popup { .popup {
position: fixed; display: flex;
flex-direction: column;
width: 300px; height: 200px;
left: calc(50% - 150px);
height: 150px;
top: calc(50% - 75px);
text-align: center; text-align: center;
background: #eee; background: #eee;
box-shadow: 2px 2px 8px rgba(0,0,0, 0.25); box-shadow: 2px 2px 8px rgba(0,0,0, 0.25);
} }
.popup>.message {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 16px 32px;
max-width: 600px;
}
.popup>.btn-row {
padding: 16px;
background: #ccc;
}
@media print { @media print {
@page { @page {
margin: 25mm; margin: 25mm;