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

Update TODO + debut CSS submenu et correction menu (nowrap :after)

This commit is contained in:
xdrm-brackets 2016-02-02 14:03:22 +01:00
parent 62c4bbc8b6
commit c17cc2322a
15 changed files with 87 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/header.css
View File

@ -1,2 +1,2 @@
#WRAPPER>#HEADER.loading>.icon{background-image:url("../src/static/loader2.svg");background-size:70% 70%}
/*# sourceMappingURL=header.css.map */

5
css/header.scss
View File

@ -0,0 +1,5 @@
/* Animation de chargement qudnd chargement ajax */
#WRAPPER > #HEADER.loading > .icon{
background-image: url('../src/static/loader2.svg');
background-size: 70% 70%;
}

2
css/layout.css
View File

@ -1,2 +1,2 @@
#WRAPPER{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#edf0f5;font-family:'Ubuntu'}#WRAPPER>#HEADER{display:block;position:absolute;top:0;left:0;width:100%;height:calc( 4em - 1px );border-bottom:1px solid #2277f7;background-color:#5395f9;z-index:10}#WRAPPER>#HEADER>.icon{display:block;position:absolute;top:0;left:0;width:4em;height:4em;background-color:#2277f7;background-image:url("../src/static/icon.svg");background-position:center center;background-repeat:no-repeat;background-size:50% 50%;cursor:pointer;transition:all .3s}#WRAPPER>#HEADER>.icon:hover{background-color:#0967f6}#WRAPPER>#MENU-SIDE{display:block;position:absolute;top:4em;left:0;width:4em;height:100%;box-shadow:2px 1px 3px #ddd;background-color:#fff;transition:all .3s;z-index:9}#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:#444 !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;transition:transform .1s;transform-origin:0 0;transform:scaleX(0)}#WRAPPER>#MENU-SIDE>span[data-link]:hover{border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link].active{border-color:#e6e6e6}#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link]:hover{color:#565656}#WRAPPER>#CONTAINER{display:block;position:absolute;top:4em;left:4em;width:calc( 100% - 4em - 2*1em );height:calc( 100% - 4em - 2*1em );padding:1em;overflow-x:none;overflow-y:auto}
#WRAPPER{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#edf0f5;font-family:'Ubuntu'}#WRAPPER>#HEADER{display:block;position:absolute;top:0;left:0;width:100%;height:calc( 4em - 1px );border-bottom:1px solid #2277f7;background-color:#5395f9;z-index:10}#WRAPPER>#HEADER>.icon{display:block;position:absolute;top:0;left:0;width:4em;height:4em;background-color:#2277f7;background-image:url("../src/static/icon.svg");background-position:center center;background-repeat:no-repeat;background-size:50% 50%;cursor:pointer;transition:all .3s}#WRAPPER>#HEADER>.icon:hover{background-color:#0967f6}#WRAPPER>#MENU-SIDE{display:block;position:absolute;top:4em;left:0;width:4em;height:100%;box-shadow:2px 1px 3px #ddd;background-color:#fff;transition:all .3s;z-index:9}#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:#444 !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{border-color:#e6e6e6;box-shadow:inset 0 0 .5em #eee}#WRAPPER>#MENU-SIDE>span[data-link]:hover:after{transform:scaleX(1);color:#fff}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg,#WRAPPER>#MENU-SIDE>span[data-link]:hover svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link].active{border-color:#e6e6e6}#WRAPPER>#MENU-SIDE>span[data-link].active svg,#WRAPPER>#MENU-SIDE>span[data-link].active svg *{fill:#5395f9 !important}#WRAPPER>#MENU-SIDE>span[data-link]:hover{color:#565656}#WRAPPER>#CONTAINER{display:block;position:absolute;top:4em;left:4em;width:calc( 100% - 4em - 2*1em );height:calc( 100% - 4em - 2*1em );padding:1em;overflow-x:none;overflow-y:auto}
/*# sourceMappingURL=layout.css.map */

1
css/layout.scss
View File

@ -124,6 +124,7 @@ $theme-color: #5395f9;
background-color: #2a2a2a;
color: #e2e2e2;
white-space: nowrap;
transition: transform .1s;

7
js/action-script.js
View File

@ -53,9 +53,14 @@ function navMenu(section){
var page = null;
// On charge la page si data-link trouve
if( target.getData('link') )
if( target.getData('link') ){
DOM.HEADER.addClass('loading'); // Animation de chargement
pageManager.setPage( target.getData('link') );
pageManager.xhr[pageManager.xhr.length-1].onloadend = function(){ DOM.HEADER.remClass('loading'); }
}
}navMenu(pageManager.page);

10
js/lib/page-manager.js
View File

@ -21,8 +21,8 @@ pageManagerClass.prototype = {
page: null, // l'indice de la page courante dans pagelist
vars: [], // les variables suivant le nom de la page dans l'URL
path: '', // le chemin du dossier contenant les pages (.php)
jsPath: '_JS_', // le chemin du dossier contenant les scripts (.js)
cssPath: '_CSS_', // le chemin du dossier contenant les feuilles de style (.css)
jsPath: 'js', // le chemin du dossier contenant les scripts (.js)
cssPath: 'css', // le chemin du dossier contenant les feuilles de style (.css)
pagelist: null, // la liste des pages pouvant être chargées
container: null, // élément DOM qui contiendra le contenu des pages à charger
/* =======================================================================
@ -64,6 +64,8 @@ pageManagerClass.prototype = {
this.xhr[index].open( method, pLink, true );
this.xhr[index].send( form );
return this;
},
/***************************************************** [APPLICATION] Ajax() ******************************************************/
// EXEMPLES DE FONCTIONS POUR pHandler //
@ -253,6 +255,8 @@ pageManagerClass.prototype = {
}
}else
console.warn('pagelist et container manquant');
return this;
},
@ -264,6 +268,8 @@ pageManagerClass.prototype = {
*/
reload: function(){
this.setPage(this.page);
return this;
}
}

