From 7a0e9a6c37ccdbe74507e7a9e4cb5037555bb6d3 Mon Sep 17 00:00:00 2001 From: Vince Valenti <vince@blue-box.net> Date: Mon, 23 Nov 2015 20:08:53 -0800 Subject: [PATCH] Enable filtering shows in poster layout - Rename .show class to .show-container to avoid conflict with bootstrap's .show class. - Remove name search box from all other layouts since you can use the filter row in the table. - Rename 'Reset Search' button to 'Clear Filter(s)'. --- gui/slick/css/style.css | 22 +++++++++++----------- gui/slick/js/core.js | 22 +++++++++++----------- gui/slick/js/core.min.js | Bin 58736 -> 58677 bytes gui/slick/views/home.mako | 18 ++++++++++-------- 4 files changed, 32 insertions(+), 30 deletions(-) diff --git a/gui/slick/css/style.css b/gui/slick/css/style.css index 119a4f9e7..dd7d31b8f 100644 --- a/gui/slick/css/style.css +++ b/gui/slick/css/style.css @@ -627,7 +627,7 @@ home.mako margin: 0 auto; } -.show { +.show-container { margin: 12px; width: 188px; height: 352px; @@ -644,28 +644,28 @@ home.mako border-top-right-radius: 5px; } -.show .ui-progressbar { +.show-container .ui-progressbar { height: 7px !important; top: -2px; } -.show .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { +.show-container .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0px; } -.show .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { +.show-container .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 0px; } -.show .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { +.show-container .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 0px; } -.show .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { +.show-container .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 0px; } -.show .ui-widget-content { +.show-container .ui-widget-content { border-top: 1px solid #111; border-bottom: 1px solid #111; border-left: 0px; @@ -677,10 +677,10 @@ home.mako .ui-progressbar .progress-20 { border: none; } -.show .progress-20, -.show .progress-40, -.show .progress-60, -.show .progress-80 { +.show-container .progress-20, +.show-container .progress-40, +.show-container .progress-60, +.show-container .progress-80 { border-radius: 0px; height: 7px } diff --git a/gui/slick/js/core.js b/gui/slick/js/core.js index 3bd132b9b..14c44f81e 100644 --- a/gui/slick/js/core.js +++ b/gui/slick/js/core.js @@ -1749,6 +1749,16 @@ var SICKRAGE = { $('table').trigger('filterReset'); }); + // Handle filtering in the poster layout + $('#filterShowName').on('input', _.debounce(function (e) { + $('#container, #container-anime').isotope({ + filter: function () { + var name = $('div.show-title', this).text(); + return (name.toLowerCase().indexOf(e.target.value.toLowerCase()) !== -1); + } + }); + }, 500)); + // This needs to be refined to work a little faster. $('.progressbar').each(function(){ var percentage = $(this).data('progress-percentage'); @@ -1869,21 +1879,11 @@ var SICKRAGE = { sortAppend: [[2,0]] }); - if ($("#showListTableShows").find("tbody").find("tr").size() > 0){ - $.tablesorter.filter.bindSearch( "#showListTableShows", $('.search') ); - } - - if(metaToBool('sickbeard.ANIME_SPLIT_HOME')){ - if($("#showListTableAnime").find("tbody").find("tr").size() > 0){ - $.tablesorter.filter.bindSearch( "#showListTableAnime", $('.search') ); - } - } - // @TODO we need to check if doing a $('') with a comma would be quicker than a seperate // isotope function for each as it does here $.each([$('#container'), $('#container-anime')], function (){ this.isotope({ - itemSelector: '.show', + itemSelector: '.show-container', sortBy : getMeta('sickbeard.POSTER_SORTBY'), sortAscending: getMeta('sickbeard.POSTER_SORTDIR'), layoutMode: 'masonry', diff --git a/gui/slick/js/core.min.js b/gui/slick/js/core.min.js index d45697fcb8cca01ffb8e469f39ddd5bf73d86af3..f94c4882cf85b4fc8d0e8c1f6b1e145298317339 100644 GIT binary patch delta 220 zcmexxih1iP<_!@GjFi(db4pT+f-~~V{StFil{EG8^E8w)^9o8!lyu_tQc{!hOY@Rb zHPTA+l1no4^E47Cr>@bhhv>3`i)vPvB^D_p*{WzLrDT@r6=&p^>y~7e<fJO;lw@QU zYwDGxR+MOHS{J33losXb8Y<e_Ch3*r`{b9W7C9#tr)p^GW#*-%R`{oBB<htU7Nw__ y=#?erl%}F8(yXo3tkp3!U^39$9K67pWAcHOQCzyo`FSOYnR%&2o26ETSpxt<2v8mX delta 270 zcmdmbiuuDS<_!@GHrp<=<CrYGSTsvXQ!gzuFGWMCBq=|o62U7{($p)?tV-3;v@=js zQ_(9)Ov*_u&MzuSEz(QN%mGnJnRzL}sfk6&85&B;#TohKKAFWOAs}_Z8TsYKN;)bU wN_xd$1xlKlI+OdCiA~O1Ct8oL+A%LPHx*$s72N?b8QmRKE2B5xUm0c%0QqTNJpcdz diff --git a/gui/slick/views/home.mako b/gui/slick/views/home.mako index c6a92c078..cf048477e 100644 --- a/gui/slick/views/home.mako +++ b/gui/slick/views/home.mako @@ -19,19 +19,21 @@ <div id="HomeLayout" class="pull-right hidden-print" style="margin-top: -40px;"> % if sickbeard.HOME_LAYOUT != 'poster': + <span> <button id="popover" type="button" class="btn btn-inline">Select Columns <b class="caret"></b></button> - % endif - - % if sickbeard.HOME_LAYOUT != 'poster': + </span> - <span> Search: - <input class="search form-control form-control-inline input-sm input200" type="search" data-column="2" placeholder="Search Show Name"> - <button type="button" class="resetsorting btn btn-inline">Reset Search</button> + <span> + <button type="button" class="resetsorting btn btn-inline">Clear Filter(s)</button> </span> % endif % if sickbeard.HOME_LAYOUT == 'poster': + <span> + <input id="filterShowName" class="form-control form-control-inline input-sm input200" type="search" placeholder="Filter Show Name"> + </span> + <span> Sort By: <select id="postersort" class="form-control form-control-inline input-sm"> <option value="name" data-sort="${srRoot}/setPosterSortBy/?sort=name" ${('', 'selected="selected"')[sickbeard.POSTER_SORTBY == 'name']}>Name</option> @@ -71,7 +73,7 @@ <div class="posterview"> % for curLoadingShow in sickbeard.showQueueScheduler.action.loadingShowList: % if curLoadingShow.show == None: - <div class="show" data-name="0" data-date="010101" data-network="0" data-progress="101"> + <div class="show-container" data-name="0" data-date="010101" data-network="0" data-progress="101"> <img alt="" title="${curLoadingShow.show_name}" class="show-image" style="border-bottom: 1px solid #111;" src="${srRoot}/images/poster.png" /> <div class="show-details"> <div class="show-add">Loading... (${curLoadingShow.show_name})</div> @@ -144,7 +146,7 @@ elif 'nded' in display_status: data_date = '5000000100.0' %> - <div class="show" id="show${curShow.indexerid}" data-name="${curShow.name}" data-date="${data_date}" data-network="${curShow.network}" data-progress="${progressbar_percent}"> + <div class="show-container" id="show${curShow.indexerid}" data-name="${curShow.name}" data-date="${data_date}" data-network="${curShow.network}" data-progress="${progressbar_percent}"> <div class="show-image"> <a href="${srRoot}/home/displayShow?show=${curShow.indexerid}"><img alt="" class="show-image" src="${srRoot}/showPoster/?show=${curShow.indexerid}&which=poster_thumb" /></a> </div> -- GitLab