Congegni
/
sintonia
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix schedule widget layout by removing table structure

This commit is contained in:
drigato 2015-06-09 10:30:47 -04:00
parent 87920c1fc1
commit d181a931b8
3 changed files with 126 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
airtime_mvc/application/views/scripts/embed/weekly-program.phtml
View File

@ -37,17 +37,15 @@
<?php <?php
foreach($this->scheduleDataWeek1 as $day => $data) { foreach($this->scheduleDataWeek1 as $day => $data) {
$activeClass = $this->currentDayOfMonth == $data["dayOfMonth"] ? "active" : ""; $activeClass = $this->currentDayOfMonth == $data["dayOfMonth"] ? "active" : "";
echo"<div id='day-".$data["dayOfMonth"]."' class='schedule_item ".$activeClass."'>
<table class='widget widget now-playing-list'>
<thead></thead> echo "<div id='day-".$data["dayOfMonth"]."' class='schedule_item ".$activeClass."'>";
<tfoot><tr><td></td></tr></tfoot> foreach ($data["shows"] as $show => $showData) {
<tbody>"; echo "<div class='row'>";
foreach ($data["shows"] as $show => $showData) { echo "<div class='time_grid'>".$showData["show_start_hour"].' - '.$showData["show_end_hour"]."</div>";
echo "<tr><td class='time_grid col_two'><div>".$showData["show_start_hour"].' - '.$showData["show_end_hour"]."</div></td> echo "<div class='name_grid'>".$showData["name"]."</div>";
<td class='name_grid'><div><h4>".$showData["name"]."</h4></div></td></tr>"; echo "</div>";
} }
echo "</tbody></table></div>"; echo "</div>";
}?> }?>
</div> </div>

86
airtime_mvc/public/css/embed/weekly-schedule-widget-basic.css
View File

@ -71,16 +71,16 @@ body {
max-height: 300px; max-height: 300px;
} }
.schedule_content table { /*.schedule_content table {
opacity: 0; opacity: 0;
/*transition: all 1s ease;*/ *//*transition: all 1s ease;*//*
} }
.schedule.current .schedule_content table { .schedule.current .schedule_content table {
opacity: 1; opacity: 1;
-webkit-transition-delay: 0.6s; -webkit-transition-delay: 0.6s;
transition-delay: 0.6s; transition-delay: 0.6s;
} }*/
.schedule_item { .schedule_item {
display: none; display: none;
@ -94,33 +94,26 @@ body {
display: block; display: block;
} }
.schedule_item .time_grid { .schedule_item .row {
padding-top: 10px;
padding-bottom: 10px;
}
.schedule_item div.time_grid {
/*padding-right: 10px;*/
width: 20%;
font-weight: 300; font-weight: 300;
color: #AAAAAA; color: #AAAAAA;
display: inline-block;
} }
.schedule_item .time_grid div { .schedule_item div.name_grid {
/*padding-right: 10px;*/
width:120px;
}
.schedule_item .name_grid div {
/*padding-right: 10px;*/
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
}
.schedule_item .name_grid {
padding-left: 10px; padding-left: 10px;
} width: 77%;
display:inline-block;
.schedule_item h4 { vertical-align: middle;
margin: 10px 0px;
font-weight: 400;
overflow: hidden;
text-overflow:ellipsis;
overflow-x: hidden;
} }
.weekly-schedule-widget-footer { .weekly-schedule-widget-footer {
@ -156,13 +149,48 @@ body {
} }
} }
@media (max-width: 520px) { @media (max-width: 630px) {
.schedule_item div.time_grid {
.schedule_item { width: 25%;
padding: 0px 10px;
} }
.schedule_item .time_grid, .schedule_item .name_grid {
font-size: 14px; .schedule_item div.name_grid {
width: 72%;
}
}
@media (max-width: 530px) {
.schedule_item {
padding: 10px 20px;
font-size: 14px;
}
.schedule_item div.time_grid {
width: 30%;
}
.schedule_item div.name_grid {
width: 67%;
}
}
@media (max-width: 500px) {
.schedule_item div.time_grid {
width: 35%;
}
.schedule_item div.name_grid {
width: 62%;
}
}
@media (max-width: 400px) {
.schedule_item div.time_grid {
width: 40%;
}
.schedule_item div.name_grid {
width: 50%;
} }
} }

87
airtime_mvc/public/css/embed/weekly-schedule-widget.css
View File

@ -71,17 +71,6 @@ body {
max-height: 300px; max-height: 300px;
} }
.schedule_content table {
opacity: 0;
/*transition: all 1s ease;*/
}
.schedule.current .schedule_content table {
opacity: 1;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.schedule_item { .schedule_item {
display: none; display: none;
font-size: 17px; font-size: 17px;
@ -94,27 +83,26 @@ body {
display: block; display: block;
} }
.schedule_item .time_grid { .schedule_item .row {
padding-top: 10px;
padding-bottom: 10px;
}
.schedule_item div.time_grid {
/*padding-right: 10px;*/
width: 20%;
font-weight: 300; font-weight: 300;
color: #AAAAAA; color: #AAAAAA;
display: inline-block;
} }
.schedule_item .time_grid div { .schedule_item div.name_grid {
width: 120px;
}
.schedule_item .name_grid {
padding-left: 30px;
}
.schedule_item .name_grid div {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} padding-left: 10px;
width: 77%;
.schedule_item h4 { display:inline-block;
margin: 10px 0px; vertical-align: middle;
font-weight: 400;
} }
@media (max-width: 730px) { @media (max-width: 730px) {
@ -134,3 +122,50 @@ body {
} }
} }
@media (max-width: 630px) {
.schedule_item div.time_grid {
width: 25%;
}
.schedule_item div.name_grid {
width: 72%;
}
}
@media (max-width: 530px) {
.schedule_item {
padding: 10px 20px;
font-size: 14px;
}
.schedule_item div.time_grid {
width: 30%;
}
.schedule_item div.name_grid {
width: 67%;
}
}
@media (max-width: 500px) {
.schedule_item div.time_grid {
width: 35%;
}
.schedule_item div.name_grid {
width: 62%;
}
}
@media (max-width: 400px) {
.schedule_item div.time_grid {
width: 40%;
}
.schedule_item div.name_grid {
width: 50%;
}
}