diff --git a/src/home/render-github-issues.ts b/src/home/render-github-issues.ts index 3de1beaa..52d92e31 100644 --- 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 = ``; @@ -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,10 +171,10 @@ 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"); @@ -178,7 +182,8 @@ function previewIssue(issuePreview: GitHubIssueWithNewFlag) { 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 index fe29171e..277c70ed 100644 --- 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 index ecd89caa..3938cd76 100644 --- 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;