diff --git a/css/menu-side.css b/css/menu-side.css index cdd6e81..38a3057 100644 --- a/css/menu-side.css +++ b/css/menu-side.css @@ -1,2 +1,2 @@ -#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#000 !important;transition:fill .3s}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover,#WRAPPER>#MENU-SIDE>span[data-link].active{color:#5395f9;border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:hover:after,#WRAPPER>#MENU-SIDE>span[data-link].active:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *,#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#085dde !important} +#WRAPPER>#MENU-SIDE>span[data-link]{display:block;position:relative;width:calc( 4em - 2*.7em - 2*.55em - 2*.01em );height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );margin:2em .7em;padding:.55em;border:.01em solid transparent;border-radius:2px;color:#a2a2a2;line-height:calc( 4em - 2*.7em - 2*.55em - 2*.01em );transition:color .3s, border .3s;cursor:pointer}#WRAPPER>#MENU-SIDE>span[data-link].mt{margin-top:3em}#WRAPPER>#MENU-SIDE>span[data-link].mb{margin-bottom:3em}#WRAPPER>#MENU-SIDE>span[data-link] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#000 !important;fill:#777 !important;transition:fill .3s}#WRAPPER>#MENU-SIDE>span[data-link][data-desc]:after{content:attr(data-desc);display:block;position:absolute;top:calc( .7em - 2*.3em );left:calc( 4.6em - 2*.3em );padding:.3em;border-radius:3px;background-color:#2a2a2a;color:#e2e2e2;white-space:nowrap;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover,#WRAPPER>#MENU-SIDE>span[data-link].active{color:#00A6EB;border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:hover:after,#WRAPPER>#MENU-SIDE>span[data-link].active:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *,#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#000 !important} /*# sourceMappingURL=menu-side.css.map */ diff --git a/css/menu-side.scss b/css/menu-side.scss index 8ff3354..8a4dfda 100755 --- a/css/menu-side.scss +++ b/css/menu-side.scss @@ -16,6 +16,14 @@ border-radius: 2px; + // Decalage des elemts du menu + &.mt{ // Margin Top + margin-top: 3em; + } + &.mb{ // Margin Bottom + margin-bottom: 3em; + } + color: #a2a2a2; line-height: calc( 4em - 2*.7em - 2*.55em - 2*.01em ); @@ -29,6 +37,7 @@ stroke: none !important; fill: #000 !important; + fill: #777 !important; transition: fill .3s; } @@ -69,7 +78,7 @@ } svg, svg *{ - fill: darken($theme-color, 20) !important; + fill: #000 !important; } } diff --git a/css/reset.scss b/css/reset.scss index 16df235..6675ec8 100755 --- a/css/reset.scss +++ b/css/reset.scss @@ -18,6 +18,7 @@ html { body { margin: 0; + // font-size: 12px; } /* HTML5 display definitions diff --git a/index.php b/index.php index d751ba8..df33010 100644 --- a/index.php +++ b/index.php @@ -21,27 +21,27 @@ $R->get('/?', function(){ header('Location: /dashboard/'); }); // nomPage/arg1/arg2 -> inclusion de la page - $R->get('dashboard(?:/[\w-]+)*/??', function(){ include __ROOT__.'/view.php'; }); - $R->get('machines(?:/[\w-]+)*/??', function(){ include __ROOT__.'/view.php'; }); - $R->get('users(?:/[\w-]+)*/??', function(){ include __ROOT__.'/view.php'; }); - $R->get('sync(?:/[\w-]+)*/??', function(){ include __ROOT__.'/view.php'; }); - $R->get('settings(?:/[\w-]+)*/??', function(){ include __ROOT__.'/view.php'; }); + $R->get('dashboard(?:/[\w-]+)*/?', function(){ include __ROOT__.'/view.php'; }); + $R->get('machines(?:/[\w-]+)*/?', function(){ include __ROOT__.'/view.php'; }); + $R->get('users(?:/[\w-]+)*/?', function(){ include __ROOT__.'/view.php'; }); + $R->get('analytics(?:/[\w-]+)*/?', function(){ include __ROOT__.'/view.php'; }); + $R->get('settings(?:/[\w-]+)*/?', function(){ include __ROOT__.'/view.php'; }); // nomPage -> nomPage/ - $R->get('dashboard', function(){ header('Location: /dashboard/'); }); - $R->get('machines', function(){ header('Location: /machines/'); }); - $R->get('users', function(){ header('Location: /users/'); }); - $R->get('sync', function(){ header('Location: /sync/'); }); - $R->get('settings', function(){ header('Location: /settings/'); }); + $R->get('dashboard', function(){ header('Location: /dashboard/'); }); + $R->get('machines', function(){ header('Location: /machines/'); }); + $R->get('users', function(){ header('Location: /users/'); }); + $R->get('analytics', function(){ header('Location: /analytics/'); }); + $R->get('settings', function(){ header('Location: /settings/'); }); - $R->get('dashboard/', function(){ include __ROOT__.'/view.php'; }); - $R->get('machines/', function(){ include __ROOT__.'/view.php'; }); - $R->get('users/', function(){ include __ROOT__.'/view.php'; }); - $R->get('sync/', function(){ include __ROOT__.'/view.php'; }); - $R->get('settings/', function(){ include __ROOT__.'/view.php'; }); + $R->get('dashboard/', function(){ include __ROOT__.'/view.php'; }); + $R->get('machines/', function(){ include __ROOT__.'/view.php'; }); + $R->get('users/', function(){ include __ROOT__.'/view.php'; }); + $R->get('analytics/', function(){ include __ROOT__.'/view.php'; }); + $R->get('settings/', function(){ include __ROOT__.'/view.php'; }); // Dispatcher - $R->get('f(?:/([\w-]+))*/?', function(){ new manager\ResourcesDispatcher($_GET['url']); }); + $R->get('f(?:/([\w-]+))*/?', function(){ new manager\ResourcesDispatcher($_GET['url']); }); // N'importe -> page d'accueil $R->get('.+', function(){ header('Location: /dashboard/'); }); diff --git a/js/action-script.js b/js/action-script.js index 6dfb793..77b9f58 100755 --- a/js/action-script.js +++ b/js/action-script.js @@ -9,8 +9,7 @@ DOM = { /* [0] Instanciation ===========================================*/ var pageManager = new pageManagerClass(); -pageManager.setPage(null, '/view', DOM.CONTAINER, ['dashboard', 'machines', 'users', 'sync', 'settings'] ); - +pageManager.setPage(null, '/view', DOM.CONTAINER, ['profile', 'dashboard', 'machines', 'users', 'analytics', 'settings'] ); @@ -33,7 +32,6 @@ function navSubMenu(subsection){ // Si rien trouve, on prend le premier element correspondant a la premiere page target = (target == null) ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink]') : target; - console.log( target ); // Si le param n'est toujours pas bon, on retourne une erreur if( target == null ) return false; @@ -52,11 +50,16 @@ function navSubMenu(subsection){ // Si element, on recupere le data-link var page = null; + // Si erreur, on retourne FALSE + if( !target.getData('sublink') ) return false + + var mustRefresh = pageManager.vars[0] != target.getData('sublink'); + // On met a jour la variable page-manager si data-link trouve - if( target.getData('sublink') ){ - pageManager.vars[0] = target.getData('sublink'); - pageManager.updateURL(); - } + pageManager.vars[0] = target.getData('sublink'); + + if( mustRefresh ) + navMenu(pageManager.page); } @@ -68,6 +71,7 @@ function navSubMenu(subsection){ /* [2] Toggle du side-menu <-> navigation ===========================================*/ function navMenu(section){ + /* [1] Format du param ------------------------------------------------*/ // Contient l'element courant @@ -113,12 +117,17 @@ function navMenu(section){ // On retire l'icone de chargement DOM.HEADER.remClass('loading'); - // On gere la navigation du sous-menu - navSubMenu(null); + // On gere la navigation du sous-menu (si defini, utilise) + var subSectionExists = pageManager.vars.length >= 1 && document.querySelector('#CONTAINER > .sub-menu-side > [data-sublink="'+pageManager.vars[0]+'"]') != null; + if( subSectionExists ) // Si le lien du menu associe existe + navSubMenu(pageManager.vars[0]); // on charge la page associee + else // sinon + navSubMenu(null); // on charge le lien par defaut + // GESTION DE LA NAVIGATION DU SOUS-MENU document.querySelector('#CONTAINER > .sub-menu-side').addEventListener('click', function(e){ - var target = e.target + var target = e.target; while( target != document.body && !target.getData('sublink') ) target = target.parentNode; diff --git a/todo.md b/todo.md index 3026b86..25ef2d6 100644 --- a/todo.md +++ b/todo.md @@ -14,12 +14,15 @@ # EN COURS # ############ + - [ ] Gestion JS/PHP de la navigation - [ ] Gestion de l'affichage des pages en fonction du sous-menu ######## # FAIT # ######## +- [x] Correction de la navigation + - [x] Mise a jour du sous-menu et des POST a la page - [x] Gestion JS de la navigation - [x] Gestion de liens+URL du menu - [x] Gestion des liens+URL du submenu diff --git a/view.php b/view.php index a6de6cc..cb73e5a 100755 --- a/view.php +++ b/view.php @@ -42,11 +42,15 @@ diff --git a/view/sync.php b/view/analytics.php similarity index 96% rename from view/sync.php rename to view/analytics.php index a4f39cc..82274b2 100644 --- a/view/sync.php +++ b/view/analytics.php @@ -30,5 +30,6 @@
+ Bienvenue sur la page de SYNCHRONISATION
\ No newline at end of file