Fix side-menu position

This commit is contained in:
Duncan Sommerville 2015-08-19 17:18:42 -04:00
parent cfa543e835
commit a8955e2ea1
6 changed files with 97 additions and 99 deletions

View File

@ -1,80 +1,65 @@
<?php echo $this->doctype() ?> <?php echo $this->doctype() ?>
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<?php echo $this->headTitle() ?> <?php echo $this->headTitle() ?>
<?php echo $this->headLink() ?> <?php echo $this->headLink() ?>
<?php echo $this->headScript() ?> <?php echo $this->headScript() ?>
<?php echo isset($this->google_analytics)?$this->google_analytics:"" ?> <?php echo isset($this->google_analytics) ? $this->google_analytics : "" ?>
<?php $baseUrl = Application_Common_OsPath::getBaseDir(); ?> <?php $baseUrl = Application_Common_OsPath::getBaseDir(); ?>
</head> </head>
<body class="page-sub-menu"> <body class="page-sub-menu">
<!-- Google Tag Manager --> <!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-55N6NH" <noscript>
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <iframe src="//www.googletagmanager.com/ns.html?id=GTM-55N6NH"
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': height="0" width="0" style="display:none;visibility:hidden"></iframe>
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], </noscript>
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= <script>(function (w, d, s, l, i) {
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); w[l] = w[l] || [];
})(window,document,'script','dataLayer','GTM-55N6NH');</script> w[l].push({
'gtm.start': new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'//www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-55N6NH');</script>
<!-- End Google Tag Manager --> <!-- End Google Tag Manager -->
<?php echo $this->partial('partialviews/trialBox.phtml', array("is_trial"=>$this->isTrial(), "trial_remain"=> $this->trialRemaining())) ?> <?php echo $this->partial('partialviews/trialBox.phtml', array("is_trial" => $this->isTrial(), "trial_remain" => $this->trialRemaining())) ?>
<div id="Panel" class="sticky"> <div id="Panel" class="sticky">
<?php if($this->suspended) : ?> <?php if ($this->suspended) { ?>
<?php echo $this->partial('partialviews/suspended.phtml'); ?> <?php echo $this->partial('partialviews/suspended.phtml'); ?>
<?php else : ?> <?php } else { ?>
<?php echo $this->versionNotify(); <?php echo $this->versionNotify();
$sss = $this->SourceSwitchStatus(); $sss = $this->SourceSwitchStatus();
$scs = $this->SourceConnectionStatus(); $scs = $this->SourceConnectionStatus();
?> ?>
<?php echo $this->partial('partialviews/header.phtml', array("live_dj_switch"=>$sss['live_dj'], "live_dj_connection"=>$scs['live_dj'], "master_dj_switch"=>$sss['master_dj'], "master_dj_connection"=>$scs['master_dj'], <?php echo $this->partial('partialviews/header.phtml', array(
"scheduled_play_switch"=>$sss['scheduled_play'])) ?> "live_dj_switch" => $sss['live_dj'], "live_dj_connection" => $scs['live_dj'], "master_dj_switch" => $sss['master_dj'], "master_dj_connection" => $scs['master_dj'],
<?php $partial = array('menu.phtml', 'default'); "scheduled_play_switch" => $sss['scheduled_play']
$this->navigation()->menu()->setPartial($partial); ?> )) ?>
<?php $partial = array('menu.phtml', 'default');
$this->navigation()->menu()->setPartial($partial); ?>
<script type="text/javascript"> <script type="text/javascript">
var schedulePreLoaded = <?php var schedulePreLoaded = <?php
//Awful hack to speed up loading - Embed the schedule in the response so that the dashboard //Awful hack to speed up loading - Embed the schedule in the response so that the dashboard
//doesn't have to make a separate AJAX request to get this data. //doesn't have to make a separate AJAX request to get this data.
require_once("ScheduleController.php"); require_once("ScheduleController.php");
ScheduleController::printCurrentPlaylistForEmbedding(); ScheduleController::printCurrentPlaylistForEmbedding();
?>; }?>;
//The DOM elements that these calls depend on exist by this point: //The DOM elements that these calls depend on exist by this point:
parseItems(schedulePreLoaded.entries); parseItems(schedulePreLoaded.entries);
parseSourceStatus(schedulePreLoaded.source_status); parseSourceStatus(schedulePreLoaded.source_status);
parseSwitchStatus(schedulePreLoaded.switch_status); parseSwitchStatus(schedulePreLoaded.switch_status);
</script> </script>
<!--<div id="nav">
<div class="logo"></div>
<div class="personal-block solo">
<ol>
<li>
<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>
<div style="clear:both;"></div>
</div>-->
<?php endif; //suspended ?>
</div> </div>
<div id="media_type_nav"> <!-- class="content-pane" --> <div id="media_type_nav"> <!-- class="content-pane" -->
@ -104,30 +89,34 @@
<div class="media_type_selector dashboard_sub_nav" selection_id="2"> <div class="media_type_selector dashboard_sub_nav" selection_id="2">
<a href="/showbuilder#playlists"><i class='icon-list icon-white'></i><?php echo _("Playlists") ?></a></div> <a href="/showbuilder#playlists"><i class='icon-list icon-white'></i><?php echo _("Playlists") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="3"> <div class="media_type_selector dashboard_sub_nav" selection_id="3">
<a href="/showbuilder#smart-blocks"><i class='icon-time icon-white'></i><?php echo _("Smart Blocks") ?></a></div> <a href="/showbuilder#smart-blocks"><i class='icon-time icon-white'></i><?php echo _("Smart Blocks") ?></a>
</div>
<div class="media_type_selector dashboard_sub_nav" selection_id="4"> <div class="media_type_selector dashboard_sub_nav" selection_id="4">
<a href="/showbuilder#webstreams"><i class='icon-random icon-white'></i><?php echo _("Webstreams") ?></a></div> <a href="/showbuilder#webstreams"><i class='icon-random icon-white'></i><?php echo _("Webstreams") ?></a></div>
<hr style="margin-left: 5px; margin-right: 5px"> <hr style="margin-left: 5px; margin-right: 5px">
<div id="nav"> <div id="nav">
<?php echo $this->navigation()->menu(); ?> <?php echo $this->navigation()->menu(); ?>
</div> </div>
</div> </div>
<?php $hint = Application_Common_UsabilityHints::getUsabilityHint(); ?> <?php $hint = Application_Common_UsabilityHints::getUsabilityHint(); ?>
<div class="usability_hint <?php if ($hint == "") { echo "hidden"; } ?>"><?php echo $hint; ?></div> <div class="usability_hint <?php if ($hint == "") {
echo "hidden";
} ?>"><?php echo $hint; ?></div>
<div class="wrapper wrapper_panel" id="content"> <div class="wrapper wrapper_panel" id="content">
<div style="display: flex; width: 100%"> <div style="display: flex; width: 100%">
<div id="sub-menu"> <div style="flex: 0 140px;"> <!-- placeholder object so we can fixed position the submenu -->
<h3><?php //parent_page is passed in from controller <div id="sub-menu">
echo $this->layout()->parent_page; ?></h3> <h3><?php //parent_page is passed in from controller
<hr> echo $this->layout()->parent_page; ?></h3>
<?php <hr>
$page = $this->navigation()->findOneBy('title', $this->layout()->parent_page); <?php
echo $this->navigation()->menu()->renderMenu($page); $page = $this->navigation()->findOneBy('title', $this->layout()->parent_page);
?> echo $this->navigation()->menu()->renderMenu($page);
?>
</div>
</div> </div>
<div id="sub-menu-content-panel"> <div id="sub-menu-content-panel">
<?php echo $this->layout()->content ?> <?php echo $this->layout()->content ?>
@ -179,4 +168,3 @@
</script> </script>
</body> </body>
</html> </html>

