fixed user message placement and some css cleanup

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 {
+.msg-container > * {
-    direction: rtl;
+    grid-column: 1 / 1;
-    position: static;
+    grid-row: 1 / 1;
-    display: inline-block;
+}
-    width: 100%;
+
-    margin-top: 10px;
+.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;
+    padding: 18px 5px 5px 5px;
-    margin: 20px 0px 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;
+    position: relative;
+    align-self: start;
 }
 
-.msg-box-user {
+.msg-box.sender {
-    background: var(--chat-bubble);
+    margin: 25px 25px 0px 35px;
-    color: white;
+}
-    text-align: -webkit-left;
+
-    min-width: 150px;
+.msg-box.user {
-    border-radius: 5px;
+    text-align: left;
-    padding: 20px 15px 10px 5px;
+    margin: 25px 35px 0px 0px;
-    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-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 {
+.messages.user {
-    display: inline-block;
-    border-radius: 50%;
-    height: 50px;
-    width: 50px;
-    position: absolute;
-    z-index: 5;
-}
-
-.messages {
-    margin-left: 20px;
-}
-
-.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: 3;
-    z-index: 1;
+    align-self: start;
 }
 
-.username-user {
+.username.sender {
-    background-color: var(--main-color4);
+    padding: 0px 5px 5px 30px;
-    margin-right: 25px;
+    margin: 20px 5px 5px 30px;
-    color: white;
+}
-    padding: 5px 40px 5px 15px;
+
-    border-radius: 5px;
+.username.user {
-    margin: 0px 30px 5px 5px;
+    padding: 0px 30px 5px 5px;
-    top: 15px;
+    margin: 20px 30px 5px 5px;
-    position: relative;
-    z-index: 1;
 }
 
 .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 {
+.post-time.user {
-    font-size: 8pt;
+    padding: 5px 15px 0px 5px;
-    padding: 3px 15px 0px 5px;
+    margin: 0px 50px 0px 0px;
-    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;
 }
 
-/* .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 {
+.status-circle.sender {
-    width: 20px;
+    margin-left: 40px;
-    height: 20px;
+}
-    border-radius: 50%;
+
-    z-index: 6;
+.status-circle.user {
-    margin-top: -30px;
+    margin-right: 40px;
 }
 
 .menu-select {

src/css/menu.css

@@ -132,7 +132,7 @@
     left: 50px;
     cursor: pointer;
     display: flex;
-    z-index: 1;
+    z-index: 2;
     transition: 0.3s ease-in-out;
 }
 

src/js/chat.js

@@ -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 postTime = article.querySelector('.post-time');
-
-    const iconContainer = article.querySelector('.icon-container-user');
-    iconContainer.appendChild(postTime);
 
     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;
     }

src/js/messageTemplates.js

@@ -1,41 +1,26 @@
 const twitchTemplate = `
-	<div class="icon-container">
+	<img class="user-img" src="" />
-		<img class="user-img" src="" />
+	<img class="status-circle sender" src="./images/twitch-icon.png" />
-		<img class="status-circle" src="./images/twitch-icon.png" />
+	<span class="post-time sender"></span>
-	</div>
+	<span class="username sender"></span>
-	<span class="username"></span>
+	<div class="msg-box sender"></div>
-	<div class="msg-box">
-	</div>
 `.trim();
 
 const userTemplate = `
-	<div class="icon-container-user">
+	<img class="user-img" src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />		
-		<span class="post-time-user">You</span>
+	<img class="status-circle user" src="./images/twitch-icon.png" />
-		<img class="status-circle-user" src="./images/twitch-icon.png" />
+	<span class="post-time user"></span>
-		<img class="user-img-user" src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />
+	<span class="username user">You</span>
-	</div>
+	<div class="msg-box user"></div>
-	<span class="username-user">You</span>
-	<div class="msg-box-user">
-	</div>
 `.trim();
 
 const messageTemplate = `
-<article class="msg-container msg-self" id="msg-0">
+<article class="msg-container user" id="msg-0">
-		<div class="icon-container-user">
+	<img class="user-img" src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />		
-				<img class="user-img-user"  src="https://gravatar.com/avatar/56234674574535734573000000000001?d=retro" />
+	<img class="status-circle user" src="./images/twitch-icon.png" />
-				<img class="status-circle-user"  src="./images/twitch-icon.png" />
+	<span class="post-time user"> 12:00 PM</span>
-		</div>
+	<span class="username user">You</span>
-		<div class="msg-box-user msg-box-user-temp">
+	<div class="msg-box user">Hello there</div>
-				<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>
 `.trim();
 

src/js/renderer.js

@@ -210,8 +210,8 @@ function showChatMessage(article, isUser) {
         msg = article.querySelector('.msg-box');
     }
 
-    var style = getComputedStyle(usernameHtml);
+    // var style = getComputedStyle(usernameHtml);
-    var style2 = getComputedStyle(usernameHtml);
+    // var style2 = getComputedStyle(usernameHtml);
 
     const lastMessage = messages[messages.length - 1];
     lastMessage.scrollIntoView({ behavior: 'smooth' });

src/js/twitch.js

@@ -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');
+    const postTime = article.querySelector('.post-time');
-    postTime.classList.add('post-time');
 
     if (postTime) {
         postTime.innerText = getPostTime();
     }
 
-    const iconContainer = article.querySelector('.icon-container');
+    article.appendChild(postTime);
-    iconContainer.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)