SAAS-985 - Port sandwich menu to showbuilder branch

airtime_mvc/application/layouts/scripts/layout.phtml

@@ -50,20 +50,29 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 
     </script>
 
-
     <div id="nav">
         <div class="logo"></div>
         <div class="personal-block solo">
             <ol>
-              <li>
-                <!-- <span class="trial-box-button"><a title="Billing" href=<?php echo $baseUrl . 'billing/upgrade'?>>Upgrade</a></span>&nbsp;-->
-                <a id="current-user" href=<?php echo $baseUrl . "User/edit-user"?>><span class="name"><?php echo $this->escape($this->loggedInAs()); ?></span></a>
-                 | <a href=<?php echo $baseUrl . "Login/logout"?>><?php echo _("Logout")?></a>
-              </li>
+                <li>
+                    <!-- <span class="trial-box-button"><a title="Billing" href=<?php echo $baseUrl . 'billing/upgrade'?>>Upgrade</a></span>&nbsp;-->
+                    <a id="current-user" href=<?php echo $baseUrl . "user/edit-user"?>><span class="name"><?php echo $this->escape($this->loggedInAs()); ?></span></a>
+                    | <a href=<?php echo $baseUrl . "login/logout"?>><?php echo _("Logout")?></a>
+                </li>
             </ol>
         </div>
+        <div id="mobile-nav">
+            <div class="menu-btn" id="menu-btn">
+                <div></div>
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+        <div class="responsive-menu">
+            <?php echo $this->navigation()->menu() ?>
+        </div>
 
-        <?php echo $this->navigation()->menu() ?>
         <div style="clear:both;"></div>
     </div>
     <?php endif; //suspended ?>

airtime_mvc/public/css/_showbuilder.css

@@ -140,7 +140,7 @@ div.ColVis_collectionBackground {
 @media screen and (max-width: 780px) {
     .wrapper {
         height: 100% !important; /* Correct for margins */
-        padding: 0 15px 15px !important;
+        padding: 0 !important;
     }
 }
 
@@ -394,6 +394,8 @@ div.ColVis_collectionBackground {
     flex: 1 auto;
     margin-right: 10px;
     text-align: center;
+
+    min-width: 555px;
 }
 
 #media_type_nav div {

airtime_mvc/public/css/styles.css

@@ -340,6 +340,41 @@ fieldset {
         width: 25%;
     }
 }
+@media screen and (max-width: 970px) {
+    #nav {
+        height: inherit;
+        overflow-y: visible;
+    }
+    #nav .responsive-menu {
+        position: absolute;
+        left: 0;
+        background: #353535;
+        width: 120px;
+        display: none;
+
+        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+    }
+    .mobile-nav {
+        display: block;
+    }
+    #menu-btn {
+        width: 24px;
+
+        margin: 0;
+
+        cursor: pointer;
+    }
+    #menu-btn span {
+        display: block;
+        width: 19px;
+        height: 3px;
+        margin: 4px 2px;
+        background: #efefef;
+        z-index: 99;
+    }
+}
 @media screen and (max-width: 920px) {
     .now-playing-block {
         width: 50%;
@@ -370,17 +405,6 @@ fieldset {
         display: -webkit-flex;
         width: 110px;
     }
-    .personal-block.solo {
-        float: none;
-        text-align: left;
-    }
-    .personal-block.solo ol {
-        padding-left: 12px;
-    }
-    .logo {
-        float: none;
-        margin-left: 12px;
-    }
 }
 @media screen and (max-width: 380px) {
     .time-info-block {

airtime_mvc/public/js/airtime/common/common.js

@@ -186,3 +186,11 @@ function getUsabilityHint() {
         }
     });
 }
+
+$(document).mouseup(function (e) {
+    var mb = $("#menu-btn"),
+        w = $(window).width();
+    if (!mb.is(e.target) && mb.has(e.target).length === 0 && w <= 970) {
+        $('#nav .responsive-menu').slideUp();
+    }
+});

airtime_mvc/public/js/airtime/dashboard/dashboard.js

@@ -480,6 +480,13 @@ function setCurrentUserPseudoPassword() {
     $('#cu_passwordVerify').val("xxxxxx");
 }
 
+$(window).resize(function() {
+    /* If we don't do this, the menu can stay hidden after resizing */
+    if ($(this).width() > 970) {
+        $("#nav .responsive-menu").show();
+    }
+});
+
 $(document).ready(function() {
     if ($('#master-panel').length > 0)
         init();
@@ -502,4 +509,7 @@ $(document).ready(function() {
     // text. This differs depending on the language setting
     $('#popup-link').css('width', $('.jp-container h1').css('width'));
 
+    $('#menu-btn').click(function() {
+        $('#nav .responsive-menu').slideToggle();
+    });
 });