moparisthebest/SickRage
1
0
Fork 0
mirror of https://github.com/moparisthebest/SickRage synced 2024-12-12 11:02:21 -05:00
Code Issues Releases Wiki Activity

Various tweaks to UI including additional use of fuzzy dates.

Browse Source 
Add a parameter to FuzzyMoments to output dates inline.
Add fuzzy dates to compact view of History page.
add fuzzy dates to poster view cards of Home page.
Tweak Home page poster view cards to span the date displayed across the first line.
Tweak Home page poster view cards to display download stats on left and network logo on right.
Tweak the two columns of Show Summary on the displayShow page to hold content.
Add title "Filters" and tweak the layout of filters sections on the displayShow page.
Move display value for show air date from Next Episode to the Airs field on the comingEpisodes page.
Add fuzzy dates to the Airs field in banner and poster views on the comingEpisodes page.
Tweak CSS for showSummary.
Tweak CSS for poster view cards line-height.
This commit is contained in:
JackDandy 2014-10-14 05:13:59 +01:00
parent 07c0316815
commit 0333a9aa3e
6 changed files with 62 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
gui/slick/css/default.css
View File

@ -2467,7 +2467,7 @@ ul.tags li a{
-moz-border-radius: 10px; -moz-border-radius: 10px;
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
padding: 5px 10px; padding: 5px 0 0 10px;
margin-bottom: -3px; margin-bottom: -3px;
text-shadow: 0px 1px rgba(0, 0, 0, 0.8); text-shadow: 0px 1px rgba(0, 0, 0, 0.8);
background: #333; background: #333;
@ -5066,7 +5066,7 @@ posterlist.css
font-size: 11px; font-size: 11px;
text-align: left; text-align: left;
display: block; display: block;
line-height: 18px; line-height: 13px;
} }
.show-status { .show-status {
@ -5074,7 +5074,7 @@ posterlist.css
font-size: 11px; font-size: 11px;
text-align: left; text-align: left;
display: block; display: block;
line-height: 34px; line-height: 15px;
} }
.show-network-image { .show-network-image {
@ -5085,9 +5085,9 @@ posterlist.css
.show-dlstats { .show-dlstats {
text-shadow: 1px 1px #000; text-shadow: 1px 1px #000;
font-size: 11px; font-size: 11px;
text-align: right; text-align: left;
display: block; display: block;
line-height: 18px; line-height: 15px;
} }
#sort-by { #sort-by {

19
gui/slick/interfaces/default/comingEpisodes.tmpl
View File

@ -245,6 +245,20 @@
}); });
}); });
}); });
#set $fuzzydate = 'airdate'
#if $sickbeard.FUZZY_DATING:
fuzzyMoment({
dtInline : true,
dtGlue : ' at ',
containerClass : '.${fuzzydate}',
dateHasTime : true,
dateFormat : '${sickbeard.DATE_PRESET}',
timeFormat : '${sickbeard.TIME_PRESET}',
trimZero : #if $sickbeard.TRIM_ZERO then "true" else "false"#
});
#end if
}); });
//--> //-->
</script> </script>
@ -388,10 +402,11 @@
</span> </span>
</div> </div>
<span class="title">Next Episode:</span> <span><%="S%02i" % int(cur_result["season"])+"E%02i" % int(cur_result["episode"]) %> - $cur_result["name"] ($sbdatetime.sbdatetime.fromtimestamp($time.mktime($cur_result["localtime"].timetuple())).sbfdate().decode($sickbeard.SYS_ENCODING))</span> <span class="title">Next Episode:</span> <span><%="S%02i" % int(cur_result["season"])+"E%02i" % int(cur_result["episode"]) %> - $cur_result["name"]</span>
<div class="clearfix"> <div class="clearfix">
<span class="title">Airs:</span> <span>$sbdatetime.sbdatetime.fromtimestamp($time.mktime($cur_result["localtime"].timetuple())).sbftime().decode($sickbeard.SYS_ENCODING) on $cur_result["network"]</span>
<span class="title">Airs: </span><span class="${fuzzydate}">$sbdatetime.sbdatetime.sbfdatetime($cur_result["localtime"]).decode($sickbeard.SYS_ENCODING)</span><span> on $cur_result["network"]</span>
</div> </div>
<div class="clearfix"> <div class="clearfix">

22
gui/slick/interfaces/default/displayShow.tmpl
View File

