diff --git a/gui/slick/css/style.css b/gui/slick/css/style.css index 119a4f9e7371b2df5098d29f3be9c7b34a144516..dd7d31b8f57060db1a9899d235fe0527e1ced587 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 3bd132b9b4c123325a42a571cf5a3858fda443b4..14c44f81e7e0fbf9c38dfabc873a75d30762eda7 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 Binary files a/gui/slick/js/core.min.js and b/gui/slick/js/core.min.js differ diff --git a/gui/slick/views/home.mako b/gui/slick/views/home.mako index c6a92c078aac5feb51af03f11ce1224c15a99084..cf048477e967e2936b383f92d7ad1c788939f3d3 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>