From d4cf5c2a0b2e7530cd3558597257ae50093dbd5a Mon Sep 17 00:00:00 2001 From: Jag Talon Date: Mon, 9 Dec 2024 10:08:57 -0500 Subject: [PATCH 1/9] add `key` property to prevent icons from getting stuck --- website/apps/main.js | 5 +++-- website/apps/styles.css | 3 +++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/website/apps/main.js b/website/apps/main.js index 4bdd9f6..6cbd467 100644 --- a/website/apps/main.js +++ b/website/apps/main.js @@ -28,7 +28,8 @@ const App = ({ app, toggleModal }) => { return html` `; @@ -65,10 +66,10 @@ const Dialog = ({app, modal, toggleModal}) => { Icon of ${app.name} app
${app.name}
+
${extract_author(app.source_code_url)}
${subtitle}
-
Last updated ${dayjs(app.date).fromNow()}
@@ -76,7 +77,7 @@ const Dialog = ({app, modal, toggleModal}) => {
- Updated on: ${dayjs(app.date).format("l")} (${app.tag_name}) + Published: ${dayjs(app.date).format("l")} (${app.tag_name})
Size: ${size} @@ -274,6 +275,15 @@ const Tabs = ({setFilterGroup, filterGroup}) => {
`; } +// Extract the username from GitHub or Codeberg +const extract_author = (source_code_url) => { + const matches = /(github.com|codeberg.org)\/(\w+)/.exec(source_code_url); + if(matches && matches.length === 3) { + return matches[2]; + } + return ""; +}; + window.onload = async () => { render(html`<${MainScreen} />`, document.getElementById('apps')); -}; +}; \ No newline at end of file diff --git a/website/apps/styles.css b/website/apps/styles.css index 90b5c5a..5aa5d70 100644 --- a/website/apps/styles.css +++ b/website/apps/styles.css @@ -116,8 +116,12 @@ body { width: calc(300px - var(--icon) - var(--padding)); } -#apps .date { - opacity: 0.7; +#apps .author { + opacity: 0.8; + font-size: .9rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } #footer { From 90c3f055002273173ce06092d4bc74d56c4e4563 Mon Sep 17 00:00:00 2001 From: Jag Talon Date: Mon, 9 Dec 2024 11:33:44 -0500 Subject: [PATCH 3/9] switch description and author positions --- website/apps/main.js | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/website/apps/main.js b/website/apps/main.js index 69400dd..7b99af5 100644 --- a/website/apps/main.js +++ b/website/apps/main.js @@ -34,8 +34,8 @@ const App = ({ app, toggleModal }) => { Icon for ${app.name} app
${app.name}
-
${extract_author(app.source_code_url)}
${subtitle}
+
${extract_author(app.source_code_url)}
`; @@ -66,10 +66,10 @@ const Dialog = ({app, modal, toggleModal}) => { Icon of ${app.name} app
${app.name}
-
${extract_author(app.source_code_url)}
${subtitle}
+
${extract_author(app.source_code_url)}
@@ -253,31 +253,22 @@ const MainScreen = () => { const Tabs = ({setFilterGroup, filterGroup}) => { return html`
`; } // Extract the username from GitHub or Codeberg const extract_author = (source_code_url) => { - const matches = /(github.com|codeberg.org)\/(\w+)/.exec(source_code_url); + const matches = /(github.com|codeberg.org)\/([\w\-_]+)/.exec(source_code_url); if(matches && matches.length === 3) { return matches[2]; } From 963c04b686507e80b0c38271cbc983c0882b4bc0 Mon Sep 17 00:00:00 2001 From: Jag Talon Date: Mon, 9 Dec 2024 16:43:32 -0500 Subject: [PATCH 4/9] sort apps alphabetically --- website/apps/main.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/website/apps/main.js b/website/apps/main.js index 7b99af5..dcd43d8 100644 --- a/website/apps/main.js +++ b/website/apps/main.js @@ -133,8 +133,15 @@ const Search = ({apps, setSearchResults, filterGroup}) => { .map((app) => ({ item: app })) .filter(filterResults) .sort( - (a, b) => - new Date(b.item.date).getTime() - new Date(a.item.date).getTime() + (a, b) => { + if (a.item.name < b.item.name) { + return -1; + } + if (a.item.name > b.item.name) { + return 1; + } + return 0; + } ) ); }; From 4a84c09ca75f2c552e9fbee26f6ecd64fa22e0a2 Mon Sep 17 00:00:00 2001 From: Jag Talon Date: Mon, 9 Dec 2024 16:47:18 -0500 Subject: [PATCH 5/9] ignore case when sorting --- website/apps/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/apps/main.js b/website/apps/main.js index dcd43d8..da123e0 100644 --- a/website/apps/main.js +++ b/website/apps/main.js @@ -134,10 +134,10 @@ const Search = ({apps, setSearchResults, filterGroup}) => { .filter(filterResults) .sort( (a, b) => { - if (a.item.name < b.item.name) { + if (a.item.name.toLowerCase() < b.item.name.toLowerCase()) { return -1; } - if (a.item.name > b.item.name) { + if (a.item.name.toLowerCase() > b.item.name.toLowerCase()) { return 1; } return 0; From d4bc4df30d4021040a81db03c4021b545b4904b2 Mon Sep 17 00:00:00 2001 From: Jag Talon Date: Tue, 10 Dec 2024 09:31:56 -0500 Subject: [PATCH 6/9] Revert "ignore case when sorting" This reverts commit 4a84c09ca75f2c552e9fbee26f6ecd64fa22e0a2. --- website/apps/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/apps/main.js b/website/apps/main.js index da123e0..dcd43d8 100644 --- a/website/apps/main.js +++ b/website/apps/main.js @@ -134,10 +134,10 @@ const Search = ({apps, setSearchResults, filterGroup}) => { .filter(filterResults) .sort( (a, b) => { - if (a.item.name.toLowerCase() < b.item.name.toLowerCase()) { + if (a.item.name < b.item.name) { return -1; } - if (a.item.name.toLowerCase() > b.item.name.toLowerCase()) { + if (a.item.name > b.item.name) { return 1; } return 0; From 82ed0010e7d7582e94fe7513cf29cbc944d110e5 Mon Sep 17 00:00:00 2001 From: Jag Talon Date: Tue, 10 Dec 2024 09:32:10 -0500 Subject: [PATCH 7/9] Revert "sort apps alphabetically" This reverts commit 963c04b686507e80b0c38271cbc983c0882b4bc0. --- website/apps/main.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/website/apps/main.js b/website/apps/main.js index dcd43d8..7b99af5 100644 --- a/website/apps/main.js +++ b/website/apps/main.js @@ -133,15 +133,8 @@ const Search = ({apps, setSearchResults, filterGroup}) => { .map((app) => ({ item: app })) .filter(filterResults) .sort( - (a, b) => { - if (a.item.name < b.item.name) { - return -1; - } - if (a.item.name > b.item.name) { - return 1; - } - return 0; - } + (a, b) => + new Date(b.item.date).getTime() - new Date(a.item.date).getTime() ) ); }; From 078d81ed437bffa25d839e0d153e9f2ab3f2391a Mon Sep 17 00:00:00 2001 From: Jag Talon Date: Fri, 13 Dec 2024 11:28:20 -0500 Subject: [PATCH 8/9] trim overflowing link in the dialog --- website/apps/main.js | 10 +++++----- website/apps/styles.css | 15 ++++++--------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/website/apps/main.js b/website/apps/main.js index 7b99af5..03b160e 100644 --- a/website/apps/main.js +++ b/website/apps/main.js @@ -33,9 +33,9 @@ const App = ({ app, toggleModal }) => { key=${app.app_id}> Icon for ${app.name} app
-
${app.name}
-
${subtitle}
-
${extract_author(app.source_code_url)}
+
${app.name}
+
${subtitle}
+
${extract_author(app.source_code_url)}
`; @@ -65,7 +65,7 @@ const Dialog = ({app, modal, toggleModal}) => {
Icon of ${app.name} app
-
${app.name}
+
${app.name}
${subtitle}
@@ -82,7 +82,7 @@ const Dialog = ({app, modal, toggleModal}) => {
Size: ${size}
- diff --git a/website/apps/styles.css b/website/apps/styles.css index 5aa5d70..52ab667 100644 --- a/website/apps/styles.css +++ b/website/apps/styles.css @@ -44,6 +44,12 @@ body { flex: 1; } +#apps .ellipse { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + #apps header { text-align: center; } @@ -98,18 +104,12 @@ body { #apps .title { font-weight: bold; line-height: 1.3; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } #apps .description { max-height: 60px; line-height: 1.2; font-size: 0.9rem; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } #apps .props { @@ -119,9 +119,6 @@ body { #apps .author { opacity: 0.8; font-size: .9rem; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } #footer { From faf84a9050a6c52be4e439a85f3b8002a7593018 Mon Sep 17 00:00:00 2001 From: Jag Talon Date: Fri, 13 Dec 2024 11:33:07 -0500 Subject: [PATCH 9/9] when the category filter changes, we scroll to the top --- website/apps/main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/website/apps/main.js b/website/apps/main.js index 03b160e..7f26fc1 100644 --- a/website/apps/main.js +++ b/website/apps/main.js @@ -143,6 +143,8 @@ const Search = ({apps, setSearchResults, filterGroup}) => { useEffect(() => { // do the initial update or when applist changes updateSearch(); + // If the category filter changes, we scroll to the top + window.scrollTo(0,0); }, [apps, filterGroup]); return html`