Layout and styling fixes for sub-menu layout pages

airtime_mvc/application/controllers/ShowbuilderController.php

@@ -38,6 +38,7 @@ class ShowbuilderController extends Zend_Controller_Action
         $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.ColVis.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.colReorder.min.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.FixedColumns.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.FixedHeader.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.columnFilter.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
 
         $this->view->headScript()->appendFile($baseUrl.'js/blockui/jquery.blockUI.js?'.$CC_CONFIG['airtime_version'],'text/javascript');

airtime_mvc/application/layouts/scripts/page-sub-menu.phtml

@@ -106,8 +106,14 @@
 
 
 <div class="wrapper wrapper_panel" id="content">
-    <div style="display: flex; width: 100%">
+<!--    <div style="display: flex; width: 100%">-->
-        <div style="flex: 0 140px;"> <!-- placeholder object so we can fixed position the submenu -->
+<!--        <div id="sub-menu-content-panel">-->
+            <?php echo $this->layout()->content ?>
+<!--        </div>-->
+<!--    </div>-->
+</div>
+<!-- Since we're position fixing the submenu, we don't need it to be inside the page wrapper -->
+<div id="sub-menu-wrapper"> <!-- placeholder object so we can fixed position the submenu -->
     <div id="sub-menu">
         <h3><?php //parent_page is passed in from controller
             echo $this->layout()->parent_page; ?></h3>
@@ -118,11 +124,6 @@
         ?>
     </div>
 </div>
-        <div id="sub-menu-content-panel">
-            <?php echo $this->layout()->content ?>
-        </div>
-    </div>
-</div>
 
 <script id="tmpl-pl-cues" type="text/template">
     <div class="waveform-cues">

airtime_mvc/public/css/_showbuilder.css

