Added tablesorter with bootstrap 4 compatibility

Case-insensitive sorting fixed for shows view

changelog.md

 # Changelog
 
-- * 7edca97 - 2018-07-27: Refactored table show show/episode column for history view Removed table footer from history view 
+- * 484adbd - 2018-07-27: Added tablesorter with bootstrap 4 compatibility Case-insensitive sorting fixed for shows view 
+- * d086087 - 2018-07-27: Refactored table show show/episode column for history view Removed table footer from history view 
 - * 876ddfc - 2018-07-27: Pre-Release v9.3.56.dev7 
 - * 19cb817 - 2018-07-27: Refactored table class spacing/padding and column widths 
 - * 5a27b14 - 2018-07-27: Pre-Release v9.3.56.dev6 

package-lock.json

@@ -1939,18 +1939,18 @@
  "hoek": "0.9.x"
  }
  },
- "bootbox": {
- "version": "4.4.0",
- "resolved": "https://registry.npmjs.org/bootbox/-/bootbox-4.4.0.tgz",
- "integrity": "sha1-/3+Jj7h9RSflR/62QVj4hFDRoMk=",
- "dev": true
- },
  "bootstrap": {
  "version": "4.1.1",
  "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.1.tgz",
  "integrity": "sha1-OuyFAA+mGQhdqNLkmD39Z88hFMs=",
  "dev": true
  },
+ "bootstrap-table": {
+ "version": "1.12.1",
+ "resolved": "https://registry.npmjs.org/bootstrap-table/-/bootstrap-table-1.12.1.tgz",
+ "integrity": "sha1-ycOXMGeEKpN8BdhjnszLAqvWumU=",
+ "dev": true
+ },
  "brace-expansion": {
  "version": "1.1.11",
  "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -13449,6 +13449,15 @@
  }
  }
  },
