a bit styling
This commit is contained in:
parent
5825801881
commit
1005837ae5
15
src/App.vue
15
src/App.vue
@ -22,6 +22,21 @@ export default {
|
||||
body{
|
||||
margin: 0;
|
||||
}
|
||||
*{
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #42b983 #2220;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
*::-webkit-scrollbar-track {
|
||||
background: none;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #42b983;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
position: absolute;
|
||||
|
||||
@ -1,27 +1,29 @@
|
||||
<template>
|
||||
<div id="chatInformation">
|
||||
<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>{{session.currentRoom.name.substr(0,2)}}</p></div></div>
|
||||
<div class="roomInformation">
|
||||
<div class="roomName">{{session.currentRoom.name}}</div>
|
||||
<div class="users">{{session.currentRoom.members.length}} members</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 v-if="session.currentRoom.members.length !== 0">members:</h2>
|
||||
<div v-for="member in session.currentRoom.members" :key="member.sender">
|
||||
<div class="contentBox">
|
||||
<img v-if="member.content.avatar_url" class="picBox"
|
||||
:src="`https://adb.sh/_matrix/media/r0/thumbnail/adb.sh/${member.content.avatar_url.split('/',4)[3]}?width=64&height=64&method=crop`"/>
|
||||
<div class="scrollContainer">
|
||||
<div class="informationBox">
|
||||
<div class="picBoxBig"><div class="placeholderBig">{{session.currentRoom.name.substr(0,2)}}</div></div>
|
||||
<div class="roomInformation">
|
||||
<div class="roomName">{{session.currentRoom.name}}</div>
|
||||
<div class="users">{{session.currentRoom.members.length}} members</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 v-if="session.currentRoom.members.length !== 0">members:</h2>
|
||||
<div v-for="member in session.currentRoom.members" :key="member.sender">
|
||||
<div class="contentBox">
|
||||
<img v-if="member.content.avatar_url" class="picBox"
|
||||
:src="`https://adb.sh/_matrix/media/r0/thumbnail/adb.sh/${member.content.avatar_url.split('/',4)[3]}?width=64&height=64&method=crop`"/>
|
||||
<div v-else class="picBox"><p>{{member.content.displayname.substr(0,2)}}</p></div>
|
||||
</div>
|
||||
<div class="information">
|
||||
<div class="userName">{{member.content.displayname}}</div>
|
||||
<div class="status">{{member.sender}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="information">
|
||||
<div class="userName">{{member.content.displayname}}</div>
|
||||
<div class="status">{{member.sender}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -65,6 +67,12 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-height: 40rem) {
|
||||
#chatInformation{
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.closeBtn{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -73,28 +81,25 @@ export default {
|
||||
box-shadow: none;
|
||||
}
|
||||
#box{
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: calc(100% - 2rem);
|
||||
padding: 0.001rem 1rem 1rem;
|
||||
padding: 0 1rem 0 1rem;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100% - 8rem);
|
||||
margin-top: 2rem;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.informationBox{
|
||||
margin-top: 0.2rem;
|
||||
height: 5rem;
|
||||
padding: 0.2rem;
|
||||
.scrollContainer{
|
||||
padding: 1rem 0 1rem 0;
|
||||
}
|
||||
.picBoxBig{
|
||||
text-align: center;
|
||||
background-color: #42b983 ;
|
||||
background-color: #42a7b9;
|
||||
padding-top: 1.5rem;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 5rem;
|
||||
}
|
||||
.placeholderBig{
|
||||
padding-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.roomInformation{
|
||||
position: relative;
|
||||
@ -119,7 +124,7 @@ export default {
|
||||
.picBox{
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
background-color: #00BCD4;
|
||||
background-color: #42a7b9;
|
||||
width: 3rem;
|
||||
height:3rem;
|
||||
border-radius: 2rem;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="topBanner">
|
||||
<div>
|
||||
<icon @click.native="session.currentRoom = undefined" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" />
|
||||
<icon v-on:click.native="showChatInfo()" class="smallIcon" id="picTop" ic="./sym/supervisor_account-24px.svg" />
|
||||
<div @click="showChatInfo()" class="smallIcon" id="picTop">{{session.currentRoom.name.substr(0,2)}}</div>
|
||||
<div id="container">
|
||||
<div id="chatName">{{session.currentRoom.name}}</div>
|
||||
<div id="users">{{session.currentRoom.members.length}} members</div>
|
||||
@ -45,10 +45,17 @@ export default {
|
||||
.smallIcon{
|
||||
top: 0.25rem;
|
||||
background-color: #2d2d2d;
|
||||
height: 2.5rem;
|
||||
padding-top: 0.75rem;
|
||||
height: 1.75rem;
|
||||
width: 2.5rem;
|
||||
box-shadow: none;
|
||||
border-radius: 1.25rem;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#icon-arrow{
|
||||
height: 2.5rem;
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
background-color: unset;
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<h1>[c]</h1>
|
||||
<h2>—</h2>
|
||||
<div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name">
|
||||
<div class="roomImgPlaceholder">{{room.name.substr(0,2)}}</div>
|
||||
<div class="roomImgPlaceholder small">{{room.name.substr(0,2)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<chat class="chat" v-if="session.currentRoom" />
|
||||
@ -38,7 +38,7 @@ export default {
|
||||
this.$router.push(`/rooms/${room.roomId}`)
|
||||
this.$forceUpdate()
|
||||
let msgContainer = document.getElementById("messagesContainer")
|
||||
setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 10)
|
||||
setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 20)
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@ -71,7 +71,7 @@ export default {
|
||||
.roomListElement{
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
margin-top: 0.5rem;
|
||||
margin: 0.5rem 0 0.5rem 0;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
background-color: #222;
|
||||
@ -92,6 +92,7 @@ export default {
|
||||
text-align: center;
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.noRoomSelected{
|
||||
position: absolute;
|
||||
@ -103,14 +104,15 @@ export default {
|
||||
.roomImgPlaceholder{
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 0;
|
||||
height: 2rem;
|
||||
width: 3rem;
|
||||
padding-top: 1rem;
|
||||
background-color: #42a7b9;
|
||||
border-radius: 1.5rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.roomImgPlaceholder.small{
|
||||
margin-left: calc(50% - 2rem);
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user