SAAS-1017: Move top nav bar to side

This commit is contained in:
drigato 2015-08-14 08:30:52 -04:00
parent 6c7a6aaad3
commit e90fe728a2
13 changed files with 267 additions and 136 deletions

View file

@ -8,27 +8,27 @@
* the navigation container below. * the navigation container below.
*/ */
$pages = array( $pages = array(
array( /*array(
'label' => _('Now Playing'), 'label' => _('Now Playing'),
'module' => 'default', 'module' => 'default',
'controller' => 'Showbuilder', 'controller' => 'Showbuilder',
'action' => 'index', 'action' => 'index',
'resource' => 'showbuilder' 'resource' => 'showbuilder'
), ),*/
array( array(
'label' => _('Add Media'), 'label' => _('Add Media'),
'module' => 'default', 'module' => 'default',
'controller' => 'Plupload', 'controller' => 'Plupload',
'action' => 'index', 'action' => 'index',
'resource' => 'plupload' 'resource' => 'plupload'
), ),/*
array( array(
'label' => _('Library'), 'label' => _('Library'),
'module' => 'default', 'module' => 'default',
'controller' => 'Library', 'controller' => 'Library',
'action' => 'index', 'action' => 'index',
'resource' => 'playlist' 'resource' => 'playlist'
), ),*/
array( array(
'label' => _('Calendar'), 'label' => _('Calendar'),
'module' => 'default', 'module' => 'default',

View file

@ -10,7 +10,7 @@ class ShowBuilderController extends Zend_Controller_Action {
$baseUrl = Application_Common_OsPath::getBaseDir(); $baseUrl = Application_Common_OsPath::getBaseDir();
$userType = Application_Model_User::GetCurrentUser()->getType(); $userType = Application_Model_User::GetCurrentUser()->getType();
$this->_helper->layout->setLayout("showbuilder"); //$this->_helper->layout->setLayout("showbuilder");
$this->view->headScript()->appendScript("localStorage.setItem( 'user-type', '$userType' );"); $this->view->headScript()->appendScript("localStorage.setItem( 'user-type', '$userType' );");
$this->view->headScript()->appendScript(Application_Common_GoogleAnalytics::generateGoogleTagManagerDataLayerJavaScript()); $this->view->headScript()->appendScript(Application_Common_GoogleAnalytics::generateGoogleTagManagerDataLayerJavaScript());

View file

@ -50,14 +50,13 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</script> </script>
<div id="nav"> <!--<div id="nav">
<div class="logo"></div> <div class="logo"></div>
<div class="personal-block solo"> <div class="personal-block solo">
<ol> <ol>
<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 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>
| <a href=<?php echo $baseUrl . "login/logout"?>><?php echo _("Logout")?></a>
</li> </li>
</ol> </ol>
</div> </div>
@ -70,14 +69,48 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</div> </div>
</div> </div>
<div class="responsive-menu"> <div class="responsive-menu">
<?php echo $this->navigation()->menu() ?> <?php /*echo $this->navigation()->menu() */?>
</div> </div>
<div style="clear:both;"></div> <div style="clear:both;"></div>
</div> </div>-->
<?php endif; //suspended ?> <?php endif; //suspended ?>
</div> </div>
<div id="media_type_nav"> <!-- class="content-pane" -->
<div class="btn-group">
<button id="new_media_selector" class="btn btn-small dropdown-toggle" data-toggle="dropdown">
New <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li id="new-playlist">
<a href="#"><?php echo _("Playlist") ?></a>
</li>
<li id="new-smart-block">
<a href="#"><?php echo _("Smart Block") ?></a>
</li>
<li id="new-webstream">
<a href="#"><?php echo _("Webstream") ?></a>
</li>
</ul>
</div>
<div class="media_type_selector" selection_id="1">
<a href="/show-builder"><?php echo _("Dashboard") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="1">
<a href="/show-builder#files"><?php echo _("Files") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="2">
<a href="/show-builder#playlists"><?php echo _("Playlists") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="3">
<a href="/show-builder#smart-blocks"><?php echo _("Smart Blocks") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="4">
<a href="/show-builder#webstreams"><?php echo _("Webstreams") ?></a></div>
<hr style="margin-left: 5px; margin-right: 5px">
<div id="nav">
<?php echo $this->navigation()->menu() ?>
</div>
</div>
<?php $hint = Application_Common_UsabilityHints::getUsabilityHint(); ?> <?php $hint = Application_Common_UsabilityHints::getUsabilityHint(); ?>
<div class="usability_hint" <?php if ($hint == "") { echo "style='display:none'"; } ?>><?php echo $hint; ?></div> <div class="usability_hint" <?php if ($hint == "") { echo "style='display:none'"; } ?>><?php echo $hint; ?></div>
@ -129,3 +162,4 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</script> </script>
</body> </body>
</html> </html>

View file

@ -1,3 +1,8 @@
<?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>
@ -31,7 +36,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
$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("live_dj_switch"=>$sss['live_dj'], "live_dj_connection"=>$scs['live_dj'], "master_dj_switch"=>$sss['master_dj'], "master_dj_connection"=>$scs['master_dj'],
"scheduled_play_switch"=>$sss['scheduled_play'])) ?> "scheduled_play_switch"=>$sss['scheduled_play'], "baseUrl"=>$baseUrl)) ?>
<?php $partial = array('menu.phtml', 'default'); <?php $partial = array('menu.phtml', 'default');
$this->navigation()->menu()->setPartial($partial); ?> $this->navigation()->menu()->setPartial($partial); ?>
@ -50,12 +55,13 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</script> </script>
<!--
<div id="nav"> <div id="nav">
<div class="logo"></div> <div class="logo"></div>
<div class="personal-block solo"> <div class="personal-block solo">
<ol> <ol>
<li> <li>
<!-- <span class="trial-box-button"><a title="Billing" href=<?php echo $baseUrl . 'billing/upgrade'?>>Upgrade</a></span>&nbsp;--> <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 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> | <a href=<?php echo $baseUrl . "login/logout"?>><?php echo _("Logout")?></a>
</li> </li>
@ -69,12 +75,14 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<span></span> <span></span>
</div> </div>
</div> </div>
<div class="responsive-menu"> <div class="responsive-menu">
<?php echo $this->navigation()->menu() ?> <?php echo $this->navigation()->menu() ?>
</div> </div>
<div style="clear:both;"></div> <div style="clear:both;"></div>
</div> </div>
-->
<?php endif; //suspended ?> <?php endif; //suspended ?>
</div> </div>
@ -95,10 +103,20 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</li> </li>
</ul> </ul>
</div> </div>
<div class="media_type_selector selected" selection_id="1"><?php echo _("Files") ?></div> <div class="media_type_selector" selection_id="1">
<div class="media_type_selector" selection_id="2"><?php echo _("Playlists") ?></div> <a href="/show-builder"><?php echo _("Dashboard") ?></a></div>
<div class="media_type_selector" selection_id="3"><?php echo _("Smart Blocks") ?></div> <div class="media_type_selector dashboard_sub_nav" selection_id="1">
<div class="media_type_selector" selection_id="4"><?php echo _("Webstreams") ?></div> <a href="/show-builder#files"><?php echo _("Files") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="2">
<a href="/show-builder#playlists"><?php echo _("Playlists") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="3">
<a href="/show-builder#smart-blocks"><?php echo _("Smart Blocks") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="4">
<a href="/show-builder#webstreams"><?php echo _("Webstreams") ?></a></div>
<div id="nav">
<?php echo $this->navigation()->menu() ?>
</div>
</div> </div>
<div class="wrapper dropzone" id="content"> <div class="wrapper dropzone" id="content">

View file

@ -49,8 +49,16 @@
<a href="#" class="listen-control-button"><span><?php echo _("Listen") ?></span></a> <a href="#" class="listen-control-button"><span><?php echo _("Listen") ?></span></a>
</div> </div>
<div class="time-info-block pull-right"> <div class="time-info-block pull-right">
<div class="logo"></div>
<div class="personal-block solo">
<ol>
<li>
<a id="current-user" href=<?php echo $this->baseUrl . "user/edit-user"?>><span class="name"><?php echo $this->escape($this->loggedInAs()); ?></span></a>
| <a href=<?php echo $this->baseUrl . "login/logout"?>><?php echo _("Logout")?></a>
</li>
</ol>
</div>
<ul> <ul>
<li><?php echo _("Station time") ?></li>
<li class="time" id="time"></li> <li class="time" id="time"></li>
<li class="time-zone"><span id="time-zone"></span></li> <li class="time-zone"><span id="time-zone"></span></li>
</ul> </ul>

View file

@ -43,7 +43,7 @@
</div> </div>
<div id="recent_uploads_wrapper" class="lib-content ui-widget ui-widget-content block-shadow alpha-block"> <div id="recent_uploads_wrapper" class="lib-content ui-widget ui-widget-content block-shadow">
<div id="recent_uploads" class="padded"> <div id="recent_uploads" class="padded">
<div id="recent_uploads_filter"> <div id="recent_uploads_filter">

View file

@ -2,15 +2,15 @@ div.ColVis_collectionBackground {
background-color: transparent; background-color: transparent;
} }
.wrapper { /*.wrapper {
/*background: #242424;*/ *//*background: #242424;*//*
background: #111; background: #111;
top: 139px; top: 105px;
left: 130px; left: 130px;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 10px 10px 40px; padding: 5px 10px 40px;
/*padding: 0;*/ *//*padding: 0;*//*
border: none; border: none;
display: -webkit-box; display: -webkit-box;
@ -29,13 +29,13 @@ div.ColVis_collectionBackground {
transition: top 0.2s linear; transition: top 0.2s linear;
} }
/* Usability hint */ *//* Usability hint *//*
.usability_hint { .usability_hint {
left: 130px; left: 130px;
flex: 0 100%; flex: 0 100%;
width: 100%; width: 100%;
} }*/
/* Scroll bars */ /* Scroll bars */
@ -607,76 +607,6 @@ li.ui-state-default {
padding-top: 4px; padding-top: 4px;
} }
/* Media type selector */
#media_type_nav {
position: fixed;
top: 139px;
bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 130px;
flex: 1 auto;
padding: 0;
background: #353535;
border: 1px solid #242424;
border-top: 1px solid #7e7e7e;
/* border: 1px solid #242424; */
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.35);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.35);
box-shadow: 0 2px 5px rgba(0,0,0,.35);
z-index: 100;
text-align: left;
}
#media_type_nav .btn-group {
padding: 4px;
}
#new_media_selector {
width: 100%;
font-size: 14px;
}
.media_type_selector {
cursor: pointer;
color: #cecece;
font-family: Roboto, "Open Sans", sans-serif;
font-size: 16px;
font-weight: 400;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
/*margin: 20px 20px 0 5px;*/
padding: 10px 10px 10px 10px;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
}
.media_type_selector.selected {
color: #fff;
background-color: #444;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
}
.media_type_selector:hover {
color: #fff;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
}
/* DataTables */ /* DataTables */
.ColVis_collection.TableTools_collection.ui-buttonset.ui-buttonset-multi { .ColVis_collection.TableTools_collection.ui-buttonset.ui-buttonset-multi {
@ -764,24 +694,3 @@ th.library_checkbox {
border: none; border: none;
} }
/* Uploads/Dropzone */
#upload_form {
width: 100%;
min-width: 555px;
background: none;
border: 2px dashed #efefef;
color: #efefef;
font-family: Roboto, "Open Sans", sans-serif;
font-size: 20px;
font-weight: 300;
line-height: 14px;
margin-top: 10px;
}
.dropzone .dz-message {
margin: 0;
}

