From a47f89cd0b8a509e2aca50d6e00a3f6a3dfa1051 Mon Sep 17 00:00:00 2001
From: kilo <kilowwwww@gmail.com>
Date: Sat, 24 Jun 2017 01:05:21 +0200
Subject: [PATCH] Make flags overlap category icon (#1059)

* Prettier flag position

* flag overlap category icon

* HTML changes

* fix css that didn't apply properly & colspan not always being there

* Update main.css

* Update home.html

* Update home.html

* Update main.css

* Update main.css
---
 public/css/flags/flags.css |   3 ++
 public/css/main.css        | 106 ++++++++++++++++++++++++++++++++++++-
 templates/home.html        |  50 ++++++++---------
 3 files changed, 130 insertions(+), 29 deletions(-)

diff --git a/public/css/flags/flags.css b/public/css/flags/flags.css
index f7490cda..f902ffa0 100644
--- a/public/css/flags/flags.css
+++ b/public/css/flags/flags.css
@@ -7,6 +7,9 @@
     width: 16px;
     height: 11px;
     background: url('flags.png') no-repeat;
+	position: relative;
+	left: -22px;
+	bottom: -22px;
 }
 
 
diff --git a/public/css/main.css b/public/css/main.css
index b2811bff..b261dcb4 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -260,8 +260,24 @@ th, .home-td {
 	text-overflow: ellipsis;
 
 }
-.tr-cat a { display: block; }
-.tr-cat img { margin-top: 2px; }
+.tr-cat div.nyaa-cat {
+	position: relative;
+	text-align: left;
+}
+.tr-cat a { 
+	width: 100%;
+	height: 100%;
+	display: block; 
+}
+.tr-cat img {
+	margin-top: 2px;
+}
+.tr-cat .nyaa-cat img {
+	position: absolute;
+    bottom: -2px;
+    display: block;
+    left: 11px;
+}
 
 
 th { border-bottom-width: 2px; }
@@ -538,6 +554,7 @@ input#show-filelist:checked ~ #filelist {
 .table-filelist {
 	width: 100%;
 }
+tr.torrentinfo { height: 38px; }
 .tr-filelist {
 	--nest-level: 0;
 }
@@ -911,3 +928,88 @@ details[open] summary:after {
 	content: "-";
 	margin: -4px 5px 0 0;
 }
+
+.nyaa-cat {
+	background-repeat: no-repeat;
+	background-position: center center;
+	width:80px;
+	height: 28px;
+	display: block;
+}
+
+.nyaa-cat-1 {
+	background: url("/img/torrents/1.png")
+}
+.nyaa-cat-2 {
+	background: url("/img/torrents/2.png")
+}
+.nyaa-cat-3 {
+	background: url("/img/torrents/3.png")
+}
+.nyaa-cat-4 {
+	background: url("/img/torrents/4.png")
+}
+.nyaa-cat-5 {
+	background: url("/img/torrents/5.png")
+}
+.nyaa-cat-6 {
+	background: url("/img/torrents/6.png")
+}
+.nyaa-cat-7 {
+	background: url("/img/torrents/7.png")
+}
+.nyaa-cat-8 {
+	background: url("/img/torrents/8.png")
+}
+.nyaa-cat-9 {
+	background: url("/img/torrents/9.png")
+}
+.nyaa-cat-10 {
+	background: url("/img/torrents/10.png")
+}
+.nyaa-cat-11 {
+	background: url("/img/torrents/11.png")
+}
+.nyaa-cat-12 {
+	background: url("/img/torrents/12.png")
+}
+.nyaa-cat-13 {
+	background: url("/img/torrents/13.png")
+}
+.nyaa-cat-14 {
+	background: url("/img/torrents/14.png")
+}
+.nyaa-cat-15 {
+	background: url("/img/torrents/15.png")
+}
+.nyaa-cat-16 {
+	background: url("/img/torrents/16.png")
+}
+.nyaa-cat-17 {
+	background: url("/img/torrents/17.png")
+}
+.nyaa-cat-18 {
+	background: url("/img/torrents/18.png")
+}
+
+.sukebei-cat-11 {
+	background: url("/img/torrents/sukebei/11.png")
+}
+.sukebei-cat-12 {
+	background: url("/img/torrents/sukebei/12.png")
+}
+.sukebei-cat-13 {
+	background: url("/img/torrents/sukebei/13.png")
+}
+.sukebei-cat-14 {
+	background: url("/img/torrents/sukebei/14.png")
+}
+.sukebei-cat-15 {
+	background: url("/img/torrents/sukebei/15.png")
+}
+.sukebei-cat-21 {
+	background: url("/img/torrents/sukebei/21.png")
+}
+.sukebei-cat-22 {
+	background: url("/img/torrents/sukebei/22.png")
+}
diff --git a/templates/home.html b/templates/home.html
index 85fe952b..044d5b1f 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -17,7 +17,6 @@
               <th class="tr-cb hide"><input type="checkbox" name="select_all" onchange="TorrentsMod.selectAll(this.checked)"></th>
               {{end}}
               <th class="tr-cat">{{call $.T "category"}}</th>
