SAAS-833: Radio page UI improvements/fixes

Fix schedule widget responsiveness
This commit is contained in:
drigato 2015-06-02 12:59:59 -04:00
parent 6682f7907d
commit db17112432
2 changed files with 29 additions and 12 deletions

View file

@ -32,7 +32,7 @@ body {
/*display: none;*/ /*display: none;*/
height: 100%; height: 100%;
width: 100%; width: 100%;
max-width: 750px; max-width: 740px;
margin: 0 auto; margin: 0 auto;
margin-top: 20px; margin-top: 20px;
margin-bottom: 140px; margin-bottom: 140px;
@ -44,7 +44,7 @@ body {
transition-delay: 1s;*/ transition-delay: 1s;*/
} }
.tab_content.current { #schedule_iframe.tab_content.current, .tab_content.current {
/*display: block;*/ /*display: block;*/
visibility: visible; visibility: visible;
} }
@ -54,7 +54,7 @@ body {
transition-delay: 2s; transition-delay: 2s;
} }
.schedule, .about_us, .login { #schedule_iframe.schedule, .about_us, .login {
/* -webkit-transition-delay: 1s; /* -webkit-transition-delay: 1s;
transition-delay: 1s;*/ transition-delay: 1s;*/
transition: all 0.4s ease; transition: all 0.4s ease;
@ -67,7 +67,7 @@ body {
transition-delay: 0.4s; transition-delay: 0.4s;
} }
.schedule.current { #schedule_iframe.schedule.current {
opacity: 1; opacity: 1;
} }
@ -145,10 +145,12 @@ input[type="submit"]:hover {
right: 10px; right: 10px;
} }
.schedule .tabs li { #schedule_iframe {
width: 64px; margin-top: 0px;
height: 64px; max-width: 100%;
padding: 6px; margin-left: auto;
left: -10px;
right: 10px;
} }
.about_us h1 { .about_us h1 {

View file

@ -6,7 +6,6 @@ body {
.tab_content { .tab_content {
color: #fff; color: #fff;
text-align: center; text-align: center;
/*display: none;*/
visibility: hidden; visibility: hidden;
width: 100%; width: 100%;
max-width: 740px; max-width: 740px;
@ -17,8 +16,6 @@ body {
position: absolute; position: absolute;
left: 50%; left: 50%;
margin-left: -380px; margin-left: -380px;
/* -webkit-transition-delay: 1s;
transition-delay: 1s;*/
} }
.tab_content.current { .tab_content.current {
@ -106,4 +103,22 @@ body {
.schedule_item h4 { .schedule_item h4 {
margin: 10px 0px; margin: 10px 0px;
font-weight: 400; font-weight: 400;
} }
@media (max-width: 730px) {
.tab_content {
margin-top: 0px;
width: auto;
max-width: 100%;
margin-left: auto;
left: 10px;
right: 10px;
}
.schedule .tabs li {
width: 64px;
height: 64px;
padding: 6px;
}
}