logauth
/
SMMP
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

- [x] Correction de la navigation 

- [x] Mise a jour du sous-menu et des POST a la page
This commit is contained in:
xdrm-brackets 2016-02-03 12:32:53 +01:00
parent 120de9a1bf
commit e03db11d5d
8 changed files with 60 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/menu-side.css
View File

@ -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 */ /*# sourceMappingURL=menu-side.css.map */

11
css/menu-side.scss
View File

@ -16,6 +16,14 @@
border-radius: 2px; border-radius: 2px;
// Decalage des elemts du menu
&.mt{ // Margin Top
margin-top: 3em;
}
&.mb{ // Margin Bottom
margin-bottom: 3em;
}
color: #a2a2a2; color: #a2a2a2;
line-height: calc( 4em - 2*.7em - 2*.55em - 2*.01em ); line-height: calc( 4em - 2*.7em - 2*.55em - 2*.01em );
@ -29,6 +37,7 @@
stroke: none !important; stroke: none !important;
fill: #000 !important; fill: #000 !important;
fill: #777 !important;
transition: fill .3s; transition: fill .3s;
} }
@ -69,7 +78,7 @@
} }
svg, svg *{ svg, svg *{
fill: darken($theme-color, 20) !important; fill: #000 !important;
} }
} }

1
css/reset.scss
View File

