From d51eb1ba60444a86e634f69c217cb216549f29c7 Mon Sep 17 00:00:00 2001
From: kilo <kilowwwww@gmail.com>
Date: Mon, 14 Aug 2017 07:37:37 +0200
Subject: [PATCH] Fixed width for text in refine, make smaller header apply at
 500px wide devices & under (#1368)

* Fixed width for text in refine

* make smaller header apply at 500px & under

* remove useless line

* hide notification count if no new notification
---
 public/css/main.css                           | 61 +++++++++++++------
 .../partials/helpers/badgemenu.jet.html       |  4 +-
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index b205f7a6..8e7ad871 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -379,8 +379,10 @@ select.form-input {
 }
 
 .form-refine span.spacing {
-    min-width: 100px;
     display: inline-block;
+    width: 100px;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .form-refine .refine-searchbox::placeholder {
@@ -790,9 +792,16 @@ html, body {
     .header .h-user {
         width: 46px;
     }
-    .header .h-user .user-avatar { margin: 0;} 
-    .header .h-user { max-width: 46px; width: auto; }
-    .header .h-user .user-menu { right: 104px;}
+    .header .h-user .user-avatar {
+	margin: 0;
+    } 
+    .header .h-user {
+	max-width: 46px;
+	width: auto;
+    }
+    .header .h-user .user-menu {
+        right: 104px;
+    }
     .box {
         padding: 7px;
     }
@@ -802,26 +811,44 @@ html, body {
     .tr-se, .tr-le {
         width: 36px;
     }
-    .header .h-search input { width: 84px !important; }
-    .tr-links {
-        width: 48px;
+    .header .h-search input {
+	width: 84px !important;
     }
     .box {
         padding: 8px;
     }
-    .torrent-hr { margin-bottom: 0; }
+    .torrent-hr {
+	margin-bottom: 0;
+    }
 }
 
-@media (max-height: 750px) {
-	.header { height: 56px; }
-	.header .container>div { line-height: 58px; padding: 0 0.6rem; }
-	.header .h-logo img { height: 57px; padding: 5px 8px 5px 2px; }
-	.header .h-user .nav-btn { height: 57px; }
-	#content { top: 58px; }
-	#content.content-admin { top: 108px; }
+@media (max-height: 750px),(max-width: 500px) {
+    .header {
+	height: 56px;
+    }
+    .header .container > div {
+	line-height: 58px; padding: 0 0.6rem;
+    }
+    .header .h-logo img {
+	height: 57px; padding: 5px 8px 5px 2px;
+    }
+    .header .h-user .nav-btn {
+	height: 57px;
+    }
 	
-	h3 { margin-bottom: 5px; }
-	.form-refine { margin-bottom: 8px; }
+    #content {
+	top: 58px;
+    }
+    #content.content-admin {
+	top: 108px;
+    }
+	
+    h3 {
+	margin-bottom: 5px;
+    }
+    .form-refine {
+	margin-bottom: 8px;
+    }
 }
 
 @media (max-width: 565px) {
diff --git a/templates/layouts/partials/helpers/badgemenu.jet.html b/templates/layouts/partials/helpers/badgemenu.jet.html
index 4b1e31df..e81c6f36 100644
--- a/templates/layouts/partials/helpers/badgemenu.jet.html
+++ b/templates/layouts/partials/helpers/badgemenu.jet.html
@@ -12,9 +12,9 @@
   </button>
   <div class="user-menu">
     <a class="nav-btn" href="/user/{{ User.ID }}/{{ User.Username }}">{{ T("profile")}}</a>
-    <a class="nav-btn{{ User.GetUnreadNotifications() > 0 ? " notif " : " " }}" href="/notifications">
+    <a class="nav-btn notif" href="/notifications">
       {{  T("my_notifications")}}
-      <span class="badge">({{ User.GetUnreadNotifications() }})</span>
+      {{if User.GetUnreadNotifications() > 0}}<span class="badge">({{ User.GetUnreadNotifications() }})</span>{{end}}
     </a>
     <a class="nav-btn" href="/user/{{ User.ID }}/{{ User.Username }}/edit">
       {{ T("settings")}}