feat: implement preview modal with dynamic content and styling adjust…

…ments
ubiquity · Nov 2, 2024 · 0f2b07d · 0f2b07d
1 parent 79ef08e
commit 0f2b07d
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 53 deletions.
diff --git a/src/home/rendering/render-preview-modal.ts b/src/home/rendering/render-preview-modal.ts
@@ -1,41 +1,11 @@
-export const modal = document.createElement("div");
-modal.classList.add("preview");
-const modalContent = document.createElement("div");
-modalContent.classList.add("preview-content");
-const modalHeader = document.createElement("div");
-modalHeader.classList.add("preview-header");
-export const titleAnchor = document.createElement("a");
-titleAnchor.setAttribute("target", "_blank");
-export const titleHeader = document.createElement("h1");
-const closeButton = document.createElement("button");
-closeButton.classList.add("close-preview");
-closeButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z"/></svg>`;
-const modalBody = document.createElement("div");
-modalBody.classList.add("preview-body");
-export const modalBodyInner = document.createElement("div");
-modalBodyInner.classList.add("preview-body-inner");
-modalHeader.appendChild(closeButton);
-titleAnchor.appendChild(titleHeader);
-const openNewLinkIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>`;
-const openNewLink = document.createElement("span");
-openNewLink.classList.add("open-new-link");
-openNewLink.innerHTML = openNewLinkIcon;
-
-const errorIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808080"><path d="M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm69-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Zm0-100Z"/></svg>`;
-const error = document.createElement("span");
-error.classList.add("error");
-error.innerHTML = errorIcon;
-
-titleAnchor.appendChild(error);
-titleAnchor.appendChild(openNewLink);
-modalHeader.appendChild(titleAnchor);
-modalBody.appendChild(modalBodyInner);
-modalContent.appendChild(modalHeader);
-modalContent.appendChild(modalBody);
-modal.appendChild(modalContent);
-document.body.appendChild(modal);
+export const modal = document.getElementById("preview-modal") as HTMLDivElement;
+export const titleAnchor = document.getElementById("preview-title-anchor") as HTMLAnchorElement;
+export const titleHeader = document.getElementById("preview-title") as HTMLHeadingElement;
+export const modalBodyInner = document.getElementById("preview-body-inner") as HTMLDivElement;
 export const issuesContainer = document.getElementById("issues-container");
 
+const closeButton = modal.querySelector(".close-preview") as HTMLButtonElement;
+
 closeButton.addEventListener("click", closeModal);
 document.addEventListener("keydown", (event) => {
   if (event.key === "Escape") {

diff --git a/src/home/sorting/sorting-manager.ts b/src/home/sorting/sorting-manager.ts
@@ -26,8 +26,8 @@ export class SortingManager {
   }
 
   public render() {
-    this._toolBarFilters.appendChild(this._sortingButtons);
     this._toolBarFilters.appendChild(this._filterTextBox);
+    this._toolBarFilters.appendChild(this._sortingButtons);
   }
 
   private _generateFilterTextBox() {
@@ -51,7 +51,7 @@ export class SortingManager {
 
     const issuesContainer = document.getElementById("issues-container") as HTMLDivElement;
 
-    const filterIssues = () => {
+    function filterIssues() {
       try {
         const filterText = textBox.value.toLowerCase();
         const issues = Array.from(issuesContainer.children) as HTMLDivElement[];
@@ -69,7 +69,7 @@ export class SortingManager {
       } catch (error) {
         return renderErrorInModal(error as Error);
       }
-    };
+    }
 
     // Observer to detect when children are added to the issues container (only once)
     const observer = new MutationObserver(() => {

diff --git a/static/index.html b/static/index.html
@@ -47,6 +47,37 @@
       ><div id="filters" class="filters-container"></div>
       <div id="authentication"></div>
     </div>
+    <div id="preview-modal" class="preview">
+      <div class="preview-content">
+        <div class="preview-header">
+          <button class="close-preview">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+              <path d="m336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z" />
+            </svg>
+          </button>
+          <a id="preview-title-anchor" target="_blank">
+            <h1 id="preview-title"></h1>
+            <span class="error">
+              <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#808080">
+                <path
+                  d="M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm69-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Zm0-100Z"
+                />
+              </svg>
+            </span>
+            <span class="open-new-link">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                <path
+                  d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"
+                />
+              </svg>
+            </span>
+          </a>
+        </div>
+        <div class="preview-body">
+          <div id="preview-body-inner" class="preview-body-inner"></div>
+        </div>
+      </div>
+    </div>
     <div id="bottom-bar" class="toolbar"
       ><div id="mobile-modal-scrub"><button id="scrub-left">&lsaquo;</button><button id="scrub-right">&rsaquo;</button></div
       ><div id="filters-bottom" class="filters-container"></div

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -14,11 +14,11 @@
   #bottom-bar {
     align-items: center;
     justify-content: center;
+    height: 72px;
   }
   #filters-bottom {
-    display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 4px;
   }
   .labels {
     margin: 0;
@@ -95,7 +95,7 @@
     max-width: 640px;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    padding: 48px 0 56px 0;
+    padding: 48px 0 72px 0;
     transition: 0.25s all cubic-bezier(0, 1, 1, 1);
     width: 100%;
   }
@@ -269,7 +269,7 @@
   }
   .labels {
     display: flex;
-    margin-left: 5px;
+    margin-left: 2px;
     justify-content: flex-end;
   }
   .partner {
@@ -652,18 +652,20 @@
   }
   .filters-container {
     flex: 1;
+    /* width: 100%; */
+    /* justify-content: normal; */
   }
   .filters-container input[type="text"] {
-    margin: 0 10px;
     padding: 4px;
     border: none;
     border-radius: 4px;
     background-color: #7f7f7f20;
-    width: 100%;
-    max-width: 500px;
     height: 16px;
     text-align: center;
   }
+  #filter-top {
+    width: calc(100vw / 3);
+  }
   .filters-container input[type="text"]::placeholder {
     font-size: 12px;
     letter-spacing: 0.5px;
@@ -862,4 +864,62 @@
   .preview-active div#mobile-modal-scrub {
     display: unset;
   }
+  .preview {
+    position: fixed;
+    transition: 0.25s all cubic-bezier(0, 1, 1, 1);
+    max-width: 640px;
+    border: 1px solid #7f7f7f20;
+    border-radius: 4px;
+    opacity: 0;
+    top: 54px;
+    pointer-events: none;
+    /* Update height calculation to use dvh */
+    max-height: calc(100dvh - 54px - 48px - env(safe-area-inset-bottom, 0px));
+    background-color: var(--background-color-default);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    /* Enable momentum scrolling */
+    -webkit-overflow-scrolling: touch;
+    /* Prevent content from going under bottom bar */
+    margin-bottom: env(safe-area-inset-bottom, 0px);
+  }
+
+  .preview * {
+    pointer-events: none;
+  }
+
+  .preview.active * {
+    pointer-events: all;
+  }
+
+  .preview.active {
+    opacity: 1;
+    pointer-events: all;
+    transform: translateX(50%);
+    overflow: hidden;
+  }
+
+  .preview-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 16px;
+    border-bottom: 1px solid #7f7f7f20;
+  }
+
+  .preview-body {
+    overflow-y: auto;
+    /* Update height calculation to use dvh */
+    max-height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px));
+    display: block;
+    /* Enable smooth scrolling */
+    scroll-behavior: smooth;
+    /* Enable momentum scrolling */
+    -webkit-overflow-scrolling: touch;
+    /* Prevent content from going under bottom bar */
+    /* padding-bottom: 48px; */
+  }
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -14,11 +14,11 @@
   #bottom-bar {
     align-items: center;
     justify-content: center;
+    height: 72px;
   }
   #filters-bottom {
