fraport/fradrive-old
Archived
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%; width: 100%;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
}
.async-form-response--success {
padding-top: 60px; padding-top: 60px;
} }
.async-form-response--success::before { .async-form-response::before,
content: ''; .async-form-response::after {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 50%; left: 50%;
display: block; display: block;
}
.async-form-response--success::before {
content: '';
width: 17px; width: 17px;
height: 28px; height: 28px;
border: solid #000; border: solid #069e04;
border-width: 0 5px 5px 0; border-width: 0 5px 5px 0;
transform: translateX(-50%) rotate(45deg); 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 { .async-form-loading {
opacity: 0.1; opacity: 0.1;
transition: opacity 800ms ease-out; transition: opacity 800ms ease-out;

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

@ -19,7 +19,7 @@
} }
function processResponse(response) { function processResponse(response) {
var responseElement = makeResponseElement(response.content, response.class); var responseElement = makeResponseElement(response.content, response.status);
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
@ -31,11 +31,11 @@
}, delay); }, delay);
} }
function makeResponseElement(content, type) { function makeResponseElement(content, status) {
var responseElement = document.createElement('div'); 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);
responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS + '--' + type); responseElement.classList.add(ASYNC_FORM_RESPONSE_CLASS + '--' + status);
responseElement.innerHTML = content; responseElement.innerHTML = content;
return responseElement; return responseElement;
} }