Sorting arrows on table headers (#504)

* Sorting arrows on table headers

* Better arrows and seperate S/L/D columns

public/css/style.css

@@ -136,6 +136,18 @@ tr.torrent-info td.date {
   border-top: 1px solid #ddd;
 }
 
+th a:hover {
+  text-decoration: none;
+}
+
+.sortarrowleft {
+  letter-spacing: -0.6rem;
+}
+
+.sortarrowdim {
+  opacity: 0.25;
+}
+
 div.container div.blockBody:nth-of-type(2) table{table-layout:fixed;}
 div.container div.blockBody:nth-of-type(2) table tr:first-of-type th:first-of-type, div.container div.blockBody:nth-of-type(2) table tr:first-of-type th:nth-of-type(5){width:10%;}
 div.container div.blockBody:nth-of-type(2) table tr:first-of-type th:nth-of-type(3){width:15%;}

router/templateFunctions.go

@@ -57,6 +57,25 @@ var FuncMap = template.FuncMap{
 
 		return template.URL(url.String())
 	},
+	"genSortArrows": func(currentUrl url.URL, sortBy string) template.HTML {
+		values := currentUrl.Query()
+		leftclass := "sortarrowdim"
+		rightclass := "sortarrowdim"
+
+		if _, ok := values["order"]; ok {
+			if values["sort"][0] == sortBy {
+				if values["order"][0] == "true" {
+					rightclass = ""
+				} else {
+					leftclass = ""
+				}
+			}
+		}
+
+		arrows := "<span class=\"sortarrowleft "+leftclass+"\">▼</span><span class=\""+rightclass+"\">▲</span>"
+
+		return template.HTML(arrows)
+	},
 	"genNav": func(nav Navigation, currentUrl *url.URL, pagesSelectable int) template.HTML {
 		var ret = ""
 		if nav.TotalItem > 0 {

templates/home.html

@@ -13,16 +13,14 @@
           <table class="table custom-table-hover">
           <tr>
               <th class="col-xs-1 hidden-xs">{{T "category"}}</th>
-              <th class="col-xs-8">
-                <a href="{{ genSearchWithOrdering .URL "1" }}">{{T "name"}}</a>
+              <th class="col-xs-12">
+                <a href="{{ genSearchWithOrdering .URL "1" }}">{{T "name"}}{{ genSortArrows .URL "1" }}</a>
               </th>
-              <th class="col-xs-1 hidden-xs">
-                <a href="{{ genSearchWithOrdering .URL "5" }}">{{T "S"}}</a> / 
-                <a href="{{ genSearchWithOrdering .URL "6" }}">{{T "L"}}</a> / 
-                <a href="{{ genSearchWithOrdering .URL "7" }}">{{T "D"}}</a>
-              </th>
-              <th class="col-xs-1 hidden-xs"><a href="{{ genSearchWithOrdering .URL "2" }}">{{T "date"}}</th></a>
-              <th class="col-xs-1 hidden-xs"><a href="{{ genSearchWithOrdering .URL "4" }}">{{T "size"}}</a></th>
+              <th class="col-xs-1 hidden-xs"><a href="{{ genSearchWithOrdering .URL "5" }}">{{T "S"}}{{ genSortArrows .URL "5" }}</a></th>
+              <th class="col-xs-1 hidden-xs"><a href="{{ genSearchWithOrdering .URL "6" }}">{{T "L"}}{{ genSortArrows .URL "6" }}</a></th>
+              <th class="col-xs-1 hidden-xs"><a href="{{ genSearchWithOrdering .URL "7" }}">{{T "D"}}{{ genSortArrows .URL "7" }}</a></th>
+              <th class="col-xs-1 hidden-xs"><a href="{{ genSearchWithOrdering .URL "2" }}">{{T "date"}}{{ genSortArrows .URL "2" }}</th></a>
+              <th class="col-xs-1 hidden-xs"><a href="{{ genSearchWithOrdering .URL "4" }}">{{T "size"}}{{ genSortArrows .URL "4" }}</a></th>
               <th class="col-xs-1 hidden-xs">{{T "links"}}</th>
           </tr>
           {{ range .ListTorrents}}
@@ -41,7 +39,9 @@
                       {{.Name}}
                   </a>
               </td>
-              <td class="hidden-xs"><b class="text-success">{{.Seeders}}</b> / <b class="text-danger">{{.Leechers}}</b> / {{.Completed}}</td>
+              <td class="hidden-xs"><b class="text-success">{{.Seeders}}</b></td>
+              <td class="hidden-xs"><b class="text-danger">{{.Leechers}}</b></td>
+              <td class="hidden-xs">{{.Completed}}</td>
               <td class="hidden-xs date date-short">{{.Date}}</td>
               <td class="hidden-xs filesize">{{.Filesize}}</td>
               <td class="hidden-xs">