From cf7afda7e00558d4e086c34c11dcf2bd098cdc28 Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Tue, 1 Nov 2022 19:32:49 +0300 Subject: [PATCH] Improved design of sidebar and customize popup https://github.com/libredirect/libredirect/issues/369 --- src/config/config.json | 189 ++++++++++++++++++++----- src/pages/options/widgets/general.ejs | 185 +++++++++++------------- src/pages/options/widgets/services.ejs | 160 +++++++++++---------- src/pages/stylesheets/styles.css | 17 ++- 4 files changed, 332 insertions(+), 219 deletions(-) diff --git a/src/config/config.json b/src/config/config.json index b1c4c8a..cff06b6 100644 --- a/src/config/config.json +++ b/src/config/config.json @@ -22,8 +22,12 @@ "frontends": { "invidious": { "preferences": { - "cookies": ["PREFS"], - "localstorage": ["dark_mode"] + "cookies": [ + "PREFS" + ], + "localstorage": [ + "dark_mode" + ] }, "name": "Invidious", "embeddable": true, @@ -59,7 +63,9 @@ }, "pipedMaterial": { "preferences": { - "localstorage": ["PREFERENCES"] + "localstorage": [ + "PREFERENCES" + ] }, "name": "Piped-Material", "embeddable": false, @@ -109,7 +115,9 @@ "frontends": { "beatbump": { "preferences": { - "localstorage": ["settings"], + "localstorage": [ + "settings" + ], "indexeddb": "beatbump" }, "name": "Beatbump", @@ -117,14 +125,26 @@ }, "hyperpipe": { "preferences": { - "localstorage": ["api", "authapi", "codec", "locale", "next", "pipedapi", "quality", "theme", "vol"], + "localstorage": [ + "api", + "authapi", + "codec", + "locale", + "next", + "pipedapi", + "quality", + "theme", + "vol" + ], "indexeddb": "hyperpipedb" }, "name": "Hyperpipe", "instanceList": true } }, - "targets": ["^https?:\\/{2}music\\.youtube\\.com(\\/|$)"], + "targets": [ + "^https?:\\/{2}music\\.youtube\\.com(\\/|$)" + ], "name": "YT Music", "options": { "enabled": true, @@ -190,7 +210,9 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}(www\\.)?instagram\\.com\\/?(p\\/|$)"], + "targets": [ + "^https?:\\/{2}(www\\.)?instagram\\.com\\/?(p\\/|$)" + ], "name": "Instagram", "options": { "enabled": true @@ -203,13 +225,18 @@ "frontends": { "proxiTok": { "preferences": { - "cookies": ["api-test_endpoints", "theme"] + "cookies": [ + "api-test_endpoints", + "theme" + ] }, "name": "ProxiTok", "instanceList": true } }, - "targets": ["^https?:\\/{2}(www\\.|)tiktok\\.com(\\/|$)"], + "targets": [ + "^https?:\\/{2}(www\\.|)tiktok\\.com(\\/|$)" + ], "name": "TikTok", "options": { "enabled": true @@ -222,7 +249,20 @@ "frontends": { "libreddit": { "preferences": { - "cookies": ["theme", "front_page", "layout", "wide", "post_sort", "comment_sort", "show_nsfw", "autoplay_videos", "use_hls", "hide_hls_notification", "subscriptions", "filters"] + "cookies": [ + "theme", + "front_page", + "layout", + "wide", + "post_sort", + "comment_sort", + "show_nsfw", + "autoplay_videos", + "use_hls", + "hide_hls_notification", + "subscriptions", + "filters" + ] }, "name": "Libreddit", "instanceList": true @@ -253,13 +293,29 @@ }, "ferrit": { "preferences": { - "cookies": ["theme", "front_page", "layout", "wide", "post_sort", "comment_sort", "show_nsfw", "autoplay_videos", "use_hls", "hide_hls_notification", "subscriptions", "filters"] + "cookies": [ + "theme", + "front_page", + "layout", + "wide", + "post_sort", + "comment_sort", + "show_nsfw", + "autoplay_videos", + "use_hls", + "hide_hls_notification", + "subscriptions", + "filters" + ] }, "name": "Ferrit", "instanceList": true } }, - "targets": ["^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com(?=\\/u(ser)?\\/|\\/r\\/|\\/?$)", "^https?:\\/{2}(i|(external-)?preview)\\.redd\\.it"], + "targets": [ + "^https?:\\/{2}(www\\.|old\\.|np\\.|new\\.|amp\\.|)reddit\\.com(?=\\/u(ser)?\\/|\\/r\\/|\\/?$)", + "^https?:\\/{2}(i|(external-)?preview)\\.redd\\.it" + ], "name": "Reddit", "options": { "enabled": true, @@ -277,7 +333,9 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)"], + "targets": [ + "^https?:\\/{2}([im]\\.)?(stack\\.)?imgur\\.(com|io)(\\/|$)" + ], "name": "Imgur", "options": { "enabled": true, @@ -291,13 +349,18 @@ "frontends": { "wikiless": { "preferences": { - "cookies": ["theme", "default_lang"] + "cookies": [ + "theme", + "default_lang" + ] }, "name": "Wikiless", "instanceList": true } }, - "targets": ["^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org(\\/|$)"], + "targets": [ + "^https?:\\/{2}(?:[a-z]+\\.)*wikipedia\\.org(\\/|$)" + ], "name": "Wikipedia", "options": { "enabled": false @@ -345,13 +408,17 @@ "frontends": { "quetre": { "preferences": { - "localstorage": ["theme"] + "localstorage": [ + "theme" + ] }, "name": "Quetre", "instanceList": true } }, - "targets": ["^https?:\\/{2}([a-zA-Z0-9-]+\\.)*quora\\.com(\\/|$)"], + "targets": [ + "^https?:\\/{2}([a-zA-Z0-9-]+\\.)*quora\\.com(\\/|$)" + ], "name": "Quora", "options": { "enabled": true @@ -364,13 +431,17 @@ "frontends": { "libremdb": { "preferences": { - "localstorage": ["theme"] + "localstorage": [ + "theme" + ] }, "name": "libremdb", "instanceList": true } }, - "targets": ["^https?:\\/{2}(?:www\\.|m\\.|)imdb\\.com\\/title"], + "targets": [ + "^https?:\\/{2}(?:www\\.|m\\.|)imdb\\.com\\/title" + ], "name": "IMDb", "options": { "enabled": true @@ -386,7 +457,9 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}(www\\.|)reuters\\.com(\\/|$)"], + "targets": [ + "^https?:\\/{2}(www\\.|)reuters\\.com(\\/|$)" + ], "name": "Reuters", "options": { "enabled": false @@ -402,7 +475,9 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}(?:[a-zA-Z0-9-]+\\.)?(?:fandom|wikia)\\.com(?=\\/wiki|\\/?$)"], + "targets": [ + "^https?:\\/{2}(?:[a-zA-Z0-9-]+\\.)?(?:fandom|wikia)\\.com(?=\\/wiki|\\/?$)" + ], "name": "Fandom", "options": { "enabled": true @@ -431,8 +506,18 @@ "frontends": { "librarian": { "preferences": { - "cookies": ["nsfw", "theme"], - "localstorage": ["autoplay", "autoplayNextVid", "collapseComments", "plyr", "sb_categories", "showRelated"] + "cookies": [ + "nsfw", + "theme" + ], + "localstorage": [ + "autoplay", + "autoplayNextVid", + "collapseComments", + "plyr", + "sb_categories", + "showRelated" + ] }, "name": "Librarian", "embeddable": true, @@ -444,7 +529,10 @@ "instanceList": false } }, - "targets": ["^https?:\\/{2}odysee\\.com(\\/|$)", "^https?:\\/{2}lbry\\.tv(\\/|$)"], + "targets": [ + "^https?:\\/{2}odysee\\.com(\\/|$)", + "^https?:\\/{2}lbry\\.tv(\\/|$)" + ], "name": "LBRY", "options": { "enabled": true, @@ -517,13 +605,26 @@ }, "librex": { "preferences": { - "cookies": ["bibliogram", "disable_frontends", " disable_special", "invidious", "libreddit", "nitter", "proxitok", "save", "theme", "wikiless"] + "cookies": [ + "bibliogram", + "disable_frontends", + " disable_special", + "invidious", + "libreddit", + "nitter", + "proxitok", + "save", + "theme", + "wikiless" + ] }, "name": "LibreX", "instanceList": true } }, - "targets": ["^https?:\\/{2}search\\.libredirect\\.invalid"], + "targets": [ + "^https?:\\/{2}search\\.libredirect\\.invalid" + ], "name": "Search", "options": { "enabled": true, @@ -537,14 +638,24 @@ "frontends": { "simplyTranslate": { "preferences": { - "cookies": ["from_lang", "to_lang", "tts_enabled", "use_text_fields"] + "cookies": [ + "from_lang", + "to_lang", + "tts_enabled", + "use_text_fields" + ] }, "name": "SimplyTranslate", "instanceList": true }, "lingva": { "preferences": { - "localstorage": ["isauto", "source", "target", "chakra-ui-color-mode"] + "localstorage": [ + "isauto", + "source", + "target", + "chakra-ui-color-mode" + ] }, "name": "Lingva Translate", "instanceList": true @@ -554,7 +665,10 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/", "^https?:\\/{2}translate\\.libredirect\\.invalid"], + "targets": [ + "^https?:\\/{2}translate\\.google(\\.[a-z]{2,3}){1,2}\\/", + "^https?:\\/{2}translate\\.libredirect\\.invalid" + ], "name": "Translate", "options": { "enabled": true, @@ -576,7 +690,10 @@ "singleInstance": "https://www.openstreetmap.org" } }, - "targets": ["^https?:\\/{2}maps\\.libredirect\\.invalid", "^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)"], + "targets": [ + "^https?:\\/{2}maps\\.libredirect\\.invalid", + "^https?:\\/{2}(((www|maps)\\.)?(google\\.).*(\\/maps)|maps\\.(google\\.).*)" + ], "name": "Maps", "options": { "enabled": false, @@ -593,7 +710,11 @@ "instanceList": "true" } }, - "targets": ["^https?:\\/{2}send\\.libredirect\\.invalid", "^https?:\\/{2}send\\.firefox\\.com\\/?$", "^https?:\\/{2}sendfiles\\.online\\/?$"], + "targets": [ + "^https?:\\/{2}send\\.libredirect\\.invalid", + "^https?:\\/{2}send\\.firefox\\.com\\/?$", + "^https?:\\/{2}sendfiles\\.online\\/?$" + ], "name": "Send Files", "options": { "enabled": true @@ -609,7 +730,9 @@ "instanceList": true } }, - "targets": ["^https?:\\/{2}paste\\.libredirect\\.invalid"], + "targets": [ + "^https?:\\/{2}paste\\.libredirect\\.invalid" + ], "name": "Paste Text", "options": { "enabled": true @@ -630,4 +753,4 @@ "color": "grey" } } -} +} \ No newline at end of file diff --git a/src/pages/options/widgets/general.ejs b/src/pages/options/widgets/general.ejs index e24046d..ca96f1c 100644 --- a/src/pages/options/widgets/general.ejs +++ b/src/pages/options/widgets/general.ejs @@ -1,102 +1,87 @@
-
-

