fraport/fradrive-old
Archived
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 { .async-form-response {
margin: 20px 0; 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 { .async-form-loading {

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

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

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

@ -19,19 +19,27 @@
} }
function processResponse(response) { function processResponse(response) {
var responseElement = document.createElement('div'); var responseElement = makeResponseElement(response.content, response.class);
responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS);
responseElement.innerHTML = response.content;
var parentElement = formElement.parentElement; var parentElement = formElement.parentElement;
// make sure there is a delay between click and response // make sure there is a delay between click and response
var delay = Math.max(0, ASYNC_FORM_MIN_DELAY + lastRequestTimestamp - Date.now()); var delay = Math.max(0, ASYNC_FORM_MIN_DELAY + lastRequestTimestamp - Date.now());
setTimeout(function() { setTimeout(function() {
parentElement.insertBefore(responseElement, formElement); parentElement.insertBefore(responseElement, formElement);
formElement.remove(); formElement.remove();
}, delay); }, 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) { function submitHandler(event) {
event.preventDefault(); event.preventDefault();
@ -53,7 +61,7 @@
if (response.headers.get("content-type").indexOf("application/json") !== -1) {// checking response header if (response.headers.get("content-type").indexOf("application/json") !== -1) {// checking response header
return response.json(); return response.json();
} else { } 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) { }).then(function(response) {
processResponse(response[0]); processResponse(response[0]);