new collapsed text UI

css/main.css

@@ -262,20 +262,6 @@ sm-textarea {
   --max-height: 32ch;
 }
 
-sm-button {
-  --padding: 0.8rem;
-}
-sm-button[variant=primary] .icon {
-  fill: rgba(var(--background-color), 1);
-}
-sm-button[disabled] .icon {
-  fill: rgba(var(--text-color), 0.6);
-}
-sm-button.danger {
-  --background: var(--danger-color);
-  color: rgba(var(--background-color), 1);
-}
-
 sm-spinner {
   --size: 1.5rem;
   --stroke-width: 0.1rem;
@@ -310,6 +296,11 @@ sm-chip {
      -moz-user-select: none;
           user-select: none;
 }
+
+collapsed-text {
+  --button-background: rgba(var(--foreground-color), 1);
+}
+
 ul {
   list-style: none;
 }
@@ -667,6 +658,7 @@ ul {
   display: grid;
   text-align: center;
   align-items: center;
+  justify-items: center;
 }
 .multi-state-button > * {
   grid-area: 1/1/2/2;
@@ -1212,9 +1204,6 @@ ul {
   margin-bottom: 0.5rem;
   border: solid rgba(var(--text-color), 0.1) thin;
 }
-.request-card sm-button {
-  --padding: 0.5rem 0.8rem;
-}
 
 .request-card__description {
   width: 100%;

css/main.scss

@@ -246,27 +246,6 @@ sm-textarea {
   --max-height: 32ch;
 }
 
-sm-button {
-  --padding: 0.8rem;
-
-  &[variant="primary"] {
-    .icon {
-      fill: rgba(var(--background-color), 1);
-    }
-  }
-
-  &[disabled] {
-    .icon {
-      fill: rgba(var(--text-color), 0.6);
-    }
-  }
-
-  &.danger {
-    --background: var(--danger-color);
-    color: rgba(var(--background-color), 1);
-  }
-}
-
 sm-spinner {
   --size: 1.5rem;
   --stroke-width: 0.1rem;
@@ -297,8 +276,10 @@ sm-chip {
   font-size: 0.9rem;
   --border-radius: 0.3rem;
   user-select: none;
-  &[selected] {
+}
-  }
+
+collapsed-text {
+  --button-background: rgba(var(--foreground-color), 1);
 }
 
 ul {
@@ -645,11 +626,10 @@ ul {
   display: grid;
   text-align: center;
   align-items: center;
-
+  justify-items: center;
   & > * {
     grid-area: 1/1/2/2;
   }
-
   button {
     z-index: 1;
   }
@@ -1200,9 +1180,6 @@ ul {
   border-radius: 0.5rem;
   margin-bottom: 0.5rem;
   border: solid rgba(var(--text-color), 0.1) thin;
-  sm-button {
-    --padding: 0.5rem 0.8rem;
-  }
 }
 
 .request-card__description {

index.html

@@ -22,18 +22,18 @@
             application: "InternManage"
         }
     </script>
-    <script src="scripts/lib.min.js"></script>
+    <script src="scripts/lib.min.js" defer></script>
-    <script src="scripts/floCrypto.min.js"></script>
+    <script src="scripts/floCrypto.min.js" defer></script>
-    <script src="scripts/floBlockchainAPI.min.js"></script>
+    <script src="scripts/floBlockchainAPI.min.js" defer></script>
-    <script src="scripts/compactIDB.min.js"></script>
+    <script src="scripts/compactIDB.min.js" defer></script>
-    <script src="scripts/floCloudAPI.min.js"></script>
+    <script src="scripts/floCloudAPI.min.js" defer></script>
-    <script src="scripts/floDapps.min.js"></script>
+    <script src="scripts/floDapps.min.js" defer></script>
     <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
     <!-- <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script> -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"
         integrity="sha512-/hVAZO5POxCKdZMSLefw30xEVwjm94PAV9ynjskGbIpBvHO9EBplEcdUlBdCKutpZsF+La8Ag4gNrG0gAOn3Ig=="
         crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
-    <script src="scripts/ribc.min.js"></script>
+    <script src="scripts/ribc.min.js" defer></script>
     <script id="onLoadStartUp">
         function onLoadStartUp() {
             routeTo('loading')
@@ -1818,10 +1818,9 @@
                                 ${applyButton}
                             </div>
                             ${assignedInternsCards.length ? html`<div class="assigned-interns">${assignedInternsCards}</div>` : ''}
-                            <details>
+                            <collapsed-text>
-                                <summary class="task-details__summary">View task details</summary>
                                 ${linkifyDescription}
-                            </details>
+                            </collapsed-text>
                             <div class="timeline-task__details flex flex-wrap gap-0-3">
                                 ${duration ? html`
                                     <div class="display-task__detail">
@@ -1941,18 +1940,15 @@
                         })
                     }
                 })
-                const descriptionOptions = {
-                    className: 'task-description ws-pre-line wrap-around',
-                    innerHTML: DOMPurify.sanitize(description)
-                }
-                if (status === 'incomplete') {
-                    descriptionOptions.attributes = {
-                        'data-editable': '',
-                        'data-edit-field': 'description',
-                    }
-                }
-                const taskDescription = createElement('p', descriptionOptions)
                 if (status === 'incomplete') {
+                    const taskDescription = createElement('p', {
+                        className: 'task-description ws-pre-line wrap-around',
+                        attributes: {
+                            'data-editable': '',
+                            'data-edit-field': 'description',
+                        },
+                        innerHTML: DOMPurify.sanitize(description)
+                    })
                     const categories = [];
                     for (const categoryID in floGlobals.taskCategories) {
                         categories.push(html`<sm-option value=${categoryID} ?selected=${categoryID === category}>${floGlobals.taskCategories[categoryID]}</sm-option>`)
@@ -2003,6 +1999,10 @@
                     </li>
                 `;
                 } else {
+                    const taskDescription = createElement('p', {
+                        className: 'task-description ws-pre-line wrap-around',
+                        innerHTML: DOMPurify.sanitize(linkify(description))
+                    })
                     return html`
                     <li class=${`admin-task ${status}`} .dataset=${{ taskId: task }}>
                         <div class="flex align-center gap-0-3 space-between">
@@ -2016,8 +2016,7 @@
                         <div class="assigned-interns">
                             ${assignedInternsCards}
                         </div>
-                        <details>
+                        <collapsed-text>
-                            <summary>View details</summary>
                             ${taskDescription}
                             ${branchesButtons.length ? html`<div class="task__branch_container">${branchesButtons}</div>` : ''}
                             <div class="display-task__details flex flex-wrap gap-0-3 margin-top-1">
@@ -2038,7 +2037,7 @@
                                     <span class="display-task__detail__value">${reward}</span>
                                 </div>
                             </div>
-                        </details>
+                        </collapsed-text>
                     </li>
                 `;
                 }