General

-
-
-
-

Theme

- -
-
-

Network

- -
-
-
-

Fallback to clearnet if no instances are available for the current network

- -
-
-
-

- -
-
-
-

Latency Threshold

- - -
-
-
-

-
-
-
-
-   -   -
- -
-
-
-
- - - - Update Instances   
-
- -     - - -   - Export Settings    - - - - - Reset Settings -
-
-
-

Customize Popup

-
- - +
+

General

+
+
+
+

Theme

+ +
+
+

Network

+ +
+
+
+

Fallback to clearnet if no instances are available for the current network

+ +
+
+
+

+ +
+
+
+

Latency Threshold

+ + +
+
+
+

+
+
+
+
+   +   +
+ +
+
+
+
+ + + + + Update Instances    +
+
+ +     + +   Export Settings    + + + + + Reset Settings +
+
diff --git a/src/pages/options/widgets/services.ejs b/src/pages/options/widgets/services.ejs index 44c6a9f..c301907 100644 --- a/src/pages/options/widgets/services.ejs +++ b/src/pages/options/widgets/services.ejs @@ -1,86 +1,84 @@ <% for (const service in config.services) { -%>
-
-

<%= config.services[service].name %>

-
-
-
-

Enable

- -
- <% if (Object.keys(config.services[service].frontends).length > 1) { %> -
-

Frontend

- -
- <% if (config.services[service].embeddable) { _%> -
-

Embed Frontend

- -
- <% } _%> - <% } _%> - <% if (config.services[service].embeddable) { _%> -
-

Redirect Type

- -
- <% } _%> -
- <% for (const frontend in config.services[service].frontends) { -%> - <% if (config.services[service].frontends[frontend].instanceList) { _%> -
- <% for (const network in config.networks) { -%> -
-
-

Default Instances

-
-
-
-
-

Custom Instances

-
-
-
- - -
-
-
- <% if (network == "clearnet") { _%> -
- - -
- <% } _%> -
- <% } %> -
- <% } _%> - <% } %> +
+

<%= config.services[service].name %>

+
+
+
+

Enable

+ +
+
+

Show in Popup

+ +
+ <% if (Object.keys(config.services[service].frontends).length> 1) { %> +
+

Frontend

+ +
+ <% if (config.services[service].embeddable) { _%> +
+

Embed Frontend

+ +
+ <% } _%> <% } _%> <% if (config.services[service].embeddable) { _%> +
+

Redirect Type

+ +
+ <% } _%> +
+ <% for (const frontend in config.services[service].frontends) { -%> <% if (config.services[service].frontends[frontend].instanceList) { _%> +
+ <% for (const network in config.networks) { -%> +
+
+

Default Instances

+
+
+
+
+

Custom Instances

+
+
+
+ + +
+
+
+ <% if (network=="clearnet" ) { _%> +
+ + +
+ <% } _%> +
+ <% } %> +
+ <% } _%> <% } %>
<% } %> diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 0df2f9f..5f2871e 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -79,7 +79,6 @@ select { margin: 0; max-width: 500px; border-radius: 3px; - cursor: pointer; } input[type="url"], @@ -110,11 +109,19 @@ section.option-block h2 { body.option { display: flex; padding: 40px; - width: 900px; + width: 1100px; +} + +section.links { + display: flex; + flex-wrap: wrap; + flex-direction: column; + width: 300px; + max-height: 720px; } section.links div { - margin: 20px 0; + margin: 10px; width: max-content; } @@ -458,7 +465,7 @@ body div section { display: none; } -div.about > div { +div.about>div { justify-content: start; width: 520px; } @@ -480,4 +487,4 @@ input:disabled { div.about a { width: 500px; display: inline-block; -} +} \ No newline at end of file