tr-links of lower size if no torrent link & some other stuff (#1362)

* Add "no-torrent" class if no torrent link

* Add no-torrent class that changes width

* add & remove needed !important

* more padding between 860 & 1050px wide

* aids

* Update main.css

* Update main.css

* Update main.css

* Update main.css

* fix display on IE

* Update main.css

* no-torrent class in torrent auto update

* no-torrent class in torrent preview

* fix bug

* fix identical bug

* fix for small header

* small value change

public/css/main.css

@@ -124,7 +124,10 @@ body {
     border: none;
     max-width: 100%;
 }
-.nav-btn.log-in div { display: none; font-size: 16px; }
+.nav-btn.log-in div {
+    display: none;
+    font-size: 17px;
+}
 .header .h-search {
     margin-right: 6px;
 }
@@ -389,7 +392,7 @@ select.form-input {
 .form-refine .refine-category {
     border-left: none;
     border-radius: 0 3px 3px 0;
-    max-width: 50%;
+    max-width: 42%;
 }
 
 .box.refine > form > div {
@@ -506,6 +509,9 @@ th {
     text-align: left;
     padding: 0 2px!important;
 }
+.tr-links.no-torrent {
+    width: 27px!important;
+}
 
 .tr-cs {
     width: 15px;
@@ -666,24 +672,43 @@ html, body {
     }
     .header .h-user>.nav-btn {
         padding: 0 3px!important;
-		font-size: 85%;
+	font-size: 85%;
-		width: 100%;
+	width: 100%;
+    }
+    .header .h-user>a.nav-btn {
+	padding: 0!important;
+    }
+    .nav-btn.log-in span {
+	display: none;
+    }
+    .nav-btn.log-in div {
+	display: block;
+    }
+    .tr-se, .tr-le, .tr-dl {
+	width: 46px;
     }
-	.header .h-user>a.nav-btn { padding: 0!important; }
-	.nav-btn.log-in span { display: none; }
-	.nav-btn.log-in div { display: block; }
 }
 
 /* Image category shrinking & padding lowering between 1050 & 860px, do not modify any of these values */
 @media (max-width: 1050px) { 
-	.tr-cat { width: 8.7%; }
+    .tr-cat {
-	.torrent-preview-table .tr-cat { width: 9.1%; }
+	width: 8.7%;
-	th, .home-td, .user-td { padding: 2px 0.25%; }
+    }
+    .torrent-preview-table .tr-cat {
+	width: 9.1%;
+     }
+     th, .home-td, .user-td {
+	 padding: 2px 0.3%!important;
+    }
 }
 
 @media (max-width: 860px) { 
-	.tr-cat { width: 71px; }
+    .tr-cat {
-	th, .home-td, .user-td { padding: 2px 2px; }
+	width: 71px;
+    }
+    th, .home-td, .user-td {
+	padding: 2px 2px!important;
+    }
 }
 /* end of category shrinking */
 
@@ -700,22 +725,41 @@ html, body {
     .visible-md {
         display: block
     }
-	.user-td.tr-date { width: 100px; }
+    .user-td.tr-date {
-	.user-td.tr-size { width: 77px; }
+	width: 100px;
-	.box.refine > form > div { display: inline-grid !important; }
+    }
-	.box.refine > form > div > div { width: 100%!important; }
+    .user-td.tr-size {
-	.refine-btn,.language { 
+	width: 77px;
-		position: initial!important;
+    }
-		bottom: initial!important; 
+    .box.refine > form > div {
-		width: 100%!important;
+	display: block;
-	}
+    }
-	.language { width: initial!important; }
+    .box.refine > form > div > div {
-	.refine-container-2 { margin-top: 5px; }
+	width: 100%!important;
-	.hide-xs { display: none !important; }
+    }
+    .refine-btn,.language { 
+	position: initial!important;
+	bottom: initial!important; 
+	width: 100%!important;
+    }
+    .language {
+	width: initial!important;
+    }
+    .refine-container-2 {
+	margin-top: 5px;
+    }
+    .form-refine .refine-category {
+	max-width: 44%;
+    }
+    .hide-xs {
+	display: none !important;
+    }
 }
 
 @media (max-width: 810px) {
-    body { margin: 8px 0; }
+    body {
+	margin: 8px 0;
+    }
     .torrent-info-row>td {
         display: block;
     }
@@ -726,7 +770,7 @@ html, body {
         padding-left: 5px;
     }
     .profile-main {
-        display: inline-grid !important;
+        display: block!important;
     }
     .profile-panel, .profile-content {
         border-radius: 4px;
@@ -749,10 +793,10 @@ html, body {
     .tr-se, .tr-le {
         width: 36px;
     }
+    .header .h-search input { width: 84px !important; }
     .tr-links {
         width: 48px;
     }
-    .header .h-search input { width: 100px !important; }
     .box {
         padding: 8px;
     }
@@ -772,8 +816,12 @@ html, body {
 }
 
 @media (max-width: 565px) {
-    .header .h-search { margin-right: 0; }
+    .header .h-search {
-    .header .h-search input { width: 90px !important; }
+	margin-right: 0;
+    }
+    .header .h-search input {
+	width: 90px !important;
+   }
     .form-input.refine {
 	position: fixed;
 	border: 1px solid black;
@@ -787,14 +835,36 @@ html, body {
     .hide-smol {
         display: none!important;
     }
-    .header .nav-btn { padding: 0px 6px!important;}
+    .header .nav-btn {
-    .form-input.form-category { width: 72px; margin-right: -5px; border-right: none; }
+	padding: 0px 6px!important;
-    span.spacing { display: none!important; }
+    }
-    .form-refine .refine-category { width: 45%; }
+    .form-input.form-category {
-    .form-refine .refine-searchbox { width: 55%; }
+	width: 72px;
-    .form-refine .refine-searchbox::placeholder { opacity: 1; }
+	margin-right: -5px;
-    .language { width: 350px; }
+	border-right: none;
-    #footer { padding-bottom: 25px; }
+	border-radius: 3px 0 0 3px;
+    }
+    span.spacing {
+	display: none!important;
+    }
+    .form-refine input.form-input {
+	width: 80px;
+    }
+    .form-refine .refine-category {
+	width: 45%;
+    }
+    .form-refine .refine-searchbox {
+	width: 55%!important;
+    }
+    .form-refine .refine-searchbox::placeholder {
+	opacity: 1;
+    }
+    .language {
+	width: 350px;
+    }
+    #footer {
+	padding-bottom: 25px;
+    }
 }
 
 @media (max-width: 440px) {
@@ -802,7 +872,7 @@ html, body {
         padding: 0px 3px!important;
     }
     .form-input.form-category { 
-	width: 55px;
+	      width: 55px;
     }
 }
 

templates/layouts/partials/torrent_item.jet.html

@@ -52,7 +52,7 @@ Templates.Add("torrents.item", function(torrent) {
         </div></td>
         <td class="tr-name home-td"` +  colspan + `><a href="/view/` + torrent.id + `">` + Templates.EncodeEntities(torrent.name) + `</a></td>
         `+ commentTd +`
-        <td class="tr-links home-td">
+        <td class="tr-links home-td` + (dlLink == "" ? " no-torrent" : "") + `">
             <a href="` + torrent.magnet + `" title="{{ T("magnet_link") }}">
                 <div class="icon-magnet"></div>
             </a>`+ dlLink +`

templates/layouts/partials/torrent_item_upload.jet.html

@@ -43,7 +43,7 @@ Templates.Add("torrents.item", function(torrent) {
         </div></td>
         <td class="tr-name home-td"` +  colspan + `><a>` + Templates.EncodeEntities(torrent.name) + `</a></td>
         `+ commentTd +`
-        <td class="tr-links home-td">
+        <td class="tr-links home-td` + (dlLink == "" ? " no-torrent" : "")+ `">
             <a  title="{{ T("magnet_link") }}">
                 <div class="icon-magnet"></div>
             </a>`+ dlLink +`
@@ -55,4 +55,4 @@ Templates.Add("torrents.item", function(torrent) {
         <td class="tr-date home-td date-short hide-xs">` + torrent.date + `</td>
     </tr>`;
 });
-</script>
+</script>

templates/site/torrents/listing.jet.html

@@ -84,7 +84,7 @@
           <span>{{len(.Comments)}}</span>
         </td>
         {{ end }}
-        <td class="tr-links home-td">
+        <td class="tr-links home-td{{if .TorrentLink == ""}} no-torrent{{end}}">
           <a href="{{.Magnet}}" title="{{  T("magnet_link") }}">
             <div class="icon-magnet"></div>
           </a>