Use flexbox for the Radio Page player bar

This commit is contained in:
Albert Santoni 2015-11-17 10:33:43 -05:00
parent 62a3251fb4
commit 8ba7a5dbe9
2 changed files with 21 additions and 10 deletions

View File

@ -309,16 +309,18 @@
$("#player_iframe").load(function () {
<?php
// Is there a better way to do this?
if ($this->displayRssTab) {?>
$("#player_iframe").contents().find('.bottom_bar').append("<div class='station_rss_btn button' data-tab='tab-4'></div>");
<?php
}
?>
$("#player_iframe").contents().find('.bottom_bar').append("<div class='about_us_btn button' data-tab='tab-2'></div>");
$("#player_iframe").contents().find('.bottom_bar').append("<div class='flex_spacer' data-tab='tab-1'></div>");
$("#player_iframe").contents().find('.bottom_bar').append("<div class='schedule_btn button current' data-tab='tab-1'></div>");
$("#player_iframe").contents().find('.bottom_bar').append("<div class='about_us_btn button' data-tab='tab-2'></div>");
<?php
// Is there a better way to do this?
if ($this->displayRssTab) {?>
$("#player_iframe").contents().find('.bottom_bar').append("<div class='station_rss_btn button' data-tab='tab-4'></div>");
<?php
}
?>
$("#player_iframe").contents().find('.bottom_bar .button').click(function(){

View File

@ -15,6 +15,7 @@ body {
bottom: 0px;
height: 120px;
background: #fff;
display: flex;
}
.bottom_bar .cont_btn {
@ -37,9 +38,8 @@ body {
}
.on_air {
display: inline-block;
margin-left: 40px;
width: 55%
flex-grow: 1;
}
.bottom_bar p.now_playing {
@ -75,6 +75,7 @@ body {
background: url('img/podcast.png') no-repeat center 0px;
}
.bottom_bar .station_rss_btn.current {
background: url('img/podcast.png') no-repeat center -50px;
}
@ -104,6 +105,10 @@ body {
float: right;
}
.bottom_bar .radio_tab_label {
margin-top: 60px;
}
@media (max-width: 1230px) {
.on_air {
width: 50%;
@ -133,6 +138,10 @@ body {
height: 80px;
}
.bottom_bar .flex_spacer {
flex-grow: 1;
}
.bottom_bar .play {
width: 80px;
height: 80px;