v1.2.3

Notavone · Jun 21, 2020 · a4ef545 · a4ef545
1 parent 6fa22a9
commit a4ef545
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 74 deletions.
diff --git a/.github/README.md b/.github/README.md
@@ -5,10 +5,18 @@
 
 ## Changelog
 
+### Version 1.2.3
+
+*   **Fixed** the workaround of [@RobinSchapendonk](https://github.com/RobinSchapendonk)
+*   Deleting/updating a message should no longer refresh the chat but dynamically find and delete/update the message (guilds only)
+*   Auto-scrolling is now a bit quicker to match with the speed of chat updating
+*   **Added** a `border-radius` attribute to a lot of elements
+*   Attachments are now recognised by their file type and displayed as such (images, documents etc..)
+
 ### Version 1.2.2
 
 *   Changed the look of the panel
-*   ***Removed*** unused translations
+*   **Removed** unused translations
 
 ### Version 1.2.1
 
@@ -19,7 +27,7 @@
 *   **Updated** README with changelog and how to translate sections
 *   **Fixed** the emoji button not appearing due to the recent changes in discord.js and how guildEmojis now works
 *   **Added** a new language button to load a translation of the project (css and a bit of code by [@ziomciopoziomcio](https://github.com/ziomciopoziomcio))
-*   **Tried** a workaround to make the chat more readable in case of spam by [@RobinSchapendonk](https://github.com/RobinSchapendonk) but it's not currently working as intended so i'll make something later
+*   ~~**Tried** a workaround to make the chat more readable in case of spam by [@RobinSchapendonk](https://github.com/RobinSchapendonk) but it's not currently working as intended so i'll make something later~~ ([fixed in version 1.2.3](#version-1.2.3))
 
 ## What makes this special ? 💎
 

diff --git a/css/main.css b/css/main.css
@@ -48,10 +48,25 @@ body {
 }
 
 .header {
+  border: 2px solid var(--bodyColor);
+  border-radius: 7px;
   height: 45px;
   padding-top: 5px;
   padding-bottom: 5px;
   text-align: center;
+  margin-bottom: 10px;
+}
+
+p {
+  margin-bottom: 0;
+}
+
+.messageId {
+  visibility: hidden;
+}
+
+.messageContent {
+  margin: 0;
 }
 
 .avatarIMG {
@@ -82,17 +97,15 @@ body {
 .content {
   background-color: var(--contentColor);
   padding-top: 10px;
-}
-
-.border {
-  border: 2px solid var(--bodyColor);
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
 }
 
 select {
   width: 100%;
   height: 35px;
   border: 2px solid var(--contentColor);
-  border-radius: 2px;
+  border-radius: 7px;
   background-color: var(--bodyColor);
 }
 
@@ -106,7 +119,7 @@ textarea {
   max-height: 100px;
   width: 100%;
   border: 2px solid var(--bodyColor);
-  border-radius: 2px;
+  border-radius: 7px;
   background-color: transparent;
 }
 
@@ -121,11 +134,12 @@ a {
 }
 
 .scrollable {
-  min-height: 300px;
-  max-height: 300px;
+  min-height: 350px;
+  max-height: 350px;
   overflow-y: auto;
   text-align: left;
   border: 2px solid var(--bodyColor);
+  border-radius: 7px;
   font-size: 14px;
   margin: 0 0 0 0;
   word-break: break-all;
@@ -148,14 +162,14 @@ button {
   background-color: var(--bodyColor);
   color: var(--textColor);
   border: 2px solid var(--contentColor);
-  border-radius: 2px;
+  border-radius: 7px;
 }
 
 button:hover {
   background-color: rgb(26, 25, 25);
   border: 2px solid var(--textColor);
-  transition: background-color 600ms;
-  transition: border 300ms ease-in;
+  border-radius: 7px;
+  transition: background-color 600ms, border 200ms ease-in;
   color: var(--textColor);
 }
 
@@ -205,11 +219,13 @@ div {
 }
 
 .mini {
-  width: auto;
-  height: 20px;
+  min-width: 30px;
+  max-width: 30px;
+  min-height: 30px;
+  max-height: 30px;
   padding: 1px 2px 1px 2px;
   border-radius: 6px;
-  font: 13.5px Arial, sans-serif;
+  font: 13px Arial, sans-serif;
 }
 
 /*///////////////////////////////////////////
@@ -229,6 +245,7 @@ fieldset {
 legend {
   text-align: center;
   border: 2px solid var(--bodyColor);
+  border-radius: 7px;
 }
 
 .switch {
@@ -299,7 +316,7 @@ input:checked + .slider::before {
                CURTAIN MENU
 //////////////////////////////////////////*/
 .overlay {
-  height: 0%;
+  height: 0;
   width: 100%;
   position: fixed;
   z-index: 1;
@@ -338,21 +355,4 @@ input:checked + .slider::before {
   top: 20px;
   right: 45px;
   font-size: 60px;
-}
-
-@media screen and (max-height: 450px) {
-  .overlay {
-    overflow-y: auto;
-  }
-
-  .overlay a {
-    font-size: 20px;
-  }
-
-  .overlay .closeBtn {
-    font-size: 40px;
-    top: 15px;
-    right: 35px;
-  }
-
 }
diff --git a/index.html b/index.html
@@ -27,8 +27,8 @@
 
 <div class="container-fluid">
     <div class="row content">
-        <div class="col-6">
-            <p class="border header" id='channelName'>Chat</p>
+        <div class="col-lg-12 col-xl-6">
+            <p class="header" id='channelName'>Chat</p>
             <div class="scrollable" id="chat"></div>
             <select class="demi" id="guilds"></select>
             <select class="demi " id="channels"></select><br>
@@ -39,8 +39,8 @@
             <!-- TODO Fix code apparently not working in this version of discord.js
             <button id="delLast" class="blue">🗓 Delete Last Message</button>-->
         </div>
-        <div class="col-3">
-            <p id="lastMessagesHead" class='border header'></p>
+        <div class="col-sm-12 col-lg-6 col-xl-3">
+            <p id="lastMessagesHead" class='header'></p>
             <div class="scrollable" id="lastMessages"></div>
             <button id="clearChat"></button>
             <br>
@@ -51,8 +51,8 @@
             <button class="red" id="language" onclick="openNav()"></button>
             <button class="red" id='leaveGuild'></button>
         </div>
-        <div class="col-3">
-            <p class="border header" id='guildName'></p>
+        <div class="col-sm-12 col-lg-6 col-xl-3">
+            <p class="header" id='guildName'></p>
             <div class="scrollable" id="guildInfo"></div>
             <br>
             <fieldset>