1
src/static/loader.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="utf-8"?><svg width='176px' height='176px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="#ffffff" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#5395F9" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="100.4 150.6;1 250;100.4 150.6"></animate></circle></svg>
Side by Side

After

Width:  |  Height:  |  Size: 709 B

1
src/static/loader2.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="utf-8"?><svg width='198px' height='198px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="#5395f9" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#ffffff" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="100.4 150.6;1 250;100.4 150.6"></animate></circle></svg>
Side by Side

After

Width:  |  Height:  |  Size: 709 B

5
todo.md
View File

@ -10,8 +10,8 @@
# EN COURS #
############
- [.] Design de structure (layout)
- [.] Header
- [.] Menu-side
- [x] Header
- [x] Menu-side
- [.] Submenu-side
- [.] Gestion JS de la navigation
- [x] Gestion de liens+URL du menu
@ -21,6 +21,7 @@
# FAIT #
########
- [x] Gestion complete de la navigation de niveau 0
- [x] Ajout d'un loader pour page-manager.js
- [x] Autoloader avec namespace
- [x] Adaptation de page-manger.js
- [x] Conception et dev routeur

10
view.php
View File

@ -41,11 +41,11 @@
<!-- MENU DE LA PAGE -->
<nav id='MENU-SIDE'>
<span data-link='dashboard' data-desc='Dashboard' ><?php include __ROOT__.'/src/static/menu-dashboard.svg'; ?></span>
<span data-link='machines' data-desc='Véhicules' ><?php include __ROOT__.'/src/static/menu-machines.svg'; ?></span>
<span data-link='users' data-desc='Utilisateurs' ><?php include __ROOT__.'/src/static/menu-users.svg'; ?></span>
<span data-link='sync' data-desc='Synchronisation'><?php include __ROOT__.'/src/static/menu-sync.svg'; ?></span>
<span data-link='settings' data-desc='Paramètres' ><?php include __ROOT__.'/src/static/menu-settings.svg'; ?></span>
<span data-link='dashboard' data-desc='Tableau de bord' ><?php include __ROOT__.'/src/static/menu-dashboard.svg'; ?></span>
<span data-link='machines' data-desc='Véhicules' ><?php include __ROOT__.'/src/static/menu-machines.svg'; ?></span>
<span data-link='users' data-desc='Utilisateurs' ><?php include __ROOT__.'/src/static/menu-users.svg'; ?></span>
<span data-link='sync' data-desc='Synchronisation' ><?php include __ROOT__.'/src/static/menu-sync.svg'; ?></span>
<span data-link='settings' data-desc='Paramètres' ><?php include __ROOT__.'/src/static/menu-settings.svg'; ?></span>
</nav>

14
view/dashboard.php
View File

@ -1,12 +1,12 @@
<!-- [1] Gestion du sous-menu de gauche -->
<nav class='inside-menu'>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span>menu item 1</span>
<span>menu item 2</span>
<span>menu item 3</span>
<span>menu item 4</span>
<span>menu item 5</span>
<span>menu item 6</span>
</nav>
blabla
Bienvenue sur le DASHBOARD

12
view/machines.php Normal file
View File

@ -0,0 +1,12 @@
<!-- [1] Gestion du sous-menu de gauche -->
<nav class='inside-menu'>
<span>menu item 1</span>
<span>menu item 2</span>
<span>menu item 3</span>
<span>menu item 4</span>
<span>menu item 5</span>
<span>menu item 6</span>
</nav>
Bienvenue sur la page de gestion des MACHINES

12
view/settings.php Normal file
View File

@ -0,0 +1,12 @@
<!-- [1] Gestion du sous-menu de gauche -->
<nav class='inside-menu'>
<span>menu item 1</span>
<span>menu item 2</span>
<span>menu item 3</span>
<span>menu item 4</span>
<span>menu item 5</span>
<span>menu item 6</span>
</nav>
Bienvenue sur la page des PARAMETRES

12
view/sync.php Normal file
View File

@ -0,0 +1,12 @@
<!-- [1] Gestion du sous-menu de gauche -->
<nav class='inside-menu'>
<span>menu item 1</span>
<span>menu item 2</span>
<span>menu item 3</span>
<span>menu item 4</span>
<span>menu item 5</span>
<span>menu item 6</span>
</nav>
Bienvenue sur la page de SYNCHRONISATION

12
view/users.php Normal file
View File

@ -0,0 +1,12 @@
<!-- [1] Gestion du sous-menu de gauche -->
<nav class='inside-menu'>
<span>menu item 1</span>
<span>menu item 2</span>
<span>menu item 3</span>
<span>menu item 4</span>
<span>menu item 5</span>
<span>menu item 6</span>
</nav>
Bienvenue sur la page de gestion des UTILISATEURS