+add login_wrapper + fix menu + removed popup on page.home + minmod

This commit is contained in:
xdrm-brackets 2018-02-27 14:33:04 +01:00
parent 7073b3f967
commit 1c9fe2244a
7 changed files with 101 additions and 17 deletions

View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.4">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Connexion</title>
<!-- Icon -->
<link rel='shortcut icon' href='/favicon.ico'>
<!-- CSS dependencies -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' type='text/css' href='/css/font-loader.css'>
<link rel='stylesheet' type='text/css' href='/css/global.css'>
<link rel='stylesheet' type='text/css' href='/css/layout.css'>
<link rel='stylesheet' type='text/css' href='/css/container-login.css'>
<!-- JS dependencies -->
<script type='text/javascript' src='/js/_SERVER.js'></script>
</head>
<body>
<div id='main-vue'></div>
<!-- POPUP WINDOW -->
<div id='POPUP'>
<div class='header'></div>
<div class='body'></div>
<div class='footer'></div>
</div>
<div id='POPUP-BG'></div>
<!-- Main loop -->
<script type='text/javascript' src='/js/bundle@login.js'></script>
</body>
</html>

View File

@ -23,4 +23,4 @@ new Vue({
// popup test
popup.ask({title: 'Un exemple de popup', content: "Un <b>PopUp</b> <i>sauvage</i> apparait !!<br>contenu HTML quelconque ...<br> une question, validation de suppression, etc.", action: 'Bouton d\'action', 'type': 'search' }, function(e){ console.log("Resultat Popup: "+!!e); });
// popup.ask({title: 'Un exemple de popup', content: "Un <b>PopUp</b> <i>sauvage</i> apparait !!<br>contenu HTML quelconque ...<br> une question, validation de suppression, etc.", action: 'Bouton d\'action', 'type': 'search' }, function(e){ console.log("Resultat Popup: "+!!e); });

View File

@ -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)
render: h => h(login_wrapper_vue)
});
console.log('login page');

View File

@ -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{

View File

@ -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;
}
}

View File

@ -0,0 +1,22 @@
<template>
<div id="WRAPPER" class='login'>
<div id='LOGIN_REDIRECT'>
<button class='search'>Login button</button>
</div>
</div>
</template>
<script>
export default {
name: 'login_wrapper',
data(){ return { gstore: gstore.get }; }
}
</script>

View File

@ -5,9 +5,9 @@
<div v-for='(item, index) in gstore.menu_item'
:class="(index == gstore.menu_item_active) ? 'item active' : 'item'"
@click='navigate(index)'
:data-icon='item.icon'>
:data-icon='item.icon' :data-label='item.label'>
<span>{{ item.label }}</span>
<!-- <span>{{ item.label }}</span> -->
</div>