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

integrate api changes in FE

Browse Source
This commit is contained in:
Felix Hamann 2019-03-10 16:15:34 +01:00
parent 101822fd21
commit 24df9cb93e
2 changed files with 58 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,25 +4,73 @@
width: 100%;
font-size: 18px;
text-align: center;
}
.async-form-response--success {
padding-top: 60px;
}
.async-form-response--success::before {
content: '';
.async-form-response::before,
.async-form-response::after {
position: absolute;
top: 0px;
left: 50%;
display: block;
}
.async-form-response--success::before {
content: '';
width: 17px;
height: 28px;
border: solid #000;
border: solid #069e04;
border-width: 0 5px 5px 0;
transform: translateX(-50%) rotate(45deg);
}
.async-form-response--info::before {
content: '';
width: 5px;
height: 30px;
top: 10px;
background-color: #777;
transform: translateX(-50%);
}
.async-form-response--info::after {
content: '';
width: 5px;
height: 5px;
background-color: #777;
transform: translateX(-50%);
}
.async-form-response--warning::before {
content: '';
width: 5px;
height: 30px;
background-color: rgb(255, 187, 0);
transform: translateX(-50%);
}
.async-form-response--warning::after {
content: '';
width: 5px;
height: 5px;
top: 35px;
background-color: rgb(255, 187, 0);
transform: translateX(-50%);
}
.async-form-response--error::before {
content: '';
width: 5px;
height: 40px;
background-color: #940d0d;
transform: translateX(-50%) rotate(-45deg);
}
.async-form-response--error::after {
content: '';
width: 5px;
height: 40px;
background-color: #940d0d;
transform: translateX(-50%) rotate(45deg);
}
.async-form-loading {
opacity: 0.1;
transition: opacity 800ms ease-out;

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

@ -19,7 +19,7 @@
}
function processResponse(response) {
var responseElement = makeResponseElement(response.content, response.class);
var responseElement = makeResponseElement(response.content, response.status);
var parentElement = formElement.parentElement;
// make sure there is a delay between click and response
@ -31,11 +31,11 @@
}, delay);
}
function makeResponseElement(content, type) {
function makeResponseElement(content, status) {
var responseElement = document.createElement('div');
type = type || 'info';
status = status || 'info';
responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS);
responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS + '--' + type);
responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS + '--' + status);
responseElement.innerHTML = content;
return responseElement;
}