From 8c5e716163056b982e0abff2e3d1f6c604338433 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sat, 6 Feb 2016 11:41:50 +0100 Subject: [PATCH] - [x] [css/container.css + js/action-script.js] Gestion de l'affichage de la page associee au sous-menu (.active) - [x] [view/*.php] Modification des views --- css/container.css | 2 +- css/container.scss | 33 +++++++++++++++++++++---- js/action-script.js | 18 ++++++++++++-- src/static/container/mail.svg | 45 +++++++++++++++++++++++++++++++++++ todo.md | 2 ++ view/analytics.php | 24 +++++++++---------- view/profile.php | 12 +++++----- view/users.php | 16 +++++++++---- 8 files changed, 121 insertions(+), 31 deletions(-) create mode 100644 src/static/container/mail.svg diff --git a/css/container.css b/css/container.css index 5b53295..a56901f 100755 --- a/css/container.css +++ b/css/container.css @@ -1,2 +1,2 @@ -#WRAPPER>#CONTAINER>.sub-menu-side{display:block;position:relative}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]{display:block;position:relative;width:7.5em;padding:.3em 1em .3em 2em;margin:1em;border-radius:3px;color:#5b5e63;text-shadow:1px 1px white;white-space:nowrap;transition:all .2s;cursor:pointer;overflow:hidden}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg{display:inline-block;position:absolute;left:.5em;top:50%;width:1em;height:1em;transform:translateY(-50%)}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg path{fill:#5b5e63 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active{color:#121213;background-color:#d8deea;box-shadow:inset 0 0 4px #c8ced9}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover>.svg>svg path,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active>.svg>svg path{fill:#121213 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:nth-child(1){margin-top:1em}#WRAPPER>#CONTAINER>section{flex-grow:1}#WRAPPER>#CONTAINER>section>.inline-box{display:block;position:relative;width:calc( 100% - 2*1em - 2*1em );margin:1em;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.3em;font-weight:bold}#WRAPPER>#CONTAINER>section>.inline-box .code{display:inline-block;color:#777}#WRAPPER>#CONTAINER>section>.inline-box .code svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .code svg path{fill:#777 !important}#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;position:relative;margin:1em;color:#777} +#WRAPPER>#CONTAINER>.sub-menu-side{display:block;position:relative}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]{display:block;position:relative;width:7.5em;padding:.3em 1em .3em 2em;margin:1em;border-radius:3px;color:#5b5e63;text-shadow:1px 1px white;white-space:nowrap;transition:all .2s;cursor:pointer;overflow:hidden}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg{display:inline-block;position:absolute;left:.5em;top:50%;width:1em;height:1em;transform:translateY(-50%)}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg path{fill:#5b5e63 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active{color:#121213;background-color:#d8deea;box-shadow:inset 0 0 4px #c8ced9}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover>.svg>svg path,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active>.svg>svg path{fill:#121213 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:nth-child(1){margin-top:1em}#WRAPPER>#CONTAINER>section{display:none;flex-grow:1}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section>.inline-box{display:block;position:relative;width:calc( 100% - 2*1em - 2*1em );margin:1em;padding:1em;border-radius:3px;box-shadow:0 0 1px #b7b7b7;background-color:#fff}#WRAPPER>#CONTAINER>section>.inline-box .title{display:inline-block;font-size:1.15em;font-weight:bold}#WRAPPER>#CONTAINER>section>.inline-box .title>span{font-size:.8em;color:#333}#WRAPPER>#CONTAINER>section>.inline-box .code{display:inline-block;color:#777}#WRAPPER>#CONTAINER>section>.inline-box .code svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .code svg path{fill:#777 !important}#WRAPPER>#CONTAINER>section>.inline-box .mail{display:block;margin:1em;color:#777}#WRAPPER>#CONTAINER>section>.inline-box .mail svg{display:inline-block;position:relative;margin-left:.5em;margin-right:.5em;margin-bottom:-.6em;width:1.5em;height:2em}#WRAPPER>#CONTAINER>section>.inline-box .mail svg path{fill:#777 !important} /*# sourceMappingURL=container.css.map */ diff --git a/css/container.scss b/css/container.scss index 836c8c7..1abe866 100755 --- a/css/container.scss +++ b/css/container.scss @@ -74,10 +74,15 @@ /* [2] Section (contenu) =========================================================*/ & > section{ - // background-color: #f00; + display: none; flex-grow: 1; } + // @active + & > section.active{ + display: block; + } + /* [3] INLINE-BOX pour afficher les listes de donnees @@ -98,8 +103,13 @@ .title{ display: inline-block; - font-size: 1.3em; + font-size: 1.15em; font-weight: bold; + + & > span{ + font-size: .8em; + color: #333; + } } /* (2) Code RFID */ @@ -127,11 +137,24 @@ /* (3) Adresse mail */ .mail{ display: block; - position: relative; - margin: 1em; - color: #777; + + // svg (icone) + svg{ + display: inline-block; + position: relative; + margin-left: .5em; + margin-right: .5em; + margin-bottom: -.6em; + width: 1.5em; + height: 2em; + + path{ + fill: #777 !important; + } + } + } } diff --git a/js/action-script.js b/js/action-script.js index 77b9f58..00d9f1e 100755 --- a/js/action-script.js +++ b/js/action-script.js @@ -41,10 +41,23 @@ function navSubMenu(subsection){ // On desactive l'element courant if( current != null ) current.remClass('active'); + + // On cache les sections visibles + var visibleSections = document.querySelectorAll('#CONTAINER > section[data-sublink].active'); + for( var i = 0 ; i < visibleSections.length ; i++ ) + visibleSections[i].remClass('active'); + // On active le nouveau - if( target != null ) + if( target != null ){ target.addClass('active'); + // On affiche la section associee + var targetSection = document.querySelector('#CONTAINER > section[data-sublink="'+target.getData('sublink')+'"]'); + if( targetSection != null ) + targetSection.addClass('active'); + + } + /* [3] Gestion de pageManager ------------------------------------------------*/ // Si element, on recupere le data-link @@ -59,7 +72,8 @@ function navSubMenu(subsection){ pageManager.vars[0] = target.getData('sublink'); if( mustRefresh ) - navMenu(pageManager.page); + // navMenu(pageManager.page); + pageManager.updateURL(); } diff --git a/src/static/container/mail.svg b/src/static/container/mail.svg new file mode 100644 index 0000000..9b67217 --- /dev/null +++ b/src/static/container/mail.svg @@ -0,0 +1,45 @@ + +image/svg+xml \ No newline at end of file diff --git a/todo.md b/todo.md index 896e99e..635be37 100755 --- a/todo.md +++ b/todo.md @@ -32,6 +32,8 @@ ######## # FAIT # ######## +- [x] [css/container.css + js/action-script.js] Gestion de l'affichage de la page associee au sous-menu (.active) + - [x] [view/*.php] Modification des views - [x] Mise a jour / Modification / Correction des images du menu-side - [x] [ModuleRequest->dispatch] Passage de l'erreur a la reponse - [x] [ModuleAnswer->serialize] Integration de l'erreur dans la serialisation diff --git a/view/analytics.php b/view/analytics.php index d9961fc..755374d 100755 --- a/view/analytics.php +++ b/view/analytics.php @@ -43,14 +43,14 @@ /* PAGE DES STATISTIQUES * */ - if( $sublink == 'analytics' ){ + // if( $sublink == 'analytics' ){ - echo '
'; + echo "
"; echo 'Statistiques'; var_dump( manager\Database::getPDO()->query('SELECT * from user')->fetchAll() ); echo '
'; - } + // } @@ -69,13 +69,13 @@ /* CONSULTATION DU SUIVI * */ - if( $sublink == 'view' ){ + // if( $sublink == 'view' ){ - echo '
'; + echo "
"; echo 'Consultation du suivi'; echo '
'; - } + // } @@ -94,13 +94,13 @@ /* DEMARRER UN SUIVI * */ - if( $sublink == 'start' ){ + // if( $sublink == 'start' ){ - echo '
'; + echo "
"; echo 'Demarrer un suivi'; echo '
'; - } + // } @@ -119,13 +119,13 @@ /* RECHERCHE * */ - if( $sublink == 'search' ){ + // if( $sublink == 'search' ){ - echo '
'; + echo "
"; echo 'Recherche'; echo '
'; - } + // } diff --git a/view/profile.php b/view/profile.php index 996335d..1c9dfc1 100755 --- a/view/profile.php +++ b/view/profile.php @@ -33,13 +33,13 @@ /* MON PROFIL * */ - if( $sublink == 'view' ){ + // if( $sublink == 'view' ){ - echo '
'; + echo "
"; echo 'Profil'; echo '
'; - } + // } @@ -56,12 +56,12 @@ /* CHANGER MOT DE PASSE * */ - if( $sublink == 'password' ){ + // if( $sublink == 'password' ){ - echo '
'; + echo "
"; echo 'Changement de mot de passe'; echo '
'; - } + // } ?> \ No newline at end of file diff --git a/view/users.php b/view/users.php index 094babb..913bd16 100755 --- a/view/users.php +++ b/view/users.php @@ -52,7 +52,7 @@ /* PAGE DES STATISTIQUES * */ - if( $sublink == 'view' ){ + // if( $sublink == 'view' ){ // On recupere tous les utilisateurs debug(); @@ -60,7 +60,7 @@ $request = new \manager\ModuleRequest('userDefaultModule/getAll'); // On utilise la methode 'getAll' du module 'userDefaultModule' $answer = $request->dispatch(); // On recupere la reponse - echo '
'; + echo "
"; echo 'Liste des utilisateurs:
'; // si erreur, on affiche l'explicitation @@ -72,7 +72,7 @@ foreach( $answer->get('users') as $user){ echo "
"; // Prenom Nom - echo "".$user['firstname']." ".$user['lastname'].""; + echo "".$user['username']." (".$user['firstname']." ".$user['lastname'].")"; // Code RFID echo ""; @@ -84,7 +84,13 @@ echo""; // Adresse email - echo "".$user['mail'].""; + echo ""; + echo \manager\ResourceDispatcher::getResource('/f/svg/mail/st/container'); + + echo ""; + echo $user['mail']; + echo ""; + echo""; @@ -96,4 +102,4 @@ echo '
'; - } + // }