@ -194,7 +194,7 @@
</div> </div>
<div class="showsummary"> <div class="showsummary">
<table style="width:83%; float: left;"> <table style="width:73%; float: left;">
#if $show.network and $show.airs: #if $show.network and $show.airs:
<tr><td class="showLegend">Originally Airs: </td><td>$show.airs #if not $network_timezones.test_timeformat($show.airs) then " <font color='#FF0000'><b>(invalid Timeformat)</b></font> " else ""# on $show.network</td></tr> <tr><td class="showLegend">Originally Airs: </td><td>$show.airs #if not $network_timezones.test_timeformat($show.airs) then " <font color='#FF0000'><b>(invalid Timeformat)</b></font> " else ""# on $show.network</td></tr>
#else if $show.network: #else if $show.network:
@ -243,7 +243,7 @@
</table> </table>
<table style="width:17%; float: right; vertical-align: middle; height: 100%;"> <table style="width:27%; float: right; vertical-align: middle; height: 100%;">
<tr><td class="showLegend">Info Language:</td><td><img src="$sbRoot/images/flags/${show.lang}.png" width="16" height="11" alt="$show.lang" title="$show.lang" /></td></tr> <tr><td class="showLegend">Info Language:</td><td><img src="$sbRoot/images/flags/${show.lang}.png" width="16" height="11" alt="$show.lang" title="$show.lang" /></td></tr>
#if $sickbeard.USE_SUBTITLES #if $sickbeard.USE_SUBTITLES
<tr><td class="showLegend">Subtitles: </td><td><img src="$sbRoot/images/#if int($show.subtitles) == 1 then "yes16.png\" alt=\"Y" else "no16.png\" alt=\"N"#" width="16" height="16" /></td></tr> <tr><td class="showLegend">Subtitles: </td><td><img src="$sbRoot/images/#if int($show.subtitles) == 1 then "yes16.png\" alt=\"Y" else "no16.png\" alt=\"N"#" width="16" height="16" /></td></tr>
@ -279,17 +279,17 @@
<input type="hidden" id="indexer" value="$show.indexer" /> <input type="hidden" id="indexer" value="$show.indexer" />
<input class="btn" type="button" id="changeStatus" value="Go" /> <input class="btn" type="button" id="changeStatus" value="Go" />
</div> </div>
<div class="float-right clearfix" id="checkboxControls" style="display:inline-block; vertical-align:baseline;">
<label for="wanted"><span class="wanted"><input type="checkbox" id="wanted" checked="checked" /> Wanted: <b>$epCounts[$Overview.WANTED]</b></span></label>
<label for="qual"><span class="qual"><input type="checkbox" id="qual" checked="checked" /> Low Quality: <b>$epCounts[$Overview.QUAL]</b></span></label>
<label for="good"><span class="good"><input type="checkbox" id="good" checked="checked" /> Downloaded: <b>$epCounts[$Overview.GOOD]</b></span></label>
<label for="skipped"><span class="skipped"><input type="checkbox" id="skipped" checked="checked" /> Skipped: <b>$epCounts[$Overview.SKIPPED]</b></span></label>
<label for="snatched"><span class="snatched"><input type="checkbox" id="snatched" checked="checked" /> Snatched: <b>$epCounts[$Overview.SNATCHED]</b></span></label>
</div>
</div> </div>
<div class="float-right" style="margin-top: -4px;"> <div id="checkboxControls" style="display:inline-block; vertical-align:baseline;">
Filters: <label for="wanted"><span class="wanted"><input type="checkbox" id="wanted" checked="checked" /> Wanted: <b>$epCounts[$Overview.WANTED]</b></span></label>
<label for="qual"><span class="qual"><input type="checkbox" id="qual" checked="checked" /> Low Quality: <b>$epCounts[$Overview.QUAL]</b></span></label>
<label for="good"><span class="good"><input type="checkbox" id="good" checked="checked" /> Downloaded: <b>$epCounts[$Overview.GOOD]</b></span></label>
<label for="skipped"><span class="skipped"><input type="checkbox" id="skipped" checked="checked" /> Skipped: <b>$epCounts[$Overview.SKIPPED]</b></span></label>
<label for="snatched"><span class="snatched"><input type="checkbox" id="snatched" checked="checked" /> Snatched: <b>$epCounts[$Overview.SNATCHED]</b></span></label>
</div>
<div style="margin-top: -4px; display:inline-block; vertical-align:middle">
<button class="btn btn-mini seriesCheck" style="line-height: 10px;">Select Filtered Episodes</button> <button class="btn btn-mini seriesCheck" style="line-height: 10px;">Select Filtered Episodes</button>
<button class="btn btn-mini clearAll" style="line-height: 10px;">Clear All</button> <button class="btn btn-mini clearAll" style="line-height: 10px;">Clear All</button>
</div> </div>

2
gui/slick/interfaces/default/history.tmpl
View File

