Fix send invitation button not enabling

center-key · Jun 19, 2024 · 082330b · 082330b
1 parent 5cea898
commit 082330b
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 67 deletions.
diff --git a/src/gallery/console/admin.less b/src/gallery/console/admin.less
@@ -5,6 +5,7 @@
 
 // Administrator Console
 
+@import "css/admin-accounts";
 @import "css/gallery-setttings";
 @import "css/gallery-uploader";
 @import "css/notice-box";

diff --git a/src/gallery/console/css/admin-accounts.less b/src/gallery/console/css/admin-accounts.less
@@ -0,0 +1,15 @@
+///////////////////////////////////////////////////////////////
+// Paradise ~ centerkey.com/paradise                         //
+// GPLv3 ~ Copyright (c) Individual contributors to Paradise //
+///////////////////////////////////////////////////////////////
+
+// Console Administrator Accounts
+
+@import "../css/static/utility-box";
+
+section#console-admin-accounts {
+   p {
+      font-size: 0.9rem;
+      font-style: italic;
+      }
+   }
diff --git a/src/gallery/console/css/gallery-setttings.less b/src/gallery/console/css/gallery-setttings.less
@@ -7,13 +7,19 @@
 
 @import "../css/static/utility-box";
 
-.gallery-settings fieldset.settings-website input.dna-field-dark-mode+span { background-color: dimgray; color: white; padding: 0px 5px; }
-.gallery-settings fieldset.settings-website input.dna-field-image-border+span { border: 1px solid black; padding: 0px 3px; }
-.gallery-settings fieldset.settings-website input.dna-field-caption-caps+span { font-size: 0.8em; text-transform: uppercase; }
-.gallery-settings fieldset.settings-website input.dna-field-caption-italic+span { font-style: italic; }
-.gallery-settings fieldset.settings-website input.dna-field-show-description+span { font-weight: lighter; }
-.gallery-settings fieldset.settings-tabs label { display: inline; }
-.gallery-settings fieldset.settings-tabs label span { display: inline; }
-.gallery-settings fieldset.settings-tabs label input[type=text] { width: 40%; margin-bottom: 1em; }
-.gallery-settings fieldset.settings-tabs label input[type=checkbox] { margin-left: 3px; }
-.gallery-settings fieldset.settings-tabs [data-item-type=page]:first-child label:last-child { display: none; }
+.gallery-settings {
+   fieldset.settings-website {
+      input.dna-field-dark-mode+span { background-color: dimgray; color: white; padding: 0px 5px; }
+      input.dna-field-image-border+span { border: 1px solid black; padding: 0px 3px; }
+      input.dna-field-caption-caps+span { font-size: 0.8em; text-transform: uppercase; }
+      input.dna-field-caption-italic+span { font-style: italic; }
+      input.dna-field-show-description+span { font-weight: lighter; }
+      }
+   fieldset.settings-tabs {
+      label { display: inline; }
+      label span { display: inline; }
+      label input[type=text] { width: 40%; margin-bottom: 1em; }
+      label input[type=checkbox] { margin-left: 3px; }
+      [data-item-type=page]:first-child label:last-child { display: none; }
+      }
+   }
diff --git a/src/gallery/console/css/notice-box.less b/src/gallery/console/css/notice-box.less
@@ -7,15 +7,40 @@
 
 @import "../css/static/utility-box";
 
-notice-box.show { max-height: 100vh; opacity: 1; }
-notice-box { max-height: 0vh; overflow: hidden; opacity: 0; transition: all 1000ms; }
-notice-box { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); max-width: 500px; background-color: black; border-radius: 10px; padding: 18px 50px 12px 30px; }
-notice-box >header { margin-bottom: 12px; }
-notice-box >header >nav { position: absolute; top: 6px; right: 10px; }
-notice-box >header >nav i[data-icon] { color: lightskyblue; }
-notice-box >header >h2 { white-space: nowrap; color: crimson; padding-right: 100px; }
-notice-box >div { color: white; }
-notice-box >div >p {}
-notice-box >div >b {}
-notice-box >div >ul {}
-notice-box >div >ul >li {}
+notice-box {
+   max-height: 0vh;
+   overflow: hidden;
+   position: fixed;
+   top: 20px;
+   left: 50%;
+   transform: translateX(-50%);
+   max-width: 500px;
+   background-color: black;
+   border-radius: 10px;
+   padding: 18px 50px 12px 30px;
+   opacity: 0;
+   transition: all 1000ms;
+   &.show {
+      max-height: 100vh;
+      opacity: 1;
+      }
+   >header {
+      margin-bottom: 12px;
+      >nav {
+         position: absolute;
+         top: 6px;
+         right: 10px;
+         i[data-icon] {
+            color: lightskyblue;
+            }
+         }
+      >h2 {
+         white-space: nowrap;
+         color: crimson;
+         padding-right: 100px;
+         }
+      }
+   >div {
+      color: white;
+      }
+   }
diff --git a/src/gallery/console/css/page-layout.less b/src/gallery/console/css/page-layout.less
@@ -17,38 +17,10 @@ body {
          font-size: 1.3rem;
          }
       }
