Layout and styling fixes for sub-menu layout pages
This commit is contained in:
Duncan Sommerville
parent
beb0eed1c8
commit
277a066534
6 changed files with 88 additions and 65 deletions
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -106,8 +106,14 @@
|
|||
|
||||
|
||||
<div class="wrapper wrapper_panel" id="content">
|
||||
<div style="display: flex; width: 100%">
|
||||
<div style="flex: 0 140px;"> <!-- placeholder object so we can fixed position the submenu -->
|
||||
<!-- <div style="display: flex; width: 100%">-->
|
||||
<!-- <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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
width: 110px;
|
||||
}
|
||||
/*#nav li.top {*/
|
||||
/*display: -webkit-box;*/
|
||||
/*display: -moz-box;*/
|
||||
/*display: -ms-flexbox;*/
|
||||
/*display: -webkit-flex;*/
|
||||
/*display: flex;*/
|
||||
/*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;
|
||||
top: 130px;
|
||||
height: 100%;
|
||||
left: 152px;
|
||||
top: 102px;
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue