Issue 5385 - Create Site Header Component for Help Center

includes/search-form.tmpl

Index: includes/search-form.tmpl
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/search-form.tmpl
@@ -0,0 +1,8 @@
+<form id="search-form" action="https://duckduckgo.com" method="GET">

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

Note: Regarding size differences between the implementation and the mockup:
These are not black and white because the images provided are obviously too big
(the full width of the design cannot fit on a standard loptop screen at 100%
zoom). I think we should request a 1280x800 rendering. But this kind of
polishing doesn't have to block the review. We can push without addressing NITs
as long as we document them in low priority tickets.

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

Ack. Will address this in a different issue

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

Acknowledged.

+  <label for="search" class="sr-only">{{ "Search Adblock Plus Help" | translate("search-form-label", "Label") }}</label>
+  <input id="search" name="q" type="search" placeholder="{{ "Search Adblock Plus Help" | translate("search-form-label", "Label") }}">

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

NIT: The placeholder text is not properly centered on my screen [debian,
chromium, lowdpi]

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

Centered within the input? It isn't supposed to be centered, it is aligned left.

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

Sorry. I meant vertically.

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

Acknowledged.

+  <input type="hidden" name="sites" value="adblockplus.org">

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

NIT: I think there is more border radius in the mockup.

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

Done. It was 1px more round :)

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

Acknowledged.

I wasn't sure.

+  <button type="submit">
+    <img src="/img/png/search-icon.png" srcset="/img/svg/search-icon.svg 2x" alt="{{ "Search" | translate("search-icon-alt", "Image alt text") }}">
+  </button>
+</form>