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

SAAS-762: Implement schedule widget design

This commit is contained in:
drigato 2015-05-12 11:56:35 -04:00
parent 24ebc8c8e4
commit 10ca987a51
2 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,10 +31,12 @@
<body> <body>
<div id="scheduleTabs" class="ui-tabs embedScheduleWidget scheduleTabsWeek1"> <div id="scheduleTabs" class="ui-tabs embedScheduleWidget scheduleTabsWeek1">
<ul> <ul>
<?php foreach($this->scheduleDataWeek1 as $day => $data) { <?php
echo "<li><a href='#" . $day . "'>" . $data["dayOfWeek"] . "</a></li>"; Logging::info($this->scheduleDataWeek1);
foreach($this->scheduleDataWeek1 as $day => $data) {
echo "<li><a href='#" . $day . "'><span class='day-of-week'>".$data["dayOfWeek"]."</span><span class='day-of-month'>" .$data["dayOfMonth"]."</span></a></li>";
} ?> } ?>
<li><a class="scheduleWidgetToggle" href="#">Next Week</a></li> <!--<li><a class="scheduleWidgetToggle" href="#">Next Week</a></li>-->
</ul> </ul>
<?php <?php
@ -44,15 +46,7 @@
<colgroup> <colgroup>
<col width="150" /> <col width="150" />
<col width="350" /> <col width="350" />
<col width="240" />
</colgroup> </colgroup>
<thead>
<tr>
<td>Time</td>
<td>Program Name</td>
<td>Details</td>
</tr>
</thead>
<tfoot> <tfoot>
<tr> <tr>
<td></td> <td></td>
@ -63,7 +57,6 @@
echo '<tr> echo '<tr>
<td>'.$data["show_start_hour"].' - '.$data["show_end_hour"].'</td> <td>'.$data["show_start_hour"].' - '.$data["show_end_hour"].'</td>
<td><h4>'.$data["name"].'</h4></td> <td><h4>'.$data["name"].'</h4></td>
<td><ul><li><a href="'.$data["url"].'" target="_blank">Read more</a></li></ul></td>
</tr>'; </tr>';
} }
@ -88,15 +81,7 @@
<colgroup> <colgroup>
<col width="150" /> <col width="150" />
<col width="350" /> <col width="350" />
<col width="240" />
</colgroup> </colgroup>
<thead>
<tr>
<td>Time</td>
<td>Program Name</td>
<td>Details</td>
</tr>
</thead>
<tfoot> <tfoot>
<tr> <tr>
<td></td> <td></td>
@ -107,7 +92,6 @@
echo '<tr> echo '<tr>
<td>'.$data["show_start_hour"].' - '.$data["show_end_hour"].'</td> <td>'.$data["show_start_hour"].' - '.$data["show_end_hour"].'</td>
<td><h4>'.$data["name"].'</h4></td> <td><h4>'.$data["name"].'</h4></td>
<td><ul><li><a href="'.$data["url"].'" target="_blank">Read more</a></li></ul></td>
</tr>'; </tr>';
} }

54
airtime_mvc/public/css/schedule-widget.css
View File

@ -3,43 +3,60 @@
} }
#scheduleTabs ul { #scheduleTabs ul {
overflow:hidden; overflow:hidden;
height:28px; height:50px;
background: url('../widgets/css/widget-img/schedule-tabs-list-bgr.png') repeat-x left bottom; /*background: url('../widgets/css/widget-img/schedule-tabs-list-bgr.png') repeat-x left bottom;*/
background: #2E9AFE;
list-style-type:none; list-style-type:none;
margin:0; margin:0;
padding:0; padding:0;
} }
#scheduleTabs ul li { #scheduleTabs ul li {
float:left; float:left;
height:28px; height:50px;
margin:0; margin:0;
padding:0; padding:0;
} }
#scheduleTabs ul li a { #scheduleTabs ul li a {
width: 50px;
display:block; display:block;
float:left; float:left;
height:25px; /*height:40px;*/
padding:0 10px; padding:0 10px;
margin-top:3px;
font-size:12px; font-size:12px;
font-weight:bold; font-weight:bold;
color:#666; color:#ffffff;
line-height:25px; /*line-height:40px;*/
border-right:1px solid #dbdbdb; /*border-right:1px solid #dbdbdb;
border-left:1px solid #f4f4f4; border-left:1px solid #f4f4f4;*/
text-decoration:none; text-decoration:none;
} }
#scheduleTabs ul li a:hover { #scheduleTabs ul li a:hover {
color:#000; color:#000;
text-decoration:none; text-decoration:none;
} }
#scheduleTabs ul li a span {
position:relative;
display:block;
text-align: center;
}
.day-of-month{
font-size: 20px;
padding-bottom:10px;
}
.day-of-week{
font-size: 10px;
padding-top:10px;
}
#scheduleTabs ul li.ui-tabs-selected a { #scheduleTabs ul li.ui-tabs-selected a {
height:27px; /*height:40px;*/
margin-top:0px; margin-top:0px;
line-height:27px; width: 50px;
color:#333333; /*line-height:40px;*/
background:#ffffff; color:#ffffff;
border:1px solid #cac9c9; border-bottom:none; background: #2ECCFA;
/*border:1px solid #cac9c9; border-bottom:none;*/
} }
#scheduleTabs table { #scheduleTabs table {
clear:both; clear:both;
@ -65,7 +82,10 @@
#scheduleTabs table tfoot { #scheduleTabs table tfoot {
} }
#scheduleTabs table tbody { #scheduleTabs table tbody {
font-size:13px; color:#666666; font-weight:bold; font-size:13px;
color:#ffffff;
font-weight:bold;
background: rgba(0, 0, 0, 1);
} }
#scheduleTabs table tbody tr { #scheduleTabs table tbody tr {
height:30px; height:30px;
@ -76,7 +96,7 @@
border-bottom:1px dotted #b3b3b3; border-bottom:1px dotted #b3b3b3;
} }
#scheduleTabs table tbody tr td h4 { #scheduleTabs table tbody tr td h4 {
color:#333333; font-size:12px; color:#ffffff; font-size:12px;
margin:0; margin:0;
padding:0; padding:0;
} }
@ -106,5 +126,5 @@
} }
.embedScheduleWidget { .embedScheduleWidget {
width: 500px; width: 490px;
} }