-              <th class="tr-lang"></th>
               <th class="tr-name">
                 <a href="{{ genSearchWithOrdering .URL "1" }}">{{call $.T "name"}}<span class="sort-arrows">{{ genSortArrows .URL "1" }}</span></a>
               </th>
@@ -38,7 +37,7 @@
               <th class="tr-date hide-xs"><a href="{{ genSearchWithOrdering .URL "2" }}">{{call $.T "date"}}<span class="sort-arrows">{{ genSortArrows .URL "2" }}</span></a></th>
           </tr>
           </thead>
-          <tbody>
+          <tbody id="torrentListResults">
           {{ range .Models}}
           <tr id="torrent_{{ .ID }}" class="torrent-info
               {{if eq .Status 2}}remake{{end}}
@@ -49,20 +48,19 @@
                 <input data-name="{{ .Name }}" type="checkbox" id="torrent_cb_{{ .ID }}" name="torrent_id" value="{{ .ID }}">
               </td>
                 {{ end }}
-              <td class="tr-cat home-td" {{if eq (FlagCode .Language) ""}}colspan="2"{{end}}>
-                  <a href="{{$.URL.Parse (printf "/search?c=%s_%s" .Category .SubCategory) }}">
-                      {{ if Sukebei }}
-                      <img alt="{{ call $.T (CategoryName .Category .SubCategory) }}" src="{{$.URL.Parse (printf "/img/torrents/sukebei/%s%s.png" .Category .SubCategory) }}" title="{{ call $.T (CategoryName .Category .SubCategory) }}">
-                      {{ else }}
-                      <img alt="{{ call $.T (CategoryName .Category .SubCategory) }}" src="{{$.URL.Parse (printf "/img/torrents/%s.png" .SubCategory) }}" title="{{ call $.T (CategoryName .Category .SubCategory) }}">
-                      {{ end}}
-                  </a>
-              </td>
+              <td class="tr-cat home-td">
+			  {{ if Sukebei }}
+              <div class="nyaa-cat sukebei-cat-{{printf "%s%s" .Category .SubCategory}}">
+			  {{ else}}
+              <div class="nyaa-cat nyaa-cat-{{printf "%s" .SubCategory}}">
+			  {{end}}
+                  <a href="{{$.URL.Parse (printf "/search?c=%s_%s" .Category .SubCategory) }}" title="{{ call $.T (CategoryName .Category .SubCategory) }}">
               {{if ne (FlagCode .Language) ""}}
-              <td class="tr-lang tr-flag home-td">
                   <img src="img/blank.gif" alt="{{ LanguageName .Language $.T }}" class="flag flag-{{FlagCode .Language}}" title="{{ LanguageName .Language $.T }}">
