From e9639aaef8222a458c0d67d72c18764487ba9750 Mon Sep 17 00:00:00 2001 From: syeopite Date: Mon, 24 Jul 2023 15:11:45 -0700 Subject: [PATCH 01/14] Extract and implement footer overhaul from #2215 --- assets/css/default.css | 85 ++++++++++--- config/config.example.yml | 9 ++ locales/en-US.json | 24 +++- src/invidious/config.cr | 3 + src/invidious/helpers/macros.cr | 3 +- src/invidious/routes/channels.cr | 2 +- src/invidious/routes/preferences.cr | 2 +- src/invidious/views/template.ecr | 181 +++++++++++++++++++++------- 8 files changed, 242 insertions(+), 67 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index 2cedcf0c..db6ee964 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -459,32 +459,44 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; } * Footer */ -footer { - margin-top: auto; + footer { + color: #919191; + margin-top: 2.5em; padding: 1.5em 0; - text-align: center; - max-height: 30vh; } -.light-theme footer { - color: #7c7c7c; +.footer-content { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-top: -10px; } -.dark-theme footer { - color: #adadad; +footer .footer-content a { + color: #919191; } -.light-theme footer a { - color: #7c7c7c !important; +.footer-content #about-invidious-description > b { + font-size: 30px; } -.dark-theme footer a { - color: #adadad !important; +.footer-section { + margin-right: 20px; + margin-top: 20px; } -footer span { - margin: 4px 0; - display: block; +.footer-section-list { + margin-top: 8px; +} + +.footer-section-item { + margin-bottom: 4px; +} + +@media screen and (max-width: 929px) { + #about-invidious-description { + display: none; + } } /* keyframes */ @@ -550,6 +562,14 @@ span > select { color: #565d64; } +.light-theme footer { + background: #f2f2f2; +} + +.light-theme footer #about-invidious-description > b { + color: #7a7a7a; +} + @media (prefers-color-scheme: light) { .no-theme a:hover, .no-theme a:active, @@ -596,6 +616,14 @@ span > select { .light-theme .pure-menu-heading { color: #565d64; } + + .no-theme footer { + background: #f2f2f2; + } + + .no-theme footer #about-invidious-description > b { + color: #7a7a7a; + } } @@ -658,6 +686,16 @@ body.dark-theme { color: inherit; } + +.dark-theme footer { + background: #16191a; +} + +.dark-theme .footer-content #about-invidious-description > b { + color: #e5e5e5; +} + + @media (prefers-color-scheme: dark) { .no-theme a:hover, .no-theme a:active, @@ -713,11 +751,11 @@ body.dark-theme { } .no-theme footer { - color: #adadad; + background: #16191a; } - .no-theme footer a { - color: #adadad !important; + .no-theme footer #about-invidious-description > b { + color: #e5e5e5; } } @@ -803,6 +841,17 @@ h1, h2, h3, h4, h5, p, /* Center the "invidious" logo on the search page */ #logo > h1 { text-align: center; } +#footer_buffer { + margin-top: 50vh; +} + +@media screen and (max-width: 450px) { + #footer_buffer { + display: none; + } +} + + /* IE11 fixes */ :-ms-input-placeholder { color: #888; } diff --git a/config/config.example.yml b/config/config.example.yml index 759b81e0..b92ca992 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -496,6 +496,15 @@ hmac_key: "CHANGE_ME!!" ## #playlist_length_limit: 500 + +## +## Email to contact the instance maintainer; used in a mailto: link within the footer. +## +## Accepted values: Email +## Default: +## +# instance_maintainer_email: + ######################################### # # Default user preferences diff --git a/locales/en-US.json b/locales/en-US.json index c23f6bc3..593d605d 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -463,11 +463,25 @@ "next_steps_error_message": "After which you should try to: ", "next_steps_error_message_refresh": "Refresh", "next_steps_error_message_go_to_youtube": "Go to YouTube", - "footer_donate_page": "Donate", - "footer_documentation": "Documentation", - "footer_source_code": "Source code", - "footer_original_source_code": "Original source code", - "footer_modfied_source_code": "Modified source code", + + "footer_invidious_project_description": "A free and open source frontend for Youtube that that respects your privacy! Now you can watch videos (ad-free), subscribe to channels, create playlist and much more all without the prying eyes of Google!", + "footer_navigation_section_header": "Navigation", + "footer_home_link": "Home", + "footer_project_information_section_header": "Invidious", + "footer_project_homepage_link": "Project Homepage", + "footer_source_code_link": "Source Code", + "footer_issue_tracker_link": "Issue tracker", + "footer_public_instances_link": "Public instances", + "footer_donate_link": "Donate", + "footer_matrix_link": "Matrix", + "footer_support_section_header": "Support", + "footer_contact_link": "Contact instance maintainer", + "footer_report_bug_link": "Report a bug", + "footer_faq_link": "FAQs", + "footer_legal_section_header": "Legal", + "footer_licences_link": "Licences", + "footer_privacy_policy_link": "Privacy", + "adminprefs_modified_source_code_url_label": "URL to modified source code repository", "none": "none", "videoinfo_started_streaming_x_ago": "Started streaming `x` ago", diff --git a/src/invidious/config.cr b/src/invidious/config.cr index c1766fbb..6460a265 100644 --- a/src/invidious/config.cr +++ b/src/invidious/config.cr @@ -156,6 +156,9 @@ class Config # Playlist length limit property playlist_length_limit : Int32 = 500 + # Email to contact the instance maintainer. This is used within the footer as an mailto link. + property instance_maintainer_email : String? = nil + def disabled?(option) case disabled = CONFIG.disable_proxy when Bool diff --git a/src/invidious/helpers/macros.cr b/src/invidious/helpers/macros.cr index 43e7171b..d55fa6fc 100644 --- a/src/invidious/helpers/macros.cr +++ b/src/invidious/helpers/macros.cr @@ -48,8 +48,9 @@ module JSON::Serializable end end -macro templated(_filename, template = "template", navbar_search = true) +macro templated(_filename, template = "template", navbar_search = true, buffer_footer = false) navbar_search = {{navbar_search}} + buffer_footer = {{buffer_footer}} {{ filename = "src/invidious/views/" + _filename + ".ecr" }} {{ layout = "src/invidious/views/" + template + ".ecr" }} diff --git a/src/invidious/routes/channels.cr b/src/invidious/routes/channels.cr index 952098e0..ce158c33 100644 --- a/src/invidious/routes/channels.cr +++ b/src/invidious/routes/channels.cr @@ -152,7 +152,7 @@ module Invidious::Routes::Channels items.each(&.author = "") selected_tab = Frontend::ChannelPage::TabsAvailable::Playlists - templated "channel" + templated "channel", buffer_footer: true end def self.podcasts(env) diff --git a/src/invidious/routes/preferences.cr b/src/invidious/routes/preferences.cr index 39ca77c0..729d6183 100644 --- a/src/invidious/routes/preferences.cr +++ b/src/invidious/routes/preferences.cr @@ -8,7 +8,7 @@ module Invidious::Routes::PreferencesRoute preferences = env.get("preferences").as(Preferences) - templated "user/preferences" + templated "user/preferences", buffer_footer: true end def self.update(env) diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 9904b4fc..5d105d6c 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -112,47 +112,9 @@ <%= content %> - + <% if buffer_footer %> + + <% end %> @@ -172,6 +134,143 @@ <% end %> <% end %> + + From 3f0ea875c16eb3a87050a9a73bec536be41dde48 Mon Sep 17 00:00:00 2001 From: syeopite <70992037+syeopite@users.noreply.github.com> Date: Sun, 30 Jul 2023 06:10:18 +0000 Subject: [PATCH 02/14] Update locales/en-US.json Co-authored-by: Samantaz Fox --- locales/en-US.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/locales/en-US.json b/locales/en-US.json index 593d605d..f7744b34 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -477,7 +477,7 @@ "footer_support_section_header": "Support", "footer_contact_link": "Contact instance maintainer", "footer_report_bug_link": "Report a bug", - "footer_faq_link": "FAQs", + "footer_faq_link": "FAQ", "footer_legal_section_header": "Legal", "footer_licences_link": "Licences", "footer_privacy_policy_link": "Privacy", From 629f95fcbead361f2e260a0a38e0839de7f1d735 Mon Sep 17 00:00:00 2001 From: syeopite <70992037+syeopite@users.noreply.github.com> Date: Sat, 16 Sep 2023 23:05:38 +0000 Subject: [PATCH 03/14] Use instances.invidious.io instead of redirect Co-authored-by: TheFrenchGhosty <47571719+TheFrenchGhosty@users.noreply.github.com> --- src/invidious/views/template.ecr | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 5d105d6c..71e6298c 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -211,7 +211,7 @@
  • - "> + "> <%= translate(locale, "footer_public_instances_link") %>
    • From dc9697157bca50aab56450ea76aa0ac18da18448 Mon Sep 17 00:00:00 2001 From: syeopite Date: Wed, 13 Mar 2024 13:35:39 -0700 Subject: [PATCH 04/14] Add Invidious version to footer --- assets/css/default.css | 64 +++++++++++++++++++++++++------- src/invidious/views/template.ecr | 26 +++++-------- 2 files changed, 59 insertions(+), 31 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index db6ee964..a218fafd 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -459,12 +459,23 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; } * Footer */ - footer { +footer { color: #919191; margin-top: 2.5em; padding: 1.5em 0; } +#footer-content-container { + display: flex; + flex-direction: column; + gap: 20px; +} + +#footer-content-container > hr { + margin: 0; + color: rgb(241, 241, 241); +} + .footer-content { display: flex; justify-content: space-between; @@ -472,7 +483,7 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; } margin-top: -10px; } -footer .footer-content a { +footer a { color: #919191; } @@ -493,6 +504,20 @@ footer .footer-content a { margin-bottom: 4px; } +.footer-footer .left { + float: left +} + +.footer-footer .right { + float: right; + display: flex; + gap: 5px;; +} + +.footer-right .right a { + color: #919191 +} + @media screen and (max-width: 929px) { #about-invidious-description { display: none; @@ -563,11 +588,20 @@ span > select { } .light-theme footer { + color: #7a7a7a; background: #f2f2f2; } +.light-theme #footer-content-container > hr { + color: rgb(241, 241, 241); +} + +.light-theme footer a { + color: #7c7c7c !important; +} + .light-theme footer #about-invidious-description > b { - color: #7a7a7a; + color: #565D64; } @media (prefers-color-scheme: light) { @@ -605,24 +639,21 @@ span > select { color: #303030; } - .no-theme footer { - color: #7c7c7c; - } - - .no-theme footer a { - color: #7c7c7c !important; - } - .light-theme .pure-menu-heading { color: #565d64; } .no-theme footer { background: #f2f2f2; + color: #7c7c7c; } .no-theme footer #about-invidious-description > b { - color: #7a7a7a; + color: #565D64; + } + + .no-theme footer a { + color: #7c7c7c !important; } } @@ -691,8 +722,12 @@ body.dark-theme { background: #16191a; } +.dark-theme #footer-content-container > hr { + color: #313131; +} + .dark-theme .footer-content #about-invidious-description > b { - color: #e5e5e5; + color: #ccc; } @@ -752,10 +787,11 @@ body.dark-theme { .no-theme footer { background: #16191a; + color: #313131; } .no-theme footer #about-invidious-description > b { - color: #e5e5e5; + color: #ccc; } } diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 71e6298c..c3f021e0 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -137,7 +137,7 @@ From 1da6933b8e41be43e0aa703d1f989869cabb56a2 Mon Sep 17 00:00:00 2001 From: syeopite Date: Wed, 13 Mar 2024 13:55:49 -0700 Subject: [PATCH 05/14] Add new instance customization section in config --- config/config.example.yml | 41 +++++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/config/config.example.yml b/config/config.example.yml index b92ca992..f1700bf0 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -412,9 +412,8 @@ jobs: ## enable: true - # ----------------------------- -# Miscellaneous +# Instance customization # ----------------------------- ## @@ -426,6 +425,27 @@ jobs: ## #banner: +## +## Source code URL. If your instance is running a modified source +## code, you MUST publish it somewhere and set this option. +## +## Accepted values: a string +## Default: +## +#modified_source_code_url: "" + +## +## Email to contact the instance maintainer; used in a mailto: link within the footer. +## +## Accepted values: Email +## Default: +## +# instance_maintainer_email: + +# ----------------------------- +# Miscellaneous +# ----------------------------- + ## ## Subscribe to channels using PubSubHub (Google PubSubHubbub service). ## PubSubHub allows Invidious to be instantly notified when a new video @@ -479,15 +499,6 @@ hmac_key: "CHANGE_ME!!" ## #cache_annotations: false -## -## Source code URL. If your instance is running a modified source -## code, you MUST publish it somewhere and set this option. -## -## Accepted values: a string -## Default: -## -#modified_source_code_url: "" - ## ## Maximum custom playlist length limit. ## @@ -497,14 +508,6 @@ hmac_key: "CHANGE_ME!!" #playlist_length_limit: 500 -## -## Email to contact the instance maintainer; used in a mailto: link within the footer. -## -## Accepted values: Email -## Default: -## -# instance_maintainer_email: - ######################################### # # Default user preferences From 001ba71b9101445243d194887adbd0b95852cc54 Mon Sep 17 00:00:00 2001 From: syeopite Date: Wed, 13 Mar 2024 14:01:20 -0700 Subject: [PATCH 06/14] Add config to add custom text in the footer Co-authored-by: Aural Glow <125497673+auralglow@users.noreply.github.com> --- assets/css/default.css | 12 ++++++------ config/config.example.yml | 15 ++++++++++++++- locales/en-US.json | 2 +- src/invidious/config.cr | 2 ++ src/invidious/views/template.ecr | 9 +++++++-- 5 files changed, 30 insertions(+), 10 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index a218fafd..633e9bbd 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -487,7 +487,7 @@ footer a { color: #919191; } -.footer-content #about-invidious-description > b { +.footer-content #footer-custom-text > b { font-size: 30px; } @@ -519,7 +519,7 @@ footer a { } @media screen and (max-width: 929px) { - #about-invidious-description { + #footer-custom-text { display: none; } } @@ -600,7 +600,7 @@ span > select { color: #7c7c7c !important; } -.light-theme footer #about-invidious-description > b { +.light-theme footer #footer-custom-text > b { color: #565D64; } @@ -648,7 +648,7 @@ span > select { color: #7c7c7c; } - .no-theme footer #about-invidious-description > b { + .no-theme footer #footer-custom-text > b { color: #565D64; } @@ -726,7 +726,7 @@ body.dark-theme { color: #313131; } -.dark-theme .footer-content #about-invidious-description > b { +.dark-theme .footer-content #footer-custom-text > b { color: #ccc; } @@ -790,7 +790,7 @@ body.dark-theme { color: #313131; } - .no-theme footer #about-invidious-description > b { + .no-theme footer #footer-custom-text > b { color: #ccc; } } diff --git a/config/config.example.yml b/config/config.example.yml index f1700bf0..ae922f2c 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -425,6 +425,18 @@ jobs: ## #banner: +## +## custom text displayed at the bottom of every page within Invidious' footer. This can +## used for instance announcements, e.g +## +## When unset Invidious defaults to some text that describes what Invidious is. See +## localization key default_invidious_footer_text +## +## Accepted values: any string. HTML is accepted. +## Default: +## +#footer: + ## ## Source code URL. If your instance is running a modified source ## code, you MUST publish it somewhere and set this option. @@ -440,7 +452,8 @@ jobs: ## Accepted values: Email ## Default: ## -# instance_maintainer_email: +# instance_maintainer_email: + # ----------------------------- # Miscellaneous diff --git a/locales/en-US.json b/locales/en-US.json index f7744b34..c52af523 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -464,7 +464,7 @@ "next_steps_error_message_refresh": "Refresh", "next_steps_error_message_go_to_youtube": "Go to YouTube", - "footer_invidious_project_description": "A free and open source frontend for Youtube that that respects your privacy! Now you can watch videos (ad-free), subscribe to channels, create playlist and much more all without the prying eyes of Google!", + "default_invidious_footer_text": "A free and open source frontend for Youtube that that respects your privacy! Now you can watch videos (ad-free), subscribe to channels, create playlist and much more all without the prying eyes of Google!", "footer_navigation_section_header": "Navigation", "footer_home_link": "Home", "footer_project_information_section_header": "Invidious", diff --git a/src/invidious/config.cr b/src/invidious/config.cr index 6460a265..a6354c41 100644 --- a/src/invidious/config.cr +++ b/src/invidious/config.cr @@ -114,6 +114,8 @@ class Config property cache_annotations : Bool = false # Optional banner to be displayed along top of page for announcements, etc. property banner : String? = nil + # Optional footer text to be displayed within Invidious' footer. Can be used for maintainer contact info, etc. + property footer : String? = nil # Enables 'Strict-Transport-Security'. Ensure that `domain` and all subdomains are served securely property hsts : Bool? = true # Disable proxying server-wide: options: 'dash', 'livestreams', 'downloads', 'local' diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index c3f021e0..b55f7040 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -139,9 +139,14 @@
    - + + From 1341f67e85b27103514339c0ab4267dae7e7af09 Mon Sep 17 00:00:00 2001 From: syeopite Date: Thu, 7 Nov 2024 20:29:52 -0800 Subject: [PATCH 13/14] Rename project homepage to project website --- locales/en-US.json | 2 +- src/invidious/views/template.ecr | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/locales/en-US.json b/locales/en-US.json index bd61dae1..291c61c5 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -468,7 +468,7 @@ "footer_navigation_section_header": "Navigation", "footer_home_link": "Home", "footer_project_information_section_header": "Invidious", - "footer_project_homepage_link": "Project Homepage", + "footer_project_website_link": "Project Website", "footer_source_code_link": "Source Code", "footer_issue_tracker_link": "Issue tracker", "footer_public_instances_link": "Public instances", diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index d52fd20f..42e6af20 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -172,8 +172,8 @@ Invidious
    • - "> - <%= translate(locale, "footer_project_homepage_link") %> + "> + <%= translate(locale, "footer_project_website_link") %>
    • From 5bcc25b2da46e5b21ebc9d11a0963b4df8cd9402 Mon Sep 17 00:00:00 2001 From: syeopite Date: Thu, 7 Nov 2024 20:33:35 -0800 Subject: [PATCH 14/14] Reduce footer buffer height --- assets/css/default.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/default.css b/assets/css/default.css index 91a3536e..fcc99bea 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -878,7 +878,7 @@ h1, h2, h3, h4, h5, p, #logo > h1 { text-align: center; } #footer_buffer { - margin-top: 50vh; + margin-top: 12.5vh; } @media screen and (max-width: 450px) {