-    display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 4px;
   }
   .labels {
     margin: 0;
@@ -95,7 +95,7 @@
     max-width: 640px;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    padding: 48px 0 56px 0;
+    padding: 48px 0 72px 0;
     transition: 0.25s all cubic-bezier(0, 1, 1, 1);
     width: 100%;
   }
@@ -269,7 +269,7 @@
   }
   .labels {
     display: flex;
-    margin-left: 5px;
+    margin-left: 2px;
     justify-content: flex-end;
   }
   .partner {
@@ -652,18 +652,20 @@
   }
   .filters-container {
     flex: 1;
+    /* width: 100%; */
+    /* justify-content: normal; */
   }
   .filters-container input[type="text"] {
-    margin: 0 10px;
     padding: 4px;
     border: none;
     border-radius: 4px;
     background-color: #80808020;
-    width: 100%;
-    max-width: 500px;
     height: 16px;
     text-align: center;
   }
+  #filter-top {
+    width: calc(100vw / 3);
+  }
   .filters-container input[type="text"]::placeholder {
     font-size: 12px;
     letter-spacing: 0.5px;
@@ -862,4 +864,62 @@
   .preview-active div#mobile-modal-scrub {
     display: unset;
   }
+  .preview {
+    position: fixed;
+    transition: 0.25s all cubic-bezier(0, 1, 1, 1);
+    max-width: 640px;
+    border: 1px solid #80808020;
+    border-radius: 4px;
+    opacity: 0;
+    top: 54px;
+    pointer-events: none;
+    /* Update height calculation to use dvh */
+    max-height: calc(100dvh - 54px - 48px - env(safe-area-inset-bottom, 0px));
+    background-color: var(--background-color-default);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    /* Enable momentum scrolling */
+    -webkit-overflow-scrolling: touch;
+    /* Prevent content from going under bottom bar */
+    margin-bottom: env(safe-area-inset-bottom, 0px);
+  }
+
+  .preview * {
+    pointer-events: none;
+  }
+
+  .preview.active * {
+    pointer-events: all;
+  }
+
+  .preview.active {
+    opacity: 1;
+    pointer-events: all;
+    transform: translateX(50%);
+    overflow: hidden;
+  }
+
+  .preview-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 16px;
+    border-bottom: 1px solid #80808020;
+  }
+
+  .preview-body {
+    overflow-y: auto;
+    /* Update height calculation to use dvh */
+    max-height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px));
+    display: block;
+    /* Enable smooth scrolling */
+    scroll-behavior: smooth;
+    /* Enable momentum scrolling */
+    -webkit-overflow-scrolling: touch;
+    /* Prevent content from going under bottom bar */
+    /* padding-bottom: 48px; */
+  }
 }