View File

@ -168,6 +168,6 @@
</dd> </dd>
<?php echo $this->element->getElement('csrf') ?> <?php echo $this->element->getElement('csrf') ?>
</dl> </dl>
<button type="submit" id="cu_save_user" class="btn btn-small right-floated"><?php echo _("Save")?></button> <button type="submit" id="cu_save_user" class="btn right-floated"><?php echo _("Save")?></button>
</form> </form>
</div> </div>

View File

@ -1,15 +1,15 @@
<div class="ui-widget prefpanel simple-formblock clearfix padded-strong preferences"> <div class="ui-widget prefpanel simple-formblock clearfix padded-strong preferences">
<h2 style="float:left"><?php echo _("General") ?></h2> <h2 id="preferences_header"><?php echo _("General") ?></h2>
<?php $baseUrl = Application_Common_OsPath::getBaseDir(); ?> <?php $baseUrl = Application_Common_OsPath::getBaseDir(); ?>
<form method="post" id="pref_form" enctype="multipart/form-data"> <form method="post" id="pref_form" enctype="multipart/form-data">
<?php echo $this->form->getElement('submit')->render() ?> <?php echo $this->form->getElement('submit')->render() ?>
<div style="clear:both"></div> <div style="clear:both"></div>
<?php <?php
echo $this->statusMsg; echo $this->statusMsg;
echo $this->form; echo $this->form;
?> ?>
<br /> <br/>
</form> </form>
</div> </div>

View File

@ -2,7 +2,7 @@
<h2 style="float:left"><?php echo _("Stream Settings") ?></h2> <h2 style="float:left"><?php echo _("Stream Settings") ?></h2>
<?php $baseUrl = Application_Common_OsPath::getBaseDir(); ?> <?php $baseUrl = Application_Common_OsPath::getBaseDir(); ?>
<form method="post" id="stream_form" enctype="application/x-www-form-urlencoded"> <form method="post" id="stream_form" enctype="application/x-www-form-urlencoded">
<button name="stream_save" id="stream_save_top" type="button" class="btn btn-small right-floated"><?php echo _("Save") ?></button> <button name="stream_save" id="stream_save_top" type="button" class="btn right-floated"><?php echo _("Save") ?></button>
<?php echo $this->form->getElement('csrf') ?> <?php echo $this->form->getElement('csrf') ?>
<div style="clear:both"></div> <div style="clear:both"></div>
<?php echo $this->statusMsg;?> <?php echo $this->statusMsg;?>
@ -115,7 +115,7 @@
</fieldset> </fieldset>
<br /> <br />
<div style="clear: both"></div> <div style="clear: both"></div>
<button name="stream_save" id="stream_save_bottom" type="button" class="btn btn-small right-floated"><?php echo _("Save") ?></button> <button name="stream_save" id="stream_save_bottom" type="button" class="btn right-floated"><?php echo _("Save") ?></button>
</div> </div>
</form> </form>
</div> </div>

View File

