+add login_wrapper + fix menu + removed popup on page.home + minmod
This commit is contained in:
xdrm-brackets
parent
7073b3f967
commit
1c9fe2244a
|
|
@ -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>
|
||||
|
|
@ -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); });
|
||||
|
|
@ -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');
|
||||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue