Albirew/nyaa-pantsu
Archivé
1
0
Bifurcation 0

Merge pull request #380 from aerojun/master

New comment style (WIP)
Cette révision appartient à :
PantsuDev 2017-05-14 22:44:24 +10:00 révisé par GitHub
révision aed9ed968d
4 fichiers modifiés avec 250 ajouts et 114 suppressions

Voir le fichier

@ -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;
}

Voir le fichier

@ -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;
}
}

Voir le fichier

@ -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();
loadLanguages();

Voir le fichier

@ -5,50 +5,49 @@
{{with .Torrent}}
<hr>
<div class="content" style="margin-bottom: 2em;">
<div class="row">
<div class="col-md-12">
<h3 style="word-break:break-all" {{if eq .Status 2}}class="remake" {{end}} {{if eq .Status 3}}class="trusted" {{end}} {{if eq .Status 4}}class="aplus"{{end}}>{{.Name}}</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="break" {{if eq .Status 2}}class="remake" {{end}} {{if eq .Status 3}}class="trusted" {{end}} {{if eq .Status 4}}class="aplus"{{end}}>{{.Name}}</h3>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="row" id="description">
<div class="col-md-12">
<div style="float: left;">
<div class="uploaded_by">
<img style="float:left; margin-right: 1em;" src="{{$.URL.Parse (printf "/img/torrents/%s.png" .SubCategory) }}">
<h4>Uploaded by <a href="{{$.URL.Parse (printf "/user/%d/-" .UploaderID) }}">{{.UploaderName}}</a></h4>
<div class="col-md-12">
<div style="float: left;">
<div class="uploaded_by">
<img style="float:left; margin-right: 1em;" src="{{$.URL.Parse (printf "/img/torrents/%s.png" .SubCategory) }}">
<h4>Uploaded by <a href="{{$.URL.Parse (printf "/user/%d/-" .UploaderID) }}">{{.UploaderName}}</a></h4>
</div>
</div>
<div style="float:right;">
<a style="margin: 5px;" aria-label="Magnet Button" href="{{.Magnet}}" type="button" class="btn btn-lg btn-success">
<span class="glyphicon glyphicon-magnet" aria-hidden="true"></span> Download!
</a>
{{if ne .TorrentLink ""}}
<a style="margin: 5px;" aria-label="Torrent file" href="{{.TorrentLink}}" type="button" class="btn btn-lg btn-success">
<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span> Torrent file
</a>
{{end}}
<a style="margin: 5px;" aria-label="Report button" data-toggle="modal" data-target="#reportModal" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Report!
</a>
{{ if HasAdmin $.User}}
<a href="{{ genRoute "mod_tdelete" }}?id={{ .ID }}" class="btn btn-danger btn-lg" onclick="if (!confirm('Are you sure?')) return false;"><i class="glyphicon glyphicon-trash"></i></a>
<a href="{{ genRoute "mod_tedit" }}?id={{ .ID }}" class="btn btn-warning btn-lg"><i class="glyphicon glyphicon-pencil"></i></a>
{{end}}
</div>
<div style="clear: both;"></div>
</div>
<div style="float:right;">
<a style="margin: 5px;" aria-label="Magnet Button" href="{{.Magnet}}" type="button" class="btn btn-lg btn-success">
<span class="glyphicon glyphicon-magnet" aria-hidden="true"></span> Download!
</a>
{{if ne .TorrentLink ""}}
<a style="margin: 5px;" aria-label="Torrent file" href="{{.TorrentLink}}" type="button" class="btn btn-lg btn-success">
<span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span> Torrent file
</a>
{{end}}
<a style="margin: 5px;" aria-label="Report button" data-toggle="modal" data-target="#reportModal" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Report!
</a>
{{ if HasAdmin $.User}}
<a href="{{ genRoute "mod_tdelete" }}?id={{ .ID }}" class="btn btn-danger btn-lg" onclick="if (!confirm('Are you sure?')) return false;"><i class="glyphicon glyphicon-trash"></i></a>
<a href="{{ genRoute "mod_tedit" }}?id={{ .ID }}" class="btn btn-warning btn-lg"><i class="glyphicon glyphicon-pencil"></i></a>
{{end}}
</div>
<div style="clear: both;"></div>
</div>
<div class="col-md-12">
<h4>{{T "description"}}</h4>
<div style="word-break:break-all;">{{.Description}}</div>
<div class="break">{{.Description}}</div>
</div>
</div>
</div>
<div class="col-md-4">
<h4>{{T "hash"}}</h4>
<p class="torrent-hash">{{.Hash}}</p>
<p class="torrent-hash break">{{.Hash}}</p>
<hr>
<h4>{{T "date"}}</h4>
<p class="date-full">{{.Date}}</p>
@ -62,49 +61,72 @@
<hr>
{{end}}
<div class="row">
<div class="col-md-4">{{T "seeders"}}</div>
<div class="col-md-4">{{T "leechers"}}</div>
<div class="col-md-4">{{T "completed"}}</div>
<div class="col-md-4">{{T "seeders"}}</div>
<div class="col-md-4">{{T "leechers"}}</div>
<div class="col-md-4">{{T "completed"}}</div>
</div>
<div class="row">
<div class="col-md-4">{{.Seeders}}</div>
<div class="col-md-4">{{.Leechers}}</div>
<div class="col-md-4"><span class="completed" style="">{{.Completed}}</span></div>
<div class="col-md-8">
<div class="proSeedBar">
<div class="seeds" style="width: {{ calcWidthSeed .Seeders .Leechers }}%;"></div>
<div class="leechs" style="width: {{ calcWidthLeech .Seeders .Leechers }}%;"></div>
</div>
</div>
<div class="col-md-4">{{.Seeders}}</div>
<div class="col-md-4">{{.Leechers}}</div>
<div class="col-md-4"><span class="completed" style="">{{.Completed}}</span></div>
<div class="col-md-8">
<div class="proSeedBar">
<div class="seeds" style="width: {{ calcWidthSeed .Seeders .Leechers }}%;"></div>
<div class="leechs" style="width: {{ calcWidthLeech .Seeders .Leechers }}%;"></div>
</div>
</div>
</div>
<hr>
</div>
</div>
<div class="row" id="comments">
<div class="col-md-12">
<h4>{{T "comments"}}</h4>
{{ range $index, $element := .Comments }}
<div class="row comment-row" id="comment_{{$index}}">
<div class="col-md-2">
{{if eq .UserID -1}}
<a href="#comment_{{$index}}">{{$index}}</a>
{{.Username}}
{{else}}
<a href="#comment_{{$index}}">{{$index}}</a>
<a href="{{$.URL.Parse (printf "/user/%d/-" .UserID ) }}">{{.Username}}</a>
<div class="commentList">
<h4>{{T "comments"}}</h4>
<hr/>
<ul class="comments">
{{ range $index, $element := .Comments }}
<li class="clearfix comment jumptarget" id="comment_{{$index}}">
{{/* 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. */}}
<img src="https://www.gravatar.com/avatar/{{ .UserID }}?s=50" class="avatar" alt="">
<div class="commentBody">
<div class="commentData">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-sm-9">
{{if eq .UserID -1}}
<a href="#comment_{{$index}}">#{{$index}}</a> by {{.Username}}
{{else}}
<a href="#comment_{{$index}}">#{{$index}}</a>
by <span class="break"><a href="{{$.URL.Parse (printf "/user/%d/-" .UserID ) }}">{{.Username}}</a></span>
{{end}}
</div>
<div class="col-sm-3">
<i class="pull-right date-short comment-date">
<small>
{{ .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. */}}
</small>
</i>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
{{.Content}}
</div>
</div>
</div>
</li>
{{end}}
</div>
<div class="col-md-1 date-short comment-date">
{{ .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. */}}
</div>
<div class="col-md-8">
{{.Content}}
</div>
</ul>
</div>
{{end}}
</div>
</div>
</div>