fix(component): megamenu

optimisations
Orange-OpenSource · Mar 31, 2016 · f035abf · f035abf
1 parent f7e9c1f
commit f035abf
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 27 deletions.
diff --git a/docs-orange/assets/js/src/application-orange.js b/docs-orange/assets/js/src/application-orange.js
@@ -11,7 +11,6 @@
 
       // init megamenu demo
       $('.mega-menu.panel').megamenu();
-      console.log('init');
 
       $(window).scroll(function () {
         if ($(this).scrollTop() > window.innerHeight) {

diff --git a/docs-orange/examples/orange-news/index.html b/docs-orange/examples/orange-news/index.html
@@ -67,10 +67,10 @@
             </nav>
 
             <nav class="navbar navbar-dark">
-                <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
+                <!--<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
                     <span class="sr-only">toggle navigation</span>
                     <span class="icon-menu"></span>
-                </button>
+                </button>-->
                 <div class="container" >
                     <a class="navbar-brand"><img src="images/logo-orange.jpg" alt='Back to homepage' title='Back to homepage'/></a>
                     <ul class="nav navbar-nav collapse navbar-toggleable-xs" id="collapsingNavbar">
@@ -93,6 +93,12 @@
                                 <span class="icon-search" aria-hidden="true"></span>
                             </a>
                         </li>
+                        <li class="nav-item">
+                            <a href="#" class="nav-link icon hidden-sm-up" data-toggle="collapse" data-target="#collapsingNavbar">
+                                <span class="sr-only">open menu</span>
+                                <span class="icon-menu" aria-hidden="true"></span>
+                            </a>
+                        </li>
                     </ul>
                 </div>
             </nav>

diff --git a/js/src/collapse.js b/js/src/collapse.js
@@ -378,6 +378,10 @@ const Collapse = (($) => {
     Collapse._jQueryInterface.call($(target), config)
   })
 
+  $(() => {
+    $('.o-accordion .panel-heading h4 a').prepend('<div class=arrow></div>')
+  })
+
 
   /**
    * ------------------------------------------------------------------------

diff --git a/scss/_o-megamenu.scss b/scss/_o-megamenu.scss
@@ -149,12 +149,13 @@
 @include media-breakpoint-down(xs) {
   .mega-menu {
     position: absolute;
-    top: calc(#{$font-size-h1} * 2);
-    z-index: 110;
+    top: calc(#{$font-size-h1} * 2 + 3px);
+    z-index: 120;
     width: 100%;
     font-size: $font-size-h5;
 
     .container {
+      max-width: none;
       margin: 0;
 
       .row {
@@ -233,7 +234,6 @@
 }
 
 .search-bar {
-//   padding: 1.25rem 0;
   background-color: $brand-orange-black;
   border-top: 1px solid $gray-dark;
 

diff --git a/scss/_o-navbar.scss b/scss/_o-navbar.scss
@@ -38,7 +38,7 @@
       margin-top: calc((#{$navbar-height} - #{$font-size-h4}) / 2);
 
       span[class^="icon-"] {
-        font-size: $font-size-h4;
+        font-size: calc(#{$font-size-h4} - 1px); // remove 1px to fit
         font-weight: $brand-font-weight-normal;
       }
     }
@@ -126,6 +126,11 @@
   .navbar {
     min-height: $navbar-height-sm;
 
+    .container {
+      max-width: none;
+      margin: 0;
+    }
+
     .navbar-toggleable-xs {
       position: absolute;
       top: $navbar-height-sm;
@@ -135,18 +140,11 @@
       margin: 0;
       background-color: $brand-orange-black;
 
-    //   &.in {
-    //     padding-top: $navbar-height-sm;
-    //   }
-
-    //   &.collapsing{
-    //     transition: none;
-    //   }
-
       .nav-item {
         display: block;
         float: none;
         padding: calc((#{$font-size-h1} - #{$font-size-h5}) / 2) 0;
+        padding-left: .625rem;
         margin-left: 0;
         font-size: $font-size-h5;
         line-height: 1;
@@ -173,10 +171,6 @@
 
         &:first-child {
           margin-left: 0;
-
-        //   .nav-link {
-        //     margin-top: 0;
-        //   }
         }
       }
 
@@ -224,9 +218,8 @@
 }
 
 .navbar-toggler {
-  @include pull-right;
   padding: .625rem;
-  font-size: $font-size-h4;
+  font-size: calc(#{$font-size-h4} - 1px);
   background-color: transparent;
   background-image: none;
   border: 0;
@@ -319,10 +312,4 @@
       margin-top: 1.75rem;
     }
   }
-
-//   > li {
-//     > a {
-//       font-size: $font-size-base;
-//     }
-//   }
 }