SAAS-948 - css tweaks

This commit is contained in:
Duncan Sommerville 2015-08-14 13:29:26 -04:00
parent 12c4e4a374
commit fb1f22b913
7 changed files with 118 additions and 98 deletions

View file

@ -95,7 +95,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</ul> </ul>
</div> </div>
<div class="media_type_selector" selection_id="1"> <div class="media_type_selector" selection_id="1">
<a href="/show-builder"><?php echo _("Dashboard") ?></a></div> <a href="/show-builder#"><?php echo _("Dashboard") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="1"> <div class="media_type_selector dashboard_sub_nav" selection_id="1">
<a href="/show-builder#files"><?php echo _("Files") ?></a></div> <a href="/show-builder#files"><?php echo _("Files") ?></a></div>
<div class="media_type_selector dashboard_sub_nav" selection_id="2"> <div class="media_type_selector dashboard_sub_nav" selection_id="2">

View file

@ -1,4 +1,5 @@
<div id="master-panel"> <div id="master-panel">
<div class="logo"></div>
<div class="now-playing-block"> <div class="now-playing-block">
<div class="text-row"><strong><?php echo _("Previous:"); ?></strong> <span id='previous'></span> <span id='prev-length'></span></div> <div class="text-row"><strong><?php echo _("Previous:"); ?></strong> <span id='previous'></span> <span id='prev-length'></span></div>
<div class="now-playing-info song"> <div class="now-playing-info song">
@ -49,7 +50,10 @@
<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> <ul>
<li class="time" id="time"></li>
<li class="time-zone"><span id="time-zone"></span></li>
</ul>
<div class="personal-block solo"> <div class="personal-block solo">
<ol> <ol>
<li> <li>
@ -58,10 +62,6 @@
</li> </li>
</ol> </ol>
</div> </div>
<ul>
<li class="time" id="time"></li>
<li class="time-zone"><span id="time-zone"></span></li>
</ul>
</div> </div>
</div> </div>
<div id="jquery_jplayer_1" class="jp-jplayer" style="width:0px; height:0px;"></div> <div id="jquery_jplayer_1" class="jp-jplayer" style="width:0px; height:0px;"></div>

View file

@ -2,7 +2,9 @@ div.ColVis_collectionBackground {
background-color: transparent; background-color: transparent;
} }
/*.wrapper { /* ~ Moved to styles.css ~
.wrapper {
*//*background: #242424;*//* *//*background: #242424;*//*
background: #111; background: #111;
top: 105px; top: 105px;
@ -29,13 +31,13 @@ div.ColVis_collectionBackground {
transition: top 0.2s linear, padding 0.2s linear; transition: top 0.2s linear, padding 0.2s linear;
} }
*//* Usability hint *//*
.usability_hint { .usability_hint {
left: 130px; left: 130px;
flex: 0 100%; flex: 0 100%;
width: 100%; width: 100%;
}*/ }
*/
/* Scroll bars */ /* Scroll bars */

View file

@ -15,6 +15,7 @@
font-size:10px; font-size:10px;
text-transform:uppercase; text-transform:uppercase;
border-bottom:1px solid #494949; border-bottom:1px solid #494949;
border-top: none;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);

View file

