Use flexbox for the Radio Page player bar
This commit is contained in:
parent
62a3251fb4
commit
8ba7a5dbe9
|
@ -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(){
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue