From 0a68c4076dd7f33e290592d3b3caf7437dbd0dea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Mon, 4 Dec 2023 22:58:29 +0900 Subject: [PATCH 1/5] feat(preview): prototype --- package.json | 3 +- src/home/fetch-github-issues.ts | 32 +++++++++++++-- src/home/home.ts | 31 ++++++++++++++- src/home/render-github-issues.ts | 67 +++++++++++++++++++++++++++++++- static/style/inverted-style.css | 29 +++++++++++++- static/style/style.css | 51 +++++++++++++++++++++++- yarn.lock | 10 +++++ 7 files changed, 214 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index b5b0510a..6ad79c7a 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,8 @@ "@octokit/rest": "^20.0.2", "@supabase/supabase-js": "^2.39.0", "dotenv": "^16.3.1", - "esbuild-plugin-env": "^1.0.8" + "esbuild-plugin-env": "^1.0.8", + "marked": "^11.0.0" }, "devDependencies": { "@cloudflare/wrangler": "^1.21.0", diff --git a/src/home/fetch-github-issues.ts b/src/home/fetch-github-issues.ts index c81c518a..2ffe253c 100644 --- a/src/home/fetch-github-issues.ts +++ b/src/home/fetch-github-issues.ts @@ -13,7 +13,7 @@ export async function fetchGitHubIssues(sorting?: Sorting) { if (!container) { throw new Error("Could not find issues container"); } - await fetchIssues(container, sorting); + return await fetchIssues(container, sorting); } export function sortIssuesBy(issues: GitHubIssue[], sortBy: string) { @@ -73,7 +73,7 @@ function calculateLabelValue(label: string): number { async function fetchIssues(container: HTMLDivElement, sorting?: Sorting) { let issues; try { - issues = await fetchCachedIssues(); + issues = fetchCachedIssues(); if (issues) { await displayIssues(issues, container, sorting); issues = await fetchNewIssues(); @@ -81,8 +81,10 @@ async function fetchIssues(container: HTMLDivElement, sorting?: Sorting) { issues = await fetchNewIssues(); await displayIssues(issues, container, sorting); } + return issues; } catch (error) { console.error(error); + return null; } } @@ -129,7 +131,7 @@ async function fetchNewIssues(): Promise { return freshIssuesWithNewFlag; } -async function fetchCachedIssues(): Promise { +export function fetchCachedIssues(): GitHubIssue[] | null { const cachedIssues = localStorage.getItem("githubIssues"); if (cachedIssues) { try { @@ -140,3 +142,27 @@ async function fetchCachedIssues(): Promise { } return null; } + +export async function fetchIssuesFull(cachedIssues: GitHubIssue[]) { + const authToken = getGitHubAccessToken(); + if (!authToken) throw new Error("No auth token found"); + const octokit = new Octokit({ auth: getGitHubAccessToken() }); + const downloaded: unknown[] = []; + for (const issue of cachedIssues) { + const urlPattern = /https:\/\/github\.com\/(?[^/]+)\/(?[^/]+)\/issues\/(?\d+)/; + const match = issue.body.match(urlPattern); + if (!match || !match.groups) { + console.error("Invalid issue body URL format"); + continue; + } + const { org, repo, issue_number } = match.groups; + + const { data: issueData } = await octokit.request("GET /repos/{org}/{repo}/issues/{issue_number}", { + issue_number, + repo, + org, + }); + downloaded.push(issueData); + } + return downloaded; +} \ No newline at end of file diff --git a/src/home/home.ts b/src/home/home.ts index 245e757e..e1afc67c 100644 --- a/src/home/home.ts +++ b/src/home/home.ts @@ -1,9 +1,38 @@ import { grid } from "../the-grid"; import { authentication } from "./authentication"; -import { fetchGitHubIssues } from "./fetch-github-issues"; +import { fetchCachedIssues, fetchGitHubIssues, fetchIssuesFull } from "./fetch-github-issues"; import { sortingButtons } from "./sorting-buttons"; fetchGitHubIssues().catch((error) => console.error(error)); authentication(); sortingButtons(); grid(document.getElementById("grid") as HTMLElement); + +const cachedIssues = fetchCachedIssues(); +if (cachedIssues) { + const fullIssues = fetchCachedIssuesFull(); + + if (!fullIssues) { + fetchIssuesFull(cachedIssues) + .then((downloaded) => { + localStorage.setItem("githubIssuesFull", JSON.stringify(downloaded)); + return downloaded; + }) + .then((downloaded) => console.log(downloaded)) + .catch((error) => console.error(error)); + } else { + console.trace({ fullIssues }); + } +} + +export function fetchCachedIssuesFull() { + const cachedIssues = localStorage.getItem("githubIssuesFull"); + if (cachedIssues) { + try { + return JSON.parse(cachedIssues); + } catch (error) { + console.error(error); + } + } + return null; +} diff --git a/src/home/render-github-issues.ts b/src/home/render-github-issues.ts index 1520616f..61f38da3 100644 --- a/src/home/render-github-issues.ts +++ b/src/home/render-github-issues.ts @@ -1,3 +1,5 @@ +import { marked } from "marked"; + import { GitHubIssueWithNewFlag } from "./fetch-github-issues"; export async function renderGitHubIssues(container: HTMLDivElement, issues: GitHubIssueWithNewFlag[]) { @@ -68,7 +70,8 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH issueElement.addEventListener("click", () => { console.log(issue); - window.open(match?.input, "_blank"); + previewIssue(issue); + // window.open(match?.input, "_blank"); }); issueWrapper.appendChild(issueElement); @@ -105,3 +108,65 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH } container.classList.add("ready"); } + +function previewIssue(issuePreview: GitHubIssueWithNewFlag) { + const issuesFull = JSON.parse(localStorage.getItem("githubIssuesFull") || "[]"); + 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"); + + const preview = document.createElement("div"); + preview.classList.add("preview"); + const previewContent = document.createElement("div"); + previewContent.classList.add("preview-content"); + const previewHeader = document.createElement("div"); + previewHeader.classList.add("preview-header"); + + const title = document.createElement("h3"); + title.textContent = issuePreview.title; + previewHeader.appendChild(title); + + const closeButton = document.createElement("button"); + closeButton.classList.add("close-preview"); + closeButton.textContent = "Close"; + previewHeader.appendChild(closeButton); + + const previewBody = document.createElement("div"); + previewBody.classList.add("preview-body"); + + const previewBodyInner = document.createElement("div"); + previewBodyInner.classList.add("preview-body-inner"); + // const mmmmarked = new marked(issueFull.body); + previewBodyInner.innerHTML = marked.parse(issueFull.body); + + previewBody.appendChild(previewBodyInner); + + previewContent.appendChild(previewHeader); + previewContent.appendChild(previewBody); + preview.appendChild(previewContent); + + document.body.appendChild(preview); + preview.addEventListener("click", (event) => { + if (event.target === preview) { + preview.remove(); + } + }); + // const closeButton = preview.querySelector(".close-preview") as HTMLButtonElement; + closeButton.addEventListener("click", () => { + preview.remove(); + }); +} + +function findIssueByUrl(issues: GitHubIssueWithNewFlag[], url: string) { + console.trace({ + issues, + url, + }); + return issues.find((issue) => issue.html_url === url); +} diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 29e86f1a..cf25e433 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -304,7 +304,7 @@ user-select: none; opacity: 0; transition: 0.5s opacity ease-in-out; - background-image: var(--grid-background-image); + /* background-image: var(--grid-background-image); */ } #toolbar.ready { opacity: 1; @@ -394,4 +394,31 @@ mask-image: radial-gradient(#ffffff20 0, #ffffff80 100%); pointer-events: none; } + .preview { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + /* height: 100%; */ + /* background-color: #ffffff80; */ + /* display: flex; */ + /* align-items: center; */ + /* justify-content: center; */ + /* pointer-events: none; */ + /* opacity: 0; */ + transition: 0.5s opacity ease-in-out; + /* z-index: 100; */ + display: block; + background: #ffffff; + padding: 16px; + } + .preview-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .preview-body{ + padding: 8px + } } diff --git a/static/style/style.css b/static/style/style.css index cc128f4f..63df2dce 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -111,12 +111,27 @@ text-overflow: ellipsis; margin: 0; } + #issues-container p { + text-align: right; + } + p { margin: 0; line-height: 1; color: #bfbfbf; font-size: 12px; - text-align: right; + + letter-spacing: 0.5px; + text-rendering: geometricPrecision; + top: 0; + right: 0; + } + li { + margin: 0; + line-height: 1; + color: #bfbfbf; + font-size: 12px; + letter-spacing: 0.5px; text-rendering: geometricPrecision; top: 0; @@ -304,7 +319,7 @@ user-select: none; opacity: 0; transition: 0.5s opacity ease-in-out; - background-image: var(--grid-background-image); + /* background-image: var(--grid-background-image); */ } #toolbar.ready { opacity: 1; @@ -394,4 +409,36 @@ mask-image: radial-gradient(#00000020 0, #00000080 100%); pointer-events: none; } + .preview { + text-align: left; + position: fixed; + bottom: 0; + left: 0; + width: calc(100vw - 32px); + /* height: 100%; */ + /* background-color: #00000080; */ + /* display: flex; */ + /* align-items: center; */ + /* justify-content: center; */ + /* pointer-events: none; */ + /* opacity: 0; */ + transition: 0.5s opacity ease-in-out; + /* z-index: 100; */ + display: block; + background: #000; + padding: 16px; + max-width: 640px; + border: 1px solid #80808020; + border-radius: 4px; + } + .preview-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 8px; + } + + .preview-body { + padding: 8px; + } } diff --git a/yarn.lock b/yarn.lock index ec5d2650..4fe72997 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4199,6 +4199,15 @@ __metadata: languageName: node linkType: hard +"marked@npm:^11.0.0": + version: 11.0.0 + resolution: "marked@npm:11.0.0" + bin: + marked: bin/marked.js + checksum: 18d73767cc75096f43d99ae42b53d60c0a28e8af6cb7183271fc4de0f03072734314d4311258ab3cc7a8bc17645471d30082653e9755dbf8b3894042d6581094 + languageName: node + linkType: hard + "mem@npm:^6.0.1": version: 6.1.1 resolution: "mem@npm:6.1.1" @@ -5895,6 +5904,7 @@ __metadata: husky: ^8.0.3 knip: ^3.3.0 lint-staged: ^15.1.0 + marked: ^11.0.0 npm-run-all: ^4.1.5 prettier: ^3.1.0 tsx: ^4.6.0 From 3c92ac374d7aca5de55ab52881eecfbed0cb84df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Mon, 4 Dec 2023 23:05:00 +0900 Subject: [PATCH 2/5] style: refine preview --- src/home/fetch-github-issues.ts | 2 +- src/home/render-github-issues.ts | 86 +++++++++++++++++--------------- static/style/inverted-style.css | 33 ++++++++++-- static/style/style.css | 16 +++--- 4 files changed, 84 insertions(+), 53 deletions(-) diff --git a/src/home/fetch-github-issues.ts b/src/home/fetch-github-issues.ts index 2ffe253c..9d2540af 100644 --- a/src/home/fetch-github-issues.ts +++ b/src/home/fetch-github-issues.ts @@ -165,4 +165,4 @@ export async function fetchIssuesFull(cachedIssues: GitHubIssue[]) { downloaded.push(issueData); } return downloaded; -} \ No newline at end of file +} diff --git a/src/home/render-github-issues.ts b/src/home/render-github-issues.ts index 61f38da3..63232360 100644 --- a/src/home/render-github-issues.ts +++ b/src/home/render-github-issues.ts @@ -2,6 +2,46 @@ import { marked } from "marked"; import { GitHubIssueWithNewFlag } from "./fetch-github-issues"; +// Create the preview elements outside of the previewIssue function +const preview = document.createElement("div"); +preview.classList.add("preview"); +const previewContent = document.createElement("div"); +previewContent.classList.add("preview-content"); +const previewHeader = document.createElement("div"); +previewHeader.classList.add("preview-header"); +const title = document.createElement("h3"); +const closeButton = document.createElement("button"); +closeButton.classList.add("close-preview"); +closeButton.textContent = "Close"; +const previewBody = document.createElement("div"); +previewBody.classList.add("preview-body"); +const previewBodyInner = document.createElement("div"); +previewBodyInner.classList.add("preview-body-inner"); + +// Assemble the preview box +previewHeader.appendChild(title); +previewHeader.appendChild(closeButton); +previewBody.appendChild(previewBodyInner); +previewContent.appendChild(previewHeader); +previewContent.appendChild(previewBody); +preview.appendChild(previewContent); +document.body.appendChild(preview); + +// Initially hide the preview +// preview.classList.add("inactive"); // = 'none'; + +// Event listeners for closing the preview +preview.addEventListener("click", (event) => { + if (event.target === preview) { + preview.classList.remove("active"); // = 'none'; + } +}); + +closeButton.addEventListener("click", () => { + preview.classList.remove("active"); // = 'none'; +}); + + export async function renderGitHubIssues(container: HTMLDivElement, issues: GitHubIssueWithNewFlag[]) { const avatarCache: Record = JSON.parse(localStorage.getItem("avatarCache") || "{}"); const fetchInProgress = new Set(); // Track in-progress fetches @@ -109,6 +149,7 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH container.classList.add("ready"); } +// Function to update and show the preview function previewIssue(issuePreview: GitHubIssueWithNewFlag) { const issuesFull = JSON.parse(localStorage.getItem("githubIssuesFull") || "[]"); console.trace({ @@ -121,52 +162,19 @@ function previewIssue(issuePreview: GitHubIssueWithNewFlag) { const issueFull = findIssueByUrl(issuesFull, issuePreviewUrl); if (!issueFull) throw new Error("Issue not found"); - const preview = document.createElement("div"); - preview.classList.add("preview"); - const previewContent = document.createElement("div"); - previewContent.classList.add("preview-content"); - const previewHeader = document.createElement("div"); - previewHeader.classList.add("preview-header"); - - const title = document.createElement("h3"); + // Update the title and body for the new issue title.textContent = issuePreview.title; - previewHeader.appendChild(title); - - const closeButton = document.createElement("button"); - closeButton.classList.add("close-preview"); - closeButton.textContent = "Close"; - previewHeader.appendChild(closeButton); - - const previewBody = document.createElement("div"); - previewBody.classList.add("preview-body"); + previewBodyInner.innerHTML = marked(issueFull.body) as string; - const previewBodyInner = document.createElement("div"); - previewBodyInner.classList.add("preview-body-inner"); - // const mmmmarked = new marked(issueFull.body); - previewBodyInner.innerHTML = marked.parse(issueFull.body); - - previewBody.appendChild(previewBodyInner); - - previewContent.appendChild(previewHeader); - previewContent.appendChild(previewBody); - preview.appendChild(previewContent); - - document.body.appendChild(preview); - preview.addEventListener("click", (event) => { - if (event.target === preview) { - preview.remove(); - } - }); - // const closeButton = preview.querySelector(".close-preview") as HTMLButtonElement; - closeButton.addEventListener("click", () => { - preview.remove(); - }); + // Show the preview + preview.classList.add("active"); // = 'block'; } +// Function to find an issue by URL function findIssueByUrl(issues: GitHubIssueWithNewFlag[], url: string) { console.trace({ issues, url, }); return issues.find((issue) => issue.html_url === url); -} +} \ No newline at end of file diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index cf25e433..a900fb7d 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -111,12 +111,27 @@ text-overflow: ellipsis; margin: 0; } + #issues-container p { + text-align: right; + } + p { margin: 0; line-height: 1; color: #404040; font-size: 12px; - text-align: right; + + letter-spacing: 0.5px; + text-rendering: geometricPrecision; + top: 0; + right: 0; + } + li { + margin: 0; + line-height: 1; + color: #404040; + font-size: 12px; + letter-spacing: 0.5px; text-rendering: geometricPrecision; top: 0; @@ -394,11 +409,17 @@ mask-image: radial-gradient(#ffffff20 0, #ffffff80 100%); pointer-events: none; } + + .preview.active { + opacity: 1; + pointer-events: all; + } .preview { + text-align: left; position: fixed; bottom: 0; left: 0; - width: 100%; + width: calc(100vw - 32px); /* height: 100%; */ /* background-color: #ffffff80; */ /* display: flex; */ @@ -411,14 +432,18 @@ display: block; background: #ffffff; padding: 16px; + max-width: 640px; + border: 1px solid #7f7f7f20; + border-radius: 4px; } .preview-header { display: flex; align-items: center; justify-content: space-between; + margin-bottom: 8px; } - .preview-body{ - padding: 8px + .preview-body { + padding: 8px; } } diff --git a/static/style/style.css b/static/style/style.css index 63df2dce..94a9a9b8 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -409,27 +409,25 @@ mask-image: radial-gradient(#00000020 0, #00000080 100%); pointer-events: none; } + .preview { text-align: left; position: fixed; bottom: 0; left: 0; width: calc(100vw - 32px); - /* height: 100%; */ - /* background-color: #00000080; */ - /* display: flex; */ - /* align-items: center; */ - /* justify-content: center; */ - /* pointer-events: none; */ - /* opacity: 0; */ - transition: 0.5s opacity ease-in-out; - /* z-index: 100; */ + transition: 0.125s opacity ease-in-out; display: block; background: #000; padding: 16px; max-width: 640px; border: 1px solid #80808020; border-radius: 4px; + opacity: 0; + } + .preview.active { + opacity: 1; + pointer-events: all; } .preview-header { display: flex; From 60bb4be57bcdfd9355a39bb8dabc088aa8b05357 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Tue, 5 Dec 2023 00:24:21 +0900 Subject: [PATCH 3/5] fix: fetch issues locally when logged in --- src/home/fetch-github-issues.ts | 1 + src/home/home.ts | 2 + src/home/render-github-issues.ts | 26 ++++-- static/style/inverted-style.css | 134 +++++++++++++++++++++++++------ static/style/special.css | 6 ++ static/style/style.css | 117 ++++++++++++++++++++++++--- 6 files changed, 244 insertions(+), 42 deletions(-) diff --git a/src/home/fetch-github-issues.ts b/src/home/fetch-github-issues.ts index 9d2540af..9f961cc0 100644 --- a/src/home/fetch-github-issues.ts +++ b/src/home/fetch-github-issues.ts @@ -146,6 +146,7 @@ export function fetchCachedIssues(): GitHubIssue[] | null { export async function fetchIssuesFull(cachedIssues: GitHubIssue[]) { const authToken = getGitHubAccessToken(); if (!authToken) throw new Error("No auth token found"); + console.trace(`fetching full issues`); const octokit = new Octokit({ auth: getGitHubAccessToken() }); const downloaded: unknown[] = []; for (const issue of cachedIssues) { diff --git a/src/home/home.ts b/src/home/home.ts index e1afc67c..9491b41d 100644 --- a/src/home/home.ts +++ b/src/home/home.ts @@ -9,10 +9,12 @@ sortingButtons(); grid(document.getElementById("grid") as HTMLElement); const cachedIssues = fetchCachedIssues(); + if (cachedIssues) { const fullIssues = fetchCachedIssuesFull(); if (!fullIssues) { + fetchIssuesFull(cachedIssues) .then((downloaded) => { localStorage.setItem("githubIssuesFull", JSON.stringify(downloaded)); diff --git a/src/home/render-github-issues.ts b/src/home/render-github-issues.ts index 63232360..b76b1d95 100644 --- a/src/home/render-github-issues.ts +++ b/src/home/render-github-issues.ts @@ -9,10 +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("h3"); +const title = document.createElement("h1"); const closeButton = document.createElement("button"); closeButton.classList.add("close-preview"); -closeButton.textContent = "Close"; +closeButton.innerHTML = ``; const previewBody = document.createElement("div"); previewBody.classList.add("preview-body"); const previewBodyInner = document.createElement("div"); @@ -30,18 +30,21 @@ document.body.appendChild(preview); // Initially hide the preview // preview.classList.add("inactive"); // = 'none'; +const issuesContainer = document.getElementById("issues-container"); + // Event listeners for closing the preview preview.addEventListener("click", (event) => { if (event.target === preview) { preview.classList.remove("active"); // = 'none'; + issuesContainer?.classList.remove("preview-active"); } }); closeButton.addEventListener("click", () => { preview.classList.remove("active"); // = 'none'; + issuesContainer?.classList.remove("preview-active"); }); - export async function renderGitHubIssues(container: HTMLDivElement, issues: GitHubIssueWithNewFlag[]) { const avatarCache: Record = JSON.parse(localStorage.getItem("avatarCache") || "{}"); const fetchInProgress = new Set(); // Track in-progress fetches @@ -110,8 +113,12 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH issueElement.addEventListener("click", () => { console.log(issue); - previewIssue(issue); - // window.open(match?.input, "_blank"); + const isLocal = issuesSynced(); + if (isLocal) { + previewIssue(issue); + } else { + window.open(match?.input, "_blank"); + } }); issueWrapper.appendChild(issueElement); @@ -149,6 +156,12 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH container.classList.add("ready"); } +function issuesSynced() { + const issuesFull = JSON.parse(localStorage.getItem("githubIssuesFull")); + if (!issuesFull) return false; + else return true; +} + // Function to update and show the preview function previewIssue(issuePreview: GitHubIssueWithNewFlag) { const issuesFull = JSON.parse(localStorage.getItem("githubIssuesFull") || "[]"); @@ -168,6 +181,7 @@ function previewIssue(issuePreview: GitHubIssueWithNewFlag) { // Show the preview preview.classList.add("active"); // = 'block'; + issuesContainer?.classList.add("preview-active"); } // Function to find an issue by URL @@ -177,4 +191,4 @@ function findIssueByUrl(issues: GitHubIssueWithNewFlag[], url: string) { url, }); return issues.find((issue) => issue.html_url === url); -} \ No newline at end of file +} diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index a900fb7d..000e4729 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -40,13 +40,22 @@ } #issues-container { max-width: 640px; - margin: auto; - padding: 0 0 56px; + /* margin: 0 auto; */ + /* padding: 0 0 56px; */ /* overflow: scroll; */ scrollbar-width: none; -ms-overflow-style: none; /* padding: calc(25vh - 56px) 0; */ padding: 56px 0; + /* display: inline-block; */ + /* flex-grow: 2; */ + /* display: flex; */ + /* flex-direction: column; */ + /* align-items: flex-end; */ + transition: 0.25s all cubic-bezier(0, 1, 1, 1); + } + #issues-container.preview-active { + transform: translateX(-50%); } &::-webkit-scrollbar { display: none; @@ -84,6 +93,8 @@ margin: 8px; /* background-color: #ffffff; */ filter: blur(4px); + display: block; + /* width: 100%; */ } #issues-container > div.active { transition: 125ms all ease-in-out; @@ -167,7 +178,6 @@ width: 64px; letter-spacing: 0.5px; flex-grow: 4; - display: flex; justify-content: center; display: flex; align-items: center; @@ -225,8 +235,12 @@ margin: 0; } body { - text-align: center; + /* text-align: center; */ /* background-image: var(--grid-background-image); */ + display: flex; + align-items: center; + align-content: center; + justify-content: center; } .info { opacity: 0.66; @@ -370,6 +384,19 @@ padding: 12px 16px; } } + @media screen and (max-width: 1280px) { + body { + /* background-color: red; */ + } + .preview.active { + position: fixed; + right: 0; + transform: translateX(0); + } + #issues-container.preview-active { + transform: translateX(0); + } + } #toolbar > button { text-align: center; } @@ -409,32 +436,73 @@ mask-image: radial-gradient(#ffffff20 0, #ffffff80 100%); pointer-events: none; } - - .preview.active { - opacity: 1; - pointer-events: all; + .preview p { + line-height: 1.25; + word-break: break-word; + margin-bottom: 12px; + } + .preview img { + max-width: 100%; + } + .preview pre { + /* width: calc(100% - 48px); */ + overflow: scroll; + } + .preview code { + width: 100%; + white-space: initial; + } + .preview ul, + .preview ol { + padding-left: 12px; } + .preview h1 { + margin: 16px; + /* text-align: center; */ + } + .preview a{ + word-break: break-all; + } + .preview-body-inner { + width: calc( 100% - 48px); + max-width: 640px; + overflow: scroll; + } + .preview { + overflow: hidden; text-align: left; position: fixed; - bottom: 0; - left: 0; - width: calc(100vw - 32px); - /* height: 100%; */ - /* background-color: #ffffff80; */ - /* display: flex; */ - /* align-items: center; */ - /* justify-content: center; */ - /* pointer-events: none; */ - /* opacity: 0; */ - transition: 0.5s opacity ease-in-out; - /* z-index: 100; */ - display: block; - background: #ffffff; - padding: 16px; + /* bottom: 0; */ + /* left: 0; */ + /* width: calc(100vw - 32px); */ + transition: 0.25s all cubic-bezier(0, 1, 1, 1); + /* display: inline-block; */ + /* background: #ffffff; */ + /* padding: 16px; */ max-width: 640px; border: 1px solid #7f7f7f20; border-radius: 4px; + opacity: 0; + /* position: fixed; */ + top: 64px; + /* display: flex; */ + flex-direction: row; + /* flex-grow: 4; */ + display: flex; + transform: translateX(0%); + flex-wrap: wrap; + overflow: scroll; + max-height: calc(100vh - 130px); + pointer-events: none; + } + .close-preview svg{ + fill: #00000080; + } + .preview.active { + opacity: 1; + pointer-events: all; + transform: translateX(50%); } .preview-header { display: flex; @@ -444,6 +512,24 @@ } .preview-body { - padding: 8px; + margin: 16px; + overflow: scroll; + width: calc(100% - 48px); + } + .preview-content { + /* padding: 16px; */ + width: 100%; + } + .preview button.close-preview { + /* height: 100%; */ + /* display: block; */ + /* position: absolute; */ + right: 0; + top: 0; + margin: 8px; + height: 48px; + } + .preview li { + margin-bottom: 8px; } } diff --git a/static/style/special.css b/static/style/special.css index aafdfc50..1dd0baf5 100644 --- a/static/style/special.css +++ b/static/style/special.css @@ -8,6 +8,9 @@ #issues-container > div { background-color: #000410; } + .preview { + background-color: #000410; + } } @media (prefers-color-scheme: light) { #toolbar.ready { @@ -19,4 +22,7 @@ #issues-container > div { background-color: #f0f0f0; } + .preview { + background-color: #f0f0f0; + } } diff --git a/static/style/style.css b/static/style/style.css index 94a9a9b8..26c60bb3 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -40,13 +40,22 @@ } #issues-container { max-width: 640px; - margin: auto; - padding: 0 0 56px; + /* margin: 0 auto; */ + /* padding: 0 0 56px; */ /* overflow: scroll; */ scrollbar-width: none; -ms-overflow-style: none; /* padding: calc(25vh - 56px) 0; */ padding: 56px 0; + /* display: inline-block; */ + /* flex-grow: 2; */ + /* display: flex; */ + /* flex-direction: column; */ + /* align-items: flex-end; */ + transition: 0.25s all cubic-bezier(0, 1, 1, 1); + } + #issues-container.preview-active { + transform: translateX(-50%); } &::-webkit-scrollbar { display: none; @@ -84,6 +93,8 @@ margin: 8px; /* background-color: #000; */ filter: blur(4px); + display: block; + /* width: 100%; */ } #issues-container > div.active { transition: 125ms all ease-in-out; @@ -167,7 +178,6 @@ width: 64px; letter-spacing: 0.5px; flex-grow: 4; - display: flex; justify-content: center; display: flex; align-items: center; @@ -225,8 +235,12 @@ margin: 0; } body { - text-align: center; + /* text-align: center; */ /* background-image: var(--grid-background-image); */ + display: flex; + align-items: center; + align-content: center; + justify-content: center; } .info { opacity: 0.66; @@ -370,6 +384,19 @@ padding: 12px 16px; } } + @media screen and (max-width: 1280px) { + body { + /* background-color: red; */ + } + .preview.active { + position: fixed; + right: 0; + transform: translateX(0); + } + #issues-container.preview-active { + transform: translateX(0); + } + } #toolbar > button { text-align: center; } @@ -409,25 +436,73 @@ mask-image: radial-gradient(#00000020 0, #00000080 100%); pointer-events: none; } + .preview p { + line-height: 1.25; + word-break: break-word; + margin-bottom: 12px; + } + .preview img { + max-width: 100%; + } + .preview pre { + /* width: calc(100% - 48px); */ + overflow: scroll; + } + .preview code { + width: 100%; + white-space: initial; + } + .preview ul, + .preview ol { + padding-left: 12px; + } + .preview h1 { + margin: 16px; + /* text-align: center; */ + } + .preview a{ + word-break: break-all; + } + .preview-body-inner { + width: calc( 100% - 48px); + max-width: 640px; + overflow: scroll; + } .preview { + overflow: hidden; text-align: left; position: fixed; - bottom: 0; - left: 0; - width: calc(100vw - 32px); - transition: 0.125s opacity ease-in-out; - display: block; - background: #000; - padding: 16px; + /* bottom: 0; */ + /* left: 0; */ + /* width: calc(100vw - 32px); */ + transition: 0.25s all cubic-bezier(0, 1, 1, 1); + /* display: inline-block; */ + /* background: #000; */ + /* padding: 16px; */ max-width: 640px; border: 1px solid #80808020; border-radius: 4px; opacity: 0; + /* position: fixed; */ + top: 64px; + /* display: flex; */ + flex-direction: row; + /* flex-grow: 4; */ + display: flex; + transform: translateX(0%); + flex-wrap: wrap; + overflow: scroll; + max-height: calc(100vh - 130px); + pointer-events: none; + } + .close-preview svg{ + fill: #ffffff80; } .preview.active { opacity: 1; pointer-events: all; + transform: translateX(50%); } .preview-header { display: flex; @@ -437,6 +512,24 @@ } .preview-body { - padding: 8px; + margin: 16px; + overflow: scroll; + width: calc(100% - 48px); + } + .preview-content { + /* padding: 16px; */ + width: 100%; + } + .preview button.close-preview { + /* height: 100%; */ + /* display: block; */ + /* position: absolute; */ + right: 0; + top: 0; + margin: 8px; + height: 48px; + } + .preview li { + margin-bottom: 8px; } } From 3fc439d4596d8b35e135ffa384f54539f783f544 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Tue, 5 Dec 2023 00:29:53 +0900 Subject: [PATCH 4/5] style: close button on left side of preview modal --- src/home/home.ts | 1 - src/home/render-github-issues.ts | 6 +----- static/style/inverted-style.css | 6 +++--- static/style/style.css | 10 +++++----- 4 files changed, 9 insertions(+), 14 deletions(-) diff --git a/src/home/home.ts b/src/home/home.ts index 9491b41d..03ff87ea 100644 --- a/src/home/home.ts +++ b/src/home/home.ts @@ -14,7 +14,6 @@ if (cachedIssues) { const fullIssues = fetchCachedIssuesFull(); if (!fullIssues) { - fetchIssuesFull(cachedIssues) .then((downloaded) => { localStorage.setItem("githubIssuesFull", JSON.stringify(downloaded)); diff --git a/src/home/render-github-issues.ts b/src/home/render-github-issues.ts index b76b1d95..7bbb9411 100644 --- a/src/home/render-github-issues.ts +++ b/src/home/render-github-issues.ts @@ -19,8 +19,8 @@ const previewBodyInner = document.createElement("div"); previewBodyInner.classList.add("preview-body-inner"); // Assemble the preview box -previewHeader.appendChild(title); previewHeader.appendChild(closeButton); +previewHeader.appendChild(title); previewBody.appendChild(previewBodyInner); previewContent.appendChild(previewHeader); previewContent.appendChild(previewBody); @@ -186,9 +186,5 @@ function previewIssue(issuePreview: GitHubIssueWithNewFlag) { // Function to find an issue by URL function findIssueByUrl(issues: GitHubIssueWithNewFlag[], url: string) { - console.trace({ - issues, - url, - }); return issues.find((issue) => issue.html_url === url); } diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index 000e4729..c38ddf5f 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -460,11 +460,11 @@ margin: 16px; /* text-align: center; */ } - .preview a{ + .preview a { word-break: break-all; } .preview-body-inner { - width: calc( 100% - 48px); + width: calc(100% - 48px); max-width: 640px; overflow: scroll; } @@ -496,7 +496,7 @@ max-height: calc(100vh - 130px); pointer-events: none; } - .close-preview svg{ + .close-preview svg { fill: #00000080; } .preview.active { diff --git a/static/style/style.css b/static/style/style.css index 26c60bb3..58f6a5ea 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -457,14 +457,14 @@ padding-left: 12px; } .preview h1 { - margin: 16px; + margin: 8px; /* text-align: center; */ } - .preview a{ + .preview a { word-break: break-all; } .preview-body-inner { - width: calc( 100% - 48px); + width: calc(100% - 48px); max-width: 640px; overflow: scroll; } @@ -496,7 +496,7 @@ max-height: calc(100vh - 130px); pointer-events: none; } - .close-preview svg{ + .close-preview svg { fill: #ffffff80; } .preview.active { @@ -507,7 +507,7 @@ .preview-header { display: flex; align-items: center; - justify-content: space-between; + /* justify-content: space-between; */ margin-bottom: 8px; } From 8053a5bf0cdb46e63d632def250caa53a5152606 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?= =?UTF-8?q?=E3=83=BC=2Eeth?= Date: Tue, 5 Dec 2023 00:31:19 +0900 Subject: [PATCH 5/5] chore: build error --- src/home/render-github-issues.ts | 4 +++- static/style/inverted-style.css | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/home/render-github-issues.ts b/src/home/render-github-issues.ts index 7bbb9411..3de1beaa 100644 --- a/src/home/render-github-issues.ts +++ b/src/home/render-github-issues.ts @@ -157,7 +157,9 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH } function issuesSynced() { - const issuesFull = JSON.parse(localStorage.getItem("githubIssuesFull")); + const gitHubIssuesFull = localStorage.getItem("githubIssuesFull"); + if (!gitHubIssuesFull) return false; + const issuesFull = JSON.parse(gitHubIssuesFull); if (!issuesFull) return false; else return true; } diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index c38ddf5f..366433a2 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -457,7 +457,7 @@ padding-left: 12px; } .preview h1 { - margin: 16px; + margin: 8px; /* text-align: center; */ } .preview a { @@ -507,7 +507,7 @@ .preview-header { display: flex; align-items: center; - justify-content: space-between; + /* justify-content: space-between; */ margin-bottom: 8px; }