mirror of
https://github.com/SickGear/SickGear.git
synced 2025-01-20 16:43:43 +00:00
Change Calendar layout on the Coming Episodes page.
Change view to a fluid layout. Change episode layout design. Add day and month to column headers. Add isotope plug-in to enable sort columns by Date, Network, and Show name. Add imagesLoaded plug-in to prevent layout breakage by calling isotope to update content after a page auto-refresh.
This commit is contained in:
Supremicus
JackDandy
parent
f875e4c2fb
commit
97ade1d621
7 changed files with 238 additions and 79 deletions
|
|
@ -20,6 +20,9 @@
|
|||
* Fix anime searches on BTN provider
|
||||
* Change replace "Daily-Search" with "Recent-Search"
|
||||
* Add daily search to recent search renaming to config migration code
|
||||
* Change Coming Episodes calendar view to a fluid layout, change episode layout design, and add day and month in column headers.
|
||||
* Add isotope plug-in to Coming Episodes calendar view to enable sort columns by Date, Network, and Show name.
|
||||
* Add imagesLoaded plug-in to prevent layout breakage by calling isotope to update content after a page auto-refresh.
|
||||
|
||||
[develop changelog]
|
||||
|
||||
|
|
|
|||
|
|
@ -1325,17 +1325,30 @@ h2.day, h2.network {
|
|||
color: #09A2FF;
|
||||
}
|
||||
|
||||
table.cal-odd {
|
||||
.calendar-row .day-number {
|
||||
background-color: #15528F;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.today .day-number .number, .today .day-number .month, .today .day-number .day {
|
||||
color: #8dbeee;
|
||||
}
|
||||
|
||||
.odd .calendar-show {
|
||||
background-color: #333;
|
||||
}
|
||||
table.cal-even {
|
||||
|
||||
.even .calendar-show {
|
||||
background-color: #3d3d3d;
|
||||
}
|
||||
.calendarShow .text .airtime {
|
||||
color:#fff
|
||||
|
||||
.calendar-row .poster img {
|
||||
border: 1px solid #111;
|
||||
}
|
||||
.calendarShow .text .episode-title {
|
||||
color:#aaa
|
||||
|
||||
.calendar-row .text .airtime,
|
||||
.calendar-row .text .episode-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* =======================================================================
|
||||
|
|
|
|||
|
|
@ -1307,17 +1307,30 @@ h2.day, h2.network {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table.cal-odd {
|
||||
background-color: #ddd;
|
||||
.calendar-row .day-number {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
table.cal-even {
|
||||
background-color: #d2d2d2;
|
||||
|
||||
.today .day-number .number, .today .day-number .month, .today .day-number .day {
|
||||
color: #c7db40;
|
||||
}
|
||||
.calendarShow .text .airtime {
|
||||
color:#000
|
||||
|
||||
.odd .calendar-show {
|
||||
background-color: #F5F1E4;
|
||||
}
|
||||
.calendarShow .text .episode-title {
|
||||
color:#888
|
||||
|
||||
.even .calendar-show {
|
||||
background-color: #DFDACF;
|
||||
}
|
||||
|
||||
.calendar-row .poster img {
|
||||
border: 1px solid #CCC;
|
||||
}
|
||||
|
||||
.calendar-row .text .airtime,
|
||||
.calendar-row .text .episode-title {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* =======================================================================
|
||||
|
|
|
|||
|
|
@ -1498,45 +1498,90 @@ h2.day, h2.network {
|
|||
}
|
||||
|
||||
.calendarWrapper {
|
||||
width:1000px;
|
||||
margin:0 auto;
|
||||
padding:0 3px
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 3px
|
||||
}
|
||||
|
||||
.calendarTable {
|
||||
float:left;
|
||||
width:142px !important;
|
||||
white-space:nowrap;
|
||||
table-layout:fixed !important;
|
||||
.calendar-row {
|
||||
float: left;
|
||||
width: 14.28%;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
|
||||
.calendarShow {
|
||||
padding:0 !important
|
||||
.calendar-row .day-number {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendarShow .poster {
|
||||
padding-bottom:2px
|
||||
}
|
||||
.calendarShow .poster img {
|
||||
width:142px;
|
||||
height:auto
|
||||
.calendar-row .day-number .number {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.calendarShow .text {
|
||||
padding:0 5px 10px 5px
|
||||
.calendar-row .day-number .day {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 3px;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendarShow .text .airtime,
|
||||
.calendarShow .text .episode-title {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
display:block;
|
||||
font-size:11px
|
||||
.calendar-row .day-number .month {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
bottom: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.calendarShow .show-status {
|
||||
padding:5px 10px 10px;
|
||||
text-align:center
|
||||
.today .day-number .number, .today .day-number .month, .today .day-number .day {
|
||||
color: #c7db40;
|
||||
}
|
||||
|
||||
.calendar-show {
|
||||
margin-top: 4px;
|
||||
padding: 4px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.odd .calendar-show {
|
||||
background-color: #F5F1E4;
|
||||
}
|
||||
|
||||
.even .calendar-show {
|
||||
background-color: #DFDACF;
|
||||
}
|
||||
|
||||
.calendar-row .poster img {
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 2px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.calendar-row .text .airtime,
|
||||
.calendar-row .text .episode-title {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.calendar-row .episode-blank {
|
||||
width: 250px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* =======================================================================
|
||||
|
|
|
|||
|
|
@ -20,6 +20,54 @@
|
|||
<h1 class="title">$title</h1>
|
||||
#end if
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
<!--
|
||||
\$(document).ready(function(){
|
||||
|
||||
var \$container = [\$('#day0'), \$('#day1'), \$('#day2'), \$('#day3'), \$('#day4'), \$('#day5'), \$('#day6')];
|
||||
|
||||
jQuery.each(\$container, function (j) {
|
||||
this.isotope({
|
||||
itemSelector: '.calendar-show',
|
||||
sortBy : '$sickbeard.COMING_EPS_SORT',
|
||||
layoutMode: 'vertical',
|
||||
transitionDuration: 0,
|
||||
getSortData: {
|
||||
show: function( itemElem ) {
|
||||
var name = \$( itemElem ).attr('data-name');
|
||||
#if not $sickbeard.SORT_ARTICLE:
|
||||
return (name || '').replace(/^(?:(?:A(?!\s+to)n?)|The)\s(\w)/i, '$1');
|
||||
#else:
|
||||
return (name || '');
|
||||
#end if
|
||||
},
|
||||
network: '[data-network]',
|
||||
date: function( itemElem ) {
|
||||
var date = \$( itemElem ).attr('data-date');
|
||||
return date.length && parseInt( date, 10 );
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
imagesLoaded( '.calendar-show', function() {
|
||||
jQuery.each(\$container, function (j) {
|
||||
this.isotope('layout');
|
||||
});
|
||||
});
|
||||
|
||||
\$('#sort').on( 'change', function() {
|
||||
var sortValue = this.value;
|
||||
jQuery.each(\$container, function (j) {
|
||||
this.isotope({ sortBy: sortValue });
|
||||
});
|
||||
\$.get(this.options[this.selectedIndex].getAttribute('data-sort'));
|
||||
});
|
||||
|
||||
});
|
||||
//-->
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#SubMenu {display:none}
|
||||
#contentWrapper {padding-top:30px}
|
||||
|
|
@ -35,7 +83,7 @@
|
|||
</select>
|
||||
</span>
|
||||
|
||||
|
||||
#if 'calendar' != $layout:
|
||||
<span>Sort By:
|
||||
<select name="sort" class="form-control form-control-inline input-sm" onchange="location = this.options[this.selectedIndex].value;">
|
||||
<option value="$sbRoot/setComingEpsSort/?sort=date" #if 'date' == $sickbeard.COMING_EPS_SORT then 'selected="selected"' else ''#>Date</option>
|
||||
|
|
@ -44,7 +92,16 @@
|
|||
</select>
|
||||
</span>
|
||||
|
||||
|
||||
#else
|
||||
<span>Sort By:
|
||||
<select name="sort" id="sort" class="form-control form-control-inline input-sm">
|
||||
<option value="date" data-sort="$sbRoot/setComingEpsSort/?sort=date" #if 'date' == $sickbeard.COMING_EPS_SORT then 'selected="selected"' else ''#>Date</option>
|
||||
<option value="network" data-sort="$sbRoot/setComingEpsSort/?sort=network" #if 'network' == $sickbeard.COMING_EPS_SORT then 'selected="selected"' else ''#>Network</option>
|
||||
<option value="show" data-sort="$sbRoot/setComingEpsSort/?sort=show" #if 'show' == $sickbeard.COMING_EPS_SORT then 'selected="selected"' else ''#>Show</option>
|
||||
</select>
|
||||
</span>
|
||||
|
||||
#end if
|
||||
<span>View Paused:
|
||||
<select name="viewpaused" class="form-control form-control-inline input-sm" onchange="location = this.options[this.selectedIndex].value;">
|
||||
<option value="$sbRoot/toggleComingEpsDisplayPaused"<%= (' selected="selected"', '')[True == sickbeard.COMING_EPS_DISPLAY_PAUSED] %>>Hidden</option>
|
||||
|
|
@ -489,53 +546,73 @@
|
|||
<input type="hidden" id="sbRoot" value="$sbRoot" />
|
||||
#for $day in $dates
|
||||
#set $tbl_day += 1
|
||||
<table class="sickbeardTable tablesorter calendarTable <%= 'cal-%s' % (('even', 'odd')[1 == tbl_day % 2]) %>" cellspacing="0" border="0" cellpadding="0">
|
||||
<thead><tr><th>$sbdatetime.sbdatetime.sbfdate($day, '%A').decode($sickbeard.SYS_ENCODING).capitalize()</th></tr></thead>
|
||||
<tbody>
|
||||
#set $day_has_show = False
|
||||
#for $cur_result in $sql_results:
|
||||
#if int($cur_result['paused']) and not $sickbeard.COMING_EPS_DISPLAY_PAUSED:
|
||||
#continue
|
||||
#end if
|
||||
|
||||
#set $cur_indexer = int($cur_result['indexer'])
|
||||
#set $runtime = $cur_result['runtime']
|
||||
#set $airday = $cur_result['localtime'].date()
|
||||
#if $tbl_day == 1
|
||||
#set $showtoday = 'today'
|
||||
#else
|
||||
#set $showtoday = ''
|
||||
#end if
|
||||
|
||||
#if $airday == $day:
|
||||
#set $day_has_show = True
|
||||
#set $airtime = $sbdatetime.sbdatetime.sbftime($cur_result['localtime']).decode($sickbeard.SYS_ENCODING)
|
||||
#if $sickbeard.TRIM_ZERO:
|
||||
#set $airtime = re.sub(r'0(\d:\d\d)', r'\1', $airtime, 0, re.IGNORECASE | re.MULTILINE)
|
||||
#end if
|
||||
<div class="calendar-row $showtoday <%= '%s' % (('even', 'odd')[1 == tbl_day % 2]) %>">
|
||||
<div class="day-number">
|
||||
<div class="number">$sbdatetime.sbdatetime.sbfdate($day, ' %d').decode($sickbeard.SYS_ENCODING).replace(' 0', ' ')</div>
|
||||
<div class="day">
|
||||
<span class="visible-lg">$sbdatetime.sbdatetime.sbfdate($day, '%A').decode($sickbeard.SYS_ENCODING).capitalize()</span>
|
||||
<span class="hidden-lg">$sbdatetime.sbdatetime.sbfdate($day, '%a').decode($sickbeard.SYS_ENCODING).capitalize()</span>
|
||||
</div>
|
||||
<div class="month">
|
||||
<span class="visible-lg">$sbdatetime.sbdatetime.sbfdate($day, '%B').decode($sickbeard.SYS_ENCODING).capitalize()</span>
|
||||
<span class="hidden-lg">$sbdatetime.sbdatetime.sbfdate($day, '%b').decode($sickbeard.SYS_ENCODING).capitalize()</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="$sbdatetime.sbdatetime.sbfdate($day, 'day%w')">
|
||||
|
||||
#set $day_has_show = False
|
||||
#for $cur_result in $sql_results:
|
||||
#if int($cur_result['paused']) and not $sickbeard.COMING_EPS_DISPLAY_PAUSED:
|
||||
#continue
|
||||
#end if
|
||||
|
||||
<tr>
|
||||
<td class="calendarShow">
|
||||
<div class="poster">
|
||||
<a title="${cur_result['show_name']}" href="$sbRoot/home/displayShow?show=${cur_result['showid']}"><img alt="" src="$sbRoot/showPoster/?show=${cur_result['showid']}&which=poster_thumb" /></a>
|
||||
#set $cur_indexer = int($cur_result['indexer'])
|
||||
#set $runtime = $cur_result['runtime']
|
||||
#set $airday = $cur_result['localtime'].date()
|
||||
|
||||
#if $airday == $day:
|
||||
#set $day_has_show = True
|
||||
#set $airtime = $sbdatetime.sbdatetime.sbftime($cur_result['localtime']).decode($sickbeard.SYS_ENCODING)
|
||||
|
||||
#if $sickbeard.TRIM_ZERO:
|
||||
#set $airtime = re.sub(r'0(\d:\d\d)', r'\1', $airtime, 0, re.IGNORECASE | re.MULTILINE)
|
||||
#end if
|
||||
|
||||
<div id="show-$cur_result['showid']" class="calendar-show" data-name="$cur_result['show_name']" data-network="$cur_result['network']" data-date="$time.mktime($cur_result['localtime'].timetuple())">
|
||||
<div class="poster">
|
||||
<a title="${cur_result['show_name']}" href="$sbRoot/home/displayShow?show=${cur_result['showid']}"><img class="img-responsive" alt="" src="$sbRoot/showPoster/?show=${cur_result['showid']}&which=poster_thumb" /></a>
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="episode-title" title="$cur_result['name']">
|
||||
<%= 'S%02iE%02i' % (int(cur_result['season']), int(cur_result['episode'])) %> - $cur_result['name']
|
||||
</div>
|
||||
<div class="text">
|
||||
<span class="airtime">
|
||||
${airtime} on $cur_result["network"]
|
||||
</span>
|
||||
<span class="episode-title" title="$cur_result['name']">
|
||||
<%= 'S%02iE%02i' % (int(cur_result['season']), int(cur_result['episode'])) %> - $cur_result['name']
|
||||
</span>
|
||||
<div class="airtime">
|
||||
${airtime} on $cur_result["network"]
|
||||
</div>
|
||||
</td> <!-- end $cur_result['show_name'] -->
|
||||
</tr>
|
||||
</div>
|
||||
</div><!-- end show-$cur_result['showid'] //-->
|
||||
|
||||
#end if
|
||||
|
||||
#end for
|
||||
#if not $day_has_show:
|
||||
<tr><td class="calendarShow"><span class="show-status">No shows for this day</span></td></tr>
|
||||
#end if
|
||||
</tbody>
|
||||
</table>
|
||||
#end for
|
||||
|
||||
<div class="calendar-show" data-date="0">
|
||||
<span class="episode-blank">No shows for this day</span>
|
||||
</div>
|
||||
#end if
|
||||
</div>
|
||||
</div>
|
||||
#end for
|
||||
|
||||
<!-- end calender view //-->
|
||||
</div>
|
||||
#end if
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@
|
|||
<script type="text/javascript" src="$sbRoot/js/lib/jquery.form-3.35.js?$sbPID"></script>
|
||||
<script type="text/javascript" src="$sbRoot/js/lib/jquery.ui.touch-punch-0.2.2.min.js?$sbPID"></script>
|
||||
<script type="text/javascript" src="$sbRoot/js/lib/isotope.pkgd.min.js?$sbPID"></script>
|
||||
<script type="text/javascript" src="$sbRoot/js/lib/imagesloaded.pkgd.min.js?$sbPID"></script>
|
||||
<script type="text/javascript" src="$sbRoot/js/lib/jquery.confirm.js?$sbPID"></script>
|
||||
<script type="text/javascript" src="$sbRoot/js/script.js?$sbPID"></script>
|
||||
|
||||
|
|
|
|||
7
gui/slick/js/lib/imagesloaded.pkgd.min.js
vendored
Normal file
7
gui/slick/js/lib/imagesloaded.pkgd.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue