Extract and implement footer overhaul from #2215

assets/css/default.css

@@ -442,32 +442,44 @@ p.video-data   { margin: 0; font-weight: bold; font-size: 80%; }
  * Footer
  */
 
-footer {
+ footer {
-  margin-top: auto;
+  color: #919191;
+  margin-top: 2.5em;
   padding: 1.5em 0;
-  text-align: center;
-  max-height: 30vh;
 }
 
-.light-theme footer {
+.footer-content {
-  color: #7c7c7c;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: -10px;
 }
 
-.dark-theme footer {
+footer .footer-content a {
-  color: #adadad;
+  color: #919191;
 }
 
-.light-theme footer a {
+.footer-content #about-invidious-description > b {
-  color: #7c7c7c !important;
+  font-size: 30px;
 }
 
-.dark-theme footer a {
+.footer-section {
-  color: #adadad !important;
+  margin-right: 20px;
+  margin-top: 20px;
 }
 
-footer span {
+.footer-section-list {
-  margin: 4px 0;
+  margin-top: 8px;
-  display: block;
+}
+
+.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 {
+  .no-theme footer #about-invidious-description > b {
-    color: #adadad !important;
+    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; }
 

config/config.example.yml

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

locales/en-US.json

@@ -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_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_source_code": "Source code",
+    "footer_navigation_section_header": "Navigation",
-    "footer_original_source_code": "Original source code",
+    "footer_home_link": "Home",
-    "footer_modfied_source_code": "Modified source code",
+    "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",

src/invidious/config.cr

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

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

src/invidious/routes/channels.cr

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

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)

src/invidious/views/template.ecr

@@ -112,47 +112,9 @@
 
             <%= content %>
 
-            <footer>
+            <% if buffer_footer %>
-                <div class="pure-g">
+                <div id="footer_buffer"></div>
-                    <div class="pure-u-1 pure-u-md-1-3">
+            <% end %>
-                        <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>
-                        <% 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>