From 40716c2b745a9796657539bf6f58a10ab4d0b63f Mon Sep 17 00:00:00 2001 From: Juan Navarro Date: Thu, 11 May 2017 22:05:14 -0500 Subject: [PATCH 1/3] New comment style. Gravatar not working as intended. --- public/css/style-night.css | 86 ++++++++++++++++++ public/css/style.css | 180 +++++++++++++++++++++++++++---------- templates/view.html | 147 +++++++++++++++++------------- 3 files changed, 303 insertions(+), 110 deletions(-) diff --git a/public/css/style-night.css b/public/css/style-night.css index 01e46b5a..817dd3a7 100644 --- a/public/css/style-night.css +++ b/public/css/style-night.css @@ -149,3 +149,89 @@ a:hover { background: #29363d; color: #cf9fff; } + +/* Wordbreak fix*/ + +.break { + word-break:break-all; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} + + +/*Comments*/ + +.commentList::before, +.commentList::after { + content: ""; + display: table; + clear: both; +} + +.commentList ul { + list-style-type: none; + padding: 0; +} + +.commentList img { + opacity: 1; + filter: Alpha(opacity=100); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; +} + +.commentList img.avatar { + position: relative; + float: left; + margin-left: 0; + margin-top: 0; + width: 65px; + height: 65px; +} + +.commentList .commentBody { + border: 1px solid #eee; + margin-bottom: 20px; + margin-left: 85px; + margin-right: 0px; + padding: 10px 20px; + position: relative; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + background: #fff; + color: #6b6e80; + position: relative; +} + +.commentList .commentData { + font-size: 13px; + color: #aaaaaa; + padding-bottom: 8px; + margin-bottom: 10px !important; + border-bottom: 1px solid #eee; +} + +.commentList ul.comments ul{ + list-style-type: none; + padding: 0; + margin-left: 85px; +} + + +.commentList h3 { + margin-bottom: 40px; + font-size: 26px; + line-height: 30px; + font-weight: 800; +} + +.comment { + margin: 1em; + padding: 1em; +} diff --git a/public/css/style.css b/public/css/style.css index 4df26ba4..753cb47b 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -15,18 +15,18 @@ color: white; } #mainmenu { - position: fixed; + position: fixed; width: 100%; z-index: 4; border: 0px solid white; } #mainmenu a { - background: none; - color: white; + background: none; + color: white; } #mainmenu .divider { - background: black; + background: black; } #container { @@ -54,7 +54,7 @@ body { } .torrentNav { - text-align: center; + text-align: center; } .pagination > .active > a { @@ -65,8 +65,8 @@ body { /* Links, Text */ a { - color: #106655; - text-decoration : none; + color: #106655; + text-decoration : none; } .download-btn { @@ -87,25 +87,25 @@ td { } .torrent-info .name { - font-weight: bold; - overflow: hidden; - padding-bottom: 3px; - padding-top: 3px; - word-wrap: break-word; + font-weight: bold; + overflow: hidden; + padding-bottom: 3px; + padding-top: 3px; + word-wrap: break-word; } .torrent-hash { - font-family: monospace; + font-family: monospace; } .torrent-info .filesize { - white-space: nowrap; + white-space: nowrap; } .comment-row td:first-of-type { - vertical-align: top; - text-align: left; - color:#bbb; + vertical-align: top; + text-align: left; + color:#bbb; } /* Table style & fixes */ @@ -115,25 +115,25 @@ td { } .table > tbody > tr > th, .table > tbody > tr > td { - padding: 4px; + padding: 4px; } .captcha-container { - display: grid; - grid-template-rows: auto; - grid-template-columns: 240px; + display: grid; + grid-template-rows: auto; + grid-template-columns: 240px; } tr.torrent-info td.date { - white-space: nowrap; + white-space: nowrap; } .custom-table-hover > tbody > tr:hover { - opacity: 0.82; + opacity: 0.82; } .comment-row { - border-top: 1px solid #ddd; + border-top: 1px solid #ddd; } div.container div.blockBody:nth-of-type(2) table{table-layout:fixed;} @@ -144,25 +144,25 @@ div.container div.blockBody:nth-of-type(2) table tr:first-of-type th:last-of-typ /* Mobile-friendly main table */ @media only screen and (max-width: 700px) { - table, thead, tbody, tr { - display: block; - } + table, thead, tbody, tr { + display: block; + } - th { - display: none; - } + th { + display: none; + } - td { - display: inline-block; - } + td { + display: inline-block; + } - td:nth-of-type(1), td:nth-of-type(2) { - display: block; - } + td:nth-of-type(1), td:nth-of-type(2) { + display: block; + } - .table > tbody > tr > td { - border: none; - } + .table > tbody > tr > td { + border: none; + } } /* Credit to bootsnipp.com for the css for the color graph */ @@ -178,8 +178,8 @@ div.container div.blockBody:nth-of-type(2) table tr:first-of-type th:last-of-typ } .center-image { - max-width: 100%; - max-height: 80vh; + max-width: 100%; + max-height: 80vh; } /* the curved edges triggered my autism */ @@ -192,11 +192,11 @@ div.container div.blockBody:nth-of-type(2) table tr:first-of-type th:last-of-typ } #mainmenu button .search_text { - display: none; + display: none; } #mainmenu .navbar-form select.form-control { - width: 12rem; + width: 12rem; } .special-img { @@ -350,10 +350,10 @@ footer { /* Psuedo green-text fuckery. */ #comments blockquote { - color: #789922; + color: #789922; } #comments blockquote:before { - content: ">"; + content: ">"; } .completed { @@ -380,11 +380,97 @@ footer { } .comment-date { - font-size: smaller; - width: auto; /* Undo bootstrap's fixed width */ + font-size: smaller; + width: auto; /* Undo bootstrap's fixed width */ } .text-error { background: white; color: #cf9fff; } + +/* Wordbreak fix*/ + +.break { + word-break:break-all; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +} + + +/*Comments*/ + +.commentList::before, +.commentList::after { + content: ""; + display: table; + clear: both; +} + +.commentList ul { + list-style-type: none; + padding: 0; +} + +.commentList img { + opacity: 1; + filter: Alpha(opacity=100); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; +} + +.commentList img.avatar { + position: relative; + float: left; + margin-left: 0; + margin-top: 0; + width: 65px; + height: 65px; +} + +.commentList .commentBody { + border: 1px solid #eee; + margin-bottom: 20px; + margin-left: 85px; + margin-right: 0px; + padding: 10px 20px; + position: relative; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + background: #fff; + color: #6b6e80; + position: relative; +} + +.commentList .commentData { + font-size: 13px; + color: #aaaaaa; + padding-bottom: 8px; + margin-bottom: 10px !important; + border-bottom: 1px solid #eee; +} + +.commentList ul.comments ul{ + list-style-type: none; + padding: 0; + margin-left: 85px; +} + + +.commentList h3 { + margin-bottom: 40px; + font-size: 26px; + line-height: 30px; + font-weight: 800; +} + +.comment { + margin: 1em; + padding: 1em; +} diff --git a/templates/view.html b/templates/view.html index b96da65c..7f9ffeee 100644 --- a/templates/view.html +++ b/templates/view.html @@ -5,43 +5,42 @@ {{with .Torrent}}
-
-
-

{{.Name}}

-
-
+
+
+

{{.Name}}

+
+
-
-
-
- -

Uploaded by {{.UploaderName}}

+
+
+
+ +

Uploaded by {{.UploaderName}}

+
+
+ + Download! + + {{if ne .TorrentLink ""}} + + Torrent file + + {{end}} + + Report! + + {{ if HasAdmin $.User}} + + {{end}} +
+
-
- - Download! - - {{if ne .TorrentLink ""}} - - Torrent file - - {{end}} - - Report! - - - {{ if HasAdmin $.User}} - - {{end}} -
-
-

{{T "description"}}

-
{{.Description}}
+
{{.Description}}
@@ -61,49 +60,71 @@
{{end}}
-
{{T "seeders"}}
-
{{T "leechers"}}
-
{{T "completed"}}
+
{{T "seeders"}}
+
{{T "leechers"}}
+
{{T "completed"}}
-
{{.Seeders}}
-
{{.Leechers}}
-
{{.Completed}}
-
-
-
-
-
-
+
{{.Seeders}}
+
{{.Leechers}}
+
{{.Completed}}
+
+
+
+
+
+
-

{{T "comments"}}

- {{ range $index, $element := .Comments }} -
-
- {{if eq .UserID -1}} - {{$index}} - {{.Username}} - {{else}} - {{$index}} - {{.Username}} +
+

{{T "comments"}}

+
+
    + {{ range $index, $element := .Comments }} +
  • + {{/* The following line is wrong. Should be using the MD5 User hash but i don't knwo how to access it. */}} + +
    +
    +
    +
    +
    +
    + {{if eq .UserID -1}} + #{{$index}} by {{.Username}} + {{else}} + #{{$index}} + by {{.Username}} + {{end}} +
    +
    + + + {{ .Date.Format ( Ts "date_format" ) }} + {{/* output: "2017-05-01 15:30" + Went with "Year-Month-Day" because it's the most unambiguous. + If you want it to be determined by where you're from, be my guest. */}} + + +
    +
    +
    +
    +
    +
    +
    + {{.Content}} +
    +
    +
    +
    • {{end}} -
-
- {{ .Date.Format ( Ts "date_format" ) }} - {{/* output: "2017-05-01 15:30" - Went with "Year-Month-Day" because it's the most unambiguous. - If you want it to be determined by where you're from, be my guest. */}} -
-
- {{.Content}} -
+
- {{end}}
From 77b1cfc550e3da41ab048fce699ab4c44dec6d34 Mon Sep 17 00:00:00 2001 From: Juan Ignacio Navarro Date: Fri, 12 May 2017 17:37:37 -0500 Subject: [PATCH 2/3] Fixed comments style. Fixed Navbar offset. --- public/css/style-night.css | 85 +++----------------------------------- public/css/style.css | 11 +++++ public/js/main.js | 7 ++++ templates/view.html | 7 ++-- 4 files changed, 27 insertions(+), 83 deletions(-) diff --git a/public/css/style-night.css b/public/css/style-night.css index 817dd3a7..0c071edb 100644 --- a/public/css/style-night.css +++ b/public/css/style-night.css @@ -103,7 +103,7 @@ a:hover { } :target { - background-color: #585b4f; + background-color: #b294bb; } /* style the dropdown member menu */ @@ -150,88 +150,13 @@ a:hover { color: #cf9fff; } -/* Wordbreak fix*/ - -.break { - word-break:break-all; - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; -} - - /*Comments*/ -.commentList::before, -.commentList::after { - content: ""; - display: table; - clear: both; -} - -.commentList ul { - list-style-type: none; - padding: 0; -} - -.commentList img { - opacity: 1; - filter: Alpha(opacity=100); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; -} - -.commentList img.avatar { - position: relative; - float: left; - margin-left: 0; - margin-top: 0; - width: 65px; - height: 65px; +.commentList .commentData { + color: #fff; } .commentList .commentBody { - border: 1px solid #eee; - margin-bottom: 20px; - margin-left: 85px; - margin-right: 0px; - padding: 10px 20px; - position: relative; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - background: #fff; - color: #6b6e80; - position: relative; -} - -.commentList .commentData { - font-size: 13px; - color: #aaaaaa; - padding-bottom: 8px; - margin-bottom: 10px !important; - border-bottom: 1px solid #eee; -} - -.commentList ul.comments ul{ - list-style-type: none; - padding: 0; - margin-left: 85px; -} - - -.commentList h3 { - margin-bottom: 40px; - font-size: 26px; - line-height: 30px; - font-weight: 800; -} - -.comment { - margin: 1em; - padding: 1em; + background: #29363d; + color: #fff; } diff --git a/public/css/style.css b/public/css/style.css index 9a96e38d..805fa8e8 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -458,6 +458,7 @@ footer { padding-bottom: 8px; margin-bottom: 10px !important; border-bottom: 1px solid #eee; + height: 2.5em; } .commentList ul.comments ul{ @@ -477,4 +478,14 @@ footer { .comment { margin: 1em; padding: 1em; + width: 75%; + margin-left: 12%; +} + +@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { + + .comment { + width: 100%; + margin-left: 0; + } } diff --git a/public/js/main.js b/public/js/main.js index 5d985acf..e870a3f2 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -47,3 +47,10 @@ for(var i in list) { var date = new Date(e.innerText); e.innerText = date.toDateString() + " " + date.toLocaleTimeString(); } + +/*Fixed-Navbar offset fix*/ +window.onload = function() { + var shiftWindow = function() { scrollBy(0, -70) }; +if (location.hash) shiftWindow(); +window.addEventListener("hashchange", shiftWindow); +}; diff --git a/templates/view.html b/templates/view.html index dd7cf010..ca607bf3 100644 --- a/templates/view.html +++ b/templates/view.html @@ -85,15 +85,16 @@
    {{ range $index, $element := .Comments }} -
  • +
  • {{/* The following line is wrong. Should be using the MD5 User hash but i don't knwo how to access it. */}} + {{/* Changing Gravatar for something else, so it can stay like this. */}}
    -
    +
    {{if eq .UserID -1}} #{{$index}} by {{.Username}} {{else}} @@ -101,7 +102,7 @@ by {{.Username}} {{end}}
    -
    +
    {{ .Date.Format ( Ts "date_format" ) }} From fe79c4a7ac3df2f105cd96644d81ca84ed5ea0dc Mon Sep 17 00:00:00 2001 From: Juan Ignacio Navarro Date: Fri, 12 May 2017 17:40:38 -0500 Subject: [PATCH 3/3] Fixed Hash overflow --- templates/view.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/view.html b/templates/view.html index ca607bf3..9ab133d4 100644 --- a/templates/view.html +++ b/templates/view.html @@ -46,7 +46,7 @@

    {{T "hash"}}

    -

    {{.Hash}}

    +

    {{.Hash}}

    {{T "date"}}

    {{.Date}}