fix: mobile preview

ubiquity · Dec 4, 2023 · 7a53516 · 7a53516
1 parent b68744e
commit 7a53516
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 22 deletions.
diff --git a/src/home/render-github-issues.ts b/src/home/render-github-issues.ts
@@ -9,7 +9,10 @@ const previewContent = document.createElement("div");
 previewContent.classList.add("preview-content");
 const previewHeader = document.createElement("div");
 previewHeader.classList.add("preview-header");
-const title = document.createElement("h1");
+const titleAnchor = document.createElement("a");
+titleAnchor.setAttribute("target", "_blank");
+titleAnchor.href = "#";
+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" height="24" viewBox="0 -960 960 960" width="24"><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>`;
@@ -20,7 +23,8 @@ previewBodyInner.classList.add("preview-body-inner");
 
 // Assemble the preview box
 previewHeader.appendChild(closeButton);
-previewHeader.appendChild(title);
+titleAnchor.appendChild(titleHeader);
+previewHeader.appendChild(titleAnchor);
 previewBody.appendChild(previewBodyInner);
 previewContent.appendChild(previewHeader);
 previewContent.appendChild(previewBody);
@@ -167,18 +171,19 @@ function issuesSynced() {
 // Function to update and show the preview
 function previewIssue(issuePreview: GitHubIssueWithNewFlag) {
   const issuesFull = JSON.parse(localStorage.getItem("githubIssuesFull") || "[]");
-  console.trace({
-    issuesFull,
-    issue: issuePreview,
-  });
+  // console.trace({
+  //   issuesFull,
+  //   issue: issuePreview,
+  // });
   const issuePreviewUrl = issuePreview.body.match(/https:\/\/github\.com\/[^/]+\/[^/]+\/issues\/\d+/)?.[0];
   if (!issuePreviewUrl) throw new Error("Issue preview URL not found");
 
   const issueFull = findIssueByUrl(issuesFull, issuePreviewUrl);
   if (!issueFull) throw new Error("Issue not found");
 
   // Update the title and body for the new issue
-  title.textContent = issuePreview.title;
+  titleHeader.textContent = issuePreview.title;
+  titleAnchor.href = issuePreviewUrl;
   previewBodyInner.innerHTML = marked(issueFull.body) as string;
 
   // Show the preview

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -359,14 +359,7 @@
     right: 0;
     background-color: #00ffff;
   }
-  @media screen and (max-width: 319px) {
-    .preview.active{
-      transform: translateX(0);
-    }
-    #issues-container.preview-active{
-      transform: translateX(0);
-    }
-  }
+
   @media screen and (max-width: 896px) {
     .full {
       display: none !important;
@@ -391,8 +384,6 @@
     #toolbar > button {
       padding: 12px 16px;
     }
-
-
   }
   @media screen and (max-width: 1280px) {
     body {
@@ -401,10 +392,10 @@
     .preview.active {
       position: fixed;
       right: 0;
-      transform: translateX(0);
+      transform: translateX(0) !important;
     }
     #issues-container.preview-active {
-      transform: translateX(0);
+      transform: translateX(0) !important;
     }
   }
   #toolbar > button {
@@ -503,7 +494,7 @@
     transform: translateX(0%);
     flex-wrap: wrap;
     overflow: scroll;
-    max-height: calc(100vh - 130px);
+    max-height: calc(100vh - 71px);
     pointer-events: none;
   }
   .close-preview svg {
@@ -520,7 +511,12 @@
     /* justify-content: space-between; */
     margin-bottom: 8px;
   }
+  .preview-header > a  {
 
+  }
+  .preview-header > a > h1 {
+    word-wrap: initial;
+  }
   .preview-body {
     margin: 16px;
     overflow: scroll;

diff --git a/static/style/style.css b/static/style/style.css
@@ -511,7 +511,11 @@
     /* justify-content: space-between; */
     margin-bottom: 8px;
   }
-
+  .preview-header > a  {word-wrap: initial;}
+  .preview-header > a > h1 {
+    word-wrap: initial;
+    word-break: normal;
+  }
   .preview-body {
     margin: 16px;
     overflow: scroll;
@@ -528,7 +532,7 @@
     right: 0;
     top: 0;
     margin: 8px;
-    height: 48px;
+    /* height: 48px; */
   }
   .preview li {
     margin-bottom: 8px;