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 @@
+
+
+
+
+
+
+
+
+
+
+ :data-icon='item.icon' :data-label='item.label'>
- {{ item.label }}
+