Styling fixes & improvements for cookie warning, addition of cookie warning text & close button (#1519)

* Styling fixes for new nav, improvements for cookie warning, styling for close button on cookie warning

* Fix wrong css rule name on tomorrow

* add cookie warning text

* Update CHANGELOG.md

* tomorrow colors for cookie warning

* Color improvements for cookie-warning & close button styling

* Addition of close button for cookie warning

* JS to hide cookie warning when clicking the cross

* Add warning that message will be hidden at next page load

* middle alignement for japanese text in refine

* Remove NyaaPantsu link from admin nav

* Allow HTML in cookie warning translation string

* Remove [0] that was not needed and broke the script from JS

* Bold font & slightly taller cookie warning

* Add message when ad is blocked

* styling for blocked message

* fix wrong id

* Prevent JS error

* remove ad-blocked message

* remove ad-blocked styling

* Update main.css

* Update base.jet.html

public/css/main.css

@@ -54,7 +54,7 @@ body {
     background-size: contain;
 }
 
-.header, #cookie-warning {
+.header {
     z-index: 3;
     position: fixed;
     width: 100%;
@@ -66,11 +66,27 @@ body {
 .header.content-admin {
     height: auto;
 }
+
 #cookie-warning {
-    top: initial;
+    z-index: 4;
+    position: fixed;
     bottom: 0;
-    background: hsla(200,90%,56%,0.2);
+    left: 0;
-    height: 40px;
+    width: 100%;
+    height: 60px;
+    padding: 7px 10px;
+    text-align: center;
+    font-weight: bold;
+    background: hsla(200, 100%, 88%, 0.9);
+    border-top: 1px solid #9dcde4;
+}
+#cookie-warning .close {
+    float: right;
+    font-size: 2em;
+    cursor: pointer;
+    margin-top: -9px;
+    margin-right: -3px;
+    color: #585858;
 }
 
 .container, .modtools {
@@ -311,9 +327,9 @@ select.form-input {
     position: relative;
     top: 70px;
 }
-
+#content.content-admin  {
-
+    top: 108px!important;
-/* #content { padding-top: 70px;  } */
+}
 
 .content {
     padding: 5px 10px;
@@ -1865,45 +1881,47 @@ span.tag {
     position: relative;
     padding: 0 5%;
 }
-#ad-container > iframe {
+#ad-container * {
     width: 728px;
     max-width: 100%;
     height: 90px;
     border: none;
     overflow: hidden;
 }
+
 #admin-header {
-	width: 100%;
+    width: 100%;
-	display: inline-block;
+    display: inline-block;
-	border-bottom:none;
+    border-bottom:none;
-	border-radius: 3px 3px 0 0;
+    border-radius: 3px 3px 0 0;
-	word-spacing: -0.26em;
+    word-spacing: -0.26em;
     border: 1px solid #b3b3b3;
+    background: white;
 }
 #admin-header .nav-btn {
-	display: inline-block;
+    display: inline-block;
     vertical-align: middle;
-	height: 36px;
+    height: 36px;
     padding: 10px 14px;
     text-decoration: initial;
-	border-right: 1px solid #b3b3b3;
+    border-right: 1px solid #b3b3b3;
 }
 #admin-header .nav-btn.active {
-	background: #e2e2e2;
+    background: #ffebc7;
 }
 
 /* Language specific CSS */
 
-
+html[lang="ja-jp"] .form-refine span.spacing {
+    vertical-align: middle;
+}
 @media (max-width: 1100px) {
     html[lang="ja-jp"] .header .h-user>.nav-btn {
-    font-size: 75%;
+        font-size: 75%;
-
     }
 }
 @media (min-width: 961px) {
     html[lang="ja-jp"] .header .nav-btn {
 	padding: 0 8px;
-
     }
 }

public/css/tomorrow.css

@@ -32,6 +32,15 @@ a:hover {
     color: #eee;
 }
 
+#cookie-warning {
+    background: hsla(0, 0%, 21%, 0.9);
+    border-top: 1px solid #4e4e4e;
+    color: #9a9a9a;
+}
+#cookie-warning .close {
+    color: #9a9a9a;
+}
+
 .box, .pagination li, .modtools {
     background: hsla(222, 8%, 20%, 0.85);
     border-color: #141517 !important;
@@ -227,7 +236,7 @@ td.tr-le, .error-text {
     color: #c5c8c6;
 }
 #admin-header .nav-btn.active {
-    border-color: #363a3e;
+    background-color: #3d4144;
 }
 
 .torrent-preview-table>table {

public/js/main.js

@@ -137,6 +137,13 @@ function startupCode() {
     if (userCommitVersion != commitVersion)
       resetCookies()
   }
+  
+  if(document.getElementById("cookie-warning-close") != null) {
+	document.getElementById("cookie-warning-close").addEventListener("click", function (e) {
+      document.getElementById("cookie-warning").outerHTML = "";
+    })
+  }
+	  
 
   if (document.cookie.includes("newVersion"))
     document.getElementById("commit").className = document.getElementById("commit").innerHTML != "unknown" ? "new" : "wew";

templates/layouts/partials/base.jet.html

@@ -48,7 +48,7 @@
     {{block menu()}}{{end}}
   </nav>
   <div id="content" class="{{ block contclass() }}{{end}}">
-    <div class="content container center">
+    <div class="content container center {{ if User.HasAdmin() }}content-admin{{end}}">
       {{ yield infos()}}
       {{ yield errors()}}
       {{ block content_body_base() }}{{end}}
@@ -96,7 +96,7 @@
       </div>
     </footer>
   </div>
-  {{ if !EUCookieLaw }}<div id="cookie-warning">{{ T("cookie_warning") }}</div>{{ end }}
+  {{ if !EUCookieLaw }}<div id="cookie-warning">{{ T("cookie_warning")|raw }}<span id="cookie-warning-close" class="close">×</span></div>{{ end }}
   <script type="text/javascript" charset="utf-8">var commitVersion = "{{ Config.Build }}", UserID = {{User.ID}};</script>
   <script type="text/javascript" src="/js/query.js?v={{ Config.Version}}{{ Config.Build }}"></script>
   <script type="text/javascript" charset="utf-8" src="/js/main.js?v={{ Config.Version }}{{ Config.Build }}" async></script>

templates/layouts/partials/menu/admin.jet.html

@@ -1,5 +1,4 @@
     <div id="admin-header">
-      <a href="{{URL.Parse("/")}}" class="nav-btn">{{ T("nyaa_pantsu")}}</a>
       <a href="{{URL.Parse("/mod/")}}" class="nav-btn{{if URL.String() == "/mod/"}} active{{end}}">{{ T("moderation")}}</a>
       <a href="{{URL.Parse("/mod/torrents")}}" class="nav-btn{{if URL.String() == "/mod/torrents"}} active{{end}}">{{ T("torrents")}}</a>
       <a href="{{URL.Parse("/mod/users")}}" class="nav-btn{{if URL.String() == "/mod/users"}} active{{end}}">{{ T("users")}}</a>

translations/CHANGELOG.md

@@ -28,3 +28,5 @@
 * + faq_ads_explanation
 ## 2017/09/05
 * + err_no_torrent_file
+## 2017/09/06
+* + cookie_warning

translations/en-us.all.json

@@ -2110,5 +2110,9 @@
   {
     "id": "append_query",
     "translation": "You can append your search query to the end of the feed URL."
+  },
+  {
+    "id": "cookie_warning",
+    "translation": "By using this website, you agree to the usage of cookies for purposes such as customizing content.<br/>This message will be hidden at the next page load."
   }
 ]