@@ -1,34 +1,3 @@
-div.ColVis_collectionBackground {
-    background-color: transparent;
-}
-
-/* Scroll bars */
-
-::-webkit-scrollbar {
-    width: 7px;
-    height: 7px;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent none;
-}
-
-.wrapper::-webkit-scrollbar-track {
-    background-color: rgba(255, 93, 26, .2);
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.75);
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: #ff5d1a;
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.75);
-}
-
-::-webkit-scrollbar-corner {
-    background-color: #000;
-}
-
 /* Show Builder*/
 
 .content-pane {
@@ -581,6 +550,10 @@ li.ui-state-default {
     margin: 0;
 }
 
+div.ColVis_collectionBackground {
+    background-color: transparent;
+}
+
 .ColVis_collection.TableTools_collection.ui-buttonset.ui-buttonset-multi {
     max-height: 50%;
     overflow: auto;

airtime_mvc/public/css/styles.css

@@ -60,13 +60,42 @@ select {
     border:1px solid #9d9d9d;
 }
 
+/* Scroll bars */
 
+::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent none;
+}
+
+.wrapper::-webkit-scrollbar-track {
+    background-color: rgba(255, 93, 26, .2);
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.75);
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #ff5d1a;
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.75);
+}
+
+::-webkit-scrollbar-corner {
+    background-color: #000;
+}
+
+.wrapper_panel::-webkit-scrollbar-corner {
+    background-color: #242424;
+}
 
 /* Fix for Firefox */
 .logo {
     position: absolute;
     float: left;
-    left: 22px;
+    left: 23px;
     top: 30px;
     width: 100px;
     height: 46px;
@@ -253,7 +282,7 @@ select {
 .now-playing-block {
     width:35%;
     background: url(images/masterpanel_spacer.png) no-repeat 0 0;
-    margin-left: 149px;
+    margin-left: 152px;
     padding-left: 14px;
 }
 .show-block {
@@ -373,21 +402,21 @@ select {
         width: 30%;
         /*display: none;*/
     }
-    #nav li.top {
+    /*#nav li.top {*/
-        display: -webkit-box;
+        /*display: -webkit-box;*/
-        display: -moz-box;
+        /*display: -moz-box;*/
-        display: -ms-flexbox;
+        /*display: -ms-flexbox;*/
-        display: -webkit-flex;
+        /*display: -webkit-flex;*/
-        display: flex;
+        /*display: flex;*/
-        width: 110px;
+        /*width: 110px;*/
-    }
+    /*}*/
 }
 @media screen and (max-width: 775px) {
     .now-playing-block {
         display: none;
     }
     .source-info-block {
-        margin-left: 149px;
+        margin-left: 152px;
     }
 }
 @media screen and (max-width: 520px) {
@@ -3443,7 +3472,7 @@ button.btn-icon-text > i.icon-white {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 
-    width: 150px;
+    width: 152px;
 
     flex: 1 auto;
     padding: 0;
@@ -3528,7 +3557,7 @@ button.btn-icon-text > i.icon-white {
     position: absolute;
 
     top: 102px;
-    left: 150px;
+    left: 152px;
     right: 0;
     bottom: 0;
     padding: 10px 10px 40px;
@@ -3554,6 +3583,7 @@ button.btn-icon-text > i.icon-white {
 }
 
 .wrapper_panel {
+    left: 303px;
     background-color: #242424;
 }
 
@@ -3562,7 +3592,7 @@ button.btn-icon-text > i.icon-white {
 .usability_hint {
     position: fixed;
     top: 102px;
-    left: 150px;
+    left: 152px;
 
     width: 100%;
     flex: 0 100%;
@@ -3590,17 +3620,23 @@ button.btn-icon-text > i.icon-white {
     margin-bottom: 10px;
 }
 
+#sub-menu-wrapper {
+    flex: 0 140px;
+    min-width: 140px;
+}
+
 #sub-menu {
     position: fixed;
-    left: 150px;
+    left: 152px;
-    top: 130px;
+    top: 102px;
-    height: 100%;
+    bottom: 0; /* Account for scrollbars */
     min-width: 130px;
     border-right: 1px solid #5b5b5b;
     background: #242424;
     font-size: 14px;
     color: #cecece;
     padding: 10px;
+    z-index: 1;
 }
 
 #sub-menu h3 {
@@ -3638,6 +3674,7 @@ button.btn-icon-text > i.icon-white {
 #listenerstat_content {
     width: 100%;
     display: block;
+    box-sizing: border-box;
 }
 
 #listenerstat_content .legendLabel

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

@@ -1,6 +1,7 @@
 var previewWidth = 482,
     previewHeight = 110,
-    USABILITY_HINT_TOP = 130;
+    USABILITY_HINT_HIDDEN_TOP = 102,
+    USABILITY_HINT_VISIBLE_TOP = 130;
 
 $(document).ready(function() {
 
@@ -13,6 +14,7 @@ $(document).ready(function() {
 
     //this statement tells the browser to fade out any success message after 5 seconds
     setTimeout(function(){$(".success").fadeOut("slow", function(){$(this).empty()});}, 5000);
+    adjustForUsabilityHint();
 });
 
 /*
@@ -192,13 +194,18 @@ function removeSuccessMsg() {
     $status.fadeOut("slow", function(){$status.empty()});
 }
 
+function adjustForUsabilityHint() {
+    var topVal = ($(".usability_hint").is(":visible") ? USABILITY_HINT_VISIBLE_TOP : USABILITY_HINT_HIDDEN_TOP);
+    $("#sub-menu").css("top", topVal);
+}
+
 function hideHint(h) {
     h.hide("slow").addClass("hidden");
 }
 
 function showHint(h) {
     h.show("slow").removeClass("hidden");
-    $(".wrapper").css("top", USABILITY_HINT_TOP); // Account for usability hint
+    $(".wrapper, #sub-menu").css("top", USABILITY_HINT_VISIBLE_TOP);
 }
 
 function getUsabilityHint() {

airtime_mvc/public/js/airtime/showbuilder/builder.js

@@ -151,7 +151,7 @@ var AIRTIME = (function(AIRTIME){
     };
 
     mod.checkDeleteButton = function() {
-        var $selected = $sbTable.find("tr."+SB_SELECTED_CLASS);
+        var $selected = $("."+SB_SELECTED_CLASS);
 
         var button = $("#show_builder").find(".icon-trash").parent();
         if ($selected.length !== 0) {
@@ -849,6 +849,7 @@ var AIRTIME = (function(AIRTIME){
 
                 $tr.addClass(SB_SELECTED_CLASS);
                 $tr.find(".sb-checkbox > input").prop('checked', true);
+                mod.checkToolBarIcons();
             } else if (ev.ctrlKey) {
                 $tr.removeClass(SB_SELECTED_CLASS);
                 $tr.find(".sb-checkbox > input").prop('checked', false);
@@ -866,8 +867,10 @@ var AIRTIME = (function(AIRTIME){
                 $previouslySelected = undefined;
                 tr.removeClass(SB_SELECTED_CLASS);
                 tr.find(".sb-checkbox > input").prop('checked', false);
+                mod.checkToolBarIcons();
             } else {
                 tr.find(".sb-checkbox > input").prop('checked', true);
+                mod.checkToolBarIcons();
             }
             selectedRows = $("." + SB_SELECTED_CLASS);
         });
@@ -879,6 +882,7 @@ var AIRTIME = (function(AIRTIME){
                 tr.addClass(SB_SELECTED_CLASS);
                 tr.find(".sb-checkbox > input").prop('checked', true);
                 $previouslySelected = tr;
+                mod.checkToolBarIcons();
             }
             selectedRows = $("." + SB_SELECTED_CLASS);
         });