-   }
-
-body {
    button {
       font-size: 0.9rem;
       }
-   #status-msg {
+   output#status-msg {
       font-weight: bold;
       }
    }
-
-i.icon-popup-anchor {
-   &+div {
-      position: absolute;
-      visibility: hidden;
-      opacity: 0;
-      transition: all 400ms;
-      white-space: nowrap;
-      font-weight: bold;
-      text-align: right;
-      color: firebrick;
-      background-color: white;
-      border: 3px solid steelblue;
-      border-radius: 5px;
-      padding: 15px 25px;
-      }
-   &:hover+div,
-   &+div:hover {
-      visibility: visible;
-      opacity: 1;
-      }
-   }
-
-// Component: Administrator Accounts
-.admin-accounts p { font-size: 0.9rem; font-style: italic; }
diff --git a/src/gallery/console/css/portfolio-image.less b/src/gallery/console/css/portfolio-image.less
@@ -27,7 +27,7 @@
 .portfolio-image >form >label { padding-left: 0px; margin-bottom: 1em; }
 .portfolio-image >form >label:first-child span { display: inline-block; transition: color 400ms; }
 .portfolio-image >form >label:first-child input { margin: 0px 10px 0px 5px; }
-.portfolio-image >form >label.display-off >span:first-child { color: rgb(16, 12, 12); }
+.portfolio-image >form >label.display-off >span:first-child { color: firebrick; }
 .portfolio-image >form >label textarea { height: 3.2em; }
 .portfolio-image >form >p { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
 .portfolio-image >form >p label:last-child { white-space: nowrap; padding-left: 0px; }
@@ -44,7 +44,7 @@
 .portfolio-image >form .actions i.font-icon[data-icon=times] { font-size: 2.0rem; }
 .portfolio-image:first-child >form .actions i.font-icon[data-move=up],
 .portfolio-image:last-child  >form .actions i.font-icon[data-move=down] { opacity: 0.2; pointer-events: none; }
-.portfolio-image form .actions i.icon-popup-anchor+div { bottom: 15px; left: 85px; }
+.portfolio-image form .actions i.icon-popup-anchor { .IconPopupAnchor(); }
 .portfolio-image >figure { flex: 0 0 180px; text-align: center; margin: 0px 0px 0px 10px; }
 .portfolio-image >figure >img { max-width: 100%; max-height: 210px; border: 2px solid darkgray; transition: all 400ms; }
 .portfolio-image >figure >img:hover { border-color: black; }

diff --git a/src/gallery/console/index.php b/src/gallery/console/index.php
@@ -34,7 +34,7 @@
 <header>
    <aside>
       <button data-href=.. data-target=gallery>Gallery</button>
-      <button data-href=sign-out>Sign out</button>
+      <button data-href=sign-out>Sign Out</button>
    </aside>
    <h1>Paradise Photo Gallery</h1>
    <h2>Administrator Console</h2>
@@ -45,7 +45,7 @@
 
       <section>
          <h2>Status</h2>
-         <div id=status-msg></div>
+         <output id=status-msg></output>
       </section>
 
       <section>
@@ -89,7 +89,7 @@
                      <i data-icon=times class=icon-popup-anchor></i>
                      <div>
                         <p>Permanently delete this image?</p>
-                        <button data-on-click=admin.ui.delete>Delete image</button>
+                        <button data-on-click=admin.ui.delete>Delete Image</button>
                      </div>
                   </div>
                </form>
@@ -256,7 +256,7 @@
          </fieldset>
       </section>
 
-      <section class=admin-accounts>
+      <section id=console-admin-accounts>
          <h2>Gallery Administrators</h2>
          <fieldset>
             <legend>Accounts</legend>
@@ -270,7 +270,8 @@
             <legend>Pending invitations</legend>
             <div>
                <div id=account-invite class=dna-template>
-                  <small data-format-date=date>~~expires~~</small>: <b>~~to~~</b>
+                  <small>Expires <span data-format-date=date>~~expires~~</span>:</small>
+                  <b>~~to~~</b>
                </div>
             </div>
             <p data-placeholder=account-invite>No outstanding invitations.</p>
@@ -283,17 +284,17 @@
                   <input type=email data-on-key-up=admin.invites.validate
                      placeholder="New user's email address">
                </label>
-               <button data-on-click=admin.invites.send disabled>Send invitation</button>
+               <button data-on-click=admin.invites.send disabled>Send Invitation</button>
             </div>
          </fieldset>
       </section>
 
-      <section class=admin-accounts>
+      <section>
          <h2>Gallery Backup</h2>
          <fieldset>
             <legend>Create backup</legend>
             <div>
-               <button data-on-click=admin.backups.create>Do backup now</button>
+               <button data-on-click=admin.backups.create>Do Backup Now</button>
             </div>
          </fieldset>
          <fieldset>

diff --git a/src/gallery/console/js/admin.js b/src/gallery/console/js/admin.js
@@ -120,7 +120,7 @@ admin.ui = {
       const uploadHelp =    'Or just drag photos here<br>(2 MB limit per file)';
       const acceptedTypes = ['image/jpeg', 'image/png'];
       const options = {
-         dictDefaultMessage:    '<p><button>Upload photos</button></p>' + uploadHelp,
+         dictDefaultMessage:    '<p><button>Upload Photos</button></p>' + uploadHelp,
          url:                   'upload.php',
          acceptedFiles:         acceptedTypes.join(','),
          maxFilesize:           maxFileMB,
@@ -159,11 +159,11 @@ admin.ui = {
 
 admin.invites = {
    elem: {
-      email:      globalThis.document.querySelector('.admin-accounts .send-invite input[type=email]'),
-      sendButton: globalThis.document.querySelector('.admin-accounts .send-invite button'),
+      email:      globalThis.document.querySelector('#console-admin-accounts .send-invite input[type=email]'),
+      sendButton: globalThis.document.querySelector('#console-admin-accounts .send-invite button'),
       },
    validate(input) {
-      admin.invites.elem.sendButton.enable(libX.util.cleanupEmail(input.value));
+      admin.invites.elem.sendButton.disabled = !libX.util.cleanupEmail(input.value);
       },
    send(button) {
       button.disabled = true;

diff --git a/src/gallery/css/page-layout.less b/src/gallery/css/page-layout.less
@@ -94,10 +94,10 @@ body {
          >span:first-child {
             border-left: @navMenuDivider;
             }
-         >span.selected {
+         >span.dna-selected {
             cursor: auto;
             }
-         >span.selected,
+         >span.dna-selected,
          >span:hover {
             background-color: dimgray;
             }

diff --git a/src/gallery/css/static/utility-box.less b/src/gallery/css/static/utility-box.less
@@ -31,6 +31,36 @@
    align-items: center;
    }
 
+.IconPopupAnchor {
+   // <i data-icon=times class=icon-popup-anchor></i>
+   // <div>
+   //    <p>Delete?</p>
+   //    <button>Yes!</button>
+   // </div>
+   &+div {
+      position: absolute;
+      bottom: 15px;
+      left: 85px;
+      white-space: nowrap;
+      font-weight: bold;
+      text-align: right;
+      color: firebrick;
+      background-color: white;
+      border: 3px solid steelblue;
+      border-radius: 5px;
+      padding: 15px 25px;
+      transition: all 400ms;
+      opacity: 0;
+      visibility: hidden;
+      }
+   &:hover+div,
+   &+div:hover {
+      visibility: visible;
+      opacity: 1;
+      }
+   }
+
+
 .MobileMode(@lessRules) {  //selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower
    @media (max-width: 667px) { @lessRules(); }
    }