View file

@ -10,7 +10,7 @@ way to fit your requirements.
=================================================================== */ =================================================================== */
#nav { #nav {
padding:7px 0 0 6px; /*padding:7px 0 0 6px;*/
margin:0; margin:0;
list-style:none; list-style:none;
height:28px; height:28px;
@ -18,16 +18,17 @@ way to fit your requirements.
position:relative; position:relative;
z-index:500; z-index:500;
font-family:Arial, Helvetica, sans-serif; font-family:Arial, Helvetica, sans-serif;
border-top:1px solid #7e7e7e; /*border-top:1px solid #7e7e7e;
border-bottom:1px solid #242424; border-bottom:1px solid #242424;
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.35); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.35);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.35); -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.35);
box-shadow: 0 2px 5px rgba(0,0,0,.35); box-shadow: 0 2px 5px rgba(0,0,0,.35);*/
} }
#nav li.top { #nav li.top {
display:block; display:block;
float:left; float:left;
margin:0 5px 0 0; /*margin:0 5px 0 0;*/
padding: 10px;
} }
#nav li a.top_link { #nav li a.top_link {
display:block; display:block;
@ -35,10 +36,10 @@ way to fit your requirements.
height:18px; height:18px;
color:#ccc; color:#ccc;
text-decoration:none; text-decoration:none;
font-size:11px; font-size:16px;
text-transform:uppercase; /*text-transform:uppercase;*/
font-weight:bold; /*font-weight:bold;*/
padding:4px 0 0 14px; /*padding:4px 0 0 10px;*/
cursor:pointer; cursor:pointer;
} }
#nav li a.top_link span { #nav li a.top_link span {
@ -55,7 +56,7 @@ way to fit your requirements.
} }
#nav li:hover a.top_link, #nav li.active a.top_link, #nav li.active:hover a.top_link { #nav li:hover a.top_link, #nav li.active a.top_link, #nav li.active:hover a.top_link {
color:#fff; color:#fff;
background:#000; /*background:#000;*/
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;

