fixed user message placement and some css cleanup
This commit is contained in:
Khyretos
parent
ea61a8ec12
commit
914cf831c4
6 changed files with 86 additions and 160 deletions
169
src/css/chat.css
169
src/css/chat.css
|
|
@ -14,7 +14,8 @@ h1 {
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: var(--mid-section);
|
||||
margin-left: 50px;
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
font-family: 'FRAMDCN';
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -175,40 +176,45 @@ h1 {
|
|||
.msg-container {
|
||||
direction: ltr;
|
||||
position: static;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 0px 0px 10px 0px;
|
||||
padding: 10px 0px 0px 0px;
|
||||
display: grid;
|
||||
grid-template: 1fr / 1fr;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.msg-container-user {
|
||||
direction: rtl;
|
||||
position: static;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
.msg-container > * {
|
||||
grid-column: 1 / 1;
|
||||
grid-row: 1 / 1;
|
||||
}
|
||||
|
||||
.msg-container.sender {
|
||||
place-items: self-start;
|
||||
}
|
||||
|
||||
.msg-container.user {
|
||||
place-items: self-end;
|
||||
}
|
||||
|
||||
.msg-box {
|
||||
background: var(--chat-bubble);
|
||||
color: white;
|
||||
min-width: 150px;
|
||||
min-width: 100px;
|
||||
border-radius: 5px;
|
||||
padding: 20px 5px 5px 25px;
|
||||
margin: 20px 0px 0px 25px;
|
||||
padding: 18px 5px 5px 5px;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
|
||||
width: fit-content;
|
||||
position: relative;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.msg-box-user {
|
||||
background: var(--chat-bubble);
|
||||
color: white;
|
||||
text-align: -webkit-left;
|
||||
min-width: 150px;
|
||||
border-radius: 5px;
|
||||
padding: 20px 15px 10px 5px;
|
||||
margin: 0px 35px 0px 25px;
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
|
||||
width: fit-content;
|
||||
.msg-box.sender {
|
||||
margin: 25px 25px 0px 35px;
|
||||
}
|
||||
|
||||
.msg-box.user {
|
||||
text-align: left;
|
||||
margin: 25px 35px 0px 0px;
|
||||
}
|
||||
|
||||
.msg-box-user-temp {
|
||||
|
|
@ -217,26 +223,15 @@ h1 {
|
|||
|
||||
.user-img {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
z-index: 5;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.user-img-user {
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.messages {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.messages-user {
|
||||
.messages.user {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -250,10 +245,6 @@ h1 {
|
|||
color: var(--chat-bubble-message-temp);
|
||||
}
|
||||
|
||||
/* .msg:first-of-type {
|
||||
margin-top: 8px;
|
||||
} */
|
||||
|
||||
.timestamp {
|
||||
color: var(--chat-bubble-header);
|
||||
font-size: 10pt;
|
||||
|
|
@ -266,27 +257,22 @@ h1 {
|
|||
}
|
||||
|
||||
.username {
|
||||
float: left;
|
||||
background-color: var(--main-color4);
|
||||
margin-left: 25px;
|
||||
color: white;
|
||||
position: relative;
|
||||
padding: 5px 5px 5px 30px;
|
||||
border-radius: 5px;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.username-user {
|
||||
background-color: var(--main-color4);
|
||||
margin-right: 25px;
|
||||
color: white;
|
||||
padding: 5px 40px 5px 15px;
|
||||
border-radius: 5px;
|
||||
margin: 0px 30px 5px 5px;
|
||||
top: 15px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.username.sender {
|
||||
padding: 0px 5px 5px 30px;
|
||||
margin: 20px 5px 5px 30px;
|
||||
}
|
||||
|
||||
.username.user {
|
||||
padding: 0px 30px 5px 5px;
|
||||
margin: 20px 30px 5px 5px;
|
||||
}
|
||||
|
||||
.username-temp {
|
||||
|
|
@ -295,68 +281,28 @@ h1 {
|
|||
|
||||
.post-time {
|
||||
font-size: 8pt;
|
||||
padding: 3px 5px 0px 15px;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
background-color: var(--main-color4);
|
||||
right: 15px;
|
||||
top: -19px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
align-self: start;
|
||||
}
|
||||
.post-time.sender {
|
||||
padding: 5px 5px 0px 15px;
|
||||
margin: 0px 0px 0px 50px;
|
||||
}
|
||||
|
||||
.post-time-user {
|
||||
font-size: 8pt;
|
||||
padding: 3px 15px 0px 5px;
|
||||
margin: 5px -15px 0px -10px;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
background-color: var(--main-color4);
|
||||
right: 60px;
|
||||
top: -19px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
.post-time.user {
|
||||
padding: 5px 15px 0px 5px;
|
||||
margin: 0px 50px 0px 0px;
|
||||
}
|
||||
|
||||
/* .msg-self .msg-box {
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
background: var(--main-color1);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.msg-self .user-img {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.msg-self .msg {
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
} */
|
||||
|
||||
.mmg {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-container-user {
|
||||
direction: ltr;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
@ -365,19 +311,18 @@ h1 {
|
|||
|
||||
.status-circle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin-left: -15px;
|
||||
z-index: 6;
|
||||
margin-top: -30px;
|
||||
position: relative;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.status-circle-user {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
z-index: 6;
|
||||
margin-top: -30px;
|
||||
.status-circle.sender {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.status-circle.user {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.menu-select {
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@
|
|||
left: 50px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,25 +8,24 @@ function getResponse() {
|
|||
|
||||
// Create chat message from received data
|
||||
const article = document.createElement('article');
|
||||
article.className = 'msg-container-user';
|
||||
article.className = 'msg-container user';
|
||||
|
||||
article.innerHTML = messageTemplates.userTemplate;
|
||||
|
||||
const userImg = article.querySelector('.icon-container-user > .user-img-user');
|
||||
const userImg = article.querySelector('.user-img');
|
||||
if (userImg) {
|
||||
userImg.src = settings.TWITCH.USER_LOGO_URL;
|
||||
}
|
||||
|
||||
const postTime = article.querySelector('.post-time-user');
|
||||
|
||||
const iconContainer = article.querySelector('.icon-container-user');
|
||||
iconContainer.appendChild(postTime);
|
||||
const postTime = article.querySelector('.post-time');
|
||||
|
||||
if (postTime) {
|
||||
postTime.innerText = getPostTime();
|
||||
}
|
||||
|
||||
const msg = article.querySelector('.msg-box-user');
|
||||
article.appendChild(postTime);
|
||||
|
||||
const msg = article.querySelector('.msg-box');
|
||||
if (msg) {
|
||||
msg.innerText = userText;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,26 @@
|
|||
const twitchTemplate = `
|
||||
<div class="icon-container">
|
||||
<img class="user-img" src="" />
|
||||
<img class="status-circle" src="./images/twitch-icon.png" />
|
||||
</div>
|
||||
<span class="username"></span>
|
||||
<div class="msg-box">
|
||||
</div>
|
||||
<img class="user-img" src="" />
|
||||
<img class="status-circle sender" src="./images/twitch-icon.png" />
|
||||
<span class="post-time sender"></span>
|
||||
<span class="username sender"></span>
|
||||
<div class="msg-box sender"></div>
|
||||
`.trim();
|
||||
|
||||
const userTemplate = `
|
||||
<div class="icon-container-user">
|
||||
<span class="post-time-user">You</span>
|
||||
<img class="status-circle-user" src="./images/twitch-icon.png" />
|
||||
<img class="user-img-user" src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />
|
||||
</div>
|
||||
<span class="username-user">You</span>
|
||||
<div class="msg-box-user">
|
||||
</div>
|
||||
<img class="user-img" src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />
|
||||
<img class="status-circle user" src="./images/twitch-icon.png" />
|
||||
<span class="post-time user"></span>
|
||||
<span class="username user">You</span>
|
||||
<div class="msg-box user"></div>
|
||||
`.trim();
|
||||
|
||||
const messageTemplate = `
|
||||
<article class="msg-container msg-self" id="msg-0">
|
||||
<div class="icon-container-user">
|
||||
<img class="user-img-user" src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />
|
||||
<img class="status-circle-user" src="./images/twitch-icon.png" />
|
||||
</div>
|
||||
<div class="msg-box-user msg-box-user-temp">
|
||||
<div class="flr">
|
||||
<div class="messages-user">
|
||||
<span class="timestamp timestamp-temp"><span class="username username-temp">You</span><span class="posttime">${getPostTime()}</span></span>
|
||||
<br>
|
||||
<p class="msg msg-temp" id="msg-0">
|
||||
hello there
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<article class="msg-container user" id="msg-0">
|
||||
<img class="user-img" src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />
|
||||
<img class="status-circle user" src="./images/twitch-icon.png" />
|
||||
<span class="post-time user"> 12:00 PM</span>
|
||||
<span class="username user">You</span>
|
||||
<div class="msg-box user">Hello there</div>
|
||||
</article>
|
||||
`.trim();
|
||||
|
||||
|
|
|
|||
|
|
@ -210,8 +210,8 @@ function showChatMessage(article, isUser) {
|
|||
msg = article.querySelector('.msg-box');
|
||||
}
|
||||
|
||||
var style = getComputedStyle(usernameHtml);
|
||||
var style2 = getComputedStyle(usernameHtml);
|
||||
// var style = getComputedStyle(usernameHtml);
|
||||
// var style2 = getComputedStyle(usernameHtml);
|
||||
|
||||
const lastMessage = messages[messages.length - 1];
|
||||
lastMessage.scrollIntoView({ behavior: 'smooth' });
|
||||
|
|
|
|||
|
|
@ -40,11 +40,11 @@ function ping(element) {
|
|||
|
||||
function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage) {
|
||||
const article = document.createElement('article');
|
||||
article.className = 'msg-container msg-remote';
|
||||
article.className = 'msg-container sender';
|
||||
|
||||
article.innerHTML = messageTemplates.twitchTemplate;
|
||||
|
||||
const userImg = article.querySelector('.icon-container > .user-img');
|
||||
const userImg = article.querySelector('.user-img');
|
||||
if (userImg) {
|
||||
userImg.src = logoUrl;
|
||||
}
|
||||
|
|
@ -54,15 +54,13 @@ function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage
|
|||
usernameHtml.innerText = username;
|
||||
}
|
||||
|
||||
const postTime = document.createElement('span');
|
||||
postTime.classList.add('post-time');
|
||||
const postTime = article.querySelector('.post-time');
|
||||
|
||||
if (postTime) {
|
||||
postTime.innerText = getPostTime();
|
||||
}
|
||||
|
||||
const iconContainer = article.querySelector('.icon-container');
|
||||
iconContainer.appendChild(postTime);
|
||||
article.appendChild(postTime);
|
||||
|
||||
const msg = article.querySelector('.msg-box');
|
||||
if (msg) {
|
||||
|
|
@ -73,7 +71,6 @@ function displayTwitchMessage(logoUrl, username, messageObject, fileteredMessage
|
|||
msg.innerHTML += entry.html;
|
||||
}
|
||||
});
|
||||
// msg.appendChild(postTime);
|
||||
}
|
||||
|
||||
// Appends the message to the main chat box (shows the message)
|
||||
|
|
|
|||
Loading…
Reference in a new issue