@ -186,7 +186,7 @@
#for $hItem in $compactResults: #for $hItem in $compactResults:
<tr> <tr>
#set $curdatetime = $datetime.datetime.strptime(str($hItem["actions"][0]["time"]), $history.dateFormat) #set $curdatetime = $datetime.datetime.strptime(str($hItem["actions"][0]["time"]), $history.dateFormat)
<td class="nowrap">$sbdatetime.sbdatetime.sbfdatetime($curdatetime, show_seconds=True)<span class="sort_data">$time.mktime($curdatetime.timetuple())</span></td> <td class="nowrap"><div class="${fuzzydate}">$sbdatetime.sbdatetime.sbfdatetime($curdatetime, show_seconds=True)</div><span class="sort_data">$time.mktime($curdatetime.timetuple())</span></td>
<td width="25%"> <td width="25%">
<span><a style="color: #fff; text-align: center;" href="$sbRoot/home/displayShow?show=$hItem["show_id"]#season-$hItem["season"]">$hItem["show_name"] - <%="S%02i" % int(hItem["season"])+"E%02i" % int(hItem["episode"]) %>#if "proper" in $hItem["resource"].lower or "repack" in $hItem["resource"].lower then ' <span class="quality Proper">Proper</span>' else ""#</a></span> <span><a style="color: #fff; text-align: center;" href="$sbRoot/home/displayShow?show=$hItem["show_id"]#season-$hItem["season"]">$hItem["show_name"] - <%="S%02i" % int(hItem["season"])+"E%02i" % int(hItem["episode"]) %>#if "proper" in $hItem["resource"].lower or "repack" in $hItem["resource"].lower then ' <span class="quality Proper">Proper</span>' else ""#</a></span>
</td> </td>

45
gui/slick/interfaces/default/home.tmpl
View File

