From 2ecfbce75f437f182318225db6c631b7909a32a6 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 20 Feb 2018 19:00:09 +0100 Subject: [PATCH] added router.svg coloring + some icons + base menu layout --- build/router/controller/svg.php | 60 ++++++++++++++++++++++++ config/routes.json | 9 ++++ public_html/asset/svg/fiche.svg | 53 ++++++++++++++++++++++ public_html/asset/svg/home.svg | 54 ++++++++++++++++++++++ public_html/asset/svg/manage.svg | 47 +++++++++++++++++++ webpack/scss/layout.scss | 2 +- webpack/scss/menu.scss | 78 ++++++++++++++++++++++++++++++++ webpack/vue/menu.vue | 9 ++-- 8 files changed, 307 insertions(+), 5 deletions(-) create mode 100644 build/router/controller/svg.php create mode 100644 public_html/asset/svg/fiche.svg create mode 100644 public_html/asset/svg/home.svg create mode 100644 public_html/asset/svg/manage.svg diff --git a/build/router/controller/svg.php b/build/router/controller/svg.php new file mode 100644 index 0000000..ac308c1 --- /dev/null +++ b/build/router/controller/svg.php @@ -0,0 +1,60 @@ + Calling URI + * + */ + public function __construct($url){ + $this->path = $url['path']; + $this->color = substr($url['color'], 1); + } + + + /* Colorate svg + * + */ + public function color(){ + header('Content-Type: image/svg+xml'); + + // On crée la partie ajoutée + $stylesheet = "\n"; + + // On récupère le fichier + $file = file_get_contents(__PUBLIC__.'/'.$this->path); + + // On ajoute le style + $file = str_replace('', $stylesheet, $file); + + echo $file; + + } + + /* POST-CALL + * + */ + public function __destruct(){ + + } + + + + } diff --git a/config/routes.json b/config/routes.json index 4351cc3..43f90d5 100644 --- a/config/routes.json +++ b/config/routes.json @@ -20,6 +20,15 @@ } }, + "/{path}{color}": { + "methods": ["GET"], + "controller": "svg:color", + "arguments": { + "path": ".+\\.svg", + "color": "@[a-fA-F0-9]{6}" + } + }, + "/{page}/{uri}": { "methods": ["GET"], "controller": "page:load", diff --git a/public_html/asset/svg/fiche.svg b/public_html/asset/svg/fiche.svg new file mode 100644 index 0000000..6a06f61 --- /dev/null +++ b/public_html/asset/svg/fiche.svg @@ -0,0 +1,53 @@ + + + + + + image/svg+xml + + + + + + + + diff --git a/public_html/asset/svg/home.svg b/public_html/asset/svg/home.svg new file mode 100644 index 0000000..0005696 --- /dev/null +++ b/public_html/asset/svg/home.svg @@ -0,0 +1,54 @@ + + + + + + image/svg+xml + + + + + + + + diff --git a/public_html/asset/svg/manage.svg b/public_html/asset/svg/manage.svg new file mode 100644 index 0000000..f83dcf4 --- /dev/null +++ b/public_html/asset/svg/manage.svg @@ -0,0 +1,47 @@ + +image/svg+xml \ No newline at end of file diff --git a/webpack/scss/layout.scss b/webpack/scss/layout.scss index f68bb4f..8e2eb9a 100644 --- a/webpack/scss/layout.scss +++ b/webpack/scss/layout.scss @@ -11,7 +11,7 @@ body{ width: 100%; height: 100%; - background: #ccc; + background: #fefeff; font-size: 16px; font-family: 'Open Sans'; diff --git a/webpack/scss/menu.scss b/webpack/scss/menu.scss index e69de29..870048e 100644 --- a/webpack/scss/menu.scss +++ b/webpack/scss/menu.scss @@ -0,0 +1,78 @@ +$menu-bg: #163042; + +#side-menu{ + + /* (1) Container + ---------------------------------------------------------*/ + display: flex; + position: absolute; + top: 0; + left: 0; + width: 4.5em; + height: 100%; + + background-color: $menu-bg; + + // flex properties + flex-direction: column; + justify-content: space-around; + align-items: center; + + /* (2) Items + ---------------------------------------------------------*/ + .item{ + display: block; + width: 3.5em; + height: 3.5em; + + border-radius: 3px / 3px; + + // box-shadow: inset 0 0 5px darken($menu-bg, 6%); + + background: url('/asset/svg/home.svg') center center no-repeat; + background-size: 50%; + + border: 1px solid lighten($menu-bg, 5%); + + transition: all .2s ease-in-out; + + cursor: pointer; + + /* (1) Set icons */ + &[data-icon='home']{ background-image: url('/asset/svg/home.svg'); } + &[data-icon='manage']{ background-image: url('/asset/svg/manage.svg'); } + &[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg'); } + &[data-icon='login']{ background-image: url('/asset/svg/login.svg'); } + &[data-icon='logout']{ background-image: url('/asset/svg/logout.svg'); } + + /* (2) On mouseover */ + &:hover{ + border: 1px solid lighten($menu-bg, 20%); + // box-shadow: inset 0 0 5px darken($menu-bg, 60%); + } + + /* (3) Label */ + span{ + + display: none; + // display: block; + position: absolute; + margin-top: calc( 3.5em / 4 ); + left: calc( 100% + .5em ); + + padding: .3em .7em; + + background-color: $menu-bg; + + color: #fff; + + border-radius: 3px / 3px; + + } + + /* (4) Display label on item hover */ + &:hover span{ display: block; } + + } + +} \ No newline at end of file diff --git a/webpack/vue/menu.vue b/webpack/vue/menu.vue index 9b34c64..4b6044d 100644 --- a/webpack/vue/menu.vue +++ b/webpack/vue/menu.vue @@ -1,12 +1,13 @@