Issue 5385 - Create Site Header Component for Help Center

includes/layout/header.tmpl

Index: includes/layout/header.tmpl
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/layout/header.tmpl
@@ -0,0 +1,21 @@
+<header id="site-header" class="navbar">

[ire, 2017/08/16 14:41:26]

I spoke with Jeen and she said the header shouldn't be fixed to the top

[juliandoucette, 2017/08/18 15:03:54]

Acknowledged.

+  <div class="navbar-wrapper">
+    <h1 class="site-title">
+      {{ "index" | linkify() }}
+        <img src="/img/png/eyeo-help.png" srcset="/img/svg/eyeo-help.svg 2x" alt="{{ "eyeo Help" | translate("site-title", "Image alt text") }}">

[juliandoucette, 2017/08/18 15:03:52]

NIT: This 1x image quality is unacceptable IMO. I'll send a screenshot that may
or may not demonstrate this. This doesn't need to block the review. But it
wouldn't hurt if we updated it soon.

[juliandoucette, 2017/08/18 15:03:55]

Note: I'm not sure if no textContent within an h1 has a negative impact on a
document outline. Or, if it does, if that matters. I think this is fine for now.
I just wanted to point this out.

[ire, 2017/08/21 15:23:17]

Acknowledged.

[ire, 2017/08/21 15:23:17]

Acknowledged.

+      </a>
+    </h1>
+    <button id="toggle-search-form" class="unstyled tablet-and-mobile-only">

[juliandoucette, 2017/08/18 15:03:54]

Note: It seems super-confusing t ome that the toggle button is a search icon.
I'm not sure if that matters though (sorry if I brought this up before).

[juliandoucette, 2017/08/18 15:03:54]

NIT: The click area of this button is too small IMO. It's currently {h: 40, w:
15} and I think it should be {h: 40, w: 40} (or whatever em equivalent)

[ire, 2017/08/21 15:23:17]

Done.

[ire, 2017/08/21 15:23:18]

Yes it did come up, sorry that I didn't address it.
I think the search icon makes sense because its toggling the search form. A
hamburger menu would imply that there is a navigation there when there isn't.
Also, searching is the primary action a user would want to take, so making it
clear that a search bar would appear (and not just a menu) makes sense to me.

[juliandoucette, 2017/08/21 16:28:38]

Acknowledged.

I agree.

+      <img src="/img/png/search-icon.png" srcset="/img/svg/search-icon.svg 2x" alt="{{ "Toggle Search Bar" | translate("search-toggle-alt", "Image alt text") }}">
+    </button>
+    <div id="site-search">
+      <? include search-form ?>
+      <nav id="product-website-link">
+        <a href="https://adblockplus.org/">
+          {{ "Adblock Plus" | translate("abp-product-link", "Link") }}

[juliandoucette, 2017/08/18 15:03:54]

NIT: I think this text is larger in the mock up.

[ire, 2017/08/21 15:23:17]

Will ask Jeen for font sizes

+          <img src="/img/png/external-icon.png" srcset="/img/svg/external-icon.svg 2x" alt="{{ "External link icon" | translate("external-link-icon", "Image alt text") }}">

[juliandoucette, 2017/08/18 15:03:51]

Note: I'm assuming that you will replace "Image alt text" everywhere.

(Sorry if this was already brought up)

[juliandoucette, 2017/08/18 15:03:53]

NIT: Isn't this the wrong icon? (The one in the spec looks better IMO)

[ire, 2017/08/21 15:23:18]

Discussed with Jeen and she said we should use this icon across the websites

[ire, 2017/08/21 15:23:18]

It wasn't brought up before. I didn't intent to replace it. Isn't this the
"content" part of the identifier, which is supposed to describe what type of
string it is (e.g. heading, paragraph, image alt text)?

[juliandoucette, 2017/08/21 16:28:38]

Yup. I seem to have mistaken this for the alt text itself.... Wow :D

[ire, 2017/08/22 12:15:15]

Haha :p

+        </a>
+      </nav>
+    </div>
+  </div>
+</header>