Issue 5385 - Create Site Header Component for Help Center

static/scss/layout/_navbar.scss

 // 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/>.
 
 .navbar
 {
-  padding-top: 12px;

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

I suggest using em here so that this padding scales with font-size.

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

This will interfere with the fixed height. However, if we aren't making the
header position:fixed then it doesn't matter. We will discuss in a meeting.

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

Acknowledged.

Good point.

-  padding-bottom: 12px;
+  padding-top: $md;
+  padding-bottom: $md;
   color: $white;

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

I think it makes sense to implement generic things like `.navbar` in
website-defaults. With that in mind, I suggest that color is too specific for
this class. I would suggest applying it to #site-header or something like
.navbar-inverse, .navbar-black, etc. The same goes for color properties within.

   background-color: $black;
 }
 
 .navbar a
 {
   color: $white;
 }
 
 .navbar-wrapper

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

Why .navbar-wrapper and not a more generic .container? (Assuming you are
familiar with this pattern.)

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

Because this container is specific to the navbar only. If I were to use
container, the selector would be `.navbar .container` instead of just
`.navbar-container`/`.navbar-wrapper`. 

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

What is specific about the navbar's container? Aren't the navbar's contents
contained in the same width as the primary content?

 {
   width: $navbar-width;

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

Where is this width specified?

---

(I think it's too small)

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

It isn't specified anywhere. I used the $dekstop-width from website-defaults
plus some extra spacing because the navbar extends further than the content. 

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

They look the same to me?

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

In this image
(https://bytebucket.org/adblockplus/spec/raw/6eb0fc6e906a60ac76d93cf1ba9ae770e...),
the width of the navbar seems to be wider than the width of the content. 

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

I spoke with Jeen and she confirmed that the navbar width should be wider than
the content width

-  max-width: $content-max-width;

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

Where is this max-width specified?

---

(And why use effectively 10% margin left/right < $navbar-width instead of e.g.
1em)

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

It isn't specified anywhere. (Are these values supposed to be specified in the
spec or somewhere?)

Using percentages in this way is just my personal preference. It feels more
responsive to me because the size adapts as the screen size changes. Though if
the way you mentioned is the preferred method, I'm happy to change it.

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

On the one hand: yes
On the other hand: that which is not specified is open to interpretation
What matters to me: that we support the same widths across websites
This relates to one of my comments in another file. I prefer actual
margin/padding personally. But I'd rather base the decision on something other
than our personal preferences if possible.

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

Agreed. I haven't been able to find any objective evidence that one way is
better than the other. Have you got any particular justifications?

If there are no objective reasons for either way, then I'm happy to go with your
way for consistency with other sites. 

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

Done.

+  max-width: 100%;
   margin-right: auto;
   margin-left: auto;
+  padding-right: $md;
+  padding-left: $md;
 }
+
+// Navbar Collapse
+
+.navbar-collapse
+{
+  display: none;
+  clear: both;
+
+  &.open
+  {
+    display: block;
+  }
+
+  @media (min-width: $tablet-breakpoint)
+  {
+    display: block;
+    clear: none;
+    width: auto;
+  }
+}
+
+.no-js .navbar-collapse
+{
+  display: block;
+}