adb/matrix-chat
adb/matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

a bit styling

Browse Source
This commit is contained in:
adb 2020-11-22 15:00:48 +01:00
parent 5825801881
commit 1005837ae5
4 changed files with 69 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.vue
View File

@ -22,6 +22,21 @@ export default {
body{ body{
margin: 0; 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 { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
position: absolute; position: absolute;

71
src/components/chatInformation.vue
View File

@ -1,27 +1,29 @@
<template> <template>
<div id="chatInformation"> <div id="chatInformation">
<icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
<div id="box"> <div id="box">
<div class="informationBox"> <div class="scrollContainer">
<div class="picBoxBig"><div class="placeholderBig"><p>{{session.currentRoom.name.substr(0,2)}}</p></div></div> <div class="informationBox">
<div class="roomInformation"> <div class="picBoxBig"><div class="placeholderBig">{{session.currentRoom.name.substr(0,2)}}</div></div>
<div class="roomName">{{session.currentRoom.name}}</div> <div class="roomInformation">
<div class="users">{{session.currentRoom.members.length}} members</div> <div class="roomName">{{session.currentRoom.name}}</div>
</div> <div class="users">{{session.currentRoom.members.length}} members</div>
</div> </div>
<h2 v-if="session.currentRoom.members.length !== 0">members:</h2> </div>
<div v-for="member in session.currentRoom.members" :key="member.sender"> <h2 v-if="session.currentRoom.members.length !== 0">members:</h2>
<div class="contentBox"> <div v-for="member in session.currentRoom.members" :key="member.sender">
<img v-if="member.content.avatar_url" class="picBox" <div class="contentBox">
:src="`https://adb.sh/_matrix/media/r0/thumbnail/adb.sh/${member.content.avatar_url.split('/',4)[3]}?width=64&height=64&method=crop`"/> <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 v-else class="picBox"><p>{{member.content.displayname.substr(0,2)}}</p></div>
</div> </div>
<div class="information"> <div class="information">
<div class="userName">{{member.content.displayname}}</div> <div class="userName">{{member.content.displayname}}</div>
<div class="status">{{member.sender}}</div> <div class="status">{{member.sender}}</div>
</div> </div>
</div>
</div> </div>
</div> </div>
<icon class="closeBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
</div> </div>
</template> </template>
<script> <script>
@ -65,6 +67,12 @@ export default {
height: 100%; height: 100%;
} }
} }
@media (max-height: 40rem) {
#chatInformation{
top: 0;
height: 100%;
}
}
.closeBtn{ .closeBtn{
position: absolute; position: absolute;
top: 0; top: 0;
@ -73,28 +81,25 @@ export default {
box-shadow: none; box-shadow: none;
} }
#box{ #box{
position: relative; position: absolute;
top: 0;
width: calc(100% - 2rem); width: calc(100% - 2rem);
padding: 0.001rem 1rem 1rem; padding: 0 1rem 0 1rem;
overflow-y: auto; overflow-y: auto;
max-height: calc(100% - 8rem); overflow-x: hidden;
margin-top: 2rem; height: 100%;
} }
.informationBox{ .scrollContainer{
margin-top: 0.2rem; padding: 1rem 0 1rem 0;
height: 5rem;
padding: 0.2rem;
} }
.picBoxBig{ .picBoxBig{
text-align: center; text-align: center;
background-color: #42b983 ; background-color: #42a7b9;
padding-top: 1.5rem;
width: 5rem; width: 5rem;
height: 5rem; height: 3.5rem;
border-radius: 5rem; border-radius: 5rem;
} font-size: 2rem;
.placeholderBig{
padding-top: 1rem;
margin-bottom: 1rem;
} }
.roomInformation{ .roomInformation{
position: relative; position: relative;
@ -119,7 +124,7 @@ export default {
.picBox{ .picBox{
position: absolute; position: absolute;
left: 1rem; left: 1rem;
background-color: #00BCD4; background-color: #42a7b9;
width: 3rem; width: 3rem;
height:3rem; height:3rem;
border-radius: 2rem; border-radius: 2rem;

11
src/components/topBanner.vue
View File

@ -2,7 +2,7 @@
<div class="topBanner"> <div class="topBanner">
<div> <div>
<icon @click.native="session.currentRoom = undefined" class="smallIcon" id="icon-arrow" ic="./sym/arrow_back-24px.svg" /> <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="container">
<div id="chatName">{{session.currentRoom.name}}</div> <div id="chatName">{{session.currentRoom.name}}</div>
<div id="users">{{session.currentRoom.members.length}} members</div> <div id="users">{{session.currentRoom.members.length}} members</div>
@ -45,10 +45,17 @@ export default {
.smallIcon{ .smallIcon{
top: 0.25rem; top: 0.25rem;
background-color: #2d2d2d; background-color: #2d2d2d;
height: 2.5rem; padding-top: 0.75rem;
height: 1.75rem;
width: 2.5rem; width: 2.5rem;
box-shadow: none;
border-radius: 1.25rem;
text-align: center;
user-select: none;
cursor: pointer;
} }
#icon-arrow{ #icon-arrow{
height: 2.5rem;
position: absolute; position: absolute;
left: 0.5rem; left: 0.5rem;
background-color: unset; background-color: unset;

12
src/views/rooms.vue
View File

@ -12,7 +12,7 @@
<h1>[c]</h1> <h1>[c]</h1>
<h2>—</h2> <h2>—</h2>
<div v-for="(room, index) in session.rooms" :key="index" @click="openChat(room)" class="roomListElement" :title="room.name"> <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>
</div> </div>
<chat class="chat" v-if="session.currentRoom" /> <chat class="chat" v-if="session.currentRoom" />
@ -38,7 +38,7 @@ export default {
this.$router.push(`/rooms/${room.roomId}`) this.$router.push(`/rooms/${room.roomId}`)
this.$forceUpdate() this.$forceUpdate()
let msgContainer = document.getElementById("messagesContainer") let msgContainer = document.getElementById("messagesContainer")
setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 10) setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 20)
} }
}, },
data(){ data(){
@ -71,7 +71,7 @@ export default {
.roomListElement{ .roomListElement{
position: relative; position: relative;
height: 3rem; height: 3rem;
margin-top: 0.5rem; margin: 0.5rem 0 0.5rem 0;
font-size: 1.2rem; font-size: 1.2rem;
cursor: pointer; cursor: pointer;
background-color: #222; background-color: #222;
@ -92,6 +92,7 @@ export default {
text-align: center; text-align: center;
display: none; display: none;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
} }
.noRoomSelected{ .noRoomSelected{
position: absolute; position: absolute;
@ -103,14 +104,15 @@ export default {
.roomImgPlaceholder{ .roomImgPlaceholder{
position: absolute; position: absolute;
left: 1rem; left: 1rem;
top: 0;
height: 2rem; height: 2rem;
width: 3rem; width: 3rem;
padding-top: 1rem; padding-top: 1rem;
background-color: #42a7b9; background-color: #42a7b9;
border-radius: 1.5rem; border-radius: 1.5rem;
text-align: center; text-align: center;
vertical-align: middle; }
.roomImgPlaceholder.small{
margin-left: calc(50% - 2rem);
} }
@media (max-width: 48rem) { @media (max-width: 48rem) {