You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
matrix-chat/src/components/topBanner.vue

78 lines
1.5 KiB
Vue

<template>
<div class="topBanner">
<div>
<router-link to="login">
<icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
</router-link>
<icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
<div id="container">
<div id="chatName">{{chatroom.name}}</div>
<div id="users">{{chatroom.user.length}} members</div>
</div>
<icon v-on:click.native="showChatInfo()" class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
</div>
</div>
</template>
<script>
import icon from '@/components/icon.vue';
import main from '@/main.js';
export default {
name: "topBanner",
components:{
icon
},
methods:{
showChatInfo(){
document.getElementById("chatInformation").style.display = 'block';
}
},
data(){
return {
chatroom: main.data().chatroom
}
}
}
</script>
<style scoped>
.topBanner{
position: absolute;
width: 100%;
height: 3rem;
background-color: #1d1d1d;
box-shadow: 0 0px 5px #111;
}
.smallIcon{
top: 0.25rem;
background-color: #2d2d2d;
height: 2.5rem;
width: 2.5rem;
}
#icon-arrow{
position: absolute;
left: 1rem;
}
#picTop{
position: absolute;
left: 4rem;
background-color: #42a7b9;
}
#icon-menu{
position: absolute;
right: 1rem;
background-color: #2d2d2d;
}
#container{
position: absolute;
top: 0.55rem;
left: 7.5rem;
}
#chatName{
font-size: 1rem;
color: #ededed;
}
#users{
font-size: 0.75rem;
color: #9c9c9c;
}
</style>