Fix bugs 1376980 & 1379737: Tablet nav and submenus (#4325)

- Tweak media queries to flip 1px sooner (so iPad portrait users get tablet display) - Add a tablet optimized navigation - logo, secondary nav, and profile on top line - main navigation on second line - Submenus now styled properly at every screen size - overrides made for mobile .nav-main and .nav-sec exceptions Fix bug 1376980, fix bug 1379737.
mdn · Jul 25, 2017 · 164a647 · 164a647
1 parent 9888d1f
commit 164a647
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 80 deletions.
diff --git a/kuma/static/styles/components/structure/_mixin_nav.scss b/kuma/static/styles/components/structure/_mixin_nav.scss
@@ -22,7 +22,7 @@
 
     > a {
         display: inline-block;
-        line-height: 48px + ($grid-spacing * 2); // logo height + grid spacing *2
+        line-height: $logo-height + ($grid-spacing * 2); // logo height + grid spacing *2
         padding: 0 ($grid-spacing / 2);
 
         html:not(.no-js) & {

diff --git a/kuma/static/styles/components/structure/nav-main-search.scss b/kuma/static/styles/components/structure/nav-main-search.scss
@@ -63,7 +63,7 @@ search items in .main-nav
         @include vendorize(transition-duration, $default-animation-duration);
 
         &.expanded {
-            width: 300px;
+            width: 500px;
         }
     }
 
@@ -77,19 +77,3 @@ search items in .main-nav
         border-bottom: 1px solid $grey;
     }
 }
-
-@media #{$mq-small-desktop-and-up} {
-    .search-wrap {
-        &.expanded {
-            width: 500px;
-        }
-    }
-}
-
-@media #{$mq-large-desktop-and-up} {
-    .search-wrap {
-        &.expanded {
-            width: 500px;
-        }
-    }
-}
diff --git a/kuma/static/styles/components/structure/nav-main.scss b/kuma/static/styles/components/structure/nav-main.scss
@@ -19,12 +19,34 @@ html:not(.no-js) .nav-main-item > a {
 }
 
 @media #{$mq-tablet-and-up} {
+    .nav-main {
+        min-height: $logo-height + ($grid-spacing * 2);  // logo height + grid spacing *2
+        padding-top: $logo-height + ($grid-spacing * 2);  // logo height + grid spacing *2
+
+        &:after {
+            content: '';
+            position: absolute;
+            top: $logo-height + ($grid-spacing * 2);
+            left: ($gutter-width * -1);
+            width: 100%;
+            padding: 0 $gutter-width;
+            border-top: 5px solid $grey-light;
+        }
+    }
     .nav-main-item {
         @include inline-nav-item();
     }
 }
 
 @media #{$mq-small-desktop-and-up} {
+    .nav-main {
+        min-height: 0;
+        padding-top: 0;
+
+        &:after {
+            display: none;
+        }
+    }
     .nav-main-item {
         @include large-inline-nav-item();
     }

diff --git a/kuma/static/styles/components/structure/nav-sec.scss b/kuma/static/styles/components/structure/nav-sec.scss
@@ -15,7 +15,7 @@ Secondary navigation, site tools and login info
         @include bidi-value(float, right, left);
         position: relative;
         @include bidi-style(right, ($gutter-width * -1), left, auto);
-        z-index: 2;
+        z-index: 3; /* bring it above search trigger in tablet view */
         background-color: #000;
 
         > ul > li {

diff --git a/kuma/static/styles/components/structure/submenu.scss b/kuma/static/styles/components/structure/submenu.scss
@@ -1,8 +1,41 @@
 .submenu {
     display: none;
-    position: relative;
+    position: absolute;
+    z-index: 3;
+    top: 100%;
+    @include bidi-style(left, 0, right, auto);
+    width: 250px; // fallback, IE & Edge
+    padding: 15px;
+    border-top: 5px solid $grey-light;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, .15);
     background-color: #fff;
-    padding: 0 15px 15px;
+
+    &.submenu-cols-2 {
+        width: (250px * 2);
+    }
+
+    .submenu-column {
+        box-sizing: border-box;
+        display: inline-block;
+        vertical-align: text-top;
+        @include bidi-style(padding-right, $grid-spacing, padding-left, 0);
+        width: 250px; // fallback, IE & Edge
+    }
+
+    @supports (width: -webkit-max-content) or (width: -moz-max-content) or (width: max-content) {
+        &,
+        &.submenu-cols-2 {
+            @include vendorize-value(width, max-content);
+        }
+
+        .submenu-column {
+            @include vendorize-value(width, max-content);
+
+            + .submenu-column {
+                @include bidi-style(padding-left, ($grid-spacing * 2), padding-right, $grid-spacing);
+            }
+        }
+    }
 
     .title {
         @include set-heading-font-family;
@@ -12,79 +45,61 @@
     #{$selector-icon} {
         @include bidi-style(margin-left, 5px, margin-right, 0);
     }
+
+    a {
+        display: block;
+        padding: 5px 0;
+        margin-bottom: 5px;
+    }
+
+    #nav-sec & {
+        border-top-color: #000;
+        @include bidi-style(left, auto, right, auto);
+        @include bidi-style(right, 0, left, auto);
+    }
+
+    .page-buttons & {
+        @include bidi-style(left, auto, right, auto);
+        @include bidi-style(right, 0, left, auto);
+        border-top: 5px solid $form-border-color;
+    }
 }
 
 .zone #main-header .submenu a {
     color: $link-color !important; /* stylelint-disable-line declaration-no-important */
 }
 
-@media #{$mq-mobile-and-down} {
-    .submenu-column a {
-        display: block;
-        margin: $content-vertical-spacing 0;
-    }
-}
-
 .submenu-close {
     position: absolute;
     top: 0;
     right: 0;
 }
 
-@media #{$mq-tablet-and-up} {
-    .submenu {
-        position: absolute;
-        top: 100%;
-        @include bidi-style(left, 0, right, auto);
-        z-index: 3;
-        padding-top: 15px;
-        border-top: 5px solid $grey-light;
-        box-shadow: 0 4px 4px rgba(0, 0, 0, .15);
-        width: 250px; // fallback, IE & Edge
-
-        &.submenu-cols-2 {
-            width: (250px * 2);
-        }
-
-        .submenu-column {
-            box-sizing: border-box;
-            display: inline-block;
-            vertical-align: text-top;
-            @include bidi-style(padding-right, $grid-spacing, padding-left, 0);
-            width: 250px; // fallback, IE & Edge
-        }
+/* not mobile first because this is an exeption for main-header only and it's
+easier to strip off the style for the exeption than to add them only for
+everything else */
+@media #{$mq-mobile-and-down} {
+    #nav-sec,
+    .nav-main {
+        .submenu {
+            position: relative;
+            width: 100%;
+            padding: 0;
+            border-top: 0;
+            box-shadow: none;
 
-        @supports (width: -webkit-max-content) or (width: -moz-max-content) or (width: max-content) {
-            &,
-            &.submenu-cols-2 {
-                @include vendorize-value(width, max-content);
+            a {
+                display: block;
             }
 
-            .submenu-column {
-                @include vendorize-value(width, max-content);
+            .submenu-column,
+            &.submenu-cols-2 {
+                width: 100%;
 
                 + .submenu-column {
-                    @include bidi-style(padding-left, ($grid-spacing * 2), padding-right, $grid-spacing);
+                    @include bidi-style(padding-left, 0, padding-right, 0);
                 }
             }
         }
-
-        a {
-            display: block;
-            padding: 5px 0;
-            margin-bottom: 5px;
-        }
-
-        #nav-sec & {
-            border-top-color: #000;
-            @include bidi-style(left, auto, right, auto);
-            @include bidi-style(right, 0, left, auto);
-        }
-
-        .page-buttons & {
-            @include bidi-style(left, auto, right, auto);
-            @include bidi-style(right, 0, left, auto);
-            border-top: 5px solid $form-border-color;
-        }
     }
 }
diff --git a/kuma/static/styles/includes/_vars.scss b/kuma/static/styles/includes/_vars.scss
@@ -184,11 +184,11 @@ break points
 - divide pixels by browser default font size (16px)
 - and multiply by 1em to convert unit to em.
 */
-$max-width-default : (1400px / 16px) * 1em;
-$small-desktop-ends : (1200px / 16px) * 1em;
-$tablet-ends : (1024px / 16px) * 1em;
-$mobile-ends : (768px / 16px) * 1em;
-$small-mobile-ends : (480px / 16px) * 1em;
+$max-width-default : (1399px / 16px) * 1em;
+$small-desktop-ends : (1199px / 16px) * 1em;
+$tablet-ends : (1023px / 16px) * 1em;
+$mobile-ends : (767px / 16px) * 1em;
+$small-mobile-ends : (479px / 16px) * 1em;
 
 $small-desktop-starts : $tablet-ends + .001em;
 $tablet-starts : $mobile-ends + .001em;
@@ -251,6 +251,7 @@ $list-item-spacing : $content-horizontal-spacing;
 
 $icon-margin : ($grid-spacing / 2);
 
+$logo-height: 48px;
 
 /*
 forms