Accounts: Always inline icons, only one settings cog

Admin chip, email edit bot and contact method cog icon are now always inline.
Only one cog icon is shown now.

css/base.css

@@ -30,12 +30,12 @@
     }
 }
 
-@media screen and (max-width: 750px) {
+@media screen and (max-width: 1000px) {
     :root {
         font-size: 0.9rem;
     }
     .table-responsive table {
-        min-width: 660px;
+        min-width: 800px;
     }
 }
 
@@ -428,6 +428,7 @@ p.top {
 
 .table-responsive {
     overflow-x: auto;
+    font-size: 0.9rem;
 }
 
 #notification-box {
@@ -506,3 +507,8 @@ img.img-circle {
     padding-top: 0.1rem;
     padding-bottom: 0.1rem;
 }
+
+.table-inline {
+    display: flex !important;
+    align-items: center;
+}

ts/modules/accounts.ts

@@ -102,8 +102,10 @@ class user implements User {
         this._notifyEmail = s;
         if (window.telegramEnabled && this._telegramUsername != "") {
             const email = this._telegram.getElementsByClassName("accounts-contact-email")[0] as HTMLInputElement;
+            if (email) {
                 email.checked = s;
             }
+        }
         if (window.discordEnabled && this._discordUsername != "") {
             const email = this._discord.getElementsByClassName("accounts-contact-email")[0] as HTMLInputElement;
             email.checked = s;
@@ -120,6 +122,10 @@ class user implements User {
         } else {
             let innerHTML = `
             <a href="https://t.me/${u}" target="_blank">@${u}</a>
+            `;
+            if (!window.discordEnabled || this._discordUsername == "") {
+                innerHTML += `
+                <div class="table-inline">
                     <i class="icon ri-settings-2-line ml-half dropdown-button"></i>
                     <div class="dropdown manual">
                         <div class="dropdown-display">
@@ -133,21 +139,14 @@ class user implements User {
                                     <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-telegram">
                                     <span>Telegram</span>
                                 </label>
-            `;
+                            </div>
-            if (window.discordEnabled && this._discordUsername != "") {
+                        </div>
-                innerHTML += `
+                    </div>
-                        <label class="switch pb-1">
+                </div>
-                            <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-discord">
-                            <span>Discord</span>
-                        </label>
                 `;
             }
-            innerHTML += `
+            this._telegram.innerHTML = innerHTML;
-                    </div>
+            if (!window.discordEnabled || this._discordUsername == "") {
-                </div>
-            </div>
-            `;
-            this._discord.innerHTML = innerHTML;
                 // Javascript is necessary as including the button inside the dropdown would make it too wide to display next to the username.
                 const button = this._telegram.querySelector("i");
                 const dropdown = this._telegram.querySelector("div.dropdown") as HTMLDivElement;
@@ -168,13 +167,16 @@ class user implements User {
                 };
             }
         }
+    }
     
     get notify_telegram(): boolean { return this._notifyTelegram; }
     set notify_telegram(s: boolean) {
         if (!window.telegramEnabled || !this._telegramUsername) return;
         this._notifyTelegram = s;
         const telegram = this._telegram.getElementsByClassName("accounts-contact-telegram")[0] as HTMLInputElement;
+        if (telegram) {
             telegram.checked = s;
+        }
         if (window.discordEnabled && this._discordUsername != "") {
             const telegram = this._discord.getElementsByClassName("accounts-contact-telegram")[0] as HTMLInputElement;
             telegram.checked = s;
@@ -227,6 +229,7 @@ class user implements User {
             (this._discord.querySelector("span") as HTMLSpanElement).onclick = this._addDiscord;
         } else {
             let innerHTML = `
+            <div class="table-inline">
                 <a href="https://discord.com/users/${this._discordID}" class="discord-link" target="_blank">${u}</a>
                 <i class="icon ri-settings-2-line ml-half dropdown-button"></i>
                 <div class="dropdown manual">
@@ -254,6 +257,7 @@ class user implements User {
                         </div>
                     </div>
                 </div>
+            </div>
             `;
             this._discord.innerHTML = innerHTML;
             // Javascript is necessary as including the button inside the dropdown would make it too wide to display next to the username.
@@ -323,8 +327,8 @@ class user implements User {
         this._row = document.createElement("tr") as HTMLTableRowElement;
         let innerHTML = `
             <td><input type="checkbox" value=""></td>
-            <td><span class="accounts-username"></span> <span class="accounts-admin"></span> <span class="accounts-disabled"></span></td>
+            <td><div class="table-inline"><span class="accounts-username"></span> <span class="accounts-admin"></span> <span class="accounts-disabled"></span></span></td>
-            <td><i class="icon ri-edit-line accounts-email-edit"></i><span class="accounts-email-container ml-half"></span></td>
+            <td><div class="table-inline"><i class="icon ri-edit-line accounts-email-edit"></i><span class="accounts-email-container ml-half"></span></div></td>
         `;
         if (window.telegramEnabled) {
             innerHTML += `