From addd185707b9f0ae451d8a042ab631848bd1bdb1 Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Sat, 28 Apr 2018 22:08:28 +0200
Subject: Fixed overlapping messages

---
 main/app/sprinkles/core/assets/SiteAssets/css/main.css     |  7 ++++++-
 .../sprinkles/core/templates/pages/partials/chat.js.twig   | 14 +++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

(limited to 'main/app/sprinkles')

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
-- 
cgit v1.2.3