midou/invidious
1
0
Fork 1
mirror of https://github.com/iv-org/invidious.git synced 2024-11-08 13:42:27 +05:30
Code Issues Packages Projects Releases Wiki Activity

Extract and implement footer overhaul from #2215

Browse Source
This commit is contained in:
syeopite 2023-07-24 15:11:45 -07:00
parent e8a36985af
commit 08f021afad
No known key found for this signature in database
GPG Key ID: A73C186DA3955A1A
8 changed files with 242 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
assets/css/default.css
View File

@ -443,31 +443,43 @@ p.video-data { margin: 0; font-weight: bold; font-size: 80%; }
*/
footer {
margin-top: auto;
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 */
@ -533,6 +545,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,
@ -579,6 +599,14 @@ span > select {
.light-theme .pure-menu-heading {
color: #565d64;
}
.no-theme footer {
background: #f2f2f2;
}
.no-theme footer #about-invidious-description > b {
color: #7a7a7a;
}
}
@ -641,6 +669,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,
@ -696,11 +734,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;
}
}
@ -786,6 +824,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; }

9
config/config.example.yml
View File

@ -475,6 +475,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: <none>
##
# instance_maintainer_email:
#########################################
#
# Default user preferences

24
locales/en-US.json
View File

@ -461,11 +461,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",

3
src/invidious/config.cr
View File

@ -137,6 +137,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

3
src/invidious/helpers/macros.cr
View File

@ -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" }}

2
src/invidious/routes/channels.cr
View File

@ -115,7 +115,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)

2
src/invidious/routes/preferences.cr
View File

@ -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)

179
src/invidious/views/template.ecr
View File

