Merge branch 'mobile-menu' into 'master'

Mobile menu

Hi Rodrigo this issues has been solved.

- Documentation menu is missing, the bar appears on the footer, but it has no interaction

See merge request !130

source/_themes/clearlinux/header.html

@@ -13,31 +13,28 @@
         </div>
         <div class="right">
           <div class="mobile-menu"></div>
-                        <div class="region region-header">
-    <div id="block-system-main-menu" class="block block-system block-menu">
-
-
-  <ul class="menu"><li class="first leaf"><a href="https://download.clearlinux.org" title="Downloads" target="_blank">Downloads</a></li>
-<li class="collapsed"><a href="/features" title="Features">Features</a></li>
-<li class="collapsed"><a href="/documentation" title="Documentation" class="active">Documentation</a></li>
-</ul>
-</div>
-<div id="block-menu-menu-get-involved" class="block block-menu">
-
-        <h4>Get Involved</h4>
-
-  <ul class="menu">
-    <li class="first leaf"><a href="http://freenode.net/" target="_blank">IRC #clearlinux</a></li>
-<li class="leaf"><a href="https://lists.clearlinux.org/mailman/listinfo/dev">Mailing list</a></li>
-<li class="last leaf"><a href="/blogs">Blogs</a></li>
-</ul>
-</div>
-  </div>
+            <div class="region region-header">
+              <div id="block-system-main-menu" class="block block-system block-menu">
+                <ul class="menu">
+                  <li class="first leaf"><a href="https://download.clearlinux.org" title="Downloads" target="_blank">Downloads</a></li>
+                  <li class="collapsed"><a href="/features" title="Features">Features</a></li>
+                  <li class="collapsed"><a href="/documentation" title="Documentation" class="active">Documentation</a></li>
+                </ul>
+              </div>
+              <div id="block-menu-menu-get-involved" class="block block-menu">
+                <h4>Get Involved</h4>
+                <ul class="menu">
+                  <li class="first leaf"><a href="http://freenode.net/" target="_blank">IRC #clearlinux</a></li>
+                  <li class="leaf"><a href="https://lists.clearlinux.org/mailman/listinfo/dev">Mailing list</a></li>
+                  <li class="last leaf"><a href="/blogs">Blogs</a></li>
+                </ul>
+              </div>
+            </div>
                     <ul class="nav-tools">
             <li><a href="/search"><i class="fa fa-search"></i></a></li>
             <!--<li><i class="fa fa-mail-forward"></i></li>-->
           </ul>
-
+        </div>
       </div>
     </div>
-  </div></header>
+</header>

source/_themes/clearlinux/static/css/overrides.css

@@ -159,12 +159,27 @@ input[type=submit], input[type=reset]{
   margin: 0px;
 }
 
+footer .mobile-menu {
+  display: none;
+}
+
 footer .menu-name-menu-social-media {
+  position:  relative;
+  float: left;
+}
+
+@media only screen and (min-width: 990px) {
+  footer .menu-name-menu-social-media {
     text-align: left;
     margin-right: 15px;
     position: absolute;
     right: 0;
     top: 25px;
+  }
+}
+/* Menu mobile */
+.project-header .left {
+  margin-left: 40px;
 }
 
 .section-documentation table {
@@ -195,3 +210,59 @@ footer .menu-name-menu-social-media {
   width: 100%;
   display: block;
 }
+
+.project-header .right {
+    display: block;
+    float: left;
+}
+
+header .right .mobile-menu {
+  display: block;
+  margin-top: -40px;
+}
+
+header .region-header {
+  display: none
+}
+
+header.menu-open .right{
+  border-top: none;
+  background-color: transparent;
+  position: relative;
+}
+
+header.menu-open .right .mobile-menu {
+  display: block;
+  margin-top: -40px;
+}
+
+header.menu-open .region-header{
+  display: block;
+  position: relative;
+  left: 0px;
+  top: 20px;
+  border-top: 2px solid #000;
+  background-color: #2d3237;
+  display: block;
+  -webkit-box-shadow: 4px 4px 5px 0 rgba(45, 50, 55, 0.3);
+  -moz-box-shadow: 4px 4px 5px 0 rgba(45, 50, 55, 0.3);
+  box-shadow: 4px 4px 5px 0 rgba(45, 50, 55, 0.3);
+}
+
+@media only screen and (min-width: 1200px) {
+  .project-header .left {
+    margin-left: 0px;
+  }
+
+  .project-header .right {
+      float: right; 
+  }
+
+  header .right .mobile-menu, header.menu-open .right .mobile-menu {
+    display: none;
+  }
+
+  header .region-header {
+    display: block
+  }
+}

source/_themes/clearlinux/static/js/project.js

@@ -35,7 +35,7 @@ jQuery(document).ready(function($){
   });
 
   $('header .mobile-menu').click(function(){
-    $(this).parent().toggleClass('menu-open');
+    $('header').toggleClass('menu-open');
     $('.o1-logo-container-mobile').toggleClass('menu-open');
     $('body').toggleClass('menu-opened');
   });
@@ -63,6 +63,13 @@ jQuery(document).ready(function($){
     }
   }
 
+  //Hidde mobile menu
+  $(window).resize(function(event) {
+    var w = $(window).width();
+    if(w > 1199) {
+      $('header').removeClass('menu-open');
+    }
+  });
   //Animates logo on scroll
   $('body, html').scroll(onScroll);
   $(window).scroll(onScroll);