From 1c9fe2244ab03b9af6df4e3746064cd8c9f3852a Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 27 Feb 2018 14:33:04 +0100 Subject: [PATCH] +add login_wrapper + fix menu + removed popup on page.home + minmod --- public_html/page/login.php | 45 +++++++++++++++++++++++++++++++++++ webpack/page/home.js | 2 +- webpack/page/login.js | 8 ++++--- webpack/scss/layout.scss | 4 ++-- webpack/scss/menu.scss | 33 ++++++++++++++++++------- webpack/vue/login_wrapper.vue | 22 +++++++++++++++++ webpack/vue/menu.vue | 4 ++-- 7 files changed, 101 insertions(+), 17 deletions(-) create mode 100644 public_html/page/login.php create mode 100644 webpack/vue/login_wrapper.vue diff --git a/public_html/page/login.php b/public_html/page/login.php new file mode 100644 index 0000000..4706a8f --- /dev/null +++ b/public_html/page/login.php @@ -0,0 +1,45 @@ + + + + + + + + + + Connexion + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/webpack/page/home.js b/webpack/page/home.js index 2ce9cba..6734019 100644 --- a/webpack/page/home.js +++ b/webpack/page/home.js @@ -23,4 +23,4 @@ new Vue({ // popup test -popup.ask({title: 'Un exemple de popup', content: "Un PopUp sauvage apparait !!
contenu HTML quelconque ...
une question, validation de suppression, etc.", action: 'Bouton d\'action', 'type': 'search' }, function(e){ console.log("Resultat Popup: "+!!e); }); \ No newline at end of file +// popup.ask({title: 'Un exemple de popup', content: "Un PopUp sauvage apparait !!
contenu HTML quelconque ...
une question, validation de suppression, etc.", action: 'Bouton d\'action', 'type': 'search' }, function(e){ console.log("Resultat Popup: "+!!e); }); \ No newline at end of file diff --git a/webpack/page/login.js b/webpack/page/login.js index f498e88..0be826d 100644 --- a/webpack/page/login.js +++ b/webpack/page/login.js @@ -4,7 +4,7 @@ import Vue from 'vue' /* (2) Vues */ -import wrapper_vue from '../vue/wrapper.vue' +import login_wrapper_vue from '../vue/login_wrapper.vue' /* (3) Data */ require('../data/common'); @@ -18,5 +18,7 @@ require('../data/home'); /* (1) Render view */ new Vue({ el: '#main-vue', - render: h => h(wrapper_vue) -}); \ No newline at end of file + render: h => h(login_wrapper_vue) +}); + +console.log('login page'); \ No newline at end of file diff --git a/webpack/scss/layout.scss b/webpack/scss/layout.scss index 87ade8d..b264c63 100644 --- a/webpack/scss/layout.scss +++ b/webpack/scss/layout.scss @@ -109,7 +109,7 @@ body{ -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); - z-index: 101; + z-index: 1000; &.active{ display: flex; @@ -180,7 +180,7 @@ body{ background: #29333f; background: rgba(41, 51, 63, .8); - z-index: 100; + z-index: 999; } #POPUP.active ~ #POPUP-BG{ diff --git a/webpack/scss/menu.scss b/webpack/scss/menu.scss index 5ea49b5..4ec3cba 100644 --- a/webpack/scss/menu.scss +++ b/webpack/scss/menu.scss @@ -2,6 +2,14 @@ $menu-bg: #303030; $menu-width: 3em; $menu-outer-width: #{$menu-width + 1em}; + +@keyframes menu-label{ + 0%{ display: none; opacity: 0; left: 0; transform: translateX(-100%) translateY(-50%); } + 1%{ display: block; } + 80%{ opacity: 0; } + 100%{ opacity: 1; left: calc( 100% + 1em ); transform: translateX(0) translateY(-50%); } +} + #side-menu{ /* (1) Container @@ -24,6 +32,7 @@ $menu-outer-width: #{$menu-width + 1em}; ---------------------------------------------------------*/ .item{ display: block; + position: relative; width: $menu-width; height: $menu-width; @@ -31,7 +40,7 @@ $menu-outer-width: #{$menu-width + 1em}; box-shadow: inset 0 0 0 transparent; - background: center center no-repeat; + background: $menu-bg center center no-repeat; background-size: 50%; border: 1px solid lighten($menu-bg, 5%); @@ -40,6 +49,8 @@ $menu-outer-width: #{$menu-width + 1em}; cursor: pointer; + z-index: 1; + /* (1) Set icons */ &[data-icon='home']{ background-image: url('/asset/svg/home.svg@7992a3'); } &[data-icon='manage']{ background-image: url('/asset/svg/manage.svg@7992a3'); } @@ -63,13 +74,14 @@ $menu-outer-width: #{$menu-width + 1em}; &[data-icon='logout']:hover, &[data-icon='logout'].active{ background-image: url('/asset/svg/logout.svg@dab245'); } /* (3) Label */ - span{ + &:after{ - // display: none; - display: block; + content: attr(data-label); + + display: none; position: absolute; - margin-top: #{$menu-width / 5}; - left: calc( -100% + .5em ); + top: 50%; + left: 0; opacity: 0; padding: .3em .7em; @@ -80,15 +92,18 @@ $menu-outer-width: #{$menu-width + 1em}; border-radius: 3px / 3px; - transition: all .2s ease-in-out; + transform: translateX(-100%) translateY(-50%); z-index: -1; } /* (4) Display label on item hover */ - &:hover span{ - left: calc( 100% + .5em ); + &:hover:after{ + display: block; + left: calc( 100% + 1em ); opacity: 1; + transform: translateX(0) translateY(-50%); + animation: menu-label .2s ease-in-out 0s; } } diff --git a/webpack/vue/login_wrapper.vue b/webpack/vue/login_wrapper.vue new file mode 100644 index 0000000..74068e5 --- /dev/null +++ b/webpack/vue/login_wrapper.vue @@ -0,0 +1,22 @@ + + + + \ No newline at end of file diff --git a/webpack/vue/menu.vue b/webpack/vue/menu.vue index 4b6044d..4c7a0b3 100644 --- a/webpack/vue/menu.vue +++ b/webpack/vue/menu.vue @@ -5,9 +5,9 @@
+ :data-icon='item.icon' :data-label='item.label'> - {{ item.label }} +