diff --git a/Dashboard.php b/Dashboard.php index 39ad6b0..4eb7d67 100755 --- a/Dashboard.php +++ b/Dashboard.php @@ -23,6 +23,17 @@ if(!Authentification::checkUser(0)){ + +
+
+
+

Oups!

+

Certains champs sont incorrects. Veuillez réessayer.

+ +
+
+ +
@@ -50,7 +61,13 @@ if(!Authentification::checkUser(0)){
- - + + + diff --git a/css/global.css b/css/global.css index 66ae493..e7a69da 100755 --- a/css/global.css +++ b/css/global.css @@ -28,6 +28,147 @@ body{ +/* BOX (POPUP) DE NOTIFICATION DE LA PAGE */ +#NOTIFBAR{ + /* position */ + display: block; + position: fixed; + /*top: calc( 50% - 20em/2 );*/ top: calc( -100% ); + left: calc( 50% - 30em/2 ); + width: 30em; + height: 20em; + + /* border */ + border-radius: 5px; + box-shadow: 0 0 30px #aaa; + + /* foreground */ + font-size: 1em; + color: #333; + text-align: center; + + /* animation */ + transition: top .5s ease-in-out; + -moz-transition: top .5s ease-in-out; + -webkit-transition: top .5s ease-in-out; + -ms-transition: top .5s ease-in-out; + -o-transition: top .5s ease-in-out; + + /* z axis */ + z-index: 100; +} + +#NOTIFBAR.active{ + top: calc( 50% - 20em/2 ); +} + +#NOTIFBAR > div:nth-child(1){ + /* position */ + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 55%; + + /* border */ + border-radius: 5px 5px 0 0 ; + + /* background */ + background: #e2747d url(../src/svg/notifications/error.svg) center center no-repeat; + background-size: 4em auto; +} + + +#NOTIFBAR.error > div:nth-child(1){ + background-color: #e2747d; + background-image: url(../src/svg/notifications/error.svg); +} + +#NOTIFBAR.success > div:nth-child(1){ + background-color: #4ccd82; + background-image: url(../src/svg/notifications/success.svg); +} +#NOTIFBAR.info > div:nth-child(1){ + background-color: #e0a325; + background-image: url(../src/svg/notifications/info.svg); +} + +#NOTIFBAR > div:nth-child(2){ + /* position */ + display: block; + position: absolute; + top: 55%; + left: 0; + width: 100%; + height: 45%; + + /* border */ + border-radius: 0 0 5px 5px; + + /* background */ + background-color: #fff; +} + +#NOTIFBAR h3{ margin-top: 1em; } + +#NOTIFBAR input[type=button]{ + /* position */ + display: inline-block; + position: relative; + margin-top: 1em; + padding: .7em 2.5em; + padding-left: 3em; + + /* border */ + border-radius: 5em; + border: 0; + + /* background */ + background: #e2747d url(../src/svg/notifications/close.svg) left 1.5em center no-repeat; + background-size: auto 1em; + + /* foreground */ + color: #fff; + font-size: .9em; + letter-spacing: .1em; + + /* extra */ + cursor: pointer; + + /* animation */ + transition: transform .2s ease-in-out; + -moz-transition: transform .2s ease-in-out; + -webkit-transition: transform .2s ease-in-out; + -ms-transition: transform .2s ease-in-out; + -o-transition: transform .2s ease-in-out; +} + +#NOTIFBAR.error input[type=button]{ + background-color: #e2747d; +} +#NOTIFBAR.success input[type=button]{ + background-color: #4ccd82; +} +#NOTIFBAR.info input[type=button]{ + background-color: #e0a325; +} + + +#NOTIFBAR input[type=button]:hover{ + transform: scale(1.1); + -moz-transform: scale(1.1); + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); +} + + + + + + + /* WRAPPER DE LA PAGE */ #WRAPPER{ /* position */ diff --git a/js/adjust.js b/js/adjust.js index b3c7421..8e5102c 100755 --- a/js/adjust.js +++ b/js/adjust.js @@ -21,4 +21,52 @@ function addClass(el, pClass){ function remClass(el, pClass){ if( el.className.indexOf(pClass) > -1 ) // si la class de l'élement contient la classe à enlever el.className = el.className.substr(0, el.className.indexOf(pClass)) + '' + el.className.substr(el.className.indexOf(pClass)+pClass.length); +} + + + + +var notifState = false; // VRAI si affiché, sinon FAUX +function notif(pType, pTitle, pMessage){ + /* [0] Variables globales + ======================================================*/ + var notifElement = document.getElementById('NOTIFBAR'); + var lTitle = [ + 'Oups!', // error + 'Cool!', // success + 'Tout va bien!', // info + ]; + var lMessage = [ + 'Un erreur a eu lieu. Veuillez réessayer.', // error + 'Tout s\'est bien passé.', // success + 'On va tout vous expliquer.' // info + ]; + + /* [1] On formatte et vérifie les variables + ======================================================*/ + if( arguments.length == 0 ) return false; // si pas de param, on quitte + + var pTitle = (arguments.length>1) ? pTitle : null; + var pMessage = (arguments.length>2) ? pMessage : null; + + var index = ['error', 'success', 'info'].indexOf(pType) + + if( index == -1 ) return false; // si pType incorrect, on quitte + + /* [2] On initialise la box et les variables + ======================================================*/ + notifElement.className = ''; // on supprime toute classe existante + + addClass(notifElement, pType); // on met en page en fonction du type + + if( pTitle == null ) pTitle = lTitle[index]; + if( pMessage == null ) pMessage = lMessage[index]; + + + /* [3] On met en page et on affiche + ======================================================*/ + notifElement.children[1].children[0].innerHTML = pTitle; // on attribue le titre + notifElement.children[1].children[1].innerHTML = pMessage; // on attribue le texte + + addClass(notifElement, 'active'); // on affiche la boite } \ No newline at end of file diff --git a/js/consultations.js b/js/consultations.js index f3decbf..e376dc7 100755 --- a/js/consultations.js +++ b/js/consultations.js @@ -1,3 +1,10 @@ +var notifBar = document.getElementById('NOTIFBAR'); + notifBar.children[1].children[2].addEventListener('click', function(e){ + remClass(notifBar, 'active'); +}, false); + + + /* [1] On récupère les 2