@ -18,6 +18,7 @@ html {
body { body {
margin: 0; margin: 0;
// font-size: 12px;
} }
/* HTML5 display definitions /* HTML5 display definitions

14
index.php
View File

@ -21,23 +21,23 @@
$R->get('/?', function(){ header('Location: /dashboard/'); }); $R->get('/?', function(){ header('Location: /dashboard/'); });
// nomPage/arg1/arg2 -> inclusion de la page // nomPage/arg1/arg2 -> inclusion de la page
$R->get('dashboard(?:/[\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('machines(?:/[\w-]+)*/?', function(){ include __ROOT__.'/view.php'; });
$R->get('users(?:/[\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('analytics(?:/[\w-]+)*/?', function(){ include __ROOT__.'/view.php'; });
$R->get('settings(?:/[\w-]+)*/??', function(){ include __ROOT__.'/view.php'; }); $R->get('settings(?:/[\w-]+)*/?', function(){ include __ROOT__.'/view.php'; });
// nomPage -> nomPage/ // nomPage -> nomPage/
$R->get('dashboard', function(){ header('Location: /dashboard/'); }); $R->get('dashboard', function(){ header('Location: /dashboard/'); });
$R->get('machines', function(){ header('Location: /machines/'); }); $R->get('machines', function(){ header('Location: /machines/'); });
$R->get('users', function(){ header('Location: /users/'); }); $R->get('users', function(){ header('Location: /users/'); });
$R->get('sync', function(){ header('Location: /sync/'); }); $R->get('analytics', function(){ header('Location: /analytics/'); });
$R->get('settings', function(){ header('Location: /settings/'); }); $R->get('settings', function(){ header('Location: /settings/'); });
$R->get('dashboard/', function(){ include __ROOT__.'/view.php'; }); $R->get('dashboard/', function(){ include __ROOT__.'/view.php'; });
$R->get('machines/', function(){ include __ROOT__.'/view.php'; }); $R->get('machines/', function(){ include __ROOT__.'/view.php'; });
$R->get('users/', function(){ include __ROOT__.'/view.php'; }); $R->get('users/', function(){ include __ROOT__.'/view.php'; });
$R->get('sync/', function(){ include __ROOT__.'/view.php'; }); $R->get('analytics/', function(){ include __ROOT__.'/view.php'; });
$R->get('settings/', function(){ include __ROOT__.'/view.php'; }); $R->get('settings/', function(){ include __ROOT__.'/view.php'; });
// Dispatcher // Dispatcher

27
js/action-script.js
View File

@ -9,8 +9,7 @@ DOM = {
/* [0] Instanciation /* [0] Instanciation
===========================================*/ ===========================================*/
var pageManager = new pageManagerClass(); 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 // 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; 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 // Si le param n'est toujours pas bon, on retourne une erreur
if( target == null ) return false; if( target == null ) return false;
@ -52,11 +50,16 @@ function navSubMenu(subsection){
// Si element, on recupere le data-link // Si element, on recupere le data-link
var page = null; 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 // On met a jour la variable page-manager si data-link trouve
if( target.getData('sublink') ){
pageManager.vars[0] = target.getData('sublink'); pageManager.vars[0] = target.getData('sublink');
pageManager.updateURL();
} if( mustRefresh )
navMenu(pageManager.page);
} }
@ -68,6 +71,7 @@ function navSubMenu(subsection){
/* [2] Toggle du side-menu <-> navigation /* [2] Toggle du side-menu <-> navigation
===========================================*/ ===========================================*/
function navMenu(section){ function navMenu(section){
/* [1] Format du param /* [1] Format du param
------------------------------------------------*/ ------------------------------------------------*/
// Contient l'element courant // Contient l'element courant
@ -113,12 +117,17 @@ function navMenu(section){
// On retire l'icone de chargement // On retire l'icone de chargement
DOM.HEADER.remClass('loading'); DOM.HEADER.remClass('loading');
// On gere la navigation du sous-menu // On gere la navigation du sous-menu (si defini, utilise)
navSubMenu(null); 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 // GESTION DE LA NAVIGATION DU SOUS-MENU
document.querySelector('#CONTAINER > .sub-menu-side').addEventListener('click', function(e){ 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') ) while( target != document.body && !target.getData('sublink') )
target = target.parentNode; target = target.parentNode;

3
todo.md
View File

@ -14,12 +14,15 @@
# EN COURS # # EN COURS #
############ ############
- [ ] Gestion JS/PHP de la navigation - [ ] Gestion JS/PHP de la navigation
- [ ] Gestion de l'affichage des pages en fonction du sous-menu - [ ] Gestion de l'affichage des pages en fonction du sous-menu
######## ########
# FAIT # # 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 JS de la navigation
- [x] Gestion de liens+URL du menu - [x] Gestion de liens+URL du menu
- [x] Gestion des liens+URL du submenu - [x] Gestion des liens+URL du submenu

10
view.php
View File

@ -42,11 +42,15 @@
<!-- MENU DE LA PAGE --> <!-- MENU DE LA PAGE -->
<nav id='MENU-SIDE'> <nav id='MENU-SIDE'>
<span data-link='dashboard' data-desc='Tableau de bord' ><?php echo file_get_contents( 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/menu-dashboard/st/menu-side' ); ?></span> <span data-link='profile' data-desc='Profil' class='mb' ><?php echo file_get_contents( 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/menu-dashboard/st/menu-side' ); ?></span>
<span data-link='dashboard' data-desc='Tableau de bord' class='apart' ><?php echo file_get_contents( 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/menu-dashboard/st/menu-side' ); ?></span>
<span data-link='machines' data-desc='Véhicules' ><?php echo file_get_contents( 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/menu-machines/st/menu-side/' ); ?></span> <span data-link='machines' data-desc='Véhicules' ><?php echo file_get_contents( 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/menu-machines/st/menu-side/' ); ?></span>
<span data-link='users' data-desc='Utilisateurs' ><?php echo file_get_contents( 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/users2/st/menu-side/' ); ?></span> <span data-link='users' data-desc='Utilisateurs' ><?php echo file_get_contents( 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/users2/st/menu-side/' ); ?></span>
<span data-link='sync' data-desc='Synchronisation' ><?php echo file_get_contents( 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/menu-sync/st/menu-side/' ); ?></span> <span data-link='analytics' data-desc='Statistiques et suivi' ><?php echo file_get_contents( 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/menu-sync/st/menu-side/' ); ?></span>
<span data-link='settings' data-desc='Paramètres' ><?php echo file_get_contents( 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/menu-settings/st/menu-side/' ); ?></span>
<span data-link='settings' data-desc='Paramètres' class='mt' ><?php echo file_get_contents( 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/menu-settings/st/menu-side/' ); ?></span>
</nav> </nav>

1
view/sync.php → view/analytics.php
View File

@ -30,5 +30,6 @@
<section> <section>
<?php var_dump($_POST) ?>
Bienvenue sur la page de SYNCHRONISATION Bienvenue sur la page de SYNCHRONISATION
</section> </section>