techwire/bang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chat layout fix

Browse Source
This commit is contained in:
Alberto Xamin 2020-11-24 11:45:29 +01:00
parent 2772f4a245
commit 5306dc38d3
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/Chat.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div style="max-width: 350pt;"> <div class="chat">
<h3>Chat</h3> <h3>Chat</h3>
<div id="chatbox"> <div id="chatbox">
<p style="margin:1pt;" class="chat-message" v-for="msg in messages" v-bind:key="msg">{{msg}}</p> <p style="margin:1pt;" class="chat-message" v-for="msg in messages" v-bind:key="msg">{{msg}}</p>
<p class="end">.</p> <p class="end">.</p>
</div> </div>
<form @submit="sendChatMessage" style="width:100%; padding:0; display:flex;"> <form @submit="sendChatMessage" id="msg-form">
<input v-model="text" style="flex-grow:2;"/> <input v-model="text" style="flex-grow:2;"/>
<input type="submit"/> <input type="submit"/>
</form> </form>
@ -45,10 +45,24 @@ export default {
overflow-x: hidden; overflow-x: hidden;
overflow-wrap: break-word; overflow-wrap: break-word;
overflow-wrap: normal; overflow-wrap: normal;
border: 1pt solid #ccc; border: 2pt solid #ccc;
border-radius: 2pt; border-radius: 4pt;
}
input {
margin:0;
}
.end {
height: 0pt;
margin-top: -1.5pt;
}
#msg-form {
width:100%;
padding:0;
display:flex;
}
@media only screen and (max-width:1000px) {
#msg-form {
flex-direction: column;
}
} }
/* .chat-message:nth-last-of-type(1) {
margin-bottom: 50pt !important;
} */
</style> </style>

3
frontend/src/components/Lobby.vue
View File

@ -238,5 +238,8 @@ export default {
.lobby { .lobby {
flex-direction: row; flex-direction: row;
} }
.chat {
max-width: 350pt;
}
} }
</style> </style>