Integrating new overlay mechanics with login view.
Removed login.ejs-specific overlay. Removed blur transition and reduced overlay fade from 500ms to 250ms. Minor modification to the overlay css.pull/1/head
Daniel Scalzi
parent
5335e0124b
commit
9b63d9bb58
|
|
@ -13,8 +13,6 @@
|
|||
#main {
|
||||
height: calc(100% - 22px);
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
will-change: filter;
|
||||
transition: filter 0.5s ease;
|
||||
}
|
||||
#main[overlay] {
|
||||
filter: blur(3px) contrast(0.9) brightness(1.0);
|
||||
|
|
|
|||
|
|
@ -706,78 +706,6 @@ p {
|
|||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* * *
|
||||
* Login View | Error Overlay
|
||||
* * */
|
||||
|
||||
#loginErrorContainer {
|
||||
position: absolute;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.50);
|
||||
}
|
||||
|
||||
/*#loginContainer[error] > #loginErrorContainer {
|
||||
display: flex;
|
||||
}*/
|
||||
|
||||
#loginContainer[error] > div:not(#loginErrorContainer) {
|
||||
filter: blur(3px) contrast(0.9) brightness(1.0);
|
||||
}
|
||||
|
||||
#loginErrorContent {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 300px;
|
||||
height: 35%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 0px;
|
||||
/* background-color: #424242; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#loginErrorTitle {
|
||||
font-family: 'Avenir Medium';
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
#loginErrorDesc {
|
||||
font-family: 'Avenir Book';
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#loginErrorAcknowledge {
|
||||
background: none;
|
||||
border: 1px solid #ffffff;
|
||||
color: white;
|
||||
font-family: 'Avenir Medium';
|
||||
font-weight: bold;
|
||||
border-radius: 2px;
|
||||
width: 75px;
|
||||
cursor: pointer;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
#loginErrorAcknowledge:hover,
|
||||
#loginErrorAcknowledge:focus {
|
||||
box-shadow: 0px 0px 10px 0px #fff;
|
||||
outline: none;
|
||||
}
|
||||
#loginErrorAcknowledge:active {
|
||||
border-color: rgba(255, 255, 255, 0.75);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
/* * *
|
||||
* Login View | Loader
|
||||
* * */
|
||||
|
|
@ -1313,7 +1241,7 @@ p {
|
|||
font-family: 'Avenir Medium';
|
||||
font-weight: bold;
|
||||
border-radius: 2px;
|
||||
width: 75px;
|
||||
padding: 0px 8.1px;
|
||||
cursor: pointer;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -102,10 +102,39 @@ function toggleOverlay(toggleState){
|
|||
}
|
||||
if(toggleState){
|
||||
document.getElementById('main').setAttribute('overlay', true)
|
||||
$('#overlayContainer').fadeToggle(500)
|
||||
$('#overlayContainer').fadeToggle(250)
|
||||
} else {
|
||||
document.getElementById('main').removeAttribute('overlay')
|
||||
$('#overlayContainer').fadeToggle(500)
|
||||
$('#overlayContainer').fadeToggle(250)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the content of the overlay.
|
||||
*
|
||||
* @param {string} title Overlay title text.
|
||||
* @param {string} description Overlay description text.
|
||||
* @param {string} acknowledge Acknowledge button text.
|
||||
*/
|
||||
function setOverlayContent(title, description, acknowledge){
|
||||
document.getElementById('overlayTitle').innerHTML = title
|
||||
document.getElementById('overlayDesc').innerHTML = description
|
||||
document.getElementById('overlayAcknowledge').innerHTML = acknowledge
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the onclick handler of the overlay acknowledge button.
|
||||
* If the handler is null, a default handler will be added.
|
||||
*
|
||||
* @param {function} handler
|
||||
*/
|
||||
function setOverlayHandler(handler){
|
||||
if(handler == null){
|
||||
document.getElementById('overlayAcknowledge').onclick = () => {
|
||||
toggleOverlay(false)
|
||||
}
|
||||
} else {
|
||||
document.getElementById('overlayAcknowledge').onclick = handler
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,13 +55,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loginErrorContainer">
|
||||
<div id="loginErrorContent">
|
||||
<span id="loginErrorTitle">LOGIN FAILED:<br>INVALID CREDENTIALS</span>
|
||||
<span id="loginErrorDesc">Either the email or password you supplied is invalid. Please ensure everything is correct and try again.</span>
|
||||
<button id="loginErrorAcknowledge">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
<script type="application/javascript">
|
||||
//const validEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
|
||||
|
||||
|
|
@ -231,11 +224,13 @@
|
|||
console.log(value)
|
||||
}).catch((err) => {
|
||||
loginLoading(false)
|
||||
$('#loginErrorContainer').css('display', 'flex').hide().fadeIn(250)
|
||||
loginContainer.setAttribute('error', true)
|
||||
const errF = resolveError(err)
|
||||
loginErrorTitle.innerHTML = errF.title
|
||||
loginErrorDesc.innerHTML = errF.desc
|
||||
setOverlayContent(errF.title, errF.desc, 'Try Again')
|
||||
setOverlayHandler(() => {
|
||||
formDisabled(false)
|
||||
toggleOverlay(false)
|
||||
})
|
||||
toggleOverlay(true)
|
||||
console.log(err)
|
||||
})
|
||||
|
||||
|
|
@ -247,12 +242,6 @@
|
|||
}, 2500)
|
||||
|
||||
})
|
||||
|
||||
loginErrorAcknowledge.addEventListener('click', () => {
|
||||
formDisabled(false)
|
||||
loginContainer.removeAttribute('error', false)
|
||||
$('#loginErrorContainer').fadeOut(250)
|
||||
})
|
||||
</script>
|
||||
<!-- Will reuse this down the line, then it will be removed from this file. -->
|
||||
<!--<div id="loginLoading">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div id="overlayContainer" style="display: none;">
|
||||
<div id="overlayContent">
|
||||
<span id="overlayTitle">LOGIN FAILED:<br>INVALID CREDENTIALS</span>
|
||||
<span id="overlayDesc">Either the email or password you supplied is invalid. Please ensure everything is correct and try again.</span>
|
||||
<button id="overlayAcknowledge">Try Again</button>
|
||||
<span id="overlayTitle">Lorem Ipsum:<br>Finis Illud</span>
|
||||
<span id="overlayDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud..</span>
|
||||
<button id="overlayAcknowledge">Conare Iterum</button>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue