From 6e205760c3e1a13cb5fd87ba48d8962d5c102c78 Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Sat, 23 Dec 2023 17:45:03 +0000 Subject: [PATCH] ui: more invites page improvements/cleanup, fix tooltips on mobile --- css/tooltip.css | 18 +++++++++++++++++- html/admin.html | 4 ++-- ts/modules/invites.ts | 25 ++++++++++++------------- 3 files changed, 31 insertions(+), 16 deletions(-) diff --git a/css/tooltip.css b/css/tooltip.css index 4566f30..85a289e 100644 --- a/css/tooltip.css +++ b/css/tooltip.css @@ -5,6 +5,7 @@ .tooltip .content { visibility: hidden; + opacity: 0; max-width: 10rem; min-width: 6rem; background-color: rgba(0, 0, 0, 0.6); @@ -13,12 +14,23 @@ border-radius: 6px; overflow-wrap: break-word; text-align: center; + transition: opacity 100ms; position: absolute; z-index: 1; top: -1rem; } +.tooltip.below .content { + top: 2.5rem; + left: 0; + right: 0; +} + +.tooltip.darker .content { + background-color: rgba(0, 0, 0, 0.8); +} + .tooltip.right .content { left: 120%; } @@ -31,6 +43,10 @@ font-size: 0.8rem; } -.tooltip:hover .content { +.tooltip:hover .content, +.tooltip:focus .content, +.tooltip:focus-within .content +{ visibility: visible; + opacity: 1; } diff --git a/html/admin.html b/html/admin.html index 573f6c3..ca08b4b 100644 --- a/html/admin.html +++ b/html/admin.html @@ -503,7 +503,7 @@
-
+
@@ -547,7 +547,7 @@
-
+
{{ .strings.invites }}
diff --git a/ts/modules/invites.ts b/ts/modules/invites.ts index 48b9657..7430a80 100644 --- a/ts/modules/invites.ts +++ b/ts/modules/invites.ts @@ -105,20 +105,20 @@ class DOMInvite implements Invite { get send_to(): string { return this._send_to }; set send_to(address: string) { this._send_to = address; - const container = this._codeArea.querySelector(".tooltip") as HTMLDivElement; + const container = this._infoArea.querySelector(".tooltip") as HTMLDivElement; const icon = container.querySelector("i"); const chip = container.querySelector("span.inv-email-chip"); const tooltip = container.querySelector("span.content") as HTMLSpanElement; if (address == "") { - container.classList.remove("mr-4"); icon.classList.remove("ri-mail-line"); icon.classList.remove("ri-mail-close-line"); chip.classList.remove("~neutral"); chip.classList.remove("~critical"); - chip.classList.remove("chip"); + chip.classList.remove("button"); + chip.parentElement.classList.remove("h-100"); } else { - container.classList.add("mr-4"); - chip.classList.add("chip"); + chip.classList.add("button"); + chip.parentElement.classList.add("h-100"); if (address.includes("Failed")) { icon.classList.remove("ri-mail-line"); icon.classList.add("ri-mail-close-line"); @@ -266,11 +266,11 @@ class DOMInvite implements Invite { constructor(invite: Invite) { // first create the invite structure, then use our setter methods to fill in the data. this._container = document.createElement('div') as HTMLDivElement; - this._container.classList.add("inv"); + this._container.classList.add("inv", "overflow-y-visible"); this._header = document.createElement('div') as HTMLDivElement; this._container.appendChild(this._header); - this._header.classList.add("card", "dark:~d_neutral", "@low", "inv-header", "elem-pad", "no-pad", "flex", "flex-row", "justify-between", "mt-2", "overflow-y"); + this._header.classList.add("card", "dark:~d_neutral", "@low", "inv-header", "flex", "flex-row", "justify-between", "mt-2", "overflow-visible", "gap-2"); this._codeArea = document.createElement('div') as HTMLDivElement; this._header.appendChild(this._codeArea); @@ -280,12 +280,7 @@ class DOMInvite implements Invite {
-
-
- - -
-
+ `; const copyButton = this._codeArea.querySelector("span.button") as HTMLSpanElement; copyButton.onclick = () => { @@ -307,6 +302,10 @@ class DOMInvite implements Invite { this._header.appendChild(this._infoArea); this._infoArea.classList.add("inv-infoarea", "flex", "flex-row", "items-baseline", "gap-2"); this._infoArea.innerHTML = ` +
+ + +
${window.lang.strings("delete")}