From b83b4031dbc9338b94395d79b3a96757b5444f44 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 2 Feb 2016 14:32:02 +0100 Subject: [PATCH] Correction du design de base + delegation a travers les fichiers + @import sass --- css/constants.css | 2 + css/constants.scss | 2 + css/header.css | 2 +- css/header.scss | 41 +++++++++- css/layout.css | 2 +- css/layout.scss | 117 +-------------------------- css/menu-side.css | 2 + css/menu-side.scss | 79 ++++++++++++++++++ css/menu.css | 2 - css/menu.scss | 0 css/submenu-side.css | 2 + css/submenu-side.scss | 1 + src/static/active/menu-dashboard.svg | 51 ------------ src/static/active/menu-machines.svg | 51 ------------ src/static/active/menu-settings.svg | 77 ------------------ src/static/active/menu-sync.svg | 68 ---------------- src/static/active/menu-users.svg | 51 ------------ src/static/loader.svg | 2 +- src/static/loader2.svg | 1 - src/static/menu-dashboard.svg | 20 +++-- src/static/menu-machines.svg | 12 +-- src/static/menu-settings.svg | 42 +++++----- src/static/menu-sync.svg | 12 +-- src/static/users2.svg | 52 ++++++++++++ view.php | 17 ++-- 25 files changed, 235 insertions(+), 473 deletions(-) create mode 100644 css/constants.css create mode 100644 css/constants.scss create mode 100644 css/menu-side.css create mode 100755 css/menu-side.scss delete mode 100755 css/menu.css delete mode 100755 css/menu.scss create mode 100644 css/submenu-side.css create mode 100644 css/submenu-side.scss delete mode 100755 src/static/active/menu-dashboard.svg delete mode 100755 src/static/active/menu-machines.svg delete mode 100755 src/static/active/menu-settings.svg delete mode 100755 src/static/active/menu-sync.svg delete mode 100755 src/static/active/menu-users.svg delete mode 100644 src/static/loader2.svg create mode 100644 src/static/users2.svg diff --git a/css/constants.css b/css/constants.css new file mode 100644 index 0000000..0feab84 --- /dev/null +++ b/css/constants.css @@ -0,0 +1,2 @@ + +/*# sourceMappingURL=constants.css.map */ diff --git a/css/constants.scss b/css/constants.scss new file mode 100644 index 0000000..dc3e6dc --- /dev/null +++ b/css/constants.scss @@ -0,0 +1,2 @@ +$theme-color: #f97a53; +$theme-color: #5395f9; \ No newline at end of file diff --git a/css/header.css b/css/header.css index aee88bc..1f84728 100755 --- a/css/header.css +++ b/css/header.css @@ -1,2 +1,2 @@ -#WRAPPER>#HEADER.loading>.icon{background-image:url("../src/static/loader2.svg");background-size:70% 70%} +#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>#HEADER.loading>.icon{background-image:url("../src/static/loader.svg");background-size:70% 70%} /*# sourceMappingURL=header.css.map */ diff --git a/css/header.scss b/css/header.scss index ef9c8bd..78c1fbf 100755 --- a/css/header.scss +++ b/css/header.scss @@ -1,5 +1,38 @@ -/* Animation de chargement qudnd chargement ajax */ -#WRAPPER > #HEADER.loading > .icon{ - background-image: url('../src/static/loader2.svg'); - background-size: 70% 70%; + +@import 'constants'; + + +#WRAPPER > #HEADER{ + // Icone du site + & > .icon{ + display: block; + position: absolute; + top: 0; + left: 0; + width: 4em; + height: 4em; + + background-color: darken($theme-color, 10); + background-image: url('../src/static/icon.svg'); + background-position: center center; + background-repeat: no-repeat; + background-size: 50% 50%; + + cursor: pointer; + + transition: all .3s; + + // @hover + &:hover{ + background-color: darken($theme-color, 15); + } + + } + + /* Animation de chargement qudnd chargement ajax */ + &.loading > .icon{ + background-image: url('../src/static/loader.svg'); + background-size: 70% 70%; + } + } diff --git a/css/layout.css b/css/layout.css index bddf5c3..3ab2cb9 100755 --- a/css/layout.css +++ b/css/layout.css @@ -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;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} +#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>#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>#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 */ diff --git a/css/layout.scss b/css/layout.scss index 46858d4..8c802b0 100755 --- a/css/layout.scss +++ b/css/layout.scss @@ -1,5 +1,4 @@ -$theme-color: #f97a53; -$theme-color: #5395f9; +@import 'constants'; #WRAPPER{ display: block; @@ -30,32 +29,6 @@ $theme-color: #5395f9; z-index: 10; - // Icone du site - & > .icon{ - display: block; - position: absolute; - top: 0; - left: 0; - width: 4em; - height: 4em; - - background-color: darken($theme-color, 10); - background-image: url('../src/static/icon.svg'); - background-position: center center; - background-repeat: no-repeat; - background-size: 50% 50%; - - cursor: pointer; - - transition: all .3s; - - // @hover - &:hover{ - background-color: darken($theme-color, 15); - } - - } - } @@ -77,94 +50,6 @@ $theme-color: #5395f9; transition: all .3s; z-index: 9; - - - & > 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 ); - - // padding: 1em; - 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; - - svg, svg *{ - width: 1.5em; - height: 1.5em; - - stroke: none !important; - fill: #444 !important; - - transition: fill .3s; - } - - - &[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); - - } - - - &:hover{ - border-color: #e6e6e6; - box-shadow: inset 0 0 .5em #eee; - - &:after{ - transform: scaleX(1); - color: #fff; - } - - svg, svg *{ - fill: $theme-color !important; - } - } - - - &.active{ - border-color: #e6e6e6; - - svg, svg *{ - fill: $theme-color !important; - } - } - - } - - - } - - // Gestion du menu hover - & > #MENU-SIDE > span[data-link]:hover{ - color: darken(#a2a2a2, 30); } diff --git a/css/menu-side.css b/css/menu-side.css new file mode 100644 index 0000000..cdd6e81 --- /dev/null +++ b/css/menu-side.css @@ -0,0 +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] svg,#WRAPPER>#MENU-SIDE>span[data-link] svg *{width:1.5em;height:1.5em;stroke:none !important;fill:#000 !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,#WRAPPER>#MENU-SIDE>span[data-link].active{color:#5395f9;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:#085dde !important} +/*# sourceMappingURL=menu-side.css.map */ diff --git a/css/menu-side.scss b/css/menu-side.scss new file mode 100755 index 0000000..8ff3354 --- /dev/null +++ b/css/menu-side.scss @@ -0,0 +1,79 @@ +@import 'constants'; + +#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 ); + + // padding: 1em; + 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; + + svg, svg *{ + width: 1.5em; + height: 1.5em; + + stroke: none !important; + fill: #000 !important; + + transition: fill .3s; + } + + + &[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); + + } + + + &:hover, + &.active{ + color: $theme-color; + border-color: #e6e6e6; + box-shadow: inset 0 0 .5em #eee; + + &:hover:after{ + transform: scaleX(1); + color: #fff; + } + + svg, svg *{ + fill: darken($theme-color, 20) !important; + } + } + + } + + +} diff --git a/css/menu.css b/css/menu.css deleted file mode 100755 index 745b29c..0000000 --- a/css/menu.css +++ /dev/null @@ -1,2 +0,0 @@ - -/*# sourceMappingURL=menu.css.map */ diff --git a/css/menu.scss b/css/menu.scss deleted file mode 100755 index e69de29..0000000 diff --git a/css/submenu-side.css b/css/submenu-side.css new file mode 100644 index 0000000..0149c70 --- /dev/null +++ b/css/submenu-side.css @@ -0,0 +1,2 @@ + +/*# sourceMappingURL=submenu-side.css.map */ diff --git a/css/submenu-side.scss b/css/submenu-side.scss new file mode 100644 index 0000000..8f81aa8 --- /dev/null +++ b/css/submenu-side.scss @@ -0,0 +1 @@ +@import 'constants'; \ No newline at end of file diff --git a/src/static/active/menu-dashboard.svg b/src/static/active/menu-dashboard.svg deleted file mode 100755 index bdf147b..0000000 --- a/src/static/active/menu-dashboard.svg +++ /dev/null @@ -1,51 +0,0 @@ - -image/svg+xml \ No newline at end of file diff --git a/src/static/active/menu-machines.svg b/src/static/active/menu-machines.svg deleted file mode 100755 index 7979e5b..0000000 --- a/src/static/active/menu-machines.svg +++ /dev/null @@ -1,51 +0,0 @@ - -image/svg+xml \ No newline at end of file diff --git a/src/static/active/menu-settings.svg b/src/static/active/menu-settings.svg deleted file mode 100755 index 5819614..0000000 --- a/src/static/active/menu-settings.svg +++ /dev/null @@ -1,77 +0,0 @@ - -image/svg+xml \ No newline at end of file diff --git a/src/static/active/menu-sync.svg b/src/static/active/menu-sync.svg deleted file mode 100755 index db0b466..0000000 --- a/src/static/active/menu-sync.svg +++ /dev/null @@ -1,68 +0,0 @@ - - - - - - image/svg+xml - - - - - - - - - - - - - diff --git a/src/static/active/menu-users.svg b/src/static/active/menu-users.svg deleted file mode 100755 index 8fd4737..0000000 --- a/src/static/active/menu-users.svg +++ /dev/null @@ -1,51 +0,0 @@ - -image/svg+xml \ No newline at end of file diff --git a/src/static/loader.svg b/src/static/loader.svg index 71c0a24..1b36c21 100644 --- a/src/static/loader.svg +++ b/src/static/loader.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/static/loader2.svg b/src/static/loader2.svg deleted file mode 100644 index 1b36c21..0000000 --- a/src/static/loader2.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/static/menu-dashboard.svg b/src/static/menu-dashboard.svg index 365a9a6..bc3acb9 100755 --- a/src/static/menu-dashboard.svg +++ b/src/static/menu-dashboard.svg @@ -15,10 +15,10 @@ width="32px" xml:space="preserve" inkscape:version="0.48.4 r9939" - sodipodi:docname="1454300750_circle_dashboard_fuel_gauge_meter_icon.svg">image/svg+xml \ No newline at end of file + style="fill:#000000;fill-opacity:1" + inkscape:connector-curvature="0" /> \ No newline at end of file diff --git a/src/static/menu-machines.svg b/src/static/menu-machines.svg index b8c25f8..0a4ec33 100755 --- a/src/static/menu-machines.svg +++ b/src/static/menu-machines.svg @@ -15,10 +15,10 @@ width="32px" xml:space="preserve" inkscape:version="0.48.4 r9939" - sodipodi:docname="1454300768_truck.svg">image/svg+xml \ No newline at end of file + style="fill:#000000;fill-opacity:1" /> \ No newline at end of file diff --git a/src/static/menu-settings.svg b/src/static/menu-settings.svg index 4ccc186..203bf72 100755 --- a/src/static/menu-settings.svg +++ b/src/static/menu-settings.svg @@ -15,10 +15,10 @@ width="128px" xml:space="preserve" inkscape:version="0.48.4 r9939" - sodipodi:docname="1454301416_settings.svg">image/svg+xml \ No newline at end of file + style="fill:#000000;fill-opacity:1" /> \ No newline at end of file diff --git a/src/static/menu-sync.svg b/src/static/menu-sync.svg index 79fc2bc..5b8ccdf 100755 --- a/src/static/menu-sync.svg +++ b/src/static/menu-sync.svg @@ -13,7 +13,7 @@ width="32px" id="svg3043" inkscape:version="0.48.4 r9939" - sodipodi:docname="1454301395_52_Cloud_Sync.svg"> + sodipodi:docname="menu-sync.svg"> @@ -22,7 +22,7 @@ image/svg+xml - + @@ -40,7 +40,7 @@ id="namedview3052" showgrid="false" inkscape:zoom="7.375" - inkscape:cx="-10.305085" + inkscape:cx="-36.61017" inkscape:cy="16" inkscape:window-x="0" inkscape:window-y="24" @@ -54,15 +54,15 @@ id="Icons new Arranged Names Color" stroke="none" stroke-width="1" - style="fill:#a2a2a2;fill-opacity:1"> + style="fill:#000000;fill-opacity:1"> + style="fill:#000000;fill-opacity:1"> + style="fill:#000000;fill-opacity:1" /> diff --git a/src/static/users2.svg b/src/static/users2.svg new file mode 100644 index 0000000..078c571 --- /dev/null +++ b/src/static/users2.svg @@ -0,0 +1,52 @@ + +image/svg+xml \ No newline at end of file diff --git a/view.php b/view.php index b251a92..795e5b2 100755 --- a/view.php +++ b/view.php @@ -10,13 +10,14 @@ - - - - - - - + + + + + + + + @@ -43,7 +44,7 @@