+ "tablesorter": {
+ "version": "2.30.7",
+ "resolved": "https://registry.npmjs.org/tablesorter/-/tablesorter-2.30.7.tgz",
+ "integrity": "sha512-Qd8ixfa4OEFFgDWh2g9bk5rXoXBMWMtFicpknEeTciiv+QYFlnNnOpVxZTGvhq+9xvBPPEnC7Ks5qNK8jaaNSg==",
+ "dev": true,
+ "requires": {
+ "jquery": ">=1.2.6"
+ }
+ },
  "tapable": {
  "version": "1.0.0",
  "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.0.0.tgz",

package.json

@@ -56,6 +56,7 @@
  "pnotify": "^4.0.0-alpha.4",
  "popper.js": "^1.14.3",
  "sass-loader": "^7.0.3",
+ "tablesorter": "^2.30.7",
  "timeago": "^1.6.3",
  "tokenfield": "^0.9.9",
  "tooltipster": "^4.2.6",

sickrage/core/webserver/views/home/add_shows.mako

@@ -5,13 +5,7 @@
  import sickrage
 %>
 <%block name="content">
- <div id="addShowPortal" class="mx-auto w-50">
- <div class="row">
- <div class="col-md-12">
- <h1 class="title">${title}</h1>
- <hr class="bg-dark"/>
- </div>
- </div>
+ <div id="addShowPortal" class="mx-auto w-50 mt-3 mb-3">
  <div class="row">
  <div class="col-md-12">
  <a href="${srWebRoot}/home/addShows/newShow/">

sickrage/core/webserver/views/home/display_show.mako

@@ -236,7 +236,7 @@
  <a href="${anon_url('http://trakt.tv/shows/popular/?genres=', genre.lower())}"
  target="_blank"
  title="View other popular ${genre} shows on trakt.tv.">
- <li class="badge badge-primary">${genre}</li>
+ <li class="fas fa-tag badge badge-primary p-1"> ${genre}</li>
  </a>
  % endfor
  % endif
@@ -245,7 +245,7 @@
  <a href="${anon_url('http://trakt.tv/shows/popular/?genres=', imdbgenre.lower())}"
  target="_blank"
  title="View other popular ${imdbgenre} shows on trakt.tv.">
- <li class="badge badge-primary">${imdbgenre}</li>
+ <li class="fas fa-tag badge badge-primary p-1"> ${imdbgenre}</li>
  </a>
  % endfor
  % endif

sickrage/core/webserver/views/home/index.mako

@@ -271,8 +271,8 @@
  </div>
  % else:
  <div class="table-responsive">
- <table id="showListTable${curListType}" class="table">
- <thead>
+ <table class="table tablesorter-bootstrap" id="showListTable${curListType}" data-sortlist="[[2,0]]">
+ <thead class="thead-dark">
  <tr>
  <th>${_('Next Ep')}</th>
  <th>${_('Prev Ep')}</th>
@@ -286,24 +286,6 @@
  </tr>
  </thead>
 
- <tfoot>
- <tr>
- <th>
- <a href="${srWebRoot}/home/addShows/">
- ${_('Add')} ${(_('Show'), _('Anime'))[curListType == 'Anime']}
- </a>
- </th>
- <th>&nbsp;</th>
- <th>&nbsp;</th>
- <th>&nbsp;</th>
- <th>&nbsp;</th>
- <th>&nbsp;</th>
- <th>&nbsp;</th>
- <th>&nbsp;</th>
- <th>&nbsp;</th>
- </tr>
- </tfoot>
-
  % if sickrage.app.show_queue.loadingShowList:
  <tbody>
  % for curLoadingShow in sickrage.app.show_queue.loadingShowList:

sickrage/core/webserver/views/home/new_show.mako

@@ -13,7 +13,7 @@
 <%block name="content">
  <div class="row">
  <div class="col-lg-10 mx-auto">
- <div class="sickrage-stepper m-1">
+ <div class="sickrage-stepper mt-3 mb-3">
  <div class="stepwizard">
  <div class="stepwizard-row setup-panel form-inline">
  <div class="stepwizard-step col-auto">

sickrage/core/webserver/views/layouts/main.mako

@@ -272,8 +272,8 @@
  ${_('Tools')}
  </span>
  <span class="d-sm-none d-md-block">
- <object class="d-block fas fa-2x fa-user-circle rounded-circle shadow" data="https://gravatar.com/avatar/${md5(current_user['email']).hexdigest()}?&d=404" style="width: 40px;height: auto;" type="image/jpg">
- </object>
+ <img class="rounded-circle shadow"
+  src="https://gravatar.com/avatar/${md5(current_user['email']).hexdigest()}?d=mm&s=40"/>
  ${toolsBadge}
  </span>
  </a>

src/js/core.js

 import 'bootstrap';
+import 'tablesorter';
 import 'jquery-form';
 import 'jquery-ui/ui/disable-selection';
 import 'jquery-ui/ui/widgets/slider';
@@ -1289,10 +1290,7 @@ $(document).ready(function ($) {
  },
 
  index: function () {
- // Resets the tables sorting, needed as we only use a single call for both tables in tablesorter
- $('.resetsorting').on('click', function () {
- $('table').trigger('filterReset');
- });
+ $('table').tablesorter({theme : "bootstrap"});
 
  function resizePosters(newSize) {
  var fontSize, spriteScale, borderRadius;

src/scss/core.scss

 @import "~bootstrap/scss/bootstrap";
+@import "~tablesorter/dist/css/theme.bootstrap_4.min.css";
 @import "~tokenfield/dist/tokenfield.css";
 @import "~jquery-ui/themes/base/all.css";
 @import "~tooltipster/dist/css/tooltipster.bundle.css";
@@ -296,13 +297,16 @@ span.snatched b {
  @extend .table-bordered;
  @extend .table-dark;
  @extend .shadow;
+
  th {
  @extend .text-center;
  @extend .text-nowrap;
  }
+
  th, td {
  @extend .p-1;
  }
+
  .table-fit {
  white-space: nowrap;
  width: 1%;