From 956fff28e7dd820ebfd0f5ae9e14a67e621a2d52 Mon Sep 17 00:00:00 2001 From: MythicalPlayz Date: Sat, 17 Feb 2024 22:15:21 +0200 Subject: [PATCH 1/3] Added Filter Progress --- locales/en_US.json | 8 +++ public/assets/css/main.css | 1 + public/assets/css/progress.css | 34 +++++++++++ public/assets/js/filter-progress.js | 24 ++++++++ src/cache.js | 88 ++++++++++++++++++++++++++++- views/progress.handlebars | 24 ++++---- 6 files changed, 166 insertions(+), 13 deletions(-) create mode 100644 public/assets/js/filter-progress.js diff --git a/locales/en_US.json b/locales/en_US.json index 5ad0fe91..457e9a99 100644 --- a/locales/en_US.json +++ b/locales/en_US.json @@ -391,5 +391,13 @@ "cancel": "Cancel", "confirm": "Confirm", "close": "Close" + }, + "filter": { + "none": "All", + "wiiu": "Wii U", + "3ds": "3DS", + "web": "Web", + "game": "Game", + "service": "Service" } } diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 2432f10b..bed2b83c 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -766,6 +766,7 @@ section.update-signup div.circle { } .feature-progress-chart { + width: 100px; position: relative; } .feature-progress-chart p { diff --git a/public/assets/css/progress.css b/public/assets/css/progress.css index 18e77dff..3e1a02d6 100644 --- a/public/assets/css/progress.css +++ b/public/assets/css/progress.css @@ -10,4 +10,38 @@ MOVE PROGRESS CSS HERE #quick-nav a:hover { color: var(--text-shade-3); text-decoration: underline; +} + +.progress-filter { + padding: 8px 72px; + border-radius: 10px; + background: var(--bg-shade-0); + grid-column: span 2; +} + +.progress-filter .container { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-gap: 20px; +} + +.progress-filter .container button { + padding: 0px; +} + +.off { + display: none; +} + +@media screen and (max-width: 900px) { + + .progress-filter { + grid-column: span 1; + padding: 10px; + } + + .progress-filter .container { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + } } \ No newline at end of file diff --git a/public/assets/js/filter-progress.js b/public/assets/js/filter-progress.js new file mode 100644 index 00000000..ae1984fb --- /dev/null +++ b/public/assets/js/filter-progress.js @@ -0,0 +1,24 @@ +const progressCards = document.getElementsByClassName('purple-card') + +function showWithFilter(filter){ + for (const card of progressCards){ + const type = card.getAttribute('type') + if (filter === "none" || type.toLowerCase().includes(filter)){ + card.classList.remove('off') + } + else { + card.classList.add('off') + } + } +} + +const buttons = document.getElementById('filter-container').children +let selectedButton = buttons[0] +for (const button of buttons){ + button.addEventListener('click',(event) => { + selectedButton.classList.remove('primary') + selectedButton = event.target + selectedButton.classList.add('primary') + showWithFilter(event.target.id); + }) +} \ No newline at end of file diff --git a/src/cache.js b/src/cache.js index 68f88380..694dfeca 100644 --- a/src/cache.js +++ b/src/cache.js @@ -69,6 +69,25 @@ query getProjectsV2Fields($id: ID!, $cursor: String!) { } } `; +const GetRepositoryDescription = gql` +query GetRepositoryDescription($orgName: String!, $repoName: String!){ + repository(owner: $orgName, name: $repoName) { + description + main: object(expression: "main:README.md") { + ... on Blob { + text + } + } + master: object(expression: "master:README.md") { + ... on Blob { + text + } + } + } +} +`; //Loophole to get the ReadMe No Matter the branch name + +const serviceApps = ["account","nex","friends","wii u chat", "juxt", "website"] let githubProjectsCache = { update_time: 0, @@ -133,6 +152,69 @@ async function getGitHubProjectsV2Fields(id, after='') { return fields; } +async function getRepoType(name, title){ + const data = await github.request(GetRepositoryDescription, { + orgName: 'PretendoNetwork', + repoName: name + }) + let readMe = "" + if (data.repository.main != null) + readMe = data.repository.main.text + else + readMe = data.repository.master.text + + readMe = readMe.split('\n')[0].toLowerCase() + let description = data.repository.description + if (description != null) + description = description.toLowerCase() + else + description = "" + return await setRepoType(title.toLowerCase(),description,readMe) +} + + +async function setRepoType(title, description, readMe){ + let types = [] + let isGame = true + for (let app of serviceApps) + if (title.includes(app)){ + types.push("Service") + isGame = false + break + } + + if (isGame) { + types.push("Game") + } + + if (title.includes('(') && isGame){ + if (title.includes('3ds')) + types.push("3DS") + else + types.push("Wii U") + return types + } + + + if (title === 'nex' || title.includes('juxt') || title.includes('account')){ + types.push('3DS') + types.push('Wii U') + if (title.includes('juxt')) + types.push("Website") + } + else if (title.includes('web')){ + types.push("Website") + } + else if (description.includes('3ds') || readMe.includes('3ds') || title.includes('3ds')){ + types.push('3DS') + } + else{ + types.push('Wii U') + } + + return types +} + async function getGithubProjectsCache() { if (githubCacheBeingFetched) { return githubProjectsCache; @@ -172,7 +254,8 @@ async function updateGithubProjectsCache() { done: [], in_progress: [], todo: [] - } + }, + type: [] }; const fields = await getGitHubProjectsV2Fields(project.id); @@ -181,6 +264,9 @@ async function updateGithubProjectsCache() { extractedData.cards[field.column.toLowerCase().replace(' ', '_')]?.push(field.title); } + const types = await getRepoType(project.url.split("/")[4], project.title) + extractedData.type = types + projectsCacheData.sections.push(extractedData); } diff --git a/views/progress.handlebars b/views/progress.handlebars index 03ba96af..2ba3b822 100644 --- a/views/progress.handlebars +++ b/views/progress.handlebars @@ -24,24 +24,24 @@

{{{ locale.donation.progress }}} {{{ locale.donation.upgradePush }}}

-
-

Quick Nav

- +
+
+ + + + + + +
-
+ {{#each progressLists.sections}} -
+
{{> progress-list data=this }}
{{/each}}
- + {{> footer }}
From 8dd9314fbefd5c35a170a0e333f7e08ef08a5ce0 Mon Sep 17 00:00:00 2001 From: MythicalPlayz Date: Fri, 29 Mar 2024 00:57:14 +0200 Subject: [PATCH 2/3] implement requested changed --- public/assets/js/filter-progress.js | 20 ++--- src/cache.js | 111 +++++++++++----------------- views/progress.handlebars | 2 +- 3 files changed, 55 insertions(+), 78 deletions(-) diff --git a/public/assets/js/filter-progress.js b/public/assets/js/filter-progress.js index ae1984fb..ad6359fb 100644 --- a/public/assets/js/filter-progress.js +++ b/public/assets/js/filter-progress.js @@ -1,24 +1,24 @@ -const progressCards = document.getElementsByClassName('purple-card') +const progressCards = document.getElementsByClassName('purple-card'); function showWithFilter(filter){ for (const card of progressCards){ - const type = card.getAttribute('type') - if (filter === "none" || type.toLowerCase().includes(filter)){ - card.classList.remove('off') + const types = card.getAttribute('type'); + if (filter === "none" || types.toLowerCase().includes(filter)){ + card.classList.remove('off'); } else { - card.classList.add('off') + card.classList.add('off'); } } } -const buttons = document.getElementById('filter-container').children -let selectedButton = buttons[0] +const buttons = document.getElementById('filter-container').querySelectorAll('button'); +let selectedButton = buttons[0]; for (const button of buttons){ button.addEventListener('click',(event) => { - selectedButton.classList.remove('primary') - selectedButton = event.target - selectedButton.classList.add('primary') + selectedButton.classList.remove('primary'); + selectedButton = event.target; + selectedButton.classList.add('primary'); showWithFilter(event.target.id); }) } \ No newline at end of file diff --git a/src/cache.js b/src/cache.js index 694dfeca..7ab84adf 100644 --- a/src/cache.js +++ b/src/cache.js @@ -69,25 +69,20 @@ query getProjectsV2Fields($id: ID!, $cursor: String!) { } } `; -const GetRepositoryDescription = gql` -query GetRepositoryDescription($orgName: String!, $repoName: String!){ +const getRepositoryDescription = gql` +query getRepositoryDescription($orgName: String!, $repoName: String!){ repository(owner: $orgName, name: $repoName) { description - main: object(expression: "main:README.md") { + readme: object(expression: "HEAD:README.md") { ... on Blob { text } - } - master: object(expression: "master:README.md") { - ... on Blob { - text - } - } + } } } -`; //Loophole to get the ReadMe No Matter the branch name +`; -const serviceApps = ["account","nex","friends","wii u chat", "juxt", "website"] +const serviceApps = ["account", "nex", "friends", "wii u chat", "juxt", "website"]; let githubProjectsCache = { update_time: 0, @@ -152,67 +147,50 @@ async function getGitHubProjectsV2Fields(id, after='') { return fields; } -async function getRepoType(name, title){ - const data = await github.request(GetRepositoryDescription, { +async function getRepoType(name, title) { + const data = await github.request(getRepositoryDescription, { orgName: 'PretendoNetwork', repoName: name - }) - let readMe = "" - if (data.repository.main != null) - readMe = data.repository.main.text - else - readMe = data.repository.master.text - - readMe = readMe.split('\n')[0].toLowerCase() - let description = data.repository.description - if (description != null) - description = description.toLowerCase() - else - description = "" - return await setRepoType(title.toLowerCase(),description,readMe) + }); + const readme = data.repository.readme.text.split('\n')[0].toLowerCase(); + const description = data.repository.description?.toLowerCase() || ''; + return setRepoType(title.toLowerCase(), description, readme); } - - -async function setRepoType(title, description, readMe){ - let types = [] - let isGame = true - for (let app of serviceApps) - if (title.includes(app)){ - types.push("Service") - isGame = false - break +function setRepoType(title, description, readMe) { + const types = []; + let isGame = true; + for (const app of serviceApps) { + if (title.includes(app)) { + types.push('Service'); + isGame = false; + break; } - - if (isGame) { - types.push("Game") - } - - if (title.includes('(') && isGame){ - if (title.includes('3ds')) - types.push("3DS") - else - types.push("Wii U") - return types - } - - - if (title === 'nex' || title.includes('juxt') || title.includes('account')){ - types.push('3DS') - types.push('Wii U') - if (title.includes('juxt')) - types.push("Website") } - else if (title.includes('web')){ - types.push("Website") + if (isGame) { + types.push('Game'); } - else if (description.includes('3ds') || readMe.includes('3ds') || title.includes('3ds')){ - types.push('3DS') + if (title.includes('(') && isGame) { + if (title.includes('3ds')) { + types.push('3DS'); + } else { + types.push('Wii U'); + } + return types; } - else{ - types.push('Wii U') + if (title === 'nex' || title.includes('juxt') || title.includes('account')) { + types.push('3DS'); + types.push('Wii U'); + if (title.includes('juxt')) { + types.push('Website'); + } + } else if (title.includes('web')) { + types.push('Website'); + } else if (description.includes('3ds') || readMe.includes('3ds') || title.includes('3ds')) { + types.push('3DS'); + } else { + types.push('Wii U'); } - - return types + return types; } async function getGithubProjectsCache() { @@ -255,7 +233,7 @@ async function updateGithubProjectsCache() { in_progress: [], todo: [] }, - type: [] + types: [] }; const fields = await getGitHubProjectsV2Fields(project.id); @@ -264,8 +242,7 @@ async function updateGithubProjectsCache() { extractedData.cards[field.column.toLowerCase().replace(' ', '_')]?.push(field.title); } - const types = await getRepoType(project.url.split("/")[4], project.title) - extractedData.type = types + extractedData.types = await getRepoType(project.url.split("/")[4], project.title) projectsCacheData.sections.push(extractedData); } diff --git a/views/progress.handlebars b/views/progress.handlebars index 2ba3b822..157fc4fc 100644 --- a/views/progress.handlebars +++ b/views/progress.handlebars @@ -36,7 +36,7 @@ {{#each progressLists.sections}} -
+
{{> progress-list data=this }}
{{/each}} From d937ba48c24848f02a76255a633e9e136087dbb7 Mon Sep 17 00:00:00 2001 From: MythicalPlayz Date: Fri, 29 Mar 2024 16:52:31 +0200 Subject: [PATCH 3/3] Changed CSS To be more like Figma Need Mobile layout design --- public/assets/css/progress.css | 45 ++++++++++++++++++++++++++++------ views/progress.handlebars | 18 +++++++++----- 2 files changed, 49 insertions(+), 14 deletions(-) diff --git a/public/assets/css/progress.css b/public/assets/css/progress.css index 3e1a02d6..010dccd1 100644 --- a/public/assets/css/progress.css +++ b/public/assets/css/progress.css @@ -13,20 +13,38 @@ MOVE PROGRESS CSS HERE } .progress-filter { - padding: 8px 72px; + padding: 8px; border-radius: 10px; background: var(--bg-shade-0); grid-column: span 2; } .progress-filter .container { - display: grid; - grid-template-columns: repeat(6, 1fr); - grid-gap: 20px; + display: flex; + justify-content: flex-start; } -.progress-filter .container button { - padding: 0px; +.progress-filter .container .sub-container { + display: flex; + margin-inline: 5px; + position: relative; +} + +.progress-filter .container .sub-container:not(:last-child):after { + content: ''; + position: absolute; + top: 10%; + bottom: 10%; + right: -10px; + width: 3px; + background-color: var(--bg-shade-3); +} + + + +.progress-filter .container .sub-container button { + padding: 0px 8px; + margin-inline-start: 5px; } .off { @@ -39,9 +57,20 @@ MOVE PROGRESS CSS HERE grid-column: span 1; padding: 10px; } +} +@media screen and (max-width: 576px) { .progress-filter .container { - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(2, 1fr); + justify-content: center; + } + + .progress-filter .container .sub-container { + margin: 0px; } + + .progress-filter .container .sub-container:not(:last-child):after { + content: ''; + display: none; + } + } \ No newline at end of file diff --git a/views/progress.handlebars b/views/progress.handlebars index 157fc4fc..5075e7ea 100644 --- a/views/progress.handlebars +++ b/views/progress.handlebars @@ -26,12 +26,18 @@
- - - - - - +
+ +
+
+ + + +
+
+ + +