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

View File

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

View File

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