- [x] [menu-side.scss] Icone + svg pour icone du profile

This commit is contained in:
xdrm-brackets 2016-02-18 22:33:20 +01:00
parent 55223f73a3
commit 7dd1ae0799
8 changed files with 196 additions and 27 deletions

View File

@ -14,6 +14,9 @@ $form-search-color: #5630ed;
$form-invalid-color: #d52918; $form-invalid-color: #d52918;
/* GESTION DES LONGUEURS */
$menu-side-width: 4em;
// POUR RESOURCE_DISPATCHER // POUR RESOURCE_DISPATCHER
$rd-form-valid-color: '27a560'; $rd-form-valid-color: '27a560';

View File

@ -8,8 +8,8 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 4em; width: $menu-side-width;
height: 4em; height: $menu-side-width;
background-color: darken($theme-color, 10); background-color: darken($theme-color, 10);
background-image: url('/f/svg/icon/st'); background-image: url('/f/svg/icon/st');

View File

@ -21,7 +21,7 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: calc( 4em - 1px ); height: calc( #{$menu-side-width} - 1px );
border-bottom: 1px solid darken($theme-color, 10); border-bottom: 1px solid darken($theme-color, 10);
@ -38,9 +38,9 @@
& > #MENU-SIDE{ & > #MENU-SIDE{
display: block; display: block;
position: absolute; position: absolute;
top: 4em; top: $menu-side-width;
left: 0; left: 0;
width: 4em; width: $menu-side-width;
height: 100%; height: 100%;
box-shadow: 2px 1px 3px #ddd; box-shadow: 2px 1px 3px #ddd;
@ -58,10 +58,10 @@
& > #CONTAINER{ & > #CONTAINER{
display: flex; display: flex;
position: absolute; position: absolute;
top: 4em; top: $menu-side-width;
left: 4em; left: $menu-side-width;
width: calc( 100% - 4em - 2*1em ); width: calc( 100% - #{$menu-side-width} - 2*1em );
height: calc( 100% - 4em - 2*1em ); height: calc( 100% - #{$menu-side-width} - 2*1em );
padding: 1em; padding: 1em;
// Flex properties // Flex properties

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

View File

@ -5,8 +5,8 @@
& > span[data-link]{ & > span[data-link]{
display: block; display: block;
position: relative; position: relative;
width: calc( 4em - 2*.7em - 2*.55em - 2*.01em ); width: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em );
height: calc( 4em - 2*.7em - 2*.55em - 2*.01em ); height: calc( #{$menu-side-width} - 2*.7em - 2*.55em - 2*.01em );
// padding: 1em; // padding: 1em;
margin: 2em .7em; margin: 2em .7em;
@ -16,7 +16,7 @@
border-radius: 2px; border-radius: 2px;
// Decalage des elemts du menu // Decalage des elements du menu
&.mt{ // Margin Top &.mt{ // Margin Top
margin-top: 3em; margin-top: 3em;
} }
@ -25,19 +25,18 @@
} }
color: #a2a2a2; 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; transition: color .3s, border .3s;
cursor: pointer; cursor: pointer;
svg, svg *{ svg, svg *{
width: 1.5em; width: calc( #{$menu-side-width} / 2.5 );
height: 1.5em; height: calc( #{$menu-side-width} / 2.5 );
stroke: none !important; // stroke: none !important;
fill: #000 !important; // fill: #777 !important;
fill: #777 !important;
transition: fill .3s; transition: fill .3s;
@ -79,9 +78,13 @@
color: #fff; color: #fff;
} }
svg, svg *{ svg #stylisable{ // pour les elements sauf le profil
fill: #000 !important; fill: #000 !important;
} }
svg #stroke-stylisable{ // pour le profil
stroke: #000 !important;
}
} }
} }

View File