-              </td>
               {{end}}
+                  </a>
+              </div>
+              </td>
               <td class="tr-name home-td">
                   <a href="{{genRoute "view_torrent" "id" ( print .ID ) }}">
                       {{.Name}}
@@ -236,26 +234,24 @@
                 "<input data-name=\""+Templates.EncodeEntities(torrent.name)+"\" type=\"checkbox\" id=\"torrent_cb_"+torrent.id+"\" name=\"torrent_id\" value=\""+torrent.id+"\">"+
               "</td>"+
             {{ end }}
-              "<td class=\"tr-cat home-td\""+(torrent.language == "" ? " colspan=2" : "")+">"+
-                  "<a href=\"{{$.URL.Parse "/search?c=" }}"+ torrent.category + "_" + torrent.sub_category +"\">"+
-                      {{ if Sukebei }}
-                      "<img src=\"{{ $.URL.Parse "/img/torrents/sukebei/" }}"+ torrent.category + torrent.sub_category+".png\" title=\""+ torrent.CategoryName +"\">"+
-                      {{ else }}
-                      "<img src=\"{{ $.URL.Parse "/img/torrents/" }}"+ torrent.sub_category +".png\" title=\""+ torrent.CategoryName +"\">"+
-                      {{ end }}
+            "<td class=\"tr-cat home-td\">"+
+			{{ if Sukebei }}
+              "<div class=\"nyaa-cat sukebei-cat-"+ torrent.category + torrent.sub_category +"\">"+
+			{{else}}
+              "<div class=\"nyaa-cat nyaa-cat-"+ torrent.sub_category +"\">"+
+			{{end}}
+                  "<a href=\"{{$.URL.Parse "/search?c=" }}"+ torrent.category + "_" + torrent.sub_category +"\" title=\""+ torrent.CategoryName +"\">"+
+					((torrent.language != "") ? "<img src=\"img/blank.gif\" class=\"flag flag-"+flagCode(torrent.language)+"\">" : "") +
                   "</a>"+
-              "</td>"+
-              (torrent.language != "" ? "<td class=\"tr-lang tr-flag home-td\">" +
-                "<img src=\"img/blank.gif\" class=\"flag flag-"+flagCode(torrent.language)+"\">"+
-              "</td>" : "")+
+              "</div></td>"+
               "<td class=\"tr-name home-td\"><a href=\"/view/"+torrent.id+"\">"+Templates.EncodeEntities(torrent.name) +"</a></td>"+
               "<td class=\"tr-cs home-td hide-xs\">"+
               ((torrent.comments.length > 0) ? "<i class=\"comment-icon\" title=\"{{ call $.T "comments" }}\">" + torrent.comments.length + "</i>" : "")+
               "</td>"+
               "<td class=\"tr-links home-td\">"+
                   "<a href=\""+torrent.magnet +"\" title=\"{{ call $.T "magnet_link" }}\">"+
-                      "<div class=\"magnet-icon\"></div>"+
-                  "</a>"+(torrent.torrent != "" ? " <a href=\""+torrent.torrent+"\" title=\"{{ call $.T "torrent_file" }}\"><div class=\"download-icon\"></div></a>" : "") +
+                      "<div class=\"icon-magnet\"></div>"+
+                  "</a>"+(torrent.torrent != "" ? " <a href=\""+torrent.torrent+"\" title=\"{{ call $.T "torrent_file" }}\"><div class=\"icon-floppy\"></div></a>" : "") +
               "</td>"+
               "<td class=\"tr-size home-td hide-xs\">"+humanFileSize(torrent.filesize)+"</td>"+
               "<td class=\"tr-se home-td hide-xs\">"+torrent.seeders+"</td>"+
@@ -267,4 +263,4 @@
         Torrents.LastID = {{ lastID .URL .Models }};
         if (Torrents.LastID > 0) Torrents.CanRefresh = true;     
     </script>
-{{end}}
\ No newline at end of file
+{{end}}