From 4cb5c9cf2316a46c097469f179c0e96b90fc374f Mon Sep 17 00:00:00 2001 From: kilo Date: Wed, 6 Sep 2017 10:51:25 +0200 Subject: [PATCH] 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 | 60 ++++++++++++------- public/css/tomorrow.css | 11 +++- public/js/main.js | 7 +++ templates/layouts/partials/base.jet.html | 4 +- .../layouts/partials/menu/admin.jet.html | 1 - translations/CHANGELOG.md | 2 + translations/en-us.all.json | 4 ++ 7 files changed, 64 insertions(+), 25 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index b9afc66d..304b4be7 100644 --- a/public/css/main.css +++ b/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); - height: 40px; + left: 0; + 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 { padding-top: 70px; } */ +#content.content-admin { + top: 108px!important; +} .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%; - display: inline-block; - border-bottom:none; - border-radius: 3px 3px 0 0; - word-spacing: -0.26em; + width: 100%; + display: inline-block; + border-bottom:none; + border-radius: 3px 3px 0 0; + 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; - } } diff --git a/public/css/tomorrow.css b/public/css/tomorrow.css index e7ebd9cf..58929b54 100644 --- a/public/css/tomorrow.css +++ b/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 { diff --git a/public/js/main.js b/public/js/main.js index 95c06aae..a7b27a9f 100644 --- a/public/js/main.js +++ b/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"; diff --git a/templates/layouts/partials/base.jet.html b/templates/layouts/partials/base.jet.html index ff67c5bc..ef89e397 100644 --- a/templates/layouts/partials/base.jet.html +++ b/templates/layouts/partials/base.jet.html @@ -48,7 +48,7 @@ {{block menu()}}{{end}}
-
+
{{ yield infos()}} {{ yield errors()}} {{ block content_body_base() }}{{end}} @@ -96,7 +96,7 @@
- {{ if !EUCookieLaw }}{{ end }} + {{ if !EUCookieLaw }}{{ end }} diff --git a/templates/layouts/partials/menu/admin.jet.html b/templates/layouts/partials/menu/admin.jet.html index f4cae2fc..9ecc40d3 100644 --- a/templates/layouts/partials/menu/admin.jet.html +++ b/templates/layouts/partials/menu/admin.jet.html @@ -1,5 +1,4 @@
- {{ T("nyaa_pantsu")}} {{ T("moderation")}} {{ T("torrents")}} {{ T("users")}} diff --git a/translations/CHANGELOG.md b/translations/CHANGELOG.md index bae5d470..03f98913 100644 --- a/translations/CHANGELOG.md +++ b/translations/CHANGELOG.md @@ -28,3 +28,5 @@ * + faq_ads_explanation ## 2017/09/05 * + err_no_torrent_file +## 2017/09/06 +* + cookie_warning diff --git a/translations/en-us.all.json b/translations/en-us.all.json index 97c6582e..05097fcd 100644 --- a/translations/en-us.all.json +++ b/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.
This message will be hidden at the next page load." } ]