From b054b9ac4e76d010ffab7624e4166761a07dff8e Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 18 Feb 2016 22:33:20 +0100 Subject: [PATCH] - [x] [menu-side.scss] Icone + svg pour icone du profile --- css/constants.scss | 3 + css/header.scss | 4 +- css/layout.scss | 14 +-- css/menu-side.css | 2 +- css/menu-side.scss | 23 +++-- src/static/menu-side/profile.svg | 163 +++++++++++++++++++++++++++++++ todo.md | 2 +- view.php | 12 +-- 8 files changed, 196 insertions(+), 27 deletions(-) create mode 100644 src/static/menu-side/profile.svg diff --git a/css/constants.scss b/css/constants.scss index bc52380..b656f55 100755 --- a/css/constants.scss +++ b/css/constants.scss @@ -14,6 +14,9 @@ $form-search-color: #5630ed; $form-invalid-color: #d52918; +/* GESTION DES LONGUEURS */ +$menu-side-width: 4em; + // POUR RESOURCE_DISPATCHER $rd-form-valid-color: '27a560'; diff --git a/css/header.scss b/css/header.scss index 7b93cc9..928b128 100755 --- a/css/header.scss +++ b/css/header.scss @@ -8,8 +8,8 @@ position: absolute; top: 0; left: 0; - width: 4em; - height: 4em; + width: $menu-side-width; + height: $menu-side-width; background-color: darken($theme-color, 10); background-image: url('/f/svg/icon/st'); diff --git a/css/layout.scss b/css/layout.scss index 3c3b8dd..acdd4f1 100755 --- a/css/layout.scss +++ b/css/layout.scss @@ -21,7 +21,7 @@ top: 0; left: 0; width: 100%; - height: calc( 4em - 1px ); + height: calc( #{$menu-side-width} - 1px ); border-bottom: 1px solid darken($theme-color, 10); @@ -38,9 +38,9 @@ & > #MENU-SIDE{ display: block; position: absolute; - top: 4em; + top: $menu-side-width; left: 0; - width: 4em; + width: $menu-side-width; height: 100%; box-shadow: 2px 1px 3px #ddd; @@ -58,10 +58,10 @@ & > #CONTAINER{ display: flex; position: absolute; - top: 4em; - left: 4em; - width: calc( 100% - 4em - 2*1em ); - height: calc( 100% - 4em - 2*1em ); + top: $menu-side-width; + left: $menu-side-width; + width: calc( 100% - #{$menu-side-width} - 2*1em ); + height: calc( 100% - #{$menu-side-width} - 2*1em ); padding: 1em; // Flex properties diff --git a/css/menu-side.css b/css/menu-side.css index dd1b621..1b4a993 100755 --- 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].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;pointer-events:none}#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:#e63321;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} +#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:calc( 4em / 2.5 );height:calc( 4em / 2.5 );transition:fill .3s;pointer-events:none}#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:#e63321;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 #stylisable,#WRAPPER>#MENU-SIDE>span[data-link].active svg #stylisable{fill:#000 !important}#WRAPPER>#MENU-SIDE>span[data-link]:hover svg #stroke-stylisable,#WRAPPER>#MENU-SIDE>span[data-link].active svg #stroke-stylisable{stroke:#000 !important} /*# sourceMappingURL=menu-side.css.map */ diff --git a/css/menu-side.scss b/css/menu-side.scss index 4385b03..9268aff 100755 --- a/css/menu-side.scss +++ b/css/menu-side.scss @@ -5,8 +5,8 @@ & > 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 ); + width: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em ); + height: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em ); // padding: 1em; margin: 2em .7em; @@ -16,7 +16,7 @@ border-radius: 2px; - // Decalage des elemts du menu + // Decalage des elements du menu &.mt{ // Margin Top margin-top: 3em; } @@ -25,19 +25,18 @@ } color: #a2a2a2; - line-height: calc( 4em - 2*.7em - 2*.55em - 2*.01em ); + line-height: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em ); transition: color .3s, border .3s; cursor: pointer; svg, svg *{ - width: 1.5em; - height: 1.5em; + width: calc( #{$menu-side-width} / 2.5 ); + height: calc( #{$menu-side-width} / 2.5 ); - stroke: none !important; - fill: #000 !important; - fill: #777 !important; + // stroke: none !important; + // fill: #777 !important; transition: fill .3s; @@ -79,9 +78,13 @@ color: #fff; } - svg, svg *{ + svg #stylisable{ // pour les elements sauf le profil fill: #000 !important; } + + svg #stroke-stylisable{ // pour le profil + stroke: #000 !important; + } } } diff --git a/src/static/menu-side/profile.svg b/src/static/menu-side/profile.svg new file mode 100644 index 0000000..a5ee7c6 --- /dev/null +++ b/src/static/menu-side/profile.svg @@ -0,0 +1,163 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/todo.md b/todo.md index 158b28b..6affeb7 100755 --- a/todo.md +++ b/todo.md @@ -8,7 +8,6 @@ # EN COURS # ############ - - [ ] [view/users] Gestion des filtres - [ ] [view/machines] Gestion des filtres @@ -18,6 +17,7 @@ ######## # FAIT # ######## +- [x] [menu-side.scss] Icone + svg pour icone du profile - [x] [container.scss] Alignement sur les listes des icones de modif+suppr - [x] [view/js/*] animation pour les recherches (modif/suppr) - [x] [view/js/*] Correction des liens avec element.id_ (hidden) diff --git a/view.php b/view.php index b168cf0..e6b331c 100755 --- a/view.php +++ b/view.php @@ -43,15 +43,15 @@