Issue 5385 - Create Site Header Component for Help Center

static/scss/layout/_header.scss

Index: static/scss/layout/_header.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/scss/layout/_header.scss
@@ -0,0 +1,71 @@
+// This file is part of help.eyeo.com.
+// Copyright (C) 2017 Eyeo GmbH
+//
+// help.eyeo.com is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// help.eyeo.com is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with help.eyeo.com.  If not, see <http://www.gnu.org/licenses/>.
+
+#site-header
+{
+  position: fixed;

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

Where is it specified that this header is fixed?

---

(I think that our navbars should be consistently fixed or not across websites.
And I would suggest not fixed personally.)

(If we do decide that it should be fixed then I would suggest using a more
generic class in `navbar.scss` e.g. `.navbar-fixed`)

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

It wasn't specified, I guess I made an assumption that it was supposed to be
fixed.

I'm not sure putting it in the navbar will work, since the navbar class is also
used in the footer (maybe this was a poor choice of class name? :/)

[juliandoucette, 2017/07/24 21:08:09]

I meant in an additional class e.g.

<nav class="navbar navbar-fixed-top">

[ire, 2017/08/10 16:54:43]

Done.

+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: $site-header-height;

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

Is this height specified? It doesn't seem to line up with the screenshots in the
spec (which seem rather large).

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

It looks about right to me. Perhaps we should consult Jeen for some actual
figures to be certain. 

[juliandoucette, 2017/07/24 21:08:09]

Agreed.

+  font-size: $small-font;

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

This doesn't seem to apply to anything?

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

The font-size? It applies to all text in the header, e.g. the
#product-website-link

[juliandoucette, 2017/07/24 21:08:09]

Nope... #product-website-link is inheriting it's font-size from your CSS reset
:D

+  line-height: 40px;

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

It seems like this is supposed to match the height of the logo and searchform.
If so, I would suggest using a variable.

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

Done.

+}
+
+.site-title
+{
+  float: left;
+  margin-right: 50px;

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

It seems like this should correspond to some sort of standard spacing unit
throughout this website.

+}
+
+.site-title img
+{
+  height: 25px;

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

Is it just me, or does this look bigger (less space above/below) in the spec :/ 

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

This also looks pretty accurate to be but will ask Jeen for actual figures. 

[juliandoucette, 2017/07/24 21:08:09]

Agreed.

+  vertical-align: middle;
+}
+
+#toggle-searchform
+{
+  float: right;
+  line-height: 40px;
+  cursor: pointer;
+
+  img
+  {
+    width: 15px;
+    vertical-align: middle;
+  }
+}
+
+html[dir="rtl"]

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

I suggest separating rtl styles ~like we separate media queries. I think they
are more readable when grouped together than at the bottom of files.

---

(This applies to other files too)

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

This is what I've done already? Or is the issue with the .no-js styles below?
I'll move them above. 

[juliandoucette, 2017/07/24 21:08:09]

In this specific case I'm suggesting that you move html[dir="rtl"] .site-title
above #toggle-searchform.

[ire, 2017/08/10 16:54:43]

Done.

+{
+  .site-title
+  {
+    float: right;
+    margin-right: 0;
+    margin-left: 50px;
+  }
+
+  #toggle-searchform
+  {
+    float: left;
+  }
+}
+
+.no-js #toggle-searchform
+{
+  display: none;
+}