Issue 5406 - Create Site Footer Component for Help Center

includes/layout/footer.tmpl

Index: includes/layout/footer.tmpl
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/layout/footer.tmpl
@@ -0,0 +1,29 @@
+<footer id="site-footer" class="navbar">
+  <div class="navbar-wrapper row">
+    <div class="column one-fourth">
+      <div class="custom-select">
+        <button class="custom-select-selected" aria-expanded="false" aria-controls="language-options">

[juliandoucette, 2017/08/22 14:33:41]

NIT: I think this should be hidden by default and shown when JS is enabled

[ire, 2017/09/04 20:28:06]

This is sort of what I've done already, since I'm hiding/showing it based on the
.no-js class. The alternative would be to change my CSS from:

.custom-select-selected { display: inline-block; }
.no-js .custom-select-selected { display: none; }

to:

.custom-select-selected { display: none; }
.js .custom-select-selected { display: inline-block; }

Which is basically the same

[juliandoucette, 2017/09/06 17:48:17]

Acknowledged. But we should be consistent. Doesn't the same logic that applies
to progressive enhancement instead of graceful degradation, and mobile-first,
also apply to no-js-first and IE-first? aka start with the worst case and
improve from there (implying that our non-classed styles should be no-js styles
in most cases).

[ire, 2017/09/08 09:53:32]

This makes sense, you're right. Will update.

+          {{config.get("langnames", locale)}}
+        </button>
+        <ul id="language-options" class="custom-select-options" aria-hidden="true">

[juliandoucette, 2017/08/22 14:33:41]

NIT: aria-hidden should be added by js because this is not hidden by default
without js

[ire, 2017/09/04 20:28:04]

Done.

+          {% for lang in available_locales %}
+          <li>
+            {{page|linkify(lang)}}
+              {{config.get("langnames", lang)}}
+            </a>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+    <div class="column three-fourths">
+      <nav id="site-footer-nav">
+        <ul>

[juliandoucette, 2017/08/22 14:33:41]

NIT: This list should stretch the footer if it's heavily populated and
JavaScript is disabled.

[ire, 2017/09/04 20:28:06]

It doesn't seem like this list will be heavily populated. I think we can modify
how it works if/when more content is added to it.

[juliandoucette, 2017/09/06 17:48:17]

- I think that we are planning to translate the help center into many languages
- I don't mind if you address this later, as long as you document it in an issue

[ire, 2017/09/08 09:53:32]

I think you meant to leave this comment on the language list? This list only
contains the Legal and Privacy policy, which shouldn't be affected by the number
of translated languages.

+          <li><a href="">Legal</a></li>

[juliandoucette, 2017/08/22 14:33:41]

Note: This will probably be the "legal" or "impressum" page. I don't really care
if you add an href here or not.

[ire, 2017/09/04 20:28:04]

Acknowledged. I will add it when the page is added.

[juliandoucette, 2017/09/06 17:48:17]

Acknowledged.

+          <li><a href="https://adblockplus.org/privacy">Privacy Policy</a></li>
+        </ul>
+      </nav>
+      <small class="muted"><a href="https://adblockplus.org">Adblock Plus</a> is a registered trademark of <a href="https://eyeo.com">eyeo GmbH</a></small>
+    </div>
+  </div>
+</header>