tweaks

clr-li · Feb 17, 2024 · 03dbc89 · 03dbc89
1 parent 3a10ef5
commit 03dbc89
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 36 deletions.
diff --git a/public/admin.html b/public/admin.html
@@ -32,7 +32,13 @@
             <section>
                 <h1>Dashboard</h1>
                 <type-select id="businessId" name="businesses" label="Group:"></type-select>
-                <div id="qrcode" class="img"></div>
+                <div style="position: relative;">
+                    <div id="qrcode" class="img"></div>
+                    <span style="position: absolute; left: calc(100% / 2 + 145px); top: 0;">
+                        <i role="button" onclick="this.nextElementSibling.show(); event.preventDefault()" class="fa-solid fa-circle-info smaller-text"></i>
+                        <dialog onblur="this.close()" class="tooltip-info" style="font-size: medium;">Have people scan this QR code to join your group. This allows them to see events in their calendar, notify you of absenses, and lets your see their attendance for group events.</dialog>
+                    </span>
+                </div>
                 <button id="joinlink" class="button">Copy Join Link</button>
                 <button id="emailInvite" class="button">Invite by Email</button>
                 <button id="resetJoincode" class="button delete">Reset Joincode</button>
@@ -192,20 +198,31 @@ <h1>Event Table</h1>
                 <h1>Group Settings</h1>
                 <div class="form" style="padding-right: 1em;">
                     <label style="display: flex; justify-content: space-evenly;">
-                        <span>Only take attendance for members &nbsp; <i class="fa-solid fa-circle-info"></i></span>
+                        <span>
+                            Only take attendance for members
+                            <span style="position: relative;">
+                                <i role="button" onclick="this.nextElementSibling.show(); event.preventDefault()" class="fa-solid fa-circle-info smaller-text"></i>
+                                <dialog onblur="this.close()" class="tooltip-info" style="font-size: medium;">When enabled, you won't be able to scan/take attendance for non-members. When disabled, non-members are automatically added to the business when you scan/take their attendance.</dialog>
+                            </span>
+                        </span>
                         <div class="checkbox-wrapper-6">
                             <input id="require-join" class="tgl tgl-light" type="checkbox" />
                             <div class="tgl-btn" style="font-size: 16px"></div>
                         </div>
                     </label>
                     <br><hr><br>
                     <a class="button" href="/payment.html">Manage Subscription &nbsp; <i class="fa-regular fa-money-bill-1"></i></a>
+                    <a class="button" id="genericScannerLink" href="/scanner.html">Take Attendance &nbsp; <i class="icon-scanner"></i></a>
                     <a class="button" href="/#contact">Contact Support &nbsp; <i class="fa-regular fa-envelope"></i></a>
                     <button id="changeName" class="button">Change Name &nbsp; <i class="fa-regular fa-pen-to-square"></i></button>
-                    <a class="button delete" href="/payment.html">Sink the Ship &nbsp; <i class="fa-solid fa-trash"></i></a>
+                    <a class="button delete" href="/payment.html">Delete Everything &nbsp; <i class="fa-solid fa-trash"></i></a>
                     <br><br><hr><br>
                     <label for="email-notification">
-                        Send email notification to group members &nbsp; <i class="fa-solid fa-circle-info"></i>
+                        Send email notification to group members
+                        <span style="position: relative;">
+                            <i role="button" onclick="this.nextElementSibling.show(); event.preventDefault()" class="fa-solid fa-circle-info smaller-text"></i>
+                            <dialog onblur="this.close()" class="tooltip-info" style="font-size: medium;">Enter the email text below. It will be sent out to every current member with '[MEMBER_NAME]' replaced with their actual name. Note: these are subject to the rate limits on your Google account, so if you need to send more than ~300/day, you'll have to apply for an increased limit from Google.</dialog>
+                        </span>
                     </label><br>
                     <textarea
                         id="email-notification"

diff --git a/public/admin.js b/public/admin.js
@@ -16,7 +16,13 @@ const { get: getBusinessId } = await initBusinessSelector('businessId', async ()
     updateJoinLink();
     await updateEvents();
     await runTable();
+    document.getElementById('genericScannerLink').href =
+        `/scanner.html?businessId=${getBusinessId()}`;
 });
+if (getBusinessId()) {
+    document.getElementById('genericScannerLink').href =
+        `/scanner.html?businessId=${getBusinessId()}`;
+}
 
 let events;
 const { get: getEventId, updateEvents } = await initEventSelector(

diff --git a/public/components/Action.js b/public/components/Action.js
@@ -13,6 +13,7 @@ export class ActionIcon extends Component {
         return /* html */ `
             <link rel="stylesheet" href="/styles/reset.css">
             <link rel="stylesheet" href="/styles/tables.css">
+            <link rel="stylesheet" href="/styles/inputs.css">
             <link rel="stylesheet" href="/font-alexsome/icon.css">
             <div class="cols" style="margin-bottom: 16px; width: 190px;">
                 <div role="link" class="actions" onclick="location.assign('${link}')">
@@ -22,7 +23,7 @@ export class ActionIcon extends Component {
                 <h3>${actionName}
                     <span style="position: relative;">
                         <i role="button" id="info-btn" class="fa-solid fa-circle-info smaller-text"></i>
-                        <dialog id="info-dialog" class="action-info">${description}</dialog>
+                        <dialog id="info-dialog" class="tooltip-info">${description}</dialog>
                     </span>
                 </h3>
             </div>
@@ -103,37 +104,6 @@ h3 {
 .actions:active {
     transform: translateY(2px);
 }
-
-.action-info {
-    white-space: normal;
-    width: 150px;
-    border-radius: 6px;
-    padding: 8px;
-    position: absolute;
-    z-index: 5;
-    margin-left: -900%;
-    margin-top: 35%;
-    border: none;
-    border-left: 10px solid var(--primary);
-    color: white;
-    background-color: var(--dark-background);
-    font-size: 0.8em;
-}
-
-.action-info:focus {
-    outline: none;
-}
-
-.action-info::after {
-    content: "";
-    position: absolute;
-    bottom: 100%;
-    left: 78%;
-    margin-left: -7px;
-    border-width: 10px;
-    border-style: solid;
-    border-color: transparent transparent var(--dark-background) transparent;
-}
 `;
 
 window.customElements.define('action-icon', ActionIcon); // define custom <action-icon> tag, name must be lowercase and have one hyphen
diff --git a/public/styles/inputs.css b/public/styles/inputs.css
@@ -257,3 +257,33 @@ button.themify:active {
 input[type='time'] {
     width: 141px;
 }
+
+.tooltip-info {
+    white-space: normal;
+    min-width: 150px;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 5;
+    margin-left: -115px;
+    margin-top: 35%;
+    border: none;
+    border-left: 10px solid var(--primary);
+    color: white;
+    background-color: var(--dark-background);
+    font-size: 0.8em;
+}
+
+.tooltip-info:focus {
+    outline: none;
+}
+
+.tooltip-info::after {
+    content: "";
+    position: absolute;
+    bottom: calc(100% - 1px);
+    left: 101.5px;
+    border-width: 10px;
+    border-style: solid;
+    border-color: transparent transparent var(--dark-background) transparent;
+}
diff --git a/public/styles/tables.css b/public/styles/tables.css
@@ -24,6 +24,7 @@ td {
 
 .smaller-text {
     font-size: 0.8rem;
+    vertical-align: middle;
 }
 
 .scroll {