Smartcraft-Media-Tech/nutty-tools
1
0
Fork 0
mirror of https://github.com/nuttylmao/nutty.gg.git synced 2026-09-19 04:00:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed alignment issues

Browse Source
This commit is contained in:
nuttylmao
2025-04-13 01:58:54 +10:00
parent f7d6937cb0
commit e3d71f77f5
3 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
horizontal-chat/index.html
+12 -12
View File
@@ -21,18 +21,18 @@
</div> </div>
<template id="messageTemplate"> <template id="messageTemplate">
<div style="display: inline;"> <div style="display: inline;">
<label id="userInfo" style="margin-left: 10px;"> <label id="userInfo" style="margin-left: 10px;">
<span id="platform"></span> <span id="platform"></span>
<span id="avatar"></span> <span id="avatar"></span>
<span id="timestamp"></span> <span id="timestamp"></span>
<span id="badgeList"></span> <span id="badgeList"></span>
<span id="pronouns"></span> <span id="pronouns"></span>
<span id="username"></span> <span id="username"></span>
<span id="colon-separator">: </span> <span id="colon-separator">: </span>
</label> </label>
<span id="message"></span> <span id="message"></span>
</div> </div>
</template> </template>
</body> </body>
horizontal-chat/script.js
+3 -1
View File
@@ -277,7 +277,6 @@ async function TwitchChatMessage(data) {
const instance = template.content.cloneNode(true); const instance = template.content.cloneNode(true);
// Get divs // Get divs
const messageContainer = instance.querySelector(".messageContainer");
const userInfoDiv = instance.querySelector("#userInfo"); const userInfoDiv = instance.querySelector("#userInfo");
const avatarDiv = instance.querySelector("#avatar"); const avatarDiv = instance.querySelector("#avatar");
const timestampDiv = instance.querySelector("#timestamp"); const timestampDiv = instance.querySelector("#timestamp");
@@ -1165,6 +1164,7 @@ function ShowAlert(message, background = null, duration = animationDuration) {
// Get divs // Get divs
const messageListDiv = document.querySelector("#messageList"); const messageListDiv = document.querySelector("#messageList");
const backgroundDiv = document.querySelector("#background");
const alertBoxDiv = document.querySelector("#alertBox"); const alertBoxDiv = document.querySelector("#alertBox");
// Set the message text // Set the message text
@@ -1176,11 +1176,13 @@ function ShowAlert(message, background = null, duration = animationDuration) {
// Start the animation // Start the animation
widgetLocked = true; widgetLocked = true;
messageListDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards'; messageListDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
backgroundDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
alertBoxDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards'; alertBoxDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
// To stop the animation (remove the animation property): // To stop the animation (remove the animation property):
setTimeout(() => { setTimeout(() => {
messageListDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards'; messageListDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
backgroundDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
alertBoxDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards'; alertBoxDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
setTimeout(() => { setTimeout(() => {
alertBoxDiv.classList = ''; alertBoxDiv.classList = '';
horizontal-chat/style.css
+1
View File
@@ -47,6 +47,7 @@ html {
bottom: 0; bottom: 0;
right: 0; right: 0;
display: flex; display: flex;
align-items: flex-end;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
text-justify: right; text-justify: right;