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
foreach($this->scheduleDataWeek1 as $day => $data) {
$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>
<tfoot><tr><td></td></tr></tfoot>
<tbody>";
foreach ($data["shows"] as $show => $showData) {
echo "<tr><td class='time_grid col_two'><div>".$showData["show_start_hour"].' - '.$showData["show_end_hour"]."</div></td>
<td class='name_grid'><div><h4>".$showData["name"]."</h4></div></td></tr>";
}
echo "</tbody></table></div>";
echo "<div id='day-".$data["dayOfMonth"]."' class='schedule_item ".$activeClass."'>";
foreach ($data["shows"] as $show => $showData) {
echo "<div class='row'>";
echo "<div class='time_grid'>".$showData["show_start_hour"].' - '.$showData["show_end_hour"]."</div>";
echo "<div class='name_grid'>".$showData["name"]."</div>";
echo "</div>";
}
echo "</div>";
}?>
</div>

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

@ -71,16 +71,16 @@ body {
max-height: 300px;
}
.schedule_content table {
/*.schedule_content table {
opacity: 0;
/*transition: all 1s ease;*/
*//*transition: all 1s ease;*//*
}
.schedule.current .schedule_content table {
opacity: 1;
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
}*/
.schedule_item {
display: none;
@ -94,33 +94,26 @@ body {
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;
color: #AAAAAA;
display: inline-block;
}
.schedule_item .time_grid div {
/*padding-right: 10px;*/
width:120px;
}
.schedule_item .name_grid div {
/*padding-right: 10px;*/
.schedule_item div.name_grid {
overflow: hidden;
text-overflow: ellipsis;
}
.schedule_item .name_grid {
padding-left: 10px;
}
.schedule_item h4 {
margin: 10px 0px;
font-weight: 400;
overflow: hidden;
text-overflow:ellipsis;
overflow-x: hidden;
width: 77%;
display:inline-block;
vertical-align: middle;
}
.weekly-schedule-widget-footer {
@ -156,13 +149,48 @@ body {
}
}
@media (max-width: 520px) {
.schedule_item {
padding: 0px 10px;
@media (max-width: 630px) {
.schedule_item div.time_grid {
width: 25%;
}
.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;
}
.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 {
display: none;
font-size: 17px;
@ -94,27 +83,26 @@ body {
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;
color: #AAAAAA;
display: inline-block;
}
.schedule_item .time_grid div {
width: 120px;
}
.schedule_item .name_grid {
padding-left: 30px;
}
.schedule_item .name_grid div {
.schedule_item div.name_grid {
overflow: hidden;
text-overflow: ellipsis;
}
.schedule_item h4 {
margin: 10px 0px;
font-weight: 400;
padding-left: 10px;
width: 77%;
display:inline-block;
vertical-align: middle;
}
@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%;
}
}