ndi-2018
/
main
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

upt: public_html.css.header (add new background-image for user authentication) 

upt: public_html.css.layout (add new css for user authentication)
upt: view.vue.header (add a button for showing login interface)
upt: view.vue.wrapper (add a button for showing login interface)
upt: view.home (add a reference to user authentication css)
upt: view.vue-config (add boolean gstore.data.loginform to display user authentication interface)
This commit is contained in:
Guillaume FAUVET 2017-12-07 22:25:58 +01:00
parent 0406689523
commit d0dc02e53f
6 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public_html/css/header.css
View File

@ -115,6 +115,7 @@
#header-notif .hnotif.message{ background-image: url('/image/header/notif/message.svg@aaaaaa'); }
#header-notif .hnotif.search{ background-image: url('/image/header/notif/search.svg@aaaaaa'); }
#header-notif .hnotif.menu{ background-image: url('/image/header/notif/menu.svg@aaaaaa'); }
#header-notif .hnotif.login{ background-image: url('/image/header/notif/login.svg@aaaaaa'); }
/* HOVER */
#header-notif .hnotif:hover{
@ -127,6 +128,7 @@
#header-notif .hnotif.message:hover{ background-image: url('/image/header/notif/message.svg@23c795'); }
#header-notif .hnotif.search:hover{ background-image: url('/image/header/notif/search.svg@ae51da'); }
#header-notif .hnotif.menu:hover{ background-image: url('/image/header/notif/menu.svg@4a8ad8'); }
#header-notif .hnotif.login:hover{ background-image: url('/image/header/notif/login.svg@660088'); }

24
public_html/css/layout.css
View File

@ -117,3 +117,27 @@ body{
#WRAPPER #NOTIF-STACK.active{
display: block;
}
/* Login form authentication */
#WRAPPER #LOGIN-FORM{
display: none;
position: absolute;
top: 4em;
left: calc( 100% - 21em );
width: 20em;
min-height: 2em;
height: auto;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
overflow: hidden;
z-index: 101;
}
#WRAPPER #LOGIN-FORM.active{
display: block;
}

1
view/home.php
View File

@ -19,6 +19,7 @@
<link rel='stylesheet' type='text/css' href='/css/header.css'>
<link rel='stylesheet' type='text/css' href='/css/container.css'>
<link rel='stylesheet' type='text/css' href='/css/notification-stack.css'>
<link rel='stylesheet' type='text/css' href='/css/login-form.css'>
<!-- JS dependencies -->
<script type='text/javascript' src='/js/_SERVER.js'></script>

5
view/vue-config.js
View File

@ -14,7 +14,7 @@ gstore.add('notif', {
event: { class: 'event', data: [], count: 0 },
inbox: { class: 'message', data: [], count: 0 },
dashboard: { class: 'menu', data: [], count: 0 }
})
});
// Menu
gstore.add('menu_item', {
@ -141,3 +141,6 @@ gstore.add('nstack', false);
// location
gstore.add('loc', [0, 0]);
// login form authentication visibility
gstore.add('loginform', true);

4
view/vue/header.vue
View File

@ -13,6 +13,7 @@
<!-- Header Notif -->
<div id='header-notif'>
<div v-for='(notif, link) in gstore.notif' @click='show_notif(link)' :class='"hnotif " + notif.class' :data-count='notif.count'></div>
<div @click='show_login()' class='hnotif login'></div>
</div>
</div>
@ -27,6 +28,9 @@ export default {
methods: {
show_notif(uri){
this.gstore.func.nav(this.$router, uri);
},
show_login() {
this.gstore.loginform = !this.gstore.loginform;
}
}
}

7
view/vue/wrapper.vue
View File

@ -15,7 +15,7 @@
<notifstack-comp></notifstack-comp>
<!-- Login form -->
<!-- <loginform-comp></loginform-comp> -->
<loginform-comp></loginform-comp>
</div>
</template>
@ -26,7 +26,7 @@
import header_vue from './header.vue'
import menu_vue from './menu.vue'
import notifstack_vue from './notification-stack.vue'
// import loginform_vue from './login-form.vue'
import loginform_vue from './login-form.vue'
export default {
name: 'wrapper',
@ -34,7 +34,8 @@
components: {
'HeaderComp': header_vue,
'MenuComp': menu_vue,
'NotifstackComp': notifstack_vue
'NotifstackComp': notifstack_vue,
'LoginformComp': loginform_vue
}
}