v2.0

Fixed a critical bug that made received messages ALWAYS extend to the 85% of the chat and not wrapping around text.
Aura-Mancer · Oct 14, 2021 · c346438 · c346438
1 parent cdf607d
commit c346438
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 29 deletions.
diff --git a/HTML_examples/example_for_HTML_CSS_users.html b/HTML_examples/example_for_HTML_CSS_users.html
@@ -9,11 +9,13 @@
     <!--Every message bubble is wrapped in a "messagerow" to keep them from overlapping-->
     <div class="messagerow">
         <!--Use the first class to give it the "triangle" that messages at the beggining of a chain have-->
-        <div class="recieved first">
-            <!--Message text-->
-            <p>This is an example</p>
-            <!--Timestamp-->
-            <p class="timerecieved">11:50pm</p>
+        <div class="recieved">
+            <div class="recievedbubble first">
+                <!--Message text-->
+                <p>This is an example</p>
+                <!--Timestamp-->
+                <p class="timerecieved">11:50pm</p>
+            </div>
         </div>
     </div>
     <!--Sent message-->
@@ -27,21 +29,29 @@
     </div>
     <p class="name character2">Beta</p>
     <div class="messagerow">
-        <div class="recieved first">
-            <p>I'm another character!</p>
-            <p class="timerecieved">11:50pm</p>
+        <div class="recieved">
+            <div class="recievedbubble first">
+                <!--Message text-->
+                <p>I'm another character!</p>
+                <!--Timestamp-->
+                <p class="timerecieved">11:50pm</p>
+            </div>
         </div>
     </div>
     <div class="messagerow">
         <div class="recieved">
-            <p>And I'm sending multiple messages in a row</p>
-            <p class="timerecieved">11:50pm</p>
+            <div class="recievedbubble">
+                <p>And I'm sending multiple messages in a row</p>
+                <p class="timerecieved">11:50pm</p>
+            </div>
         </div>
     </div>
     <div class="messagerow">
         <div class="recieved">
-            <p>But only the first one has the little triangle, as it should!</p>
-            <p class="timerecieved">11:50pm</p>
+            <div class="recievedbubble">
+                <p>But only the first one has the little triangle, as it should!</p>
+                <p class="timerecieved">11:50pm</p>
+            </div>
         </div>
     </div>
     <div class="messagerow">

diff --git a/HTML_examples/example_for_writters.html b/HTML_examples/example_for_writters.html
@@ -8,12 +8,15 @@
     <p class="name character1">Alfa</p>
     <!--From here-->
     <div class="messagerow">
-        <!--Recieved message. in class, "recieved" makes it to be the recieved message. "first" makes it the first message in chain, giving it the "triangle"-->
-        <div class="recieved first">
-            <!--Message text-->
-            <p>This is an example</p>
-            <!--Timestamp-->
-            <p class="timerecieved">11:50pm</p>
+
+        <div class="recieved">
+            <!--Recieved message. in class, "recievedbubble" makes it to be the recieved message. "first" makes it the first message in chain, giving it the "triangle"-->
+            <div class="recievedbubble first">
+                <!--Message text-->
+                <p>This is an example</p>
+                <!--Timestamp-->
+                <p class="timerecieved">11:50pm</p>
+            </div>
         </div>
     </div>
     <!--To here, you have a recieved text message. Copy all of this and change the text. To make your own messages.-->
@@ -32,22 +35,30 @@
     <!--Sent message ends here.-->
     <p class="name character2">Beta</p>
     <div class="messagerow">
-        <div class="recieved first">
-            <p>I'm another character!</p>
-            <p class="timerecieved">11:50pm</p>
+        <div class="recieved">
+            <div class="recievedbubble first">
+                <!--Message text-->
+                <p>I'm another character!</p>
+                <!--Timestamp-->
+                <p class="timerecieved">11:50pm</p>
+            </div>
         </div>
     </div>
     <div class="messagerow">
-        <!--The "first" is missing from the class="[]" so the triange doesen't appear.-->
         <div class="recieved">
-            <p>And I'm sending multiple messages in a row</p>
-            <p class="timerecieved">11:50pm</p>
+            <div class="recievedbubble">
+                <!--The "first" is missing from the class="[]" so the triange doesen't appear.-->
+                <p>And I'm sending multiple messages in a row</p>
+                <p class="timerecieved">11:50pm</p>
+            </div>
         </div>
     </div>
     <div class="messagerow">
         <div class="recieved">
-            <p>But only the first one has the little triangle, as it should!</p>
-            <p class="timerecieved">11:50pm</p>
+            <div class="recievedbubble">
+                <p>But only the first one has the little triangle, as it should!</p>
+                <p class="timerecieved">11:50pm</p>
+            </div>
         </div>
     </div>
     <div class="messagerow">

diff --git a/main_chat_style.css b/main_chat_style.css
@@ -11,7 +11,7 @@ p{
     margin-top: 0px;
 }
 /*text bubbles*/
-.sentbubble, .recieved{
+.sentbubble, .recievedbubble{
     padding: 10px;
     margin: 3px 10px;
     border-radius: 15px;
@@ -26,6 +26,10 @@ p{
     float: right;
 }
 .recieved{
+    display: block;
+    float: left;
+}
+.recievedbubble{
     background-color: #e5e5ea;
     color:black;
     border-radius: 1.15rem;
@@ -46,7 +50,7 @@ p{
     top: 0px;
     width: 0px;
 }
-.recieved.first:before{
+.recievedbubble.first:before{
     width: 0px;
     content: "";
     left: -13px;
@@ -67,7 +71,7 @@ p{
     padding-right: 2.5vw;
 }
 /* Text formatting for the text bubbles*/
-.sentbubble > p, .recieved > p{
+.sentbubble > p, .recievedbubble > p{
     padding: 0.4vw;
     margin: 0;
     word-wrap: break-word;