From 914cf831c4dd107daa2169c58e95fba611c2a0e7 Mon Sep 17 00:00:00 2001 From: Khyretos Date: Tue, 26 Dec 2023 14:02:24 +0100 Subject: [PATCH] fixed user message placement and some css cleanup --- src/css/chat.css | 169 +++++++++++++------------------------ src/css/menu.css | 2 +- src/js/chat.js | 13 ++- src/js/messageTemplates.js | 47 ++++------- src/js/renderer.js | 4 +- src/js/twitch.js | 11 +-- 6 files changed, 86 insertions(+), 160 deletions(-) diff --git a/src/css/chat.css b/src/css/chat.css index e65ea21..bcc1767 100644 --- a/src/css/chat.css +++ b/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 { diff --git a/src/css/menu.css b/src/css/menu.css index efdfed2..d34ca4f 100644 --- a/src/css/menu.css +++ b/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; } diff --git a/src/js/chat.js b/src/js/chat.js index 6ce1af7..e4ad9de 100644 --- a/src/js/chat.js +++ b/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 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; } diff --git a/src/js/messageTemplates.js b/src/js/messageTemplates.js index 10e4eb0..34e6cc4 100644 --- a/src/js/messageTemplates.js +++ b/src/js/messageTemplates.js @@ -1,41 +1,26 @@ const twitchTemplate = ` -
- - -
- -
-
+ + + + +
`.trim(); const userTemplate = ` -
- You - - -
- You -
-
+ + + + You +
`.trim(); const messageTemplate = ` -
-
- - -
-
-
-
- You${getPostTime()} -
-

- hello there -

-
-
-
+
+ + + 12:00 PM + You +
Hello there
`.trim(); diff --git a/src/js/renderer.js b/src/js/renderer.js index 45f7da7..0128a5d 100644 --- a/src/js/renderer.js +++ b/src/js/renderer.js @@ -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' }); diff --git a/src/js/twitch.js b/src/js/twitch.js index ef4f299..6f3ec65 100644 --- a/src/js/twitch.js +++ b/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'); - 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)