From ac9286bf7e73c1f013e9b5dc5bbac45c6f1c7d4a Mon Sep 17 00:00:00 2001 From: Kumi Date: Sun, 4 Aug 2024 12:59:43 +0200 Subject: [PATCH 1/7] feat: add accordion component for services list Replaced the services list layout with a new accordion component. This allows for a more organized and user-friendly display of services, facilitating better content management and improved user interaction. The CSS was updated to include styles for the accordion structure. --- assets/css/base.css | 23 +++++++++++++++++++++++ templates/index.html | 34 ++++++++++++++++++++++------------ 2 files changed, 45 insertions(+), 12 deletions(-) diff --git a/assets/css/base.css b/assets/css/base.css index 7dbb925..b3f452a 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -272,4 +272,27 @@ h5 { .btn-primary .main-link:hover { text-decoration: none; color: black; +} + +/* Accordion Styles */ + +.accordion { + border: 1px solid #ddd; + border-radius: 5px; +} +.accordion-item { + border-bottom: 1px solid #ddd; +} +.accordion-header { + padding: 1rem; + cursor: pointer; +} +.accordion-button { + background: none; + border: none; + outline: none; + font-size: 1.25rem; +} +.accordion-collapse { + padding: 1rem; } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index f50c447..8066de4 100644 --- a/templates/index.html +++ b/templates/index.html @@ -36,19 +36,32 @@
-
+
{% for service in services.services %} {% if not service.exclude_from_index %} -
-
-
+
+

+ +

+
+
{% if service.icon %}
{{ service.icon | icon | safe }} {% if service.homemade %} @@ -61,16 +74,13 @@ {% endif %}
{% endif %} -
{{ service.name }}

{{ service.long_description }}

{% for link in service.links %} {% if link.alternatives %}
- - {{ link.name }} - + {{ link.name }}
▼
From 7dd217a78e99ecb7783c6b451c6b8c8cc8aa91f1 Mon Sep 17 00:00:00 2001 From: Kumi Date: Sun, 4 Aug 2024 13:02:07 +0200 Subject: [PATCH 2/7] feat: replace accordion implementation with details/summary Migrated accordion elements from a Bootstrap-based approach to using the native HTML
and tags for better accessibility and reduced reliance on third-party libraries. Enhanced CSS for the accordion components to style hover effects and manage open states effectively. Simplified icon handling within accordion bodies. --- assets/css/base.css | 23 ++++++++--- templates/index.html | 90 ++++++++++++++++++-------------------------- 2 files changed, 53 insertions(+), 60 deletions(-) diff --git a/assets/css/base.css b/assets/css/base.css index b3f452a..9d4d7a3 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -280,19 +280,30 @@ h5 { border: 1px solid #ddd; border-radius: 5px; } + .accordion-item { border-bottom: 1px solid #ddd; + margin-bottom: 1rem; } + .accordion-header { padding: 1rem; cursor: pointer; -} -.accordion-button { - background: none; - border: none; - outline: none; + background-color: #f9f9f9; font-size: 1.25rem; + font-weight: bold; + border-bottom: 1px solid #ddd; } -.accordion-collapse { + +.accordion-header:hover { + background-color: #e9e9e9; +} + +.accordion-body { padding: 1rem; + display: none; +} + +.accordion-item[open] .accordion-body { + display: block; } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 8066de4..05f7a5e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -36,69 +36,51 @@
-
+
{% for service in services.services %} {% if not service.exclude_from_index %} -
-

- -

-
-
- {% if service.icon %} + {{ service.icon | icon | safe }} {% if service.homemade %}
- {{ service.icon | icon | safe }} {% if service.homemade %} -
- {{ "coffee" | icon | safe }} -
- {% endif %} + {{ "coffee" | icon | safe }}
{% endif %} -

- {{ service.long_description }} -

- {% for link in service.links %} {% if link.alternatives %} -
-
- {{ link.name }} -
▼
-
-
- {% for alternative in link.alternatives %} - {{ alternative.name }} - {% endfor %} -
-
- {% else %} - {{ link.name }} - {% endif %} {% endfor %}
+ {% endif %} +

+ {{ service.long_description }} +

+ {% for link in service.links %} {% if link.alternatives %} +
+
+ {{ link.name }} +
▼
+
+
+ {% for alternative in link.alternatives %} + {{ alternative.name }} + {% endfor %} +
+
+ {% else %} + {{ link.name }} + {% endif %} {% endfor %}
-
+ {% endif %} {% endfor %}
From bfcd7ae11f607fdeddef7b72ed6ad3f2728eb378 Mon Sep 17 00:00:00 2001 From: Kumi Date: Sun, 4 Aug 2024 13:10:38 +0200 Subject: [PATCH 3/7] feat: add tiny descriptions to services Augmented the services JSON with "tiny_description" field for each service to provide a brief overview. This will enhance the user experience on the index page by displaying concise descriptions alongside service names in the accordion headers. Improves service discoverability and user interaction by giving quick service context. --- data/services.json | 40 +++++++++++++++++++++++++++++++++++++--- templates/index.html | 5 ++++- 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/data/services.json b/data/services.json index 546598d..ce52c2b 100644 --- a/data/services.json +++ b/data/services.json @@ -4,6 +4,7 @@ "name": "Matrix", "url": "https://element.private.coffee", "homemade": false, + "tiny_description": "decentralized messaging", "short_description": "Matrix is an open network for secure, decentralized communication.", "long_description": "Private.coffee runs a Matrix server. You can use it to chat with other people at Private.coffee or around the world. Use it with a client of your choice, or use our web clients.", "status": "OK", @@ -31,6 +32,7 @@ "name": "CryptPad", "url": "https://cryptpad.private.coffee", "homemade": false, + "tiny_description": "collaborative document editing", "short_description": "Private, encrypted, real-time collaborative editor.", "long_description": "CryptPad is a private, encrypted, zero-knowledge, realtime collaborative editor, similar to Google Docs and Office 365.", "status": "OK", @@ -48,6 +50,7 @@ "name": "Piped / Invidious", "url": "https://piped.private.coffee", "homemade": false, + "tiny_description": "tracking-free YouTube", "short_description": "Watch YouTube videos without Google tracking.", "long_description": "Piped and Invidious are alternative front-ends to YouTube. Unfortunately, they are under attack from Google, and may be slow or unavailable at times.", "status": "NOK", @@ -75,6 +78,7 @@ "name": "Transfer.coffee", "url": "https://transfer.coffee", "homemade": true, + "tiny_description": "secure direct file transfer", "short_description": "Transfer files securely using peer-to-peer connections.", "long_description": "Transfer.coffee allows you to transfer files securely using peer-to-peer connections. Your files are never stored on our servers.", "status": "OK", @@ -92,6 +96,7 @@ "name": "MyIP.Coffee", "url": "https://myip.coffee", "homemade": true, + "tiny_description": "check your IP address", "short_description": "Check your IP address.", "long_description": "MyIP.Coffee allows you to check your current IPv4 and IPv6 addresses.", "status": "OK", @@ -109,6 +114,7 @@ "name": "Overleaf", "url": "https://overleaf.private.coffee", "homemade": false, + "tiny_description": "collaborative LaTeX editor", "short_description": "Overleaf is an online LaTeX editor for writing and sharing documents.", "long_description": "Overleaf is an online LaTeX editor for writing and sharing documents. It allows you to write documents in LaTeX, and to collaborate with others.", "status": "OK", @@ -126,6 +132,7 @@ "name": "Mastodon", "url": "https://cuddly.space", "homemade": false, + "tiny_description": "decentralized social network", "short_description": "Mastodon is a decentralized social network.", "long_description": "Mastodon is a decentralized social network. You can use it to post short messages, follow other people, and more. Registrations are open to everyone on Cuddly Space.", "status": "OK", @@ -147,6 +154,7 @@ "name": "Forgejo", "url": "https://git.private.coffee", "homemade": false, + "tiny_description": "self-hosted Git forge", "short_description": "Forgejo is our in-house Git forge.", "long_description": "Forgejo is our in-house Git forge. You can use it to host your Git repositories, and to collaborate with others.", "status": "OK", @@ -164,6 +172,7 @@ "name": "BigBlueButton", "url": "https://bbb.private.coffee", "homemade": false, + "tiny_description": "video conferencing", "short_description": "BigBlueButton is an open-source video conferencing system.", "long_description": "BigBlueButton is an open-source video conferencing system. You can use it to hold video conferences, webinars, and more.", "status": "OK", @@ -181,6 +190,7 @@ "name": "HedgeDoc", "url": "https://hedgedoc.private.coffee", "homemade": false, + "tiny_description": "collaborative markdown editor", "short_description": "HedgeDoc is an open-source collaborative markdown editor.", "long_description": "HedgeDoc is an open-source collaborative markdown editor. You can use it to write and edit documents in markdown, and to collaborate with others.", "status": "OK", @@ -198,6 +208,7 @@ "name": "FacilMap", "url": "https://facilmap.private.coffee", "homemade": false, + "tiny_description": "open-source map editor", "short_description": "FacilMap is an open-source map editor.", "long_description": "FacilMap is an open-source map editor. You can use it to create and edit maps, and to share them with others.", "status": "OK", @@ -215,6 +226,7 @@ "name": "OTS - One Time Secrets", "url": "https://ots.private.coffee", "homemade": false, + "tiny_description": "share secrets securely", "short_description": "OTS is a service for sharing secrets securely.", "long_description": "OTS is a service for sharing secrets securely. You can use it to share passwords, API keys, and other sensitive information.", "status": "OK", @@ -232,6 +244,7 @@ "name": "FreshRSS", "url": "https://freshrss.private.coffee", "homemade": false, + "tiny_description": "RSS feed reader", "short_description": "FreshRSS is a RSS feed reader.", "long_description": "FreshRSS is a RSS feed reader. You can use it to subscribe to RSS feeds and read the latest articles from your favorite websites.", "status": "OK", @@ -249,6 +262,7 @@ "name": "redlib", "url": "https://redlib.private.coffee", "homemade": false, + "tiny_description": "tracking-free Reddit", "short_description": "redlib is a privacy-friendly alternative front-end to Reddit.", "long_description": "redlib is a privacy-friendly alternative front-end to Reddit. It allows you to browse Reddit without being tracked.", "status": "OK", @@ -266,6 +280,7 @@ "name": "AllTube", "url": "https://alltube.private.coffee", "homemade": false, + "tiny_description": "universal video downloader", "short_description": "Download videos from YouTube, Vimeo, and more.", "long_description": "AllTube is a video downloader powered by yt-dlp. It allows you to download videos from YouTube, Vimeo, and many other sites. You can also stream the download through our server for extra privacy.", "status": "OK", @@ -283,6 +298,7 @@ "name": "Structables", "url": "https://structables.private.coffee", "homemade": true, + "tiny_description": "tracking-free Instructables", "short_description": "Browse Instructables without being tracked.", "long_description": "Structables allows you to browse Instructables without being tracked.", "status": "OK", @@ -300,6 +316,7 @@ "name": "Quetre", "url": "https://quetre.private.coffee", "homemade": false, + "tiny_description": "tracking-free Quora", "short_description": "Quetre is a privacy-friendly alternative front-end to Quora.", "long_description": "Quetre is a privacy-friendly alternative front-end to Quora. It allows you to browse Quora without being tracked or having to log in.", "status": "OK", @@ -323,6 +340,7 @@ "name": "Wikimore", "url": "https://wikimore.private.coffee", "homemade": true, + "tiny_description": "censorship-free Wikipedia", "short_description": "Wikimore is a privacy-friendly alternative front-end to Wikimedia wikis.", "long_description": "Wikimore is a privacy-friendly alternative front-end to Wikipedia and other Wikimedia wikis.", "status": "OK", @@ -346,6 +364,7 @@ "name": "Priviblur", "url": "https://priviblur.private.coffee", "homemade": false, + "tiny_description": "tracking-free Tumblr", "short_description": "Priviblur is a privacy-friendly alternative front-end to Tumblr.", "long_description": "Priviblur is a privacy-friendly alternative front-end to Tumblr. It allows you to browse Tumblr without being tracked.", "status": "OK", @@ -369,6 +388,7 @@ "name": "BiblioReads", "url": "https://biblioreads.private.coffee", "homemade": false, + "tiny_description": "tracking-free Goodreads", "short_description": "BiblioReads is a privacy-friendly alternative front-end to Goodreads.", "long_description": "BiblioReads is a privacy-friendly alternative front-end to Goodreads. It allows you to browse Goodreads without being tracked.", "status": "OK", @@ -386,6 +406,7 @@ "name": "LibreTranslate", "url": "https://translate.private.coffee", "homemade": false, + "tiny_description": "self-hosted translation", "short_description": "LibreTranslate is a self-hosted translation service powered by Argos Translate.", "long_description": "LibreTranslate is a self-hosted translation service powered by Argos Translate. It allows you to translate text between many languages.", "status": "OK", @@ -403,7 +424,8 @@ "name": "wishthis", "url": "https://wishthis.private.coffee", "homemade": false, - "short_description": "wishthis is a service for creating wishlists.", + "tiny_description": "create and share wishlists", + "short_description": "wishthis is a service for creating and sharing wishlists.", "long_description": "wishthis is a service for creating wishlists. You can use it to create wishlists for yourself, or to share them with others.", "status": "OK", "links": [ @@ -420,6 +442,7 @@ "name": "BreezeWiki", "url": "https://breezewiki.private.coffee", "homemade": false, + "tiny_description": "tracking-free Fandom", "short_description": "BreezeWiki is a privacy-friendly alternative front-end to Fandom.", "long_description": "BreezeWiki is a privacy-friendly alternative front-end to Fandom. It allows you to browse Fandom wikis without ads or tracking.", "status": "OK", @@ -443,6 +466,7 @@ "name": "NocoDB", "url": "https://nocodb.private.coffee", "homemade": false, + "tiny_description": "Airtable alternative", "short_description": "NocoDB is a self-hosted alternative to Airtable.", "long_description": "NocoDB is a self-hosted alternative to Airtable. It allows you to create databases and tables, and to view and edit them in a spreadsheet-like interface. (Note: If you are unable to create tables upon registration, simply wait a minute or two, log out and then log in again. Note that your email address will be visible to all registered users!)", "status": "OK", @@ -460,6 +484,7 @@ "name": "Penpot", "url": "https://penpot.private.coffee", "homemade": false, + "tiny_description": "open-source design platform", "short_description": "Penpot is an open-source design and prototyping platform.", "long_description": "Penpot is an open-source design and prototyping platform. It allows you to create designs and prototypes, and to collaborate with others.", "status": "OK", @@ -470,13 +495,14 @@ } ], "icon": "pencil-ruler", - "exclude_from_index": false, - "exclude_from_simple": false + "exclude_from_index": true, + "exclude_from_simple": true }, { "name": "tldraw", "url": "https://tldraw.private.coffee", "homemade": false, + "tiny_description": "collaborative whiteboard", "short_description": "tldraw is a collaborative whiteboard.", "long_description": "tldraw is a collaborative whiteboard. You can use it to draw and write with others in real-time.", "status": "OK", @@ -494,6 +520,7 @@ "name": "YOURLS", "url": "https://pcof.fi", "homemade": false, + "tiny_description": "URL shortener", "short_description": "URL shortener for creating handy links.", "long_description": "Use our URL shortener at pcof.fi to turn long, complicated URLs into something more handy.", "status": "OK", @@ -511,6 +538,7 @@ "name": "Rallly", "url": "https://rallly.private.coffee", "homemade": false, + "tiny_description": "collaborative scheduling (Doodle)", "short_description": "Rallly is a free collaborative scheduling service for voting and polls.", "long_description": "Rallly is a free collaborative scheduling service. It allows you to create polls and vote on them, similar to Doodle. Pro features are enabled for free after signing in.", "status": "OK", @@ -528,6 +556,7 @@ "name": "LibreY", "url": "https://librey.private.coffee", "homemade": false, + "tiny_description": "search engine", "short_description": "Privacy-friendly metasearch engine.", "long_description": "LibreY is an open-source, privacy-friendly metasearch engine. It allows you to search for web, image, video, torrents, and more, and it can also search onion sites.", "status": "OK", @@ -555,6 +584,7 @@ "name": "GotHub", "url": "https://gothub.private.coffee", "homemade": false, + "tiny_description": "tracking-free GitHub", "short_description": "Alternative GitHub interface that respects privacy.", "long_description": "Gothub is an alternative GitHub interface that respects your privacy. It is currently in alpha, but you can browse and download repositories, and you can also clone them using git+https (although the text on the main page would disagree).", "status": "OK", @@ -572,6 +602,7 @@ "name": "Binternet", "url": "https://binternet.private.coffee", "homemade": false, + "tiny_description": "tracking-free Pinterest", "short_description": "Binternet is a privacy-friendly alternative front-end to Pinterest.", "long_description": "Binternet is a privacy-friendly alternative front-end to Pinterest. It allows you to browse Pinterest without being tracked.", "status": "OK", @@ -589,6 +620,7 @@ "name": "Overpass", "url": "https://overpass.private.coffee", "homemade": false, + "tiny_description": "OpenStreetMap API", "short_description": "Overpass is an API for OpenStreetMap.", "long_description": "Overpass is an API for OpenStreetMap. You can use it to query OpenStreetMap data, and to get the results in various formats.", "status": "OK", @@ -606,6 +638,7 @@ "name": "nocdnbs", "url": "https://nocdnbs.private.coffee", "homemade": true, + "tiny_description": "privacy-friendly cdnjs proxy", "short_description": "nocdnbs is a privacy-friendly proxy to cdnjs.cloudflare.com", "long_description": "nocdnbs is a privacy-friendly proxy to cdnjs.cloudflare.com. It allows you to use the cdnjs.cloudflare.com library without being tracked by Cloudflare.", "status": "OK", @@ -623,6 +656,7 @@ "name": "nobsdelivr", "url": "https://nobsdelivr.private.coffee", "homemade": true, + "tiny_description": "privacy-friendly jsDelivr proxy", "short_description": "nobsdelivr is a privacy-friendly proxy to cdn.jsdelivr.net", "long_description": "nobsdelivr is a privacy-friendly proxy to cdn.jsdelivr.net. It allows you to use the cdn.jsdelivr.net library without being tracked by jsDelivr.", "status": "OK", diff --git a/templates/index.html b/templates/index.html index 05f7a5e..ad173ad 100644 --- a/templates/index.html +++ b/templates/index.html @@ -40,7 +40,10 @@ {% for service in services.services %} {% if not service.exclude_from_index %}
- {{ service.name }} + + {{ service.name }}{% if service.tiny_description %} - {{ + service.tiny_description }}{% endif %} +
{% if service.icon %}
Date: Sun, 4 Aug 2024 13:24:30 +0200 Subject: [PATCH 4/7] feat: add new lock-key icon for better visual clarity Introduced a new 'lock-key' SVG icon to improve representation of the lock feature in the UI. Updated services.json to reference the new icon, replacing the old 'lock' icon reference. This enhances clarity and user experience by providing a more intuitive graphic. --- assets/dist/icons/lock-key.svg | 1 + data/services.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 assets/dist/icons/lock-key.svg diff --git a/assets/dist/icons/lock-key.svg b/assets/dist/icons/lock-key.svg new file mode 100644 index 0000000..e033ef8 --- /dev/null +++ b/assets/dist/icons/lock-key.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data/services.json b/data/services.json index ce52c2b..21dacd0 100644 --- a/data/services.json +++ b/data/services.json @@ -236,7 +236,7 @@ "url": "https://ots.private.coffee" } ], - "icon": "lock", + "icon": "lock-key", "exclude_from_index": false, "exclude_from_simple": false }, From 2a054a7f7894ccf9d1dd95d9fd70d7877d653da7 Mon Sep 17 00:00:00 2001 From: Kumi Date: Sun, 4 Aug 2024 13:24:42 +0200 Subject: [PATCH 5/7] feat(UI): enhance accordion and icon styling for consistency Improved the styling of homemade icons by setting explicit height and width, ensuring they are consistently sized. Refined the layout of the accordion header by adding flex display and centering alignment for better visual alignment. Introduced new icon container styles to standardize icon presentation and spacing. These changes aim to provide a more polished and uniform user interface experience, addressing inconsistencies and enhancing visual clarity. --- assets/css/base.css | 15 ++++++++++++++- templates/index.html | 25 ++++++++++++------------- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/assets/css/base.css b/assets/css/base.css index 9d4d7a3..4cfd25a 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -120,8 +120,9 @@ h5 { } .homemade { - top: -0.5rem; right: -0.5rem; + height: 1.5rem; + width: 1.5rem; position: absolute; } @@ -287,6 +288,8 @@ h5 { } .accordion-header { + display: flex; + align-items: center; padding: 1rem; cursor: pointer; background-color: #f9f9f9; @@ -299,6 +302,16 @@ h5 { background-color: #e9e9e9; } +.icon-container { + display: flex; + align-items: center; + margin-right: 1rem; +} + +.bs-icon { + position: relative; +} + .accordion-body { padding: 1rem; display: none; diff --git a/templates/index.html b/templates/index.html index ad173ad..c3b6df7 100644 --- a/templates/index.html +++ b/templates/index.html @@ -41,25 +41,24 @@ service.exclude_from_index %}
- {{ service.name }}{% if service.tiny_description %} - {{ - service.tiny_description }}{% endif %} - -
{% if service.icon %}
- {{ service.icon | icon | safe }} {% if service.homemade %} -
- {{ "coffee" | icon | safe }} -
- {% endif %} + {{ service.icon | icon | safe }} +
+ {% endif %} {{ service.name }}{% if service.tiny_description %} - {{ + service.tiny_description }}{% endif %} {% if service.homemade %} +
+ {{ "coffee" | icon | safe }}
{% endif %} + +

{{ service.long_description }}

From ccbe1b600dcec2b0ba0fa98e7557d1b7dc75bec6 Mon Sep 17 00:00:00 2001 From: Kumi Date: Sun, 4 Aug 2024 13:30:20 +0200 Subject: [PATCH 6/7] feat: add consistent vertical spacing to button wrappers Added a CSS rule to ensure button elements inside the button-wrapper class have consistent vertical spacing except for the last child. This improves uniformity in the UI layout. Updated corresponding HTML to use the newly styled button-wrapper class for proper spacing and alignment. --- assets/css/base.css | 4 ++++ templates/index.html | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/assets/css/base.css b/assets/css/base.css index 4cfd25a..e03c2e4 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -37,6 +37,10 @@ color: #fff; } +.button-wrapper:not(:last-child) { + margin-bottom: 1rem; +} + .btn-outline-primary { --bs-btn-color: #f570b9; --bs-btn-border-color: #f570b9; diff --git a/templates/index.html b/templates/index.html index c3b6df7..a9fa881 100644 --- a/templates/index.html +++ b/templates/index.html @@ -63,7 +63,7 @@ {{ service.long_description }}

{% for link in service.links %} {% if link.alternatives %} -
+
{{ link.name }}
▼
@@ -76,7 +76,7 @@
{% else %} {{ link.name }} From 450afcbe6dfc70204e2b9a0d777f34404e1e1451 Mon Sep 17 00:00:00 2001 From: Kumi Date: Sun, 4 Aug 2024 15:27:36 +0200 Subject: [PATCH 7/7] style(base.css): remove unnecessary margin from accordion item Eliminated the margin-bottom from .accordion-item class to improve layout consistency and avoid unwanted spacing issues in the accordion component. This helps in aligning the design more closely with modern UI standards and ensures better visual harmony across different sections. --- assets/css/base.css | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/css/base.css b/assets/css/base.css index e03c2e4..0098539 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -288,7 +288,6 @@ h5 { .accordion-item { border-bottom: 1px solid #ddd; - margin-bottom: 1rem; } .accordion-header {