@ -247,6 +247,7 @@ function invertSort(){
#set $fuzzydate = 'airdate' #set $fuzzydate = 'airdate'
#if $sickbeard.FUZZY_DATING: #if $sickbeard.FUZZY_DATING:
fuzzyMoment({ fuzzyMoment({
dtInline : #if $layout == 'poster' then "true" else "false"#,
containerClass : '.${fuzzydate}', containerClass : '.${fuzzydate}',
dateHasTime : false, dateHasTime : false,
dateFormat : '${sickbeard.DATE_PRESET}', dateFormat : '${sickbeard.DATE_PRESET}',
@ -365,14 +366,14 @@ $myShowList.sort(lambda x, y: cmp(x.name, y.name))
#set $progressbar_percent = $nom * 100 / $den #set $progressbar_percent = $nom * 100 / $den
#if "a" in sickbeard.DATE_PRESET: #if "a" in sickbeard.DATE_PRESET:
#set $showheight = "344px" #set $showheight = "334px"
#set $tableheight = "62px" #set $tableheight = "52px"
#else if "B" in sickbeard.DATE_PRESET: #else if "B" in sickbeard.DATE_PRESET:
#set $showheight = "374px" #set $showheight = "374px"
#set $tableheight = "92px" #set $tableheight = "92px"
#else if "A" in sickbeard.DATE_PRESET: #else if "A" in sickbeard.DATE_PRESET:
#set $showheight = "344px" #set $showheight = "334px"
#set $tableheight = "62px" #set $tableheight = "52px"
#else #else
#set $showheight = "323px" #set $showheight = "323px"
#set $tableheight = "42px" #set $tableheight = "42px"
@ -410,15 +411,14 @@ $myShowList.sort(lambda x, y: cmp(x.name, y.name))
</script> </script>
<table width="184px" height="$tableheight" cellspacing="1" border="0" cellpadding="0" style="padding-left: 2px; cursor: default;"> <table width="184px" height="$tableheight" cellspacing="1" border="0" cellpadding="0" style="padding-left: 2px; cursor: default;">
<col width="60px" /> <col width="120px" />
<col width="59px" /> <col width="59px" />
<col width="60px" />
<tr> <tr>
<td style="text-align:center; vertical-align:middle;"> <td style="text-align:center; vertical-align:middle;" colspan="3">
#if $cur_airs_next #if $cur_airs_next
#set $ldatetime = $network_timezones.parse_date_time($cur_airs_next,$curShow.airs,$curShow.network) #set $ldatetime = $network_timezones.parse_date_time($cur_airs_next,$curShow.airs,$curShow.network)
<div class="show-date">Next Ep: $sbdatetime.sbdatetime.sbfdate($ldatetime)</div> <div class="show-date">Next Ep: <span class="${fuzzydate}">$sbdatetime.sbdatetime.sbfdate($ldatetime)</span></div>
#else if $curShow.status != "Ended" and int($curShow.paused) == 1: #else if $curShow.status != "Ended" and int($curShow.paused) == 1:
<div class="show-status">Paused</div> <div class="show-status">Paused</div>
#else if $curShow.status: #else if $curShow.status:
@ -427,28 +427,29 @@ $myShowList.sort(lambda x, y: cmp(x.name, y.name))
<div class="show-status">?</div> <div class="show-status">?</div>
#end if #end if
</td> </td>
</tr>
<td style="text-align:center; vertical-align:middle;"> <tr>
#if $layout != 'simple':
#if $curShow.network:
<img class="show-network-image" src="$sbRoot/images/network/${curShow.network.replace(u"\u00C9",'e').lower()}.png" alt="$curShow.network" title="$curShow.network" />
#else:
<img class="show-network-image" src="$sbRoot/images/network/nonetwork.png" alt="No Network" title="No Network" />
#end if
#else:
$curShow.network
#end if
</td>
<td style="text-align:center; vertical-align:middle;"> <td style="text-align:center; vertical-align:middle;">
<span class="show-dlstats" title="$download_stat_tip">$download_stat</span> <span class="show-dlstats" title="$download_stat_tip">$download_stat</span>
<div class="float-right"> <div class="float-left">
#if $curShow.quality in $qualityPresets: #if $curShow.quality in $qualityPresets:
<span class="show-dlstats">$qualityPresetStrings[$curShow.quality]</span> <span class="show-dlstats">$qualityPresetStrings[$curShow.quality]</span>
#else: #else:
<span class="show-dlstats">Custom</span> <span class="show-dlstats">Custom</span>
#end if #end if
</td> </td>
<td style="text-align:center; vertical-align:middle;">
#if $layout != 'simple':
#if $curShow.network:
<img class="show-network-image float-right" src="$sbRoot/images/network/${curShow.network.replace(u"\u00C9",'e').lower()}.png" alt="$curShow.network" title="$curShow.network" />
#else:
<img class="show-network-image float-right" src="$sbRoot/images/network/nonetwork.png" alt="No Network" title="No Network" />
#end if
#else:
$curShow.network
#end if
</td>
</tr> </tr>
</table> </table>

4
gui/slick/js/fuzzyMoment.js
View File

@ -7,6 +7,7 @@
* timeFormat string The python token time formatting * timeFormat string The python token time formatting
* trimZero Whether to trim leading "0"s (default : false) * trimZero Whether to trim leading "0"s (default : false)
* dtGlue string To insert between the output of date and time (default: '<br />') * dtGlue string To insert between the output of date and time (default: '<br />')
* dtInline Bool Whether to output date inline or use more than one line
*/ */
function fuzzyMoment(fmConfig) { function fuzzyMoment(fmConfig) {
@ -16,6 +17,7 @@
timeFormat = (/undefined/i.test(typeof(fmConfig)) || /undefined/i.test(typeof(fmConfig.timeFormat)) ? '' : fmConfig.timeFormat), timeFormat = (/undefined/i.test(typeof(fmConfig)) || /undefined/i.test(typeof(fmConfig.timeFormat)) ? '' : fmConfig.timeFormat),
trimZero = (/undefined/i.test(typeof(fmConfig)) || /undefined/i.test(typeof(fmConfig.trimZero)) ? false : !!fmConfig.trimZero), trimZero = (/undefined/i.test(typeof(fmConfig)) || /undefined/i.test(typeof(fmConfig.trimZero)) ? false : !!fmConfig.trimZero),
dtGlue = (/undefined/i.test(typeof(fmConfig)) || /undefined/i.test(typeof(fmConfig.dtGlue)) ? '<br />' : fmConfig.dtGlue), dtGlue = (/undefined/i.test(typeof(fmConfig)) || /undefined/i.test(typeof(fmConfig.dtGlue)) ? '<br />' : fmConfig.dtGlue),
dtInline = (/undefined/i.test(typeof(fmConfig)) || /undefined/i.test(typeof(fmConfig.dtInline)) ? false : fmConfig.dtInline),
jd = (function (str) { jd = (function (str) {
var token_map = ['a', 'ddd', 'A', 'dddd', 'b', 'MMM', 'B', 'MMMM', 'd', 'DD', 'm', 'MM', 'y', 'YY', 'Y', 'YYYY', 'x', 'L', var token_map = ['a', 'ddd', 'A', 'dddd', 'b', 'MMM', 'B', 'MMMM', 'd', 'DD', 'm', 'MM', 'y', 'YY', 'Y', 'YYYY', 'x', 'L',
@ -134,7 +136,7 @@
qTipTime = true; qTipTime = true;
var month = airdate.diff(today, 'month'); var month = airdate.diff(today, 'month');
if (1 == parseInt(airdate.year() - today.year())) if (1 == parseInt(airdate.year() - today.year()))
result += '<br />(Next Year)'; result += (dtInline ? ' ' : '<br />') + '(Next Year)';
} }
titleThis = true; titleThis = true;
} }