mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

+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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
public_html/page/login.php Normal file
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>

2
webpack/page/home.js
View File

@ -23,4 +23,4 @@ new Vue({
// popup test // 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); });

8
webpack/page/login.js
View File

@ -4,7 +4,7 @@
import Vue from 'vue' import Vue from 'vue'
/* (2) Vues */ /* (2) Vues */
import wrapper_vue from '../vue/wrapper.vue' import login_wrapper_vue from '../vue/login_wrapper.vue'
/* (3) Data */ /* (3) Data */
require('../data/common'); require('../data/common');
@ -18,5 +18,7 @@ require('../data/home');
/* (1) Render view */ /* (1) Render view */
new Vue({ new Vue({
el: '#main-vue', el: '#main-vue',
render: h => h(wrapper_vue) render: h => h(login_wrapper_vue)
}); });
console.log('login page');

4
webpack/scss/layout.scss
View File

@ -109,7 +109,7 @@ body{
-webkit-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
z-index: 101; z-index: 1000;
&.active{ &.active{
display: flex; display: flex;
@ -180,7 +180,7 @@ body{
background: #29333f; background: #29333f;
background: rgba(41, 51, 63, .8); background: rgba(41, 51, 63, .8);
z-index: 100; z-index: 999;
} }
#POPUP.active ~ #POPUP-BG{ #POPUP.active ~ #POPUP-BG{

33
webpack/scss/menu.scss
View File

@ -2,6 +2,14 @@ $menu-bg: #303030;
$menu-width: 3em; $menu-width: 3em;
$menu-outer-width: #{$menu-width + 1em}; $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{ #side-menu{
/* (1) Container /* (1) Container
@ -24,6 +32,7 @@ $menu-outer-width: #{$menu-width + 1em};
---------------------------------------------------------*/ ---------------------------------------------------------*/
.item{ .item{
display: block; display: block;
position: relative;
width: $menu-width; width: $menu-width;
height: $menu-width; height: $menu-width;
@ -31,7 +40,7 @@ $menu-outer-width: #{$menu-width + 1em};
box-shadow: inset 0 0 0 transparent; box-shadow: inset 0 0 0 transparent;
background: center center no-repeat; background: $menu-bg center center no-repeat;
background-size: 50%; background-size: 50%;
border: 1px solid lighten($menu-bg, 5%); border: 1px solid lighten($menu-bg, 5%);
@ -40,6 +49,8 @@ $menu-outer-width: #{$menu-width + 1em};
cursor: pointer; cursor: pointer;
z-index: 1;
/* (1) Set icons */ /* (1) Set icons */
&[data-icon='home']{ background-image: url('/asset/svg/home.svg@7992a3'); } &[data-icon='home']{ background-image: url('/asset/svg/home.svg@7992a3'); }
&[data-icon='manage']{ background-image: url('/asset/svg/manage.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'); } &[data-icon='logout']:hover, &[data-icon='logout'].active{ background-image: url('/asset/svg/logout.svg@dab245'); }
/* (3) Label */ /* (3) Label */
span{ &:after{
// display: none; content: attr(data-label);
display: block;
display: none;
position: absolute; position: absolute;
margin-top: #{$menu-width / 5}; top: 50%;
left: calc( -100% + .5em ); left: 0;
opacity: 0; opacity: 0;
padding: .3em .7em; padding: .3em .7em;
@ -80,15 +92,18 @@ $menu-outer-width: #{$menu-width + 1em};
border-radius: 3px / 3px; border-radius: 3px / 3px;
transition: all .2s ease-in-out; transform: translateX(-100%) translateY(-50%);
z-index: -1; z-index: -1;
} }
/* (4) Display label on item hover */ /* (4) Display label on item hover */
&:hover span{ &:hover:after{
left: calc( 100% + .5em ); display: block;
left: calc( 100% + 1em );
opacity: 1; opacity: 1;
transform: translateX(0) translateY(-50%);
animation: menu-label .2s ease-in-out 0s;
} }
} }

22
webpack/vue/login_wrapper.vue Normal file
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>

4
webpack/vue/menu.vue
View File

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