@ -0,0 +1,163 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="33.599998"
height="33.599998"
viewBox="-27 23 33.599999 33.599999"
id="malecostume_1_"
xml:space="preserve"
inkscape:version="0.48.4 r9939"
sodipodi:docname="profile.svg"><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1056"
id="namedview3085"
showgrid="false"
inkscape:zoom="20.85965"
inkscape:cx="17.788199"
inkscape:cy="10.452964"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="malecostume_1_"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" /><metadata
id="metadata57"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
id="defs55" /><g
transform="matrix(0.32,0,0,0.32,-17.56,16.296182)"
id="g3"><g
id="g5"><g
id="g9"><defs
id="defs11"><circle
cx="23"
cy="73"
r="50"
id="stroke-stylisable"
sodipodi:cx="23"
sodipodi:cy="73"
sodipodi:rx="50"
sodipodi:ry="50" /></defs><clipPath
id="SVGID_2_"><use
id="use15"
style="overflow:visible"
x="0"
y="0"
width="101"
height="100"
xlink:href="#stroke-stylisable" /></clipPath><path
d="m 38,98.9 27.9,7.7 c 3.2,1.1 5.7,3.5 7.1,6.6 V 123 H -27 v -9.8 c 1.3,-3.1 3.9,-5.5 7.1,-6.6 L 8,98.9 V 84 h 30 v 14.9 z"
clip-path="url(#SVGID_2_)"
id="path17"
style="fill:#d4b08c"
inkscape:connector-curvature="0" /><g
clip-path="url(#SVGID_2_)"
id="g19"><defs
id="defs21"><path
d="m 38,98.9 27.9,7.7 c 3.2,1.1 5.7,3.5 7.1,6.6 V 123 H -27 v -9.8 c 1.3,-3.1 3.9,-5.5 7.1,-6.6 L 8,98.9 V 84 h 30 v 14.9 z"
id="SVGID_3_"
inkscape:connector-curvature="0" /></defs><clipPath
id="SVGID_4_"><use
id="use25"
style="overflow:visible"
x="0"
y="0"
width="101"
height="100"
xlink:href="#SVGID_3_" /></clipPath><polygon
points="-27,123 23.2,123 73.3,123 73.3,98 35.2,98 30.4,103 23.2,103 16,103 11.2,98 -27,98 "
clip-path="url(#SVGID_4_)"
id="stylisable"
style="fill:#1e1e23" /><polygon
points="7.3,95.3 22,103 23,103 24,103 38.7,95.3 32.9,124.2 23,123.1 13.1,124.2 "
clip-path="url(#SVGID_4_)"
id="polygon29"
style="fill:#c1cad4" /><polygon
points="29.5,124 16.5,124 20.5,112 25.5,112 "
clip-path="url(#SVGID_4_)"
id="polygon31"
style="fill:#216dd9" /><polygon
points="25.5,112 20.5,112 12.5,103 33.5,103 "
clip-path="url(#SVGID_4_)"
id="polygon33"
style="fill:#249cf2" /><path
d="M 38.5,93 24.1,103 34.9,114 39,94 38.5,93 z M 7.5,93 21.9,103 11.1,114 7,94 7.5,93 z"
clip-path="url(#SVGID_4_)"
id="path35"
style="fill:#ffffff"
inkscape:connector-curvature="0" /></g></g><circle
cx="23"
cy="73"
r="50"
id="stroke-stylisable"
style="fill:none;fill-opacity:1;stroke:#777777;stroke-width:5.00000008000000040;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
sodipodi:cx="23"
sodipodi:cy="73"
sodipodi:rx="50"
sodipodi:ry="50"
transform="translate(0,0.44943228)"
d="m 73,73 c 0,27.61424 -22.385763,50 -50,50 -27.6142375,0 -50,-22.38576 -50,-50 0,-27.614237 22.3857625,-50 50,-50 27.614237,0 50,22.385763 50,50 z" /><path
d="M 23,97 C 21.5,97 19.5,96.7 18.2,96.1 16.6,95.4 11,91.5 9.1,89.8 6.6,87.5 5.3,84.7 4.9,79.8 4.5,74.9 3,57.5 3,53.5 3,47.8 8.1,39 23,39 l 0,0 0,0 0,0 0,0 c 14.9,0 20,8.8 20,14.5 0,4 -1.5,21.5 -1.9,26.4 -0.4,4.9 -1.6,7.7 -4.2,10 -1.9,1.7 -7.6,5.6 -9.1,6.3 C 26.5,96.7 24.5,97 23,97 l 0,0 z"
id="path37"
style="fill:#f2cea5"
inkscape:connector-curvature="0" /><path
d="m 30,83 -14,0 c -0.4,0 -0.6,0.4 -0.4,0.8 1.3,2.3 3.7,3.5 6.7,3.7 3.1,0.2 6.5,-1.3 8.1,-3.7 0.2,-0.3 0,-0.8 -0.4,-0.8 z"
id="path39"
style="fill:#a3705f"
inkscape:connector-curvature="0" /><circle
cx="32"
cy="68"
r="2"
id="circle41"
style="fill:#262626"
sodipodi:cx="32"
sodipodi:cy="68"
sodipodi:rx="2"
sodipodi:ry="2"
d="m 34,68 c 0,1.104569 -0.895431,2 -2,2 -1.104569,0 -2,-0.895431 -2,-2 0,-1.104569 0.895431,-2 2,-2 1.104569,0 2,0.895431 2,2 z" /><circle
cx="14"
cy="68"
r="2"
id="circle43"
style="fill:#262626"
sodipodi:cx="14"
sodipodi:cy="68"
sodipodi:rx="2"
sodipodi:ry="2"
d="m 16,68 c 0,1.104569 -0.895431,2 -2,2 -1.104569,0 -2,-0.895431 -2,-2 0,-1.104569 0.895431,-2 2,-2 1.104569,0 2,0.895431 2,2 z" /><path
d="m 8,65 c 0,0 1.1,-3 6.1,-3 3.4,0 5.4,1.5 6.4,3"
id="path45"
style="fill:none;stroke:#cc9872;stroke-width:2"
inkscape:connector-curvature="0" /><path
d="m 38.1,65 c 0,0 -1.1,-3 -6.1,-3 -4.8,0 -7,3 -7,5 0,1.9 0,9 0,9"
id="path47"
style="fill:none;stroke:#bb8660;stroke-width:2"
inkscape:connector-curvature="0" /><path
d="m 41.8,71.2 c 0,0 0.8,-6.3 3.7,-7.2 0.4,-1.8 1.5,-7 1.5,-9.9 0,-2.9 -0.3,-5.7 -1.9,-8.1 -1.8,-2.6 -5.6,-4.1 -7.6,-4.1 -2.3,1.4 -7.7,4.6 -9.4,6.5 -0.9,1 0.4,1.8 0.4,1.8 0,0 1.2,-0.5 1.7,-0.6 2.5,-0.7 8,-1.2 9.7,1.3 2.1,3 2.1,11.8 2.1,13.1 0,1.2 -0.2,7.2 -0.2,7.2 z"
id="path49"
style="fill:#d98c21"
inkscape:connector-curvature="0" /><path
d="m 0.5,64 c 2.9,1 3.7,7.2 3.7,7.2 0,0 -0.2,-6 -0.2,-7.2 0,-1.6 0.2,-9.1 3.4,-12.7 3.6,-4 8.4,-5.3 11.1,-3.5 1.4,0.9 6.1,5.5 11.1,1.7 3,-2.3 8.5,-7.5 8.5,-7.5 0,0 -2.9,-8.9 -16.1,-7.9 -5.6,0.5 -11.8,-0.9 -11.8,-0.9 0,0 -0.1,2.5 0.9,3.8 -8.3,2.4 -11,8.4 -11.8,13 -0.2,0.9 -0.3,1.8 -0.3,2.7 0,0.5 0,1 0,1.4 0,2.9 1.1,8 1.5,9.9 z"
id="path51"
style="fill:#e6a422"
inkscape:connector-curvature="0" /></g></g></svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

@ -8,7 +8,6 @@
# EN COURS # # EN COURS #
############ ############
- [ ] [view/users] Gestion des filtres - [ ] [view/users] Gestion des filtres
- [ ] [view/machines] Gestion des filtres - [ ] [view/machines] Gestion des filtres
@ -18,6 +17,7 @@
######## ########
# FAIT # # FAIT #
######## ########
- [x] [menu-side.scss] Icone + svg pour icone du profile
- [x] [container.scss] Alignement sur les listes des icones de modif+suppr - [x] [container.scss] Alignement sur les listes des icones de modif+suppr
- [x] [view/js/*] animation pour les recherches (modif/suppr) - [x] [view/js/*] animation pour les recherches (modif/suppr)
- [x] [view/js/*] Correction des liens avec element.id_ (hidden) - [x] [view/js/*] Correction des liens avec element.id_ (hidden)

View File

@ -43,15 +43,15 @@
<!-- MENU DE LA PAGE --> <!-- MENU DE LA PAGE -->
<nav id='MENU-SIDE'> <nav id='MENU-SIDE'>
<span data-link='profile' data-desc='Profil' class='mb' ><?php echo ResourceDispatcher::getResource('f/svg/dashboard/st/menu-side'); ?></span> <span data-link='profile' data-desc='Profil' class='mb' ><?php echo ResourceDispatcher::getResource('f/svg/profile/st/menu-side'); ?></span>
<span data-link='dashboard' data-desc='Tableau de bord' class='apart' ><?php echo ResourceDispatcher::getResource('f/svg/dashboard/st/menu-side'); ?></span> <span data-link='dashboard' data-desc='Tableau de bord' class='apart' ><?php echo ResourceDispatcher::getResource('f/svg/dashboard/st/menu-side/777777'); ?></span>
<span data-link='machines' data-desc='Véhicules' ><?php echo ResourceDispatcher::getResource('f/svg/machines/st/menu-side' ); ?></span> <span data-link='machines' data-desc='Véhicules' ><?php echo ResourceDispatcher::getResource('f/svg/machines/st/menu-side/777777' ); ?></span>
<span data-link='users' data-desc='Utilisateurs' ><?php echo ResourceDispatcher::getResource('f/svg/users/st/menu-side' ); ?></span> <span data-link='users' data-desc='Utilisateurs' ><?php echo ResourceDispatcher::getResource('f/svg/users/st/menu-side/777777' ); ?></span>
<span data-link='analytics' data-desc='Statistiques et suivi' ><?php echo ResourceDispatcher::getResource('f/svg/analytics/st/menu-side'); ?></span> <span data-link='analytics' data-desc='Statistiques et suivi' ><?php echo ResourceDispatcher::getResource('f/svg/analytics/st/menu-side/777777'); ?></span>
<span data-link='settings' data-desc='Paramètres' class='mt' ><?php echo ResourceDispatcher::getResource('f/svg/settings/st/menu-side' ); ?></span> <span data-link='settings' data-desc='Paramètres' class='mt' ><?php echo ResourceDispatcher::getResource('f/svg/settings/st/menu-side/777777' ); ?></span>
</nav> </nav>