View file

@ -3409,6 +3409,21 @@ dd .stream-status {
/* Usability Hints */ /* Usability Hints */
/*
* This is a temporary solution to a larger issue;
* we should revisit this (and really all of the
* absolute positioning in Airtime) when we want
* to focus on responsive design.
*/
.usability_hint:not(.hidden) + .wrapper {
top: 105px;
-webkit-transition: top 0.2s linear;
-moz-transition: top 0.2s linear;
-o-transition: top 0.2s linear;
transition: top 0.2s linear;
}
.usability_hint { .usability_hint {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -3422,9 +3437,10 @@ dd .stream-status {
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
position: fixed; position: fixed;
top: 139px; top: 105px;
width: 100%; width: 90%;
z-index: 1; z-index: 1;
margin: 5px 10px;
} }
.usability_hint a { .usability_hint a {
@ -3444,3 +3460,127 @@ dd .stream-status {
button.btn-icon-text > i.icon-white { button.btn-icon-text > i.icon-white {
margin-right: 4px; margin-right: 4px;
} }
/* Media type selector */
#media_type_nav {
position: absolute;
top: 105px;
bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 130px;
flex: 1 auto;
padding: 0;
background: #353535;
border: 1px solid #242424;
border-top: 1px solid #7e7e7e;
/* border: 1px solid #242424; */
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.35);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.35);
box-shadow: 0 2px 5px rgba(0,0,0,.35);
z-index: 100;
text-align: left;
}
#media_type_nav .btn-group {
padding: 4px;
}
#new_media_selector {
width: 100%;
font-size: 14px;
}
.media_type_selector {
cursor: pointer;
color: #cecece;
font-family: Roboto, "Open Sans", sans-serif;
font-size: 16px;
font-weight: 400;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
/*margin: 20px 20px 0 5px;*/
padding: 10px 10px 10px 10px;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
}
.media_type_selector.selected {
color: #fff;
background-color: #444;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
}
.media_type_selector:hover, .media_type_selector a:hover {
color: #fff;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
-o-transition: color 0.1s linear;
transition: color 0.1s linear;
}
.media_type_selector a {
text-decoration: none;
color: #cecece;
}
.dashboard_sub_nav {
padding-left: 20px;
}
.wrapper {
/*background: #242424;*/
background: #111;
top: 105px;
left: 130px;
right: 0;
bottom: 0;
padding: 5px 10px 40px;
/*padding: 0;*/
border: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
overflow: auto;
-webkit-transition: top 0.2s linear;
-moz-transition: top 0.2s linear;
-o-transition: top 0.2s linear;
transition: top 0.2s linear;
}
/* Usability hint */
.usability_hint {
left: 130px;
flex: 0 100%;
width: 100%;
}
/* Uploads/Dropzone */
#upload_form {
width: 100%;
min-width: 555px;
margin-bottom: 10px;
}

