topBanner styling and implementation

topBanner
adb 4 years ago
parent dafcb5da40
commit 2465487417

Before

Width:  |  Height:  |  Size: 210 B

After

Width:  |  Height:  |  Size: 210 B

Before

Width:  |  Height:  |  Size: 350 B

After

Width:  |  Height:  |  Size: 350 B

Before

Width:  |  Height:  |  Size: 465 B

After

Width:  |  Height:  |  Size: 465 B

@ -28,7 +28,8 @@ name: "icon",
position: absolute;
height: 1.5rem;
width: auto;
top: 0.75rem;
left: 0.75rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

@ -1,8 +1,10 @@
<template>
<div class="newMessageBanner">
<label for="newMessageInput"></label>
<textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput" autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
<icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
<textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput"
autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
<icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;"
ic="./sym/ic_send_white_24px.svg" />
</div>
</template>
@ -30,7 +32,7 @@ export default {
id.style.height = `${id.scrollHeight}px`
let msgContainer = document.getElementById("messagesContainer")
msgContainer.style.height
= `calc(100% - ${id.parentElement.clientHeight}px)`
= `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
//msgContainer.scrollTo(0, msgContainer.scrollHeight)
}
},

@ -1,50 +1,60 @@
<template>
<div class="topBanner">
<div>
<div id = "icon-arrow" ><img alt="arrow" class="arrow-Top-Left" src="../sym/arrow_back-24px.svg"></div>
<div id = "picTop"><img alt="Bild" id="picTopPic" src="../sym/supervisor_account-24px.svg"></div>
<icon class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
<icon class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
<div id="container">
<div id = "chatName"> OpenChat</div>
<div id = "users">9 Mitglieder</div>
<div id="chatName">{{roomInfo.name}}</div>
<div id="users">{{roomInfo.user.length}} members</div>
</div>
<div id = "icon-menu"><img alt="menu" class="menu-Top-Right" src="../sym/menu-24px.svg"></div>
<icon class="smallIcon" id="icon-menu" ic="./sym/menu-24px.svg" />
</div>
</div>
</template>
<script>
import icon from '@/components/icon.vue';
export default {
name: "topBanner"
name: "topBanner",
components:{
icon
},
data(){
return {
roomInfo: {
name: "open chat",
user: []
}
}
}
}
</script>
<style scoped>
#icon-arrow{
.topBanner{
position: absolute;
top: 0.24rem;
left: 1rem;
width: 100%;
height: 100%;
max-height: 2.3rem;
max-width: 2.3rem;
border-radius: 1.5rem;
text-align: center;
height: 3rem;
background-color: #1d1d1d;
box-shadow: 0 3px 10px #111;
}
.smallIcon{
top: 0.25rem;
background-color: #2d2d2d;
height: 2.5rem;
width: 2.5rem;
}
.arrow-Top-Left{
margin-top: 0.2rem;
height: 2rem;
width: 2rem;
#icon-arrow{
position: absolute;
left: 1rem;
}
#picTop{
top: 0.24rem;
position: absolute;
fill: #42a7b9;
left: 4rem;
background-color: #42a7b9;
}
#picTopPic{
width: 2.3rem;
height: 2.3rem;
border-radius: 1.5rem;
#icon-menu{
position: absolute;
right: 1rem;
background-color: #2d2d2d;
}
#container{
@ -53,35 +63,11 @@
left: 7.5rem;
}
#chatName{
font-size: medium;
font-size: 1rem;
color: #ededed;
}
#users{
font-size: x-small;
font-size: 0.75rem;
color: #9c9c9c;
}
#icon-menu{
position: absolute;
top: 0.24rem;
right: 1rem;
width: 100%;
height: 100%;
max-height: 2.3rem;
max-width: 2.3rem;
border-radius: 1.5rem;
text-align: center;
background-color: #2d2d2d;
}
.menu-Top-Right {
margin-top: 0.2rem;
height: 2rem;
width: 2rem;
}
.topBanner{
position: absolute;
width: 100%;
height: 3rem;
background-color: #1d1d1d;
}
</style>

@ -26,6 +26,7 @@
</div>
</div>
<newMessage />
<topBanner />
</div>
</template>
@ -33,13 +34,15 @@
import message from '@/components/message.vue';
import messageReceive from '@/components/messageReceive.vue';
import newMessage from '@/components/newMessage.vue';
import topBanner from "@/components/topBanner";
export default {
name: 'chat',
components: {
message,
messageReceive,
newMessage
newMessage,
topBanner
}
}
</script>
@ -49,8 +52,8 @@ export default {
position: absolute;
margin: 0;
left: 0;
top: 0;
height: calc(100% - 4rem);
top: 3rem;
height: calc(100% - 7rem);
width: 100%;
overflow-y: auto;
}

Loading…
Cancel
Save