integrate master

chatInformations
adb 4 years ago
parent 94eddf81a6
commit 07117763bf

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

@ -1,59 +1,62 @@
<template>
<div class="chatInformation">
<div id="chatInformation">
<h1>open chat</h1>
<icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
<div id="box">
<div class="informationBox">
<div class="picBoxBig"><div class="placeholderBig"><p>O P</p></div></div>
<div class="picBoxBig"><div class="placeholderBig"><p>{{chatroom.name.substr(0,2)}}</p></div></div>
<div class="roomInformation">
<div class="roomName">Open Chat room</div>
<div class="users">2 members</div>
<div class="roomName">{{chatroom.name}}</div>
<div class="users">{{chatroom.user.length}} members</div>
</div>
</div>
<div id="textMembers">Members</div>
<h2 v-if="chatroom.user.length !== 0">members</h2>
<div v-for="user in chatroom.user" :key="user">
<div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="picBox"><div class="picPlaceholder"><p>{{user.substr(0,2)}}</p></div></div>
<div class="information">
<div class="userName">TechCrafter07</div>
<div class="status">Online</div>
<div class="userName">{{user}}</div>
<div class="status">online</div>
</div>
</div>
<div class="contentBox">
<div class="picBox"><div class="picPlaceholder"><p>O P</p></div></div>
<div class="information">
<div class="userName">Alban</div>
<div class="status">Online</div>
</div>
</div>
</div>
</div>
</template>
<script>
import icon from './icon.vue';
import main from '@/main.js'
export default {
name: "chatInformation",
components:{
icon
},
data(){
return {
chatroom: main.data().chatroom
}
}
}
</script>
<style scoped>
.chatInformation{
#chatInformation{
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 5rem;
width: calc(100% - 8rem);
max-width: 30rem;
height: calc(100% - 10rem);
background-color: #1d1d1d;
box-shadow: 6px 6px 20px #111;
border-radius: 1rem;
text-align: center;
display: none;
}
@media (max-width: 30rem) {
.chatInformation{
#chatInformation{
transform: unset;
top: 0;
left: 0;
@ -71,16 +74,14 @@ export default {
#box{
position: relative;
width: calc(100% - 2rem);
background-color: #2d2d2d;
padding: 0.001rem 1rem 1rem;
overflow: auto;
overflow-y: auto;
max-height: calc(100% - 8rem);
}
.informationBox{
margin-top: 0.2rem;
height: 5rem;
padding: 0.2rem;
border-bottom: 2px solid #9c9c9c;
}
.picBoxBig{
text-align: center;
@ -107,17 +108,9 @@ export default {
font-size: 1.2rem;
color: #9c9c9c;
}
#textMembers{
font-size: 1.5rem;
text-align: left;
margin-left: 0.2rem;
margin-top: 0.3rem;
margin-bottom: 0.2rem;
}
.contentBox{
margin-top: 0.2rem;
height: 3.2rem;
border-bottom: 2px solid #9c9c9c ;
padding: 0.2rem;
max-height: 48px;
}

@ -15,6 +15,7 @@
</div>
<newMessage />
<topBanner />
<chatInformation />
</div>
</template>
@ -24,10 +25,12 @@ import messageReceive from '@/components/messageReceive.vue';
import newMessage from '@/components/newMessage.vue';
import topBanner from '@/components/topBanner.vue';
import main from '@/main.js';
import ChatInformation from "@/components/chatInformation";
export default {
name: 'chat',
components: {
ChatInformation,
message,
messageReceive,
newMessage,

Loading…
Cancel
Save