v1.3.2

fixes #17
close #16

.github/README.md

@@ -6,6 +6,15 @@
 
 ## Changelog
 
+### Version 1.3.2
+
+*  **Added** a link to the original repo at the bottom of the page
+*  **Added** support for embed, still WIP until fully tested (mainly tested on Twitter embeds, see [this issue](https://github.com/Notavone/discord-panel/issues/16))
+*  **Replaced** header `p` tags by actual headers `h` tags
+*  **Switched** back to discord.12.1.1 because of cross-origin issue with master and stable
+*  **Removed** toggleVisibility functions to replace with a pre-made one is jQuery
+*  **Fixed** mouse wheel event not working on Firefox
+
 ### Version 1.3.1
 
 *  **Added** code blocks to markdown formatting
@@ -39,7 +48,7 @@ COMING SOON™
 ## Built With 🔧
 
 *   [discord.js](https://github.com/discordjs/discord.js/tree/webpack)
-*   [JQuery](https://jquery.com/)
+*   [jQuery](https://jquery.com/)
 *   [Bootstrap](https://getbootstrap.com/)
 
 ## Author 📝

css/main.css

@@ -69,8 +69,7 @@ audio {
 }
 
 video {
-  padding: 5px 0 5px 0;
-  max-width: 50%;
+  max-width: 100%;
 }
 
 .messageId {
@@ -81,32 +80,28 @@ video {
   margin: 0;
 }
 
-.embeds {
+.embed {
   margin: 5px 0 0 0;
-  padding: 5px 0 5px 5px;
+  padding: 5px 5px 5px 7px;
   display: block;
-  border-left: 5px solid white;
+  width: 60%;
   border-radius: 5px;
   background-color: var(--bodyColor);
 }
 
-.embeds p {
+.embed p {
   display: inline;
 }
 
 .avatarIMG {
   border-radius: 15px;
   height: 30px;
   width: 30px;
-}
-
-.chatImg {
-  padding: 2px;
-  max-width: 50%;
+  margin: 0 5px 0 0;
 }
 
 .chatMsg {
-  margin: 6px 0 6px 0;
+  margin: 3px 0 3px 6px;
 }
 
 .emojiImg {
@@ -131,13 +126,24 @@ video {
   padding-bottom: 10px;
 }
 
+#footer {
+  text-align: center;
+}
+
+#footer img {
+  max-height: 100px;
+}
+
 select {
   width: 100%;
   height: 35px;
   border: 2px solid var(--contentColor);
   border-radius: 7px;
   margin: 0 0 5px 0;
   background-color: var(--bodyColor);
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 select:hover {
@@ -156,11 +162,10 @@ a {
 }
 
 .scrollable {
-  min-height: 350px;
-  max-height: 350px;
-  overflow-y: auto;
+  height: 450px;
   overflow-x: hidden;
   text-align: left;
+  padding: 0 6px 0 6px;
   border: 2px solid var(--bodyColor);
   box-shadow: 0 0 5px var(--bodyColor);
   border-radius: 7px;
@@ -198,7 +203,7 @@ a {
   border: 2px solid var(--bodyColor);
   box-shadow: 0 0 5px var(--bodyColor);
   border-radius: 7px;
-  background-color: transparent;
+  padding: 3px 5px 0 7px;
 }
 
 /* ///////////////////////////////////////////
@@ -260,11 +265,6 @@ button:hover {
   float: left;
 }
 
-div {
-  padding-left: 6px;
-  padding-right: 6px;
-}
-
 .codeBlock {
   background-color: var(--bodyColor);
   border-radius: 7px;
@@ -408,6 +408,10 @@ input:checked + .slider::before {
   transition: 0.3s;
 }
 
+#formatting a {
+  text-decoration: none;
+}
+
 .overlay a:hover,
 .overlay a:focus {
   color: #f1f1f1;

index.html

@@ -23,7 +23,7 @@
 <div class="container-fluid">
     <div class="row content">
         <div class="col-lg-12 col-xl-6">
-            <p class="header" id='channelName'>Chat</p>
+            <h6 class="header" id='channelName'>Chat</h6>
             <div class="scrollable" id="chat"></div>
             <select title="guilds" class="half" id="guilds"></select>
             <select title="channels" class="half" id="channels"></select><br>
@@ -44,7 +44,7 @@
             <button id="delLast" class="blue">🗓 Delete Last Message</button>-->
         </div>
         <div class="col-sm-12 col-lg-6 col-xl-3">
-            <p id="lastMessagesHead" class='header'></p>
+            <h6 id="lastMessagesHead" class='header'></h6>
             <div class="scrollable" id="lastMessages"></div>
             <button id="clearChat"></button>
             <button id="refreshChat"></button>
@@ -53,7 +53,7 @@
             <button class="red" id='leaveGuild'></button>
         </div>
         <div class="col-sm-12 col-lg-6 col-xl-3">
-            <p class="header" id='guildName'></p>
+            <h6 class="header" id='guildName'></h6>
             <div class="scrollable" id="guildInfo"></div>
             <br>
             <fieldset>
@@ -62,25 +62,31 @@
                     <input checked id="chk1" type="checkbox" value="last">
                     <span class="slider round"></span>
                 </label>
-                <label for="last" id="last"></label><br>
+                <label for="chk1" id="last"></label><br>
                 <label class="switch">
                     <input checked id="chk2" type="checkbox" value="chatCheck">
                     <span class="slider round"></span>
                 </label>
-                <label for="chatCheck" id='channelNameLabel'></label><br>
+                <label for="chk2" id='channelNameLabel'></label><br>
                 <label class="switch">
                     <input id="chk3" type="checkbox" value="animCheck">
                     <span class="slider round"></span>
                 </label>
-                <label for="animCheck" id="animCheck"></label>
+                <label for="chk3" id="animCheck"></label>
             </fieldset>
         </div>
     </div>
+    <div class="row">
+        <div id="footer" class="col-12">
+            <a href="https://github.com/Notavone/discord-panel" target="_blank"><img src="./img/icon/github_logo.png"
+                                                                                     alt=""></a>
+        </div>
+    </div>
 </div>
 </body>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"
         integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-<script type="text/javascript" src="./js/discord.master.min.js"></script>
+<script type="text/javascript" src="./js/discord.12.1.1.min.js"></script>
 <script type="text/javascript" src="locales.js"></script>
 <script type="text/javascript" src="./js/main.js"></script>
 <script type="text/javascript" src="./js/panel.js"></script>