@ -68,12 +68,16 @@ fieldset {
} }
.logo { .logo {
position: absolute;
float: left;
background: transparent url(images/airtime_logo.png) no-repeat 0 0; background: transparent url(images/airtime_logo.png) no-repeat 0 0;
height: 35px; height: 35px;
width: 66px; width: 66px;
float: right; left: 35px;
padding: 0 5px 0 10px; top: 32px;
margin-top: -5px; /*margin: 25px 5px 0 10px;*/
/*margin-top: -5px;*/
} }
/* Version Notification Starts*/ /* Version Notification Starts*/
@ -203,12 +207,15 @@ fieldset {
} }
#master-panel { #master-panel {
background:#3d3d3d url(images/masterpanel_bg.png) repeat-x 0 0; position:relative;
height:100px; height:100px;
background:#3d3d3d url(images/masterpanel_bg.png) repeat-x 0 0;
border:1px solid #000; border:1px solid #000;
border-width: 1px 0; border-width: 1px 0;
-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);
overflow:hidden; overflow:hidden;
position:relative;
} }
.now-playing-block, .show-block, .on-air-block, .time-info-block, .personal-block, .listen-control-block, .trial-info-block { .now-playing-block, .show-block, .on-air-block, .time-info-block, .personal-block, .listen-control-block, .trial-info-block {
@ -253,7 +260,7 @@ fieldset {
} }
.now-playing-block { .now-playing-block {
width:35%; width:35%;
padding-left:10px; padding-left:144px;
} }
.show-block { .show-block {
width:30%; width:30%;
@ -346,7 +353,7 @@ fieldset {
#nav li.top { #nav li.top {
/*float: none;*/ /*float: none;*/
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1575px) {
.now-playing-block { .now-playing-block {
width: 30%; width: 30%;
} }
@ -354,38 +361,38 @@ fieldset {
width: 25%; width: 25%;
} }
} }
@media screen and (max-width: 970px) { /*@media screen and (max-width: 1120px) {*/
#nav .responsive-menu { /*#nav .responsive-menu {*/
position: absolute; /*position: absolute;*/
left: 0; /*left: 0;*/
background: #353535; /*background: #353535;*/
width: 120px; /*width: 120px;*/
display: none; /*display: none;*/
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); /*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);*/
-moz-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); /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);*/
} /*}*/
.mobile-nav { /*.mobile-nav {*/
display: block; /*display: block;*/
} /*}*/
#menu-btn { /*#menu-btn {*/
width: 24px; /*width: 24px;*/
margin: 0; /*margin: 0;*/
cursor: pointer; /*cursor: pointer;*/
} /*}*/
#menu-btn span { /*#menu-btn span {*/
display: block; /*display: block;*/
width: 19px; /*width: 19px;*/
height: 3px; /*height: 3px;*/
margin: 4px 2px; /*margin: 4px 2px;*/
background: #efefef; /*background: #efefef;*/
z-index: 99; /*z-index: 99;*/
} /*}*/
} /*}*/
@media screen and (max-width: 920px) { @media screen and (max-width: 1250px) {
.now-playing-block { .now-playing-block {
width: 50%; width: 50%;
} }
@ -396,31 +403,44 @@ fieldset {
right: 10px !important; right: 10px !important;
} }
} }
@media screen and (max-width: 810px) { @media screen and (max-width: 1075px) {
.now-playing-block { .now-playing-block {
width: 40%; width: 40%;
} }
} }
@media screen and (max-width: 1100px) { /*@media screen and (max-width: 1250px) {*/
#nav { /*#nav {*/
overflow-y: visible; /*overflow-y: visible;*/
} /*}*/
} /*}*/
@media screen and (max-width: 680px) { @media screen and (max-width: 900px) {
.now-playing-block { .now-playing-block {
display: none; width: 30%;
/*display: none;*/
} }
#nav li.top { #nav li.top {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; display: -webkit-flex;
display: flex;
width: 110px; width: 110px;
} }
} }
@media screen and (max-width: 380px) { @media screen and (max-width: 775px) {
.time-info-block { .now-playing-block {
display: none; display: none;
} }
.on-air-block { .source-info-block {
margin: 0; margin-left: 130px;
}
}
@media screen and (max-width: 520px) {
.logo {
display: none;
}
.source-info-block {
margin-left: 0;
} }
} }
.time-info-block ul { .time-info-block ul {
@ -495,19 +515,6 @@ fieldset {
/* END Master Panel */ /* END Master Panel */
.wrapper {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 141px;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
}
.alpha-block { .alpha-block {
padding:0; padding:0;
float:left; float:left;
@ -3416,7 +3423,7 @@ dd .stream-status {
* to focus on responsive design. * to focus on responsive design.
*/ */
.usability_hint:not(.hidden) + .wrapper { .usability_hint:not(.hidden) + .wrapper {
top: 105px; top: 102px;
-webkit-transition: top 0.2s linear; -webkit-transition: top 0.2s linear;
-moz-transition: top 0.2s linear; -moz-transition: top 0.2s linear;
@ -3424,25 +3431,6 @@ dd .stream-status {
transition: top 0.2s linear; transition: top 0.2s linear;
} }
.usability_hint {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 10px 5px 10px;
border: 1px solid #ff611f;
background-color: #ff611f;
color: white;
font-size: 14px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
position: fixed;
top: 105px;
width: 90%;
z-index: 1;
margin: 5px 10px;
}
.usability_hint a { .usability_hint a {
color: white; color: white;
} }
@ -3466,7 +3454,7 @@ button.btn-icon-text > i.icon-white {
#media_type_nav { #media_type_nav {
position: absolute; position: absolute;
top: 105px; top: 102px;
bottom: 0; bottom: 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -3542,16 +3530,21 @@ button.btn-icon-text > i.icon-white {
} }
.wrapper { .wrapper {
position: absolute;
/*background: #242424;*/ /*background: #242424;*/
background: #111; top: 102px;
top: 105px;
left: 130px; left: 130px;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 5px 10px 40px; padding: 5px 10px 40px;
/*padding: 0;*/
border: none; border: none;
background: #111;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
display: -moz-box; display: -moz-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -3571,9 +3564,26 @@ button.btn-icon-text > i.icon-white {
/* Usability hint */ /* Usability hint */
.usability_hint { .usability_hint {
position: fixed;
top: 102px;
left: 130px; left: 130px;
flex: 0 100%;
width: 100%; width: 100%;
flex: 0 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 10px 5px 10px;
border: 1px solid #ff611f;
background-color: #ff611f;
color: white;
font-size: 14px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
z-index: 1000; /* Need to be above elements like the shows in the calendar! */
/*margin: 5px 10px;*/
} }
/* Uploads/Dropzone */ /* Uploads/Dropzone */

View file

@ -20,7 +20,7 @@ $(document).ready(function() {
var lcLoadListener = setInterval(function() { var lcLoadListener = setInterval(function() {
var ifr = document.getElementById('livechat-compact-container'); var ifr = document.getElementById('livechat-compact-container');
if (ifr !== undefined) { if (ifr) {
LC_API.on_chat_state_changed = function(data) { LC_API.on_chat_state_changed = function(data) {
console.log('Chat state changed to: ' + data.state); console.log('Chat state changed to: ' + data.state);
if (data.state == 'offline') { if (data.state == 'offline') {

View file

@ -1263,6 +1263,10 @@ $(document).ready(function() {
$("a[href$='"+location.hash+"']").parent().addClass("selected"); $("a[href$='"+location.hash+"']").parent().addClass("selected");
$(window).on('hashchange', function() { $(window).on('hashchange', function() {
// If we click Dashboard from one of the media views, do nothing
if (!location.hash) {
return;
}
$(".media_type_selector").each(function () { $(".media_type_selector").each(function () {
$(this).removeClass("selected"); $(this).removeClass("selected");
}); });
@ -1270,6 +1274,8 @@ $(document).ready(function() {
oTable.fnDraw(); oTable.fnDraw();
}); });
/* Overridden by hashchange function
$(".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();
@ -1280,6 +1286,7 @@ $(document).ready(function() {
oTable.fnDraw(); oTable.fnDraw();
} }
}); });
*/
$("#advanced-options").on("click", function() { $("#advanced-options").on("click", function() {
resizeAdvancedSearch(); resizeAdvancedSearch();