Update TODO + debut CSS submenu et correction menu (nowrap :after)
This commit is contained in:
xdrm-brackets
parent
62c4bbc8b6
commit
c17cc2322a
|
|
@ -1,2 +1,2 @@
|
|||
|
||||
#WRAPPER>#HEADER.loading>.icon{background-image:url("../src/static/loader2.svg");background-size:70% 70%}
|
||||
/*# sourceMappingURL=header.css.map */
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -124,6 +124,7 @@ $theme-color: #5395f9;
|
|||
background-color: #2a2a2a;
|
||||
|
||||
color: #e2e2e2;
|
||||
white-space: nowrap;
|
||||
|
||||
transition: transform .1s;
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 709 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 709 B |
5
todo.md
5
todo.md
|
|
@ -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
|
||||
|
|
|
|||
4
view.php
4
view.php
|
|
@ -41,10 +41,10 @@
|
|||
|
||||
<!-- 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='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='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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
Loading…
Reference in New Issue