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

message align left on oversize

Browse Source
This commit is contained in:
adb 2020-11-03 21:38:42 +01:00
parent cbc7e7eb3a
commit 62ad4f40e8
5 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/error.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div id="errorBox" class="errorBox"> <div id="errorBox" class="errorBox">
<icon class="errorBtn" onclick="this.parentNode.style.display = 'none'" ic="/sym/ic_close_white_24px.svg" /> <icon class="errorBtn" onclick="this.parentNode.style.display = 'none'" ic="./sym/ic_close_white_24px.svg" />
<div id="errorMessage" class="btnText"> <div id="errorMessage" class="btnText">
{{msg}} {{msg}}
</div> </div>
@ -30,6 +30,7 @@ name: "error",
width: 16rem; width: 16rem;
background-color: #E53935; background-color: #E53935;
border-radius: 15px; border-radius: 15px;
box-shadow: 3px 3px 10px #111;
} }
#errorBox{ #errorBox{
display: none; display: none;
@ -39,14 +40,14 @@ name: "error",
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1.4rem; font-size: 1.2rem;
color: #fff; color: #fff;
font-family:Arial, "lucida console", sans-serif; font-family:Arial, "lucida console", sans-serif;
} }
.errorBtn{ .errorBtn{
position: absolute; position: absolute;
top: 0rem; top: 0;
right: 0rem; right: 0;
background-color: #0000; background-color: #0000;
box-shadow: none; box-shadow: none;
} }

13
src/components/message.vue
View File

@ -18,7 +18,7 @@ export default {
<style scoped> <style scoped>
.messageContainer{ .messageContainer{
position: relative; position: relative;
margin-top: 0.5rem; margin-top: 0.25rem;
width: calc(100% - 2rem); width: calc(100% - 2rem);
left: 1rem; left: 1rem;
} }
@ -28,10 +28,17 @@ export default {
width: max-content; width: max-content;
min-width: 5rem; min-width: 5rem;
max-width: calc(100% - 3rem); max-width: calc(100% - 3rem);
padding: 1rem; padding: 0.7rem 1rem 0.45rem 1rem;
right: 0; right: 0;
background-color: #42b983; background-color: #42a7b9;
border-radius: 1rem 1rem 0 1rem; border-radius: 1rem 1rem 0 1rem;
text-align: left; text-align: left;
} }
@media (min-width: 45rem){
.message{
margin-left: 0; margin-right: auto;
border-radius: 1rem 1rem 1rem 0;
}
}
</style> </style>

6
src/components/messageReceive.vue
View File

@ -18,7 +18,7 @@ export default {
<style scoped> <style scoped>
.messageContainer{ .messageContainer{
position: relative; position: relative;
margin-top: 0.5rem; margin-top: 0.25rem;
width: calc(100% - 2rem); width: calc(100% - 2rem);
left: 1rem; left: 1rem;
} }
@ -27,9 +27,9 @@ export default {
width: max-content; width: max-content;
min-width: 5rem; min-width: 5rem;
max-width: calc(100% - 3rem); max-width: calc(100% - 3rem);
padding: 1rem; padding: 0.7rem 1rem 0.45rem 1rem;
left: 0; left: 0;
background-color: #42a7b9; background-color: #42b983;
border-radius: 1rem 1rem 1rem 0; border-radius: 1rem 1rem 1rem 0;
text-align: left; text-align: left;
} }

2
src/components/newMessage.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="newMessageBanner"> <div class="newMessageBanner">
<label for="newMessageInput"></label><textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="content" /> <label for="newMessageInput"></label><textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="content" />
<icon id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="../sym/ic_send_white_24px.svg" /> <icon id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
</div> </div>
</template> </template>

2
src/main.js
View File

@ -34,7 +34,7 @@ socket.onopen = () => {
socket.onerror = (error) => { socket.onerror = (error) => {
console.log(`WebSocket error: ${error}`) console.log(`WebSocket error: ${error}`)
} }
socket.onclose = () => show_error('session timed out (refresh)') socket.onclose = () => show_error('session ended (refresh)')
socket.onmessage = (e) => { socket.onmessage = (e) => {
console.log(`data received => ${e.data}`) console.log(`data received => ${e.data}`)
let msg = JSON.parse(e.data) let msg = JSON.parse(e.data)