Extract footer overhaul from #2215 #4003
Conversation
syeopite
requested review from
SamantazFox,
TheFrenchGhosty,
unixfox and
a team
as code owners
| <% if buffer_footer %> | ||
| <div id="footer_buffer"></div> | ||
| <% end %> |
There was a problem hiding this comment.
What is this footer buffer for?
There was a problem hiding this comment.
It's a bit hard to explain but its mostly to give the contents some breathing room on select pages. It looks too cramped and shows too much information right-away imo. A block footer like so is intended to be scrolled down as to not overshadow the main contents of the page. See the examples below:
Without buffer (visible without scrolling):
With buffer (requires scrolling):
You can find some examples on sites like stackoverflow.com, vox.com, etc.
There was a problem hiding this comment.
Ah, I see! Though 50vh seems a bit too large. What about 1/4th of that?
Also, can you put the footer div only on the selected .ecr views, rather than in the template?
| <% 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 %> |
There was a problem hiding this comment.
I don't think that log in/out needs to be in the footer, as it's already at the top-right on all pages. Sounds redundant to me.
There was a problem hiding this comment.
Mostly for designs reasons. Without the section with the "preferences" and "login" links I personally feel like too much weight is put on the Invidious column making it look unbalanced.
There was a problem hiding this comment.
You could move the "Matrix" link in the "support" column, and add a configurable "ToS" link in the "legal" column?
Also, the version is currently missing. It could be placed at the bottom right of the footer, so that space usage is more even.
| "footer_navigation_section_header": "Navigation", | ||
| "footer_home_link": "Home", | ||
| "footer_project_information_section_header": "Invidious", | ||
| "footer_project_homepage_link": "Project Homepage", |
There was a problem hiding this comment.
What do you think about using "Website"? I'm worried that "Homepage" could be confused with the actual homepage of the instance.
| <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> |
There was a problem hiding this comment.
Could the URL be customized by the admin? I.e, by default link to our own donate page, but if the admin adds their own URL, the "donate" link redirects to that URL instead.
There was a problem hiding this comment.
I'm personally not opposed to it but one of the requirements for #2032 is an link for the project's donation page. Perhaps we could add another footer section? Something like:
Though imo something looks weird about that composition but I can't quite put my finger on why.
There was a problem hiding this comment.
That needs to be discussed with @unixfox and @TheFrenchGhosty, but imo, we (as a project/team) don't need more donations than what we already get. Instance maintainers are the one paying expensive hardware and in need of financial support!
|
|
||
| ## | ||
| ## Email to contact the instance maintainer; used in a mailto: link within the footer. | ||
| ## | ||
| ## Accepted values: Email | ||
| ## Default: <none> | ||
| ## | ||
| # instance_maintainer_email: | ||
|
|
There was a problem hiding this comment.
If we add more customization options (contact e-mail, donate page, etc...) it might be a good thing to group all of that (plus the banner) under a dedicated config section, like customization or similar.
There was a problem hiding this comment.
Co-authored-by: Samantaz Fox <coding@samantaz.fr>
With the recentish PRs of adding contact information and abuse links to Invidious's footer I thought I'd throw my hat back in the ring with my old footer overhaul code from #2215
This is a very quick and dirty extraction with the only notable change being the updated locale keys to match how it's structured nowadays. Nothing new has been added for now. If this PR is to be accepted, the footer will probably also need a slight palette change to match the lighter tons of Invidious' UI compared to what I had back in #2215.