From 8a2dc1e36d32a75dcebf7219694dde3489c60b2f Mon Sep 17 00:00:00 2001
From: Tomochin <tomochin@sugoimusic.me>
Date: Thu, 17 May 2018 04:14:13 +0700
Subject: [PATCH] Filter categories in artist.php

* Loop through $UsedCategories to generate filter links and .ghide() and
  .gshow() statements for each tr of the class that matches the category to
  to be filtered. Also allow for Show All.
* As nth-child is used for styling .ghide() and .gshow() natively breaks the
  zebra-striping. This is re-applied in apply_torrent_table_styling().
  The function removes CSS classes rowlight and rowdark with jquery :odd
  and :even CSS selectors Additional CSS were needed as nth-child cannot be
  referenced by .addClass().
* CSS styling for category filter links.
---
 static/styles/sugoi/style.css | 49 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/static/styles/sugoi/style.css b/static/styles/sugoi/style.css
index 5f0fa22..66956ad 100644
--- a/static/styles/sugoi/style.css
+++ b/static/styles/sugoi/style.css
@@ -234,6 +234,44 @@ ul.thin li { margin:0px 0px; padding:0px; }
   display: block;
 }
 
+#filter_menu {
+  width: 100%;
+  text-align: center;
+  background-color: #081653;
+  font-size: 10pt;
+}
+
+#filter_menu > ul {
+  display: flex;
+  width: 80%;
+  margin: 0 auto;
+}
+
+#filter_menu > ul > li {
+  position: relative;
+  height: 26px;
+  display: flex;
+  margin: 0;
+  flex: 1 1 auto;
+}
+
+#filter_menu ul > li > a {
+  padding: 0.4em 0;
+  display: inline-block;
+  width: 100%;
+  color: #FFFFFF;
+  transition: ease-in-out 0.1s;
+}
+
+#filter_menu ul li a.active {
+  background-color: #565656;
+}
+
+#filter_menu ul li a:hover {
+  background-color: #0B2592;
+  text-decoration: none;
+}
+
 #userinfo {
 /*  position: absolute;
   top: 258px; */
@@ -755,6 +793,17 @@ ul.poll li.graph {
 .torrent_table tr.torrent:nth-child(2n-1) {
   background-color: #4d73ff;
 }
+/*
+It is not possible to .addClass() nth-child so a new style must be created with
+the same css attributes as the nth-child lines above.
+Also defining an extra style class with nth-child also does not work so an extra
+css block is needed for .rowlight and .rowdark*/
+.torrent_table tr.torrent.rowlight {
+  background-color: #6687ff;
+}
+.torrent_table tr.torrent.rowdark {
+  background-color: #4d73ff;
+}
 .torrent_table tr.group {
   background-color: #335fff;
 }