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 () { $("#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='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(){ $("#player_iframe").contents().find('.bottom_bar .button').click(function(){

View File

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