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 @@
+
+
+
+
\ 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 @@