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,16 @@
+<header id="site-header" class="navbar">
+  <div class="navbar-wrapper clearfix">

[juliandoucette, 2017/07/19 18:03:33]

I don't think we need clearfix here?

---

(Unless we decide to move some floating elements above the site-header in the
future?)

[ire, 2017/07/21 10:23:26]

You're right it's not needed. I must have added it when I had a slightly
different implementation.

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

[juliandoucette, 2017/07/19 18:03:33]

I don't think we need the first /img/png/eyeo-help.png in srcset?

[ire, 2017/07/21 10:23:25]

Done.

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

[juliandoucette, 2017/07/19 18:03:32]

I think this control is misleading. This button toggles a menu that contains a
search form and an external link. If our intention is to toggle a menu, I would
suggest a menu icon (hamburger) and alike alt-text. If our intention is to
toggle a search form, I would suggest expanding this search form out of the
search icon to the right (above the site logo which would fade out during).

+      <img src="/img/png/searchIcon.png" srcset="/img/png/searchIcon.png, /img/svg/searchIcon.svg 2x" alt="{{ "Toggle Search Bar" | translate("search-toggle-alt", "Image alt text") }}">

[juliandoucette, 2017/07/19 18:03:32]

NIT: Please use dashes in image names.

[juliandoucette, 2017/07/19 18:03:33]

1x image is poor quality on low DPI screens. I think we can make this crisper
and/or use real text for "eye/o | help" (keeping in mind that we can't promise
fonts will be downloaded quickly or applied).

[ire, 2017/07/21 10:23:25]

Done.

+    </button>
+    <div id="site-search">
+      <? include searchform ?>
+      <a id="product-website-link" href="https://adblockplus.org/">{{ "Adblock Plus" | translate("abp-product-link", "Link") }}</a>

[juliandoucette, 2017/07/19 18:03:32]

NIT: I think this should have a `nav` around it; technically :/

[juliandoucette, 2017/07/19 18:03:33]

Missing icon.

[ire, 2017/07/21 10:23:25]

Done.

+    </div>
+  </div>
+</header>