feat(mobile/landscape): Makes disappear the header menu

sass/css/_layout.scss

@@ -224,4 +224,15 @@ img.kf25 {
 
 // Extra large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) {
+}
+
+/*
+  ##Device = Low Resolution Tablets, Mobiles (Landscape)
+  ##Screen = B/w 481px to 767px
+*/
+@media (min-width: 481px) and (max-width: 767px) {
+
+  #root-shop, #root-shop>div {
+    height: 100%;
+  }
 }

static/css/order-hardware.css

@@ -184,7 +184,8 @@
   }
 
   #root-shop, #root-shop>div {
-    height: calc(100vh - 50px);
+    /*height: calc(100vh - 50px);*/
+    height: 100%;
   }
 
   #root-shop .productItem {
@@ -255,8 +256,10 @@
     border-top-right-radius: 30px;
     width: 80px;
     padding: 5px 0 5px 10px;
-    margin-bottom: 15px;
+    margin-bottom: -25px;
     margin-left: -1.3rem;
+    position: relative;
+    z-index: 1;
   }
 
   #root-shop .mobileBtnDisplaySideMenu button,
@@ -296,6 +299,7 @@
     background-color: rgba(0, 0, 0, .8);
     top: 0;
     bottom: 0;
+    z-index: 10;
   }
 
   #root-shop .layout>aside.aside {
@@ -321,6 +325,10 @@
     flex: 1;
     max-width: 100%;
   }
+
+  .should-disappear {
+    display: none!important;
+  }
 }
 /*
   ##Device = Most of the Smartphones Mobiles (Portrait)

static/js/shop.jsx

@@ -756,14 +756,6 @@ class OrderPanel extends React.PureComponent {
     return (
       <section className="panel">
 
-        {isMobile ? (
-          <div className="mobileBtnDisplaySideMenu">
-            <button onClick={onClickToggleMobileSideMenu}>
-              <img src="/images/shop/icon-add.svg" alt="add" />
-            </button>
-          </div>
-        ) : null}
-
         <h2>{title}</h2>
 
         <div className="control">
@@ -772,6 +764,14 @@ class OrderPanel extends React.PureComponent {
           {crateMode}
         </div>
 
+        {isMobile ? (
+          <div className="mobileBtnDisplaySideMenu">
+            <button onClick={onClickToggleMobileSideMenu}>
+              <img src="/images/shop/icon-add.svg" alt="add" />
+            </button>
+          </div>
+        ) : null}
+
         {crate}
 
         <section className="summary">

templates/_base.html

@@ -49,7 +49,7 @@
 
     <!-- HEADER -->
 
-    <div class="container-fluid shadow th sticky-top">
+    <div class="container-fluid container-header shadow th sticky-top">
 
       <header class="container">
 
@@ -83,9 +83,9 @@
                     <div class="dropdown-menu shadow-none shadow-lg text-left text-lg-left" aria-labelledby="navbarDropdown">
                       {% for tmp_page in subsection.pages %}
                         {% if tmp_page.extra.menu_item and tmp_page.extra.menu_item == "th1" %}
-                        <a class="dropdown-item pt-2 pb-2 pt-sm-3 pb-sm-3 mx-4 mt-2 mb-2 mt-sm-3 mb-sm-3 w-auto btn btn-primary btn-inversed {% if current_path == tmp_page.path %}active{% endif %}" href="{{ tmp_page.permalink }}">{{ tmp_page.title }}</a>
+                        <a class="dropdown-item pt-2 pb-2 mx-4 mt-2 mb-2 mt-sm-3 mb-sm-3 w-auto btn btn-primary btn-inversed {% if current_path == tmp_page.path %}active{% endif %}" href="{{ tmp_page.permalink }}">{{ tmp_page.title }}</a>
                         {% else %}
-                        <a class="dropdown-item pt-2 pb-2 pt-sm-3 pb-sm-3 {% if current_path == tmp_page.path %}active{% endif %}" href="{{ tmp_page.permalink }}">{{ tmp_page.title }}</a>
+                        <a class="dropdown-item pt-2 pb-2 {% if current_path == tmp_page.path %}active{% endif %}" href="{{ tmp_page.permalink }}">{{ tmp_page.title }}</a>
                         {% endif %}
                       {% endfor %}
                     </div>
@@ -179,7 +179,7 @@
 
     <!-- <script src="{{ get_url(path='js/as.js', cachebust=true) }}"></script> -->
 
-    <script src="{{ get_url(path='js/jquery-3.3.1.slim.min.js', cachebust=true) }}"></script>
+    <script src="{{ get_url(path='js/jquery-3.3.1.min.js', cachebust=true) }}"></script>
     <script src="{{ get_url(path='js/popper-1.14.7.min.js', cachebust=true) }}"></script>
     <script src="{{ get_url(path='js/bootstrap-4.3.1.min.js', cachebust=true) }}"></script>
 
@@ -209,6 +209,29 @@
       });
     </script>
 
+    <script>
+      (function () {
+        var mywindow = $(window);
+        var mypos = mywindow.scrollTop();
+        var up = false;
+        var newscroll;
+        var navbarSupportedContent = $('#navbarSupportedContent');
+        mywindow.scroll(function () {
+          newscroll = mywindow.scrollTop();
+          if (!navbarSupportedContent.hasClass('show')) {
+            if (newscroll > (mypos + 30) && !up) {
+              $('.container-header').stop().fadeOut();
+              up = !up;
+            } else if(newscroll < (mypos + 30) && up) {
+              $('.container-header').stop().fadeIn();
+              up = !up;
+            }
+          }
+          // mypos = newscroll;
+        });
+      })();
+    </script>
+
     {% block js %}
     {% endblock %}