@ -112,47 +112,9 @@
<%= content %>
<footer>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<span>
<i class="icon ion-logo-github"></i>
<% if CONFIG.modified_source_code_url %>
<a href="https://github.com/iv-org/invidious"><%= translate(locale, "footer_original_source_code") %></a>&nbsp;/
<a href="<%= CONFIG.modified_source_code_url %>"><%= translate(locale, "footer_modfied_source_code") %></a>
<% else %>
<a href="https://github.com/iv-org/invidious"><%= translate(locale, "footer_source_code") %></a>
<% if buffer_footer %>
<div id="footer_buffer"></div>
<% end %>
</span>
<span>
<i class="icon ion-ios-paper"></i>
<a href="https://github.com/iv-org/documentation"><%= translate(locale, "footer_documentation") %></a>
</span>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<span>
<a href="https://github.com/iv-org/invidious/blob/master/LICENSE"><%= translate(locale, "Released under the AGPLv3 on Github.") %></a>
</span>
<span>
<i class="icon ion-logo-javascript"></i>
<a rel="jslicense" href="/licenses"><%= translate(locale, "View JavaScript license information.") %></a>
</span>
<span>
<i class="icon ion-ios-paper"></i>
<a href="/privacy"><%= translate(locale, "View privacy policy.") %></a>
</span>
</div>
<div class="pure-u-1 pure-u-md-1-3">
<span>
<i class="icon ion-ios-wallet"></i>
<a href="https://invidious.io/donate/"><%= translate(locale, "footer_donate_page") %></a>
</span>
<span><%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %></span>
</div>
</div>
</footer>
</div>
</div>
@ -172,6 +134,143 @@
<script src="/js/notifications.js?v=<%= ASSET_COMMIT %>"></script>
<% end %>
<% end %>
<footer class="pure-g">
<div class="pure-u-1 pure-u-md-2-24"></div>
<div class="h-box pure-u-1 pure-u-md-20-24">
<div class="pure-u-1 footer-content">
<div class="footer-section pure-u-1-4" id="about-invidious-description">
<b>Invidious</b>
<p><%=translate(locale, "footer_invidious_project_description")%></p>
</div>
<div class="footer-section">
<b class="footer-section-header"><%= translate(locale, "footer_navigation_section_header")%></b>
<ul class="pure-menu-list footer-section-list">
<li class="pure-menu-item footer-section-item">
<a href="/" title="<%= translate(locale, "footer_home_link")%>">
<%= translate(locale, "footer_home_link") %>
</a>
</li>
<li class="pure-menu-item footer-section-item">
<a href="/feed/popular" title="<%= translate(locale, "Popular")%>">
<%= translate(locale, "Popular") %>
</a>
</li>
<li class="pure-menu-item footer-section-item">
<a href="/feed/trending" title="<%= translate(locale, "Trending")%>" style="">
<%= translate(locale, "Trending") %>
</a>
</li>
<li class="pure-menu-item footer-section-item">
<a href="/search" title="<%= translate(locale, "Search")%>">
<%= translate(locale, "Search") %>
</a>
</li>
<li class="pure-menu-item footer-section-item">
<br>
</li>
<li class="pure-menu-item footer-section-item">
<a href="/preferences?referer=<%= env.get?("current_page") %>" title="<%= translate(locale, "Preferences")%>">
<%= translate(locale, "Preferences") %>
</a>
</li>
<% if CONFIG.login_enabled %>
<li class="pure-menu-item footer-section-item">
<% if env.get? "user" %>
<form action="/signout?referer=<%= env.get?("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= URI.encode_www_form(env.get?("csrf_token").try &.as(String) || "") %>">
<a href="#" title="<%= translate(locale, "Log out") %>">
<input style="all:unset" type="submit" value="<%= translate(locale, "Log out") %>">
</a>
</form>
<% else %>
<a href="/login?referer=<%= env.get?("current_page") %>" title="<%= translate(locale, "Log in") %>">
<%= translate(locale, "Log in") %>
</a>
<% end %>
</li>
<% end %>
</ul>
</div>
<div class="footer-section">
<b class="footer-section-header">Invidious</b>
<ul class="pure-menu-list footer-section-list">
<li class="pure-menu-item footer-section-item">
<a href="https://invidious.io" title="<%= translate(locale, "footer_project_homepage_link")%>">
<%= translate(locale, "footer_project_homepage_link") %>
</a>
</li>
<li class="pure-menu-item footer-section-item">
<a href="https://github.com/iv-org/invidious" title="<%= translate(locale, "footer_source_code_link")%>">
<%= translate(locale, "footer_source_code_link") %>
</a>
</li>
<li class="pure-menu-item footer-section-item">
<a href="https://github.com/iv-org/invidious/issues" title="<%= translate(locale, "footer_issue_tracker_link")%>" style="">
<%= translate(locale, "footer_issue_tracker_link") %>
</a>
</li>
<li class="pure-menu-item footer-section-item">
<a href="https://redirect.invidious.io" title="<%= translate(locale, "footer_public_instances_link")%>">
<%= translate(locale, "footer_public_instances_link") %>
</a>
</li>
<li class="pure-menu-item footer-section-item">
<a href="https://invidious.io/donate" title="<%= translate(locale, "footer_donate_link")%>">
<%= translate(locale, "footer_donate_link") %>
</a>
</li>
<li class="pure-menu-item footer-section-item">
<a href="https://matrix.to/#/#invidious:matrix.org" title="<%= translate(locale, "footer_matrix_link")%>">
<%= translate(locale, "footer_matrix_link") %>
</a>
</li>
</ul>
</div>
<div class="footer-section">
<b class="footer-section-header"><%= translate(locale, "footer_support_section_header")%></b>
<ul class="pure-menu-list footer-section-list">
<li class="pure-menu-item footer-section-item">
<% link = CONFIG.instance_maintainer_email ? "mailto:#{CONFIG.instance_maintainer_email}" : "#"%>
<a href=<%=link%> title="<%= translate(locale, "footer_contact_link")%>">
<%= translate(locale, "footer_contact_link") %>
</a>
</li>
<li class="pure-menu-item footer-section-item">
<a href="https://github.com/iv-org/invidious/issues/new" title="<%= translate(locale, "footer_report_bug_link")%>">
<%= translate(locale, "footer_report_bug_link") %>
</a>
</li>
<li class="pure-menu-item footer-section-item">
<a href="#" title="<%= translate(locale, "footer_faq_link")%>" style="">
<%= translate(locale, "footer_faq_link") %>
</a>
</li>
</ul>
</div>
<div class="footer-section">
<b class="footer-section-header"><%= translate(locale, "footer_legal_section_header")%></b>
<ul class="pure-menu-list footer-section-list">
<li class="pure-menu-item footer-section-item">
<a href="/licenses" title="<%= translate(locale, "footer_licences_link")%>">
<%= translate(locale, "footer_licences_link") %>
</a>
</li>
<!-- TODO -->
<li class="pure-menu-item footer-section-item">
<a href="/privacy" title="<%= translate(locale, "footer_privacy_policy_link")%>">
<%= translate(locale, "footer_privacy_policy_link") %>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- <%= translate(locale, "Current version: ") %> <%= CURRENT_VERSION %>-<%= CURRENT_COMMIT %> @ <%= CURRENT_BRANCH %> -->
</div>
<div class="pure-u-1 pure-u-md-2-24"></div>
</footer>
</body>
</html>