From f087eb4ef68fb42de59c08aa938ffa88c388c85f 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 19:59:32 +0900 Subject: [PATCH] fix: sorting style and move org icons --- src/home/fetch-github-issues.ts | 3 +- src/home/home.ts | 58 +++++++++++++++++++++++++------- src/home/render-github-issues.ts | 7 ++-- static/index.html | 8 +---- static/style/inverted-style.css | 35 +++++++++++++++++-- static/style/special.css | 6 ++-- static/style/style.css | 35 +++++++++++++++++-- 7 files changed, 119 insertions(+), 33 deletions(-) diff --git a/src/home/fetch-github-issues.ts b/src/home/fetch-github-issues.ts index fd3f5cd7..c81c518a 100644 --- a/src/home/fetch-github-issues.ts +++ b/src/home/fetch-github-issues.ts @@ -5,7 +5,8 @@ import { renderGitHubIssues } from "./render-github-issues"; export type GitHubIssueWithNewFlag = GitHubIssue & { isNew?: boolean }; -export type Sorting = "priority" | "time" | "price"; +export const SORTING_OPTIONS = ["priority", "time", "price"] as const; +export type Sorting = (typeof SORTING_OPTIONS)[number]; export async function fetchGitHubIssues(sorting?: Sorting) { const container = document.getElementById("issues-container") as HTMLDivElement; diff --git a/src/home/home.ts b/src/home/home.ts index bead46aa..2569e410 100644 --- a/src/home/home.ts +++ b/src/home/home.ts @@ -1,5 +1,5 @@ import { authentication } from "./authentication"; -import { Sorting, fetchGitHubIssues } from "./fetch-github-issues"; +import { SORTING_OPTIONS, Sorting, fetchGitHubIssues } from "./fetch-github-issues"; fetchGitHubIssues().catch((error) => console.error(error)); authentication(); @@ -8,22 +8,54 @@ filterButtons(); function filterButtons() { const filters = document.getElementById("filters"); if (!filters) throw new Error("filters not found"); - const buttons = filters.querySelectorAll("input"); - buttons.forEach((button) => { - let isChecked = button.checked; - button.addEventListener("mousedown", () => { - isChecked = button.checked; - }); - button.addEventListener("click", () => { - if (isChecked) { - button.checked = false; + const labels = document.createElement("div"); + labels.className = "labels"; + + let lastChecked: HTMLInputElement | null = null; + + SORTING_OPTIONS.forEach((option) => { + const dfg = document.createDocumentFragment(); + const div = document.createElement("div"); + const label = document.createElement("label") as HTMLLabelElement; + const input = document.createElement("input"); + input.type = "radio"; + input.value = option; + input.id = option; + input.name = "sort"; + + const defaultIcon = ``; + const activeIcon = ``; + + label.htmlFor = option; + div.className = "default icon"; + div.innerHTML = defaultIcon; + const divActive = div.cloneNode(true) as HTMLDivElement; + divActive.className = "active icon"; + divActive.innerHTML = activeIcon; + label.appendChild(div); + label.appendChild(divActive); + label.appendChild(document.createTextNode(option.charAt(0).toUpperCase() + option.slice(1))); + dfg.appendChild(input); + dfg.appendChild(label); + labels.appendChild(dfg); + + input.addEventListener("click", () => { + if (input === lastChecked) { + input.checked = false; + lastChecked = null; fetchGitHubIssues().catch((error) => console.error(error)); } else { - fetchGitHubIssues(button.value as Sorting).catch((error) => console.error(error)); + lastChecked = input; + fetchGitHubIssues(input.value as Sorting).catch((error) => console.error(error)); } - // Update the flag to the current state for the next click - isChecked = button.checked; }); }); + filters.appendChild(labels); + + // const sortLabels = filters.querySelectorAll("input"); + + // sortLabels.forEach((label) => { + + // }); } diff --git a/src/home/render-github-issues.ts b/src/home/render-github-issues.ts index d8d86bad..1520616f 100644 --- a/src/home/render-github-issues.ts +++ b/src/home/render-github-issues.ts @@ -64,7 +64,7 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH issue.title }

${organizationName}

${repositoryName}

${labels.join( "" - )}
`; + )}`; issueElement.addEventListener("click", () => { console.log(issue); @@ -76,8 +76,9 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH // Set the issueWrapper background-image to the organization's avatar if (organizationName) { const cachedAvatar = avatarCache[organizationName]; + const image = issueElement.querySelector("img") as HTMLImageElement; if (cachedAvatar) { - issueWrapper.style.backgroundImage = `url("${cachedAvatar}")`; + image.src = cachedAvatar; } else if (!fetchInProgress.has(organizationName)) { // Mark this organization's avatar as being fetched fetchInProgress.add(organizationName); @@ -88,7 +89,7 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH if (data && data.avatar_url) { avatarCache[organizationName] = data.avatar_url; localStorage.setItem("avatarCache", JSON.stringify(avatarCache)); - issueWrapper.style.backgroundImage = `url("${data.avatar_url}")`; + image.src = data.avatar_url; } } catch (error) { console.error("Error fetching avatar:", error); diff --git a/static/index.html b/static/index.html index d59599b3..2c50998d 100644 --- a/static/index.html +++ b/static/index.html @@ -17,13 +17,7 @@ d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z" >Ubiquity DAO | DevPool Directory
-
- - - -
-
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css index f436ba01..e895ed0c 100644 --- a/static/style/inverted-style.css +++ b/static/style/inverted-style.css @@ -119,6 +119,7 @@ text-align: left; display: flex; padding: 12px 0; + align-items: center; } p.organization-name { opacity: 0.5; @@ -141,7 +142,7 @@ background-color: #7f7f7f20; width: 64px; letter-spacing: 0.5px; - flex-grow: 3; + flex-grow: 4; display: flex; justify-content: center; display: flex; @@ -160,6 +161,10 @@ } #filters label { cursor: pointer; + /* background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2216%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2216%22%3E%3Cpath%20fill%3D%22%23ffffff80%22%20d%3D%22M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z%22/%3E%3C/svg%3E"); */ + /* background-repeat: no-repeat; */ + /* background-position: 4px 4px; */ + /* text-align: right; */ } #filters label:hover { background-color: #7f7f7f40; @@ -170,6 +175,23 @@ input[type="radio"]:checked + label { background-color: #7f7f7f80 !important; } + + input[type="radio"] + label > .icon > svg { + fill: #00000080; + } + input[type="radio"] + label > .active.icon > svg { + display: none; + } + input[type="radio"] + label > .default.icon > svg { + display: unset; + } + input[type="radio"]:checked + label > .default.icon > svg { + display: none; + } + input[type="radio"]:checked + label > .active.icon > svg { + display: unset; + } + .labels { display: flex; margin-left: auto; @@ -186,7 +208,7 @@ opacity: 0.66; transition: 125ms opacity ease-in-out; align-items: center; - margin: 0 0 0 50px; + /* margin: 0 0 0 12px; */ } #issues-container > .issue-element-wrapper { opacity: 0.5; @@ -305,7 +327,7 @@ display: block; } #issues-container .labels { - margin-left: 48px; + /* margin-left: 48px; */ margin-top: 4px; } #branding { @@ -329,4 +351,11 @@ margin-top: 8px; margin-right: 8px; } + #issues-container img { + max-height: 24px; + border-radius: 24px; + display: flex; + align-items: center; + justify-content: center; + } } diff --git a/static/style/special.css b/static/style/special.css index 643ed619..95c4eef4 100644 --- a/static/style/special.css +++ b/static/style/special.css @@ -2,15 +2,15 @@ html { background-color: #06061aff; } - #toolbar.ready{ - background-color: #06061a80 + #toolbar.ready { + background-color: #06061a80; } } @media (prefers-color-scheme: light) { html { background-color: #f0f0f0; } - #toolbar.ready{ + #toolbar.ready { background-color: #f0f0f080; } } diff --git a/static/style/style.css b/static/style/style.css index 14495e73..ec91f868 100644 --- a/static/style/style.css +++ b/static/style/style.css @@ -119,6 +119,7 @@ text-align: left; display: flex; padding: 12px 0; + align-items: center; } p.organization-name { opacity: 0.5; @@ -141,7 +142,7 @@ background-color: #80808020; width: 64px; letter-spacing: 0.5px; - flex-grow: 3; + flex-grow: 4; display: flex; justify-content: center; display: flex; @@ -160,6 +161,10 @@ } #filters label { cursor: pointer; + /* background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2216%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2216%22%3E%3Cpath%20fill%3D%22%23ffffff80%22%20d%3D%22M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z%22/%3E%3C/svg%3E"); */ + /* background-repeat: no-repeat; */ + /* background-position: 4px 4px; */ + /* text-align: right; */ } #filters label:hover { background-color: #80808040; @@ -170,6 +175,23 @@ input[type="radio"]:checked + label { background-color: #80808080 !important; } + + input[type="radio"] + label > .icon > svg { + fill: #ffffff80; + } + input[type="radio"] + label > .active.icon > svg { + display: none; + } + input[type="radio"] + label > .default.icon > svg { + display: unset; + } + input[type="radio"]:checked + label > .default.icon > svg { + display: none; + } + input[type="radio"]:checked + label > .active.icon > svg { + display: unset; + } + .labels { display: flex; margin-left: auto; @@ -186,7 +208,7 @@ opacity: 0.66; transition: 125ms opacity ease-in-out; align-items: center; - margin: 0 0 0 50px; + /* margin: 0 0 0 12px; */ } #issues-container > .issue-element-wrapper { opacity: 0.5; @@ -305,7 +327,7 @@ display: block; } #issues-container .labels { - margin-left: 48px; + /* margin-left: 48px; */ margin-top: 4px; } #branding { @@ -329,4 +351,11 @@ margin-top: 8px; margin-right: 8px; } + #issues-container img { + max-height: 24px; + border-radius: 24px; + display: flex; + align-items: center; + justify-content: center; + } }