includes/layout/footer.tmpl - Issue 29488555: Issue 5406 - Create Site Footer Component for Help Center

Delta Between Two Patch Sets: includes/layout/footer.tmpl

Issue 29488555: Issue 5406 - Create Site Footer Component for Help Center (Closed)

Left Patch Set: Rebase Created Aug. 11, 2017, 4:08 p.m.

Right Patch Set: Remove langnames commit, use website-default breakpoint variables Created Sept. 18, 2017, 3:09 p.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
1 <footer id="site-footer" class="navbar">	1 <footer id="site-footer" class="navbar">

2 <div class="navbar-wrapper row">	2 <div class="navbar-wrapper row">

3 <div class="column one-fourth">	3 <div id="site-footer-locales" class="column one-fourth">

4 <div class="custom-select">	4 <div class="custom-select">

5 <button class="custom-select-selected" aria-expanded="false" aria-contro ls="language-options">	5 <button class="custom-select-selected" aria-expanded="false" aria-haspop up="true">
juliandoucette 2017/08/22 14:33:41 NIT: I think this should be hidden by default and 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 Show quoted text On 2017/08/22 14:33:41, juliandoucette wrote: > NIT: I think this should be hidden by default and shown when JS is enabled 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 Show quoted text On 2017/09/04 20:28:06, ire wrote: > 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 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. Show quoted text On 2017/09/06 17:48:17, juliandoucette wrote: > On 2017/09/04 20:28:06, ire wrote: > > 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 > > 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). This makes sense, you're right. Will update.
6 {{config.get("langnames", locale)}}	6 {{ config.get("langnames", locale) }}

7 </button>	7 </button>

8 <ul id="language-options" class="custom-select-options" aria-hidden="tru e">	8 <ul class="custom-select-options" aria-label="{{ "Select Language" \| tra nslate("language-options-label", "Label") }}" role="menu" tabindex="-1">
juliandoucette 2017/08/22 14:33:41 NIT: aria-hidden should be added by js because thi 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. Show quoted text On 2017/08/22 14:33:41, juliandoucette wrote: > NIT: aria-hidden should be added by js because this is not hidden by default > without js Done.
9 {% for lang in available_locales %}	9 {% for available_locale in available_locales %}

10 <li>	10 <li role="none">

11 {{page\|linkify(lang)}}	11 {{ page \| linkify(available_locale) }}{{ config.get("langnames", ava ilable_locale) }}</a>

12 {{config.get("langnames", lang)}}

13 </a>

14 </li>	12 </li>

15 {% endfor %}	13 {% endfor %}

16 </ul>	14 </ul>

17 </div>	15 </div>

18 </div>	16 </div>

19 <div class="column three-fourths">	17 <div id="site-footer-nav" class="column three-fourths">

20 <nav id="site-footer-nav">	18 <nav>

21 <ul>	19 <ul class="horizontal-list">
juliandoucette 2017/08/22 14:33:41 NIT: This list should stretch the footer if it's h 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 pop Show quoted text On 2017/08/22 14:33:41, juliandoucette wrote: > NIT: This list should stretch the footer if it's heavily populated and > JavaScript is disabled. 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 he Show quoted text On 2017/09/04 20:28:06, ire wrote: > 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. - 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 lan Show quoted text On 2017/09/06 17:48:17, juliandoucette wrote: > On 2017/09/04 20:28:06, ire wrote: > > 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. > > - 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 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.
22 <li><a href="">Legal</a></li>	20 <li><a href="">{{ "Legal" \| translate("footer-nav-link-1", "Navigation link") }}</a></li>
juliandoucette 2017/08/22 14:33:41 Note: This will probably be the "legal" or "impres 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 Show quoted text On 2017/08/22 14:33:41, juliandoucette wrote: > Note: This will probably be the "legal" or "impressum" page. I don't really care > if you add an href here or not. Acknowledged. I will add it when the page is added. juliandoucette 2017/09/06 17:48:17 Acknowledged. Show quoted text On 2017/09/04 20:28:04, ire wrote: > On 2017/08/22 14:33:41, juliandoucette wrote: > > Note: This will probably be the "legal" or "impressum" page. I don't really > care > > if you add an href here or not. > > Acknowledged. I will add it when the page is added. Acknowledged.
23 <li><a href="https://adblockplus.org/privacy">Privacy Policy</a></li>	21 <li><a href="https://adblockplus.org/privacy">{{ "Privacy Policy" \| tr anslate("footer-nav-link-2", "Navigation link") }}</a></li>

24 </ul>	22 </ul>

25 </nav>	23 </nav>

26 <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>	24 <small class="muted">

	25 {{ "<a href=\"https://adblockplus.org\">Adblock Plus</a> is a registered trademark of <a href=\"https://eyeo.com\">eyeo GmbH</a>" \| translate("footer-tr ademark-notice", "Paragraph") }}

	26 </small>

27 </div>	27 </div>

28 </div>	28 </div>

29 </header>	29 </footer>

LEFT	RIGHT