style message items

This commit is contained in:
Ginger Wong 2020-06-09 14:12:50 -07:00
parent 6da9b7c889
commit 21c3520e00
3 changed files with 28 additions and 10 deletions

View file

@ -53,19 +53,17 @@
<div id="chat-container">
<div id="messages-container">
<div v-for="(message, index) in messages">
<div class="bg-white shadow-md px-8 pt-6 pb-8 mb-4">
<div class="flex items-center">
<div class="message flex">
<img
v-bind:src="message.image"
class="w-10 h-10 rounded-full mr-4 border-black-500"
style="padding: 5px; background-color: #ececec;"
class="message-avatar rounded-full"
/>
<div class="text-sm">
<p class="text-700">{{ message.author }}</p>
<p class="text-gray-600"v-html="message.linkedText()"></p>
<div class="message-content">
<p class="message-author">{{ message.author }}</p>
<p class="message-text"v-html="message.linkedText()"></p>
</div>
</div>
</div>
</div>
</div>

View file

@ -98,7 +98,7 @@ function setupWebsocket() {
setupApp()
getStatus()
setupWebsocket()
// setupWebsocket()
// setInterval(getStatus, 5000)
// HLS Video setup

View file

@ -96,7 +96,27 @@ header h1 {
margin-bottom: 0;
}
.message {
padding: .85em;
align-items: flex-start;
}
.message-avatar {
height: 2.5em;
width: 2.5em;
margin-right: .75em;
/* background-color: rgba(236, 236, 236, .5); */
background-color: rgba(0,0,0, .75);
}
.message-content {
font-size: .85em;
}
.message-author {
font-weight: 600;
}
.message-text {
color: #ccc;
font-weight: 100;
}
.no-chat .left-col {