diff options
| -rw-r--r-- | main/app/sprinkles/core/assets/SiteAssets/css/main.css | 7 | ||||
| -rw-r--r-- | main/app/sprinkles/core/templates/pages/partials/chat.js.twig | 14 |
2 files changed, 13 insertions, 8 deletions
diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css index e5f915f..af8ef6f 100644 --- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css +++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css @@ -253,7 +253,12 @@ hr.ChatHeaderDivider { font-size: 0.85em; } -.TypingIndicatorMessage { +.MessageWrapper { + display: inline-block; + width: 100%; +} + +.TypingIndicatorMessage .ChatMessage { clear: left; float: left; background-color: #13223c; diff --git a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig b/main/app/sprinkles/core/templates/pages/partials/chat.js.twig index 798c8e0..cb0af5a 100644 --- a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig +++ b/main/app/sprinkles/core/templates/pages/partials/chat.js.twig @@ -55,9 +55,9 @@ function InitializeChatServer() { if (MessageObject.ServerMessage === false) { // NO SERVER MESSAGE -> SENT BY USER if (MessageObject.WasHimself === true) { // -> MESSAGE WAS FROM HIMSELF if (!LastMessage.hasClass("MessageSent")) { // CHECK IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE - ChatMessages.append("<div class='ChatMessage MessageSent AloneMessage animated fadeInRight'>" + MessageObject.Message + "</div><br><br>"); + ChatMessages.append("<div class='MessageWrapper'><div class='ChatMessage MessageSent AloneMessage animated fadeInRight'>" + MessageObject.Message + "</div></div>"); } else if (LastMessage.hasClass("MessageSent")) { // IF PREVIOUS MESSAGE WAS FROM HIMSELF TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN - ChatMessages.append("<div class='ChatMessage MessageSent BottomMessage animated fadeInRight'>" + MessageObject.Message + "</div><br><br>"); + ChatMessages.append("<div class='MessageWrapper'><div class='ChatMessage MessageSent BottomMessage animated fadeInRight'>" + MessageObject.Message + "</div></div>"); if (LastMessage.hasClass("AloneMessage")) { LastMessage.removeClass("AloneMessage"); LastMessage.addClass("TopMessage"); @@ -72,9 +72,9 @@ function InitializeChatServer() { }); } else if (MessageObject.WasHimself === false) { // -> MESSAGE WAS FROM OTHER USER if (!LastMessage.hasClass("MessageReceived")) { // CHECK IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> IF NOT, CREATE NEW 'ALONE' MESSAGE - ChatMessages.append("<div class='ChatMessage MessageReceived AloneMessage animated fadeInLeft'>" + MessageObject.Message + "</div><br><br>"); + ChatMessages.append("<div class='MessageWrapper'><div class='ChatMessage MessageReceived AloneMessage animated fadeInLeft'>" + MessageObject.Message + "</div></div>"); } else if (LastMessage.hasClass("MessageReceived")) { // IF PREVIOUS MESSAGE WAS FROM OTHER USER TOO -> CREATE WITH CORRESPONDING CLASSES FOR DESIGN - ChatMessages.append("<div class='ChatMessage MessageReceived BottomMessage animated fadeInLeft'>" + MessageObject.Message + "</div><br><br>"); + ChatMessages.append("<div class='MessageWrapper'><div class='ChatMessage MessageReceived BottomMessage animated fadeInLeft'>" + MessageObject.Message + "</div></div>"); if (LastMessage.hasClass("AloneMessage")) { LastMessage.removeClass("AloneMessage"); LastMessage.addClass("TopMessage"); @@ -96,16 +96,16 @@ function InitializeChatServer() { } else if (MessageObject.WasHimself === false) { // OTHER USER JOINED A GROUP -> NOTIFY var Message = "{{ translate("CHAT_MESSAGES.USER_GROUP_JOIN", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username); } - ChatMessages.append("<div class='ServerChatMessage'>" + Message + "</span>.</div><br><br>"); + ChatMessages.append("<br><div class='MessageWrapper'><div class='ServerChatMessage'>" + Message + "</span>.</div></div><br>"); } else if (MessageObject.ServerMessageType === "UserDisconnect") { // TYPE: USER DISCONNECTED -> NOTIFY var TranslatedDisconnectMessage = "{{ translate("CHAT_MESSAGES.USER_DISCONNECT", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username); - ChatMessages.append("<div class='ServerChatMessage'>" + TranslatedDisconnectMessage + ".</div><br><br>"); + ChatMessages.append("<br><div class='MessageWrapper'><div class='ServerChatMessage'>" + TranslatedDisconnectMessage + ".</div></div><br>"); } else if (MessageObject.ServerMessageType === "TypingState") { // SOMEBODY'S TYPING STATE CHANGED! if (MessageObject.State === true) { // IF 'SOMEBODY' STARTED TYPING if (MessageObject.WasHimself === true) { // IDENTIFY 'SOMEBODY' -> WAS HIMSELF -> NOT THAT IMPORTANT (USER KNOWS WHEN HE STARTS TYPING?) // NOTHING } else if (MessageObject.WasHimself === false) { // IDENTIFY 'SOMEBODY' -> WAS OTHER USER -> SHOW TYPING ANIMATION ON RECEIVER'S SIDE - ChatMessages.append("<div class='ChatMessage TypingIndicatorMessage AloneMessage'>" + TypingIndicatorAnimationElement + "</div>"); + ChatMessages.append("<div class='MessageWrapper TypingIndicatorMessage'><div class='ChatMessage AloneMessage'>" + TypingIndicatorAnimationElement + "</div></div>"); console.log("[SERVER REPORT] " + MessageObject.Username + " STARTED TYPING"); } } else if (MessageObject.State === false) { // IF 'SOMEBODY' STOPPED TYPING |