@ -63,16 +63,13 @@ select {
/* Fix for Firefox */ /* Fix for Firefox */
fieldset {
clear: both;
}
.logo { .logo {
position: absolute; position: absolute;
float: left; float: left;
left: 22px; left: 22px;
top: 30px; top: 30px;
width: 100px; width: 100px;
height: 46px;
} }
/* Version Notification Starts*/ /* Version Notification Starts*/
@ -116,7 +113,7 @@ fieldset {
} }
.edit-current-user { .edit-current-user {
width: 450px; width: 365px;
} }
.edit-current-user label { .edit-current-user label {
@ -1031,10 +1028,11 @@ button.ColVis_Button.ColVis_ShowAll {
/*----END Data Table----*/ /*----END Data Table----*/
fieldset { fieldset {
border: 1px solid #222; /*border: 1px solid #222;*/
border: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
clear: both;
} }
fieldset.plain { fieldset.plain {
border: none; border: none;
@ -2298,6 +2296,10 @@ span.errors.sp-errors{
width: 500px; width: 500px;
margin-bottom: 40px; margin-bottom: 40px;
} }
#preferences_header {
float: left;
padding-left: 9px;
}
.manage-folders { .manage-folders {
width: 610px; width: 610px;
} }
@ -2374,6 +2376,10 @@ dd.radio-inline-list, .preferences dd.radio-inline-list, .stream-config dd.radio
margin-top: 30px; margin-top: 30px;
} }
/*#submit {*/
/*margin-right: 10px;*/
/*}*/
.centered { .centered {
margin: 0 auto; margin: 0 auto;
display: block; display: block;
@ -2992,7 +2998,7 @@ tfoot tr th {
bottom:10px; bottom:10px;
background-color:#222; background-color:#222;
background-color:rgba(0, 0, 0, 0.7); background-color:rgba(0, 0, 0, 0.7);
z-index:100; z-index:101;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
@ -3397,13 +3403,13 @@ dd .stream-status {
* to focus on responsive design. * to focus on responsive design.
*/ */
.usability_hint:not(.hidden) + .wrapper { .usability_hint:not(.hidden) + .wrapper {
top: 102px; top: 130px;
-webkit-transition: top 0.2s linear; -webkit-transition: top 0.2s linear;
-moz-transition: top 0.2s linear; -moz-transition: top 0.2s linear;
-o-transition: top 0.2s linear; -o-transition: top 0.2s linear;
transition: top 0.2s linear; transition: top 0.2s linear;
padding-top: 40px; /*padding-top: 40px;*/
} }
.usability_hint a { .usability_hint a {
@ -3466,16 +3472,15 @@ button.btn-icon-text > i.icon-white {
} }
.media_type_selector { .media_type_selector {
cursor: pointer; cursor: pointer;
color: #cecece; color: #cecece;
font-family: Roboto, "Open Sans", sans-serif; /*font-family: Roboto, "Open Sans", sans-serif;*/
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
/*margin: 20px 20px 0 5px;*/ /*margin: 20px 20px 0 5px;*/
/*padding: 10px 0px 10px 0px;*/ /*padding: 10px 0px 10px 0px;*/
padding: 0px; padding: 0;
-webkit-transition: color 0.1s linear; -webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear; -moz-transition: color 0.1s linear;
@ -3483,6 +3488,10 @@ button.btn-icon-text > i.icon-white {
transition: color 0.1s linear; transition: color 0.1s linear;
} }
#nav i, .media_type_selector i {
margin-right: 10px;
}
.media_type_selector.selected, .media_type_selector.selected a { .media_type_selector.selected, .media_type_selector.selected a {
color: #fff; color: #fff;
background-color: #444; background-color: #444;
@ -3581,24 +3590,25 @@ button.btn-icon-text > i.icon-white {
} }
#sub-menu { #sub-menu {
width: 130px; position: fixed;
left: 150px;
top: 130px;
height: 100%;
min-width: 130px; min-width: 130px;
flex-grow: 0;
border-right: 1px solid #5b5b5b; border-right: 1px solid #5b5b5b;
background: #212121; background: #242424;
font-size: 14px; font-size: 14px;
color: #cecece; color: #cecece;
padding: 10px; padding: 10px;
float: left;
} }
#sub-menu h3 { #sub-menu h3 {
padding: 0px; padding: 0;
} }
#sub-menu .navigation { #sub-menu .navigation {
list-style: none; list-style: none;
padding-left: 0px; padding-left: 0;
} }
#sub-menu .navigation li { #sub-menu .navigation li {

View File

@ -1,6 +1,6 @@
var previewWidth = 482, var previewWidth = 482,
previewHeight = 110, previewHeight = 110,
USABILITY_HINT_PADDING = 40; USABILITY_HINT_TOP = 130;
$(document).ready(function() { $(document).ready(function() {
@ -198,7 +198,7 @@ function hideHint(h) {
function showHint(h) { function showHint(h) {
h.show("slow").removeClass("hidden"); h.show("slow").removeClass("hidden");
$(".wrapper").css("padding-top", USABILITY_HINT_PADDING); // Account for usability hint $(".wrapper").css("top", USABILITY_HINT_TOP); // Account for usability hint
} }
function getUsabilityHint() { function getUsabilityHint() {