diff --git a/public/css/style-night.css b/public/css/style-night.css index 01e46b5a..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 */ @@ -149,3 +149,14 @@ a:hover { background: #29363d; color: #cf9fff; } + +/*Comments*/ + +.commentList .commentData { + color: #fff; +} + +.commentList .commentBody { + background: #29363d; + color: #fff; +} diff --git a/public/css/style.css b/public/css/style.css index 4c71284d..d4959092 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 */ @@ -196,11 +196,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; } #mainmenu .navbar-form select.form-control#max { @@ -365,10 +365,10 @@ select#bottom_language_selector { /* Psuedo green-text fuckery. */ #comments blockquote { - color: #789922; + color: #789922; } #comments blockquote:before { - content: ">"; + content: ">"; } .completed { @@ -395,11 +395,108 @@ select#bottom_language_selector { } .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; + height: 2.5em; +} + +.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; + 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 d0e90e8a..63d67b6f 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -48,6 +48,12 @@ for(var i in list) { 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); +}; function loadLanguages() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { @@ -78,4 +84,4 @@ function loadLanguages() { xhr.send() } -loadLanguages(); \ No newline at end of file +loadLanguages(); diff --git a/templates/view.html b/templates/view.html index bfab7acb..ba96eb04 100644 --- a/templates/view.html +++ b/templates/view.html @@ -5,50 +5,49 @@ {{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}}

{{T "hash"}}

-

{{.Hash}}

+

{{.Hash}}

{{T "date"}}

{{.Date}}

@@ -62,49 +61,72 @@
{{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. */}} + {{/* Changing Gravatar for something else, so it can stay like this. */}} + +
    +
    +
    +
    +
    +
    + {{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}}