[added] side-menu + works with dynamic room buffer
This commit is contained in:
parent
4f33a1d5a3
commit
c1be9fce4e
|
@ -14,6 +14,7 @@
|
||||||
<link type='text/css' rel='stylesheet' href='./css/global.css'>
|
<link type='text/css' rel='stylesheet' href='./css/global.css'>
|
||||||
<link type='text/css' rel='stylesheet' href='./css/menu.css'>
|
<link type='text/css' rel='stylesheet' href='./css/menu.css'>
|
||||||
<link type='text/css' rel='stylesheet' href='./css/dialog.css'>
|
<link type='text/css' rel='stylesheet' href='./css/dialog.css'>
|
||||||
|
<link type='text/css' rel='stylesheet' href='./css/side-menu.css'>
|
||||||
<link type='text/css' rel='stylesheet' href='./css/container.css'>
|
<link type='text/css' rel='stylesheet' href='./css/container.css'>
|
||||||
<link type='text/css' rel='stylesheet' href='./css/pop-up.css'>
|
<link type='text/css' rel='stylesheet' href='./css/pop-up.css'>
|
||||||
|
|
||||||
|
|
|
@ -118,7 +118,8 @@ export default class RoomController{
|
||||||
id: r.rid,
|
id: r.rid,
|
||||||
name: r.name,
|
name: r.name,
|
||||||
type: r.type,
|
type: r.type,
|
||||||
messages: r.messages
|
messages: r.messages,
|
||||||
|
members: r.members
|
||||||
});
|
});
|
||||||
|
|
||||||
// {7} redirect if first element
|
// {7} redirect if first element
|
||||||
|
|
|
@ -4,6 +4,7 @@ $menu-width: 4.3em;
|
||||||
$dialog-width: 15.2em;
|
$dialog-width: 15.2em;
|
||||||
$header-height: 3em;
|
$header-height: 3em;
|
||||||
$input-height: 5em;
|
$input-height: 5em;
|
||||||
|
$side-menu-width: 14em;
|
||||||
|
|
||||||
/* (2) Main colors */
|
/* (2) Main colors */
|
||||||
$menu-bg: #202225;
|
$menu-bg: #202225;
|
||||||
|
@ -13,6 +14,7 @@ $container-bg: #36393e;
|
||||||
$header-bg: #36393f;
|
$header-bg: #36393f;
|
||||||
$main: #7289da;
|
$main: #7289da;
|
||||||
$input-bg: #36393f;
|
$input-bg: #36393f;
|
||||||
|
$side-menu-bg: #2f3136;
|
||||||
|
|
||||||
|
|
||||||
/* (1) Header specific
|
/* (1) Header specific
|
||||||
|
|
|
@ -61,7 +61,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc( #{$header-height} + #{$bb-offset} );
|
top: calc( #{$header-height} + #{$bb-offset} );
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: calc( 100% - #{$side-menu-width} );
|
||||||
height: calc( 100% - #{$header-height} - #{$bb-offset} );
|
height: calc( 100% - #{$header-height} - #{$bb-offset} );
|
||||||
|
|
||||||
background-color: $input-bg;
|
background-color: $input-bg;
|
||||||
|
|
|
@ -0,0 +1,95 @@
|
||||||
|
@import 'constants';
|
||||||
|
|
||||||
|
#WRAPPER > div.side-menu{
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: $header-height;
|
||||||
|
left: calc( 100% - #{$side-menu-width} );
|
||||||
|
width: $side-menu-width;
|
||||||
|
height: calc( 100% - #{$header-height} );
|
||||||
|
|
||||||
|
background-color: $side-menu-bg;
|
||||||
|
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
align-content: flex-start;
|
||||||
|
|
||||||
|
& > div.user{
|
||||||
|
|
||||||
|
flex: 80%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
margin: .2em 1em;
|
||||||
|
padding: .5em 1em;
|
||||||
|
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
transition: background-color .1s ease-in-out;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover{ background-color: #36393f; }
|
||||||
|
|
||||||
|
& > div.icon{
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
|
||||||
|
margin-right: .5em;
|
||||||
|
|
||||||
|
border-radius: 50% / 50%;
|
||||||
|
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
transition: opacity .2s ease-in-out;
|
||||||
|
background: url() center center no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
|
||||||
|
// icon "pastille"
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: calc( 100% - .9em + .1em );
|
||||||
|
left: calc( 100% - .9em + .1em );
|
||||||
|
width: .7em;
|
||||||
|
height: .7em;
|
||||||
|
|
||||||
|
border-radius: 50% / 50%;
|
||||||
|
border: .2em solid #{$side-menu-bg};
|
||||||
|
|
||||||
|
background-color: #eb7719;
|
||||||
|
|
||||||
|
transition: background-color .1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
// icon border invisible even on hover
|
||||||
|
&:hover > div.icon:after{
|
||||||
|
border-color: #36393f;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-online='1'] > div.icon:after{
|
||||||
|
background-color: #19eb69;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class='side-menu'>
|
||||||
|
|
||||||
|
<div class='user' v-for='user of gs.content.cbuf.users'
|
||||||
|
:data-online='gs.content.rbuf.members.indexOf(user.uid) > -1 ?1:0'>
|
||||||
|
<div class='icon' :style='`background-image: url("https://picsum.photos/150/?random&nonce=${user.uid}");`'></div>
|
||||||
|
<div class='username'>{{ user.username }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template><script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
name: 'side-menu-',
|
||||||
|
|
||||||
|
data(){ return { gs: gs.get }; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
|
@ -13,6 +13,13 @@
|
||||||
<!-- Container -->
|
<!-- Container -->
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
|
|
||||||
|
<!-- Side menu (ONLINE/OFFLINE) -->
|
||||||
|
<side-menu-comp></side-menu-comp>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Pop-up Filter Background -->
|
<!-- Pop-up Filter Background -->
|
||||||
<div id='popup-filter-background' v-show='gs.popup.filter' @click='gs.popup.hide()'></div>
|
<div id='popup-filter-background' v-show='gs.popup.filter' @click='gs.popup.hide()'></div>
|
||||||
|
|
||||||
|
@ -153,6 +160,7 @@
|
||||||
|
|
||||||
import menu_vue from './menu.vue'
|
import menu_vue from './menu.vue'
|
||||||
import dialog_vue from './dialog.vue'
|
import dialog_vue from './dialog.vue'
|
||||||
|
import sidemenu_vue from './side-menu.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
|
@ -162,7 +170,8 @@
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
'MenuComp': menu_vue,
|
'MenuComp': menu_vue,
|
||||||
'DialogComp': dialog_vue
|
'DialogComp': dialog_vue,
|
||||||
|
'SideMenuComp': sidemenu_vue
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue