fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

beautify async form response in modals

Browse Source
This commit is contained in:
Felix Hamann 2019-03-10 15:22:29 +01:00
parent 6939b73802
commit 824a8e24e1
3 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/css/utils/asyncForm.scss
View File

@ -1,5 +1,26 @@
.async-form-response {
margin: 20px 0;
position: relative;
width: 100%;
font-size: 18px;
text-align: center;
}
.async-form-response--success {
padding-top: 60px;
}
.async-form-response--success::before {
content: '';
position: absolute;
top: 0px;
left: 50%;
display: block;
width: 17px;
height: 28px;
border: solid #000;
border-width: 0 5px 5px 0;
transform: translateX(-50%) rotate(45deg);
}
.async-form-loading {

11
static/css/utils/modal.scss
View File

@ -3,7 +3,7 @@
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.8, 0.8);
display: block;
display: flex;
background-color: rgba(255, 255, 255, 1);
min-width: 60vw;
min-height: 100px;
@ -26,10 +26,6 @@
z-index: 200;
transform: translate(-50%, -50%) scale(1, 1);
}
.modal__content {
margin: 20px 0;
}
}
@media (max-width: 1024px) {
@ -96,3 +92,8 @@
color: white;
}
}
.modal__content {
margin: 20px 0;
width: 100%;
}

16
static/js/utils/asyncForm.js
View File

@ -19,19 +19,27 @@
}
function processResponse(response) {
var responseElement = document.createElement('div');
responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS);
responseElement.innerHTML = response.content;
var responseElement = makeResponseElement(response.content, response.class);
var parentElement = formElement.parentElement;
// make sure there is a delay between click and response
var delay = Math.max(0, ASYNC_FORM_MIN_DELAY + lastRequestTimestamp - Date.now());
setTimeout(function() {
parentElement.insertBefore(responseElement, formElement);
formElement.remove();
}, delay);
}
function makeResponseElement(content, type) {
var responseElement = document.createElement('div');
type = type || 'info';
responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS);
responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS + '--' + type);
responseElement.innerHTML = content;
return responseElement;
}
function submitHandler(event) {
event.preventDefault();
@ -53,7 +61,7 @@
if (response.headers.get("content-type").indexOf("application/json") !== -1) {// checking response header
return response.json();
} else {
throw new TypeError('Response from "' + url + '" has unexpected Content-Type. Expected: "application/json". Received: "' + (response.headers.get("content-type") || '(undefined)') + '"');
throw new TypeError('Unexpected Content-Type. Expected Content-Type: "application/json". Requested URL:' + url + '"');
}
}).then(function(response) {
processResponse(response[0]);