From 202ee0977e2cdccb6e1c73c0b80bda3405ab4156 Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Sun, 24 Dec 2023 14:34:04 +0000
Subject: [PATCH] invites: improve inv dropdown layout

---
 css/base.css          | 22 +++++++++-------------
 html/admin.html       |  4 ++--
 ts/modules/invites.ts | 30 ++++++++++++++++++------------
 3 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/css/base.css b/css/base.css
index 3a4963f..8419053 100644
--- a/css/base.css
+++ b/css/base.css
@@ -219,23 +219,10 @@ sup.\~critical, .text-critical {
     font-size: 1rem;
 }
 
-.inv-created-users strong,p {
-    padding-left: 0.5rem;
-    padding-bottom: 0.2rem;
-}
-
-.inv-created-users.empty strong,p {
-    padding: 0;
-}
-
 .inv {
     overflow: visible;
 }
 
-.inv-table {
-    font-size: 0.8rem;
-}
-
 .inv-profilearea {
     min-width: 20%;
 }
@@ -416,7 +403,16 @@ table {
     color: var(--color-content);
 }
 
+table.table.manual-pad th, table.table.manual-pad td {
+    padding: 0;
+}
 
+table.table-p-0 th, table.table-p-0 td {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
 
 p.top {
     margin-top: 0px;
diff --git a/html/admin.html b/html/admin.html
index e3c410a..a27d30e 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -549,11 +549,11 @@
             <div id="tab-invites">
                 <div class="card @low invites dark:~d_neutral mb-4 overflow-visible">
                     <span class="heading">{{ .strings.invites }}</span>
-                    <div id="invites"></div>
+                    <div id="invites" class="mt-2"></div>
                 </div>
                 <div class="card @low dark:~d_neutral">
                     <span class="heading">{{ .strings.create }}</span>
-                    <div class="flex flex-col md:flex-row gap-3" id="create-inv">
+                    <div class="flex flex-col md:flex-row gap-3 mt-2" id="create-inv">
                         <div class="card ~neutral @low flex flex-col gap-2 w-1/2">
                             <div class="flex flex-row gap-2">
                                 <label class="w-1/2">
diff --git a/ts/modules/invites.ts b/ts/modules/invites.ts
index 7430a80..e7a2bc6 100644
--- a/ts/modules/invites.ts
+++ b/ts/modules/invites.ts
@@ -146,10 +146,11 @@ class DOMInvite implements Invite {
         }
         this._right.classList.remove("empty");
         let innerHTML = `
-        <table class="table inv-table">
+        <table class="table inv-table table-p-0">
             <thead>
                 <tr>
                     <th>${window.lang.strings("name")}</th>
+                    <th class="w-2"></th>
                     <th>${window.lang.strings("date")}</th>
                 </tr>
             </thead>
@@ -159,6 +160,7 @@ class DOMInvite implements Invite {
             innerHTML += `
                 <tr>
                     <td>${username}</td>
+                    <td class="w-2"></td>
                     <td>${toDateString(new Date(uB[username] * 1000))}</td>
                 </tr>
             `;
@@ -327,14 +329,17 @@ class DOMInvite implements Invite {
 
         this._details = document.createElement('div') as HTMLDivElement;
         this._container.appendChild(this._details);
-        this._details.classList.add("card", "~neutral", "@low", "mt-2", "no-pad", "inv-details");
+        this._details.classList.add("card", "~neutral", "@low", "mt-2", "inv-details");
         const detailsInner = document.createElement('div') as HTMLDivElement;
         this._details.appendChild(detailsInner);
-        detailsInner.classList.add("inv-row", "flex-expand", "row", "elem-pad", "align-top");
+        detailsInner.classList.add("inv-row", "flex", "flex-row", "justify-between", "align-top");
 
         this._left = document.createElement('div') as HTMLDivElement;
+        this._left.classList.add("flex", "flex-row", "gap-4");
         detailsInner.appendChild(this._left);
-        this._left.classList.add("inv-profilearea");
+        const leftLeft = document.createElement("div") as HTMLDivElement;
+        this._left.appendChild(leftLeft);
+        leftLeft.classList.add("inv-profilearea");
         let innerHTML = `
         <p class="supra mb-2 top">${window.lang.strings("profile")}</p>
         <div class="select ~neutral @low inv-profileselect inline-block mb-2">
@@ -356,7 +361,7 @@ class DOMInvite implements Invite {
             </label>
             `;
         }
-        this._left.innerHTML = innerHTML;
+        leftLeft.innerHTML = innerHTML;
         (this._left.querySelector("select") as HTMLSelectElement).onchange = this.updateProfile;
         
         if (window.notificationsEnabled) {
@@ -368,20 +373,21 @@ class DOMInvite implements Invite {
         }
 
         this._middle = document.createElement('div') as HTMLDivElement;
-        detailsInner.appendChild(this._middle);
-        this._middle.classList.add("block");
+        this._left.appendChild(this._middle);
+        this._middle.classList.add("flex", "flex-col", "justify-between");
         this._middle.innerHTML = `
-        <p class="supra mb-4 top">${window.lang.strings("inviteDateCreated")} <strong class="inv-created"></strong></p>
-        <p class="supra mb-4">${window.lang.strings("inviteRemainingUses")} <strong class="inv-remaining"></strong></p>
-        <p class="supra mb-4"><span class="user-expiry"></span> <strong class="user-expiry-time"></strong></p>
-        <p class="mb-4 flex items-center"><span class="user-label-label supra mr-2"></span> <span class="user-label chip ~blue unfocused"></span></p>
+        <p class="supra top">${window.lang.strings("inviteDateCreated")} <strong class="inv-created"></strong></p>
+        <p class="supra">${window.lang.strings("inviteRemainingUses")} <strong class="inv-remaining"></strong></p>
+        <p class="supra"><span class="user-expiry"></span> <strong class="user-expiry-time"></strong></p>
+        <p class="flex items-center"><span class="user-label-label supra mr-2"></span> <span class="user-label chip ~blue unfocused"></span></p>
         `;
 
         this._right = document.createElement('div') as HTMLDivElement;
         detailsInner.appendChild(this._right);
         this._right.classList.add("card", "~neutral", "@low", "inv-created-users");
-        this._right.innerHTML = `<strong class="supra table-header">${window.lang.strings("inviteUsersCreated")}</strong>`;
+        this._right.innerHTML = `<span class="supra table-header">${window.lang.strings("inviteUsersCreated")}</span>`;
         this._userTable = document.createElement('div') as HTMLDivElement;
+        this._userTable.classList.add("text-sm", "mt-1");
         this._right.appendChild(this._userTable);