View file

@ -17,9 +17,11 @@ $(document).ready(function() {
//this statement tells the browser to fade out any success message after 5 seconds //this statement tells the browser to fade out any success message after 5 seconds
setTimeout(function(){$(".success").fadeOut("slow", function(){$(this).empty()});}, 5000); setTimeout(function(){$(".success").fadeOut("slow", function(){$(this).empty()});}, 5000);
if ($('.usability_hint:visible')) {
if ($('.usability_hint').css('display') == "block") {
$(".wrapper").css("padding-top", USABILITY_HINT_PADDING); // Account for usability hint $(".wrapper").css("padding-top", USABILITY_HINT_PADDING); // Account for usability hint
} }
}); });
/* /*

View file

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

View file

@ -1257,6 +1257,11 @@ $(document).ready(function() {
} }
}); });
if (location.hash === "") {
$("a[href$='#files']").parent().addClass("selected");
}
$("a[href$='"+location.hash+"']").parent().addClass("selected");
$(".media_type_selector").on("click", function() { $(".media_type_selector").on("click", function() {
if (!$(this).hasClass("selected")) { if (!$(this).hasClass("selected")) {
AIRTIME.library.selectNone(); AIRTIME.library.selectNone();

View file

@ -0,0 +1,14 @@
/*$(document).ready(function() {
$(".media_type_selector").on("click", function() {
console.log("hello");
console.log(location.hash);
if (!$(this).hasClass("selected")) {
//AIRTIME.library.selectNone();
$(".media_type_selector").each(function () {
$(this).removeClass("selected");
});
$(this).addClass("selected");
oTable.fnDraw();
}
});
});*/