we did it reddit
This commit is contained in:
parent
8429774256
commit
b858b29b7c
11 changed files with 392 additions and 409 deletions
118
resources/assets/less/yuuno/bem/comment.less
Normal file
118
resources/assets/less/yuuno/bem/comment.less
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
.comment-container {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.comments {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.comment {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
|
||||
&__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 0;
|
||||
text-decoration: none !important;
|
||||
font-weight: bold;
|
||||
margin: 4px 2px;
|
||||
transition: font-size .1s;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&--big {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&__pointer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 15px 15px 0;
|
||||
border-color: transparent #f6f6f6 transparent transparent;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
border-radius: 5px;
|
||||
border: 0;
|
||||
min-height: 50px;
|
||||
flex-grow: 2;
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
margin-left: 0;
|
||||
background: #f6f6f6;
|
||||
|
||||
&--create {
|
||||
border-radius: 5px 0 0 5px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:not(.comment__content--create) {
|
||||
background: linear-gradient(270deg, #c6c6c6 0, #f6f6f6 50px);
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
float: right;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__control {
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
|
||||
&--vote {
|
||||
font-size: 1.5em;
|
||||
|
||||
&-up {
|
||||
color: #0A0;
|
||||
}
|
||||
|
||||
&-down {
|
||||
color: #C00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__submit {
|
||||
flex-shrink: 0;
|
||||
font-family: FontAwesome;
|
||||
width: 50px;
|
||||
border: 0;
|
||||
border-radius: 0 5px 5px 0;
|
||||
margin: 2px;
|
||||
margin-left: 0;
|
||||
font-size: 2em;
|
||||
background: linear-gradient(90deg, #f6f6f6 0%, #c6c6c6 100%);
|
||||
cursor: pointer;
|
||||
|
||||
&--new {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #f6f6f6 0%, #d6d6d6 100%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(90deg, #f6f6f6 0%, #b6b6b6 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__replies {
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,4 +13,9 @@
|
|||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
text-decoration: none !important;
|
||||
|
||||
&--disabled {
|
||||
background: linear-gradient(180deg, #858585 0%, #858585 50%, #787878 50%) #858585 !important;
|
||||
box-shadow: inset #222 0 0 1px !important;
|
||||
text-shadow: #888 0 0 2px !important;
|
||||
background: linear-gradient(0deg, #787878 10%, #858585 90%) #858585 !important;
|
||||
color: #444 !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&--current {
|
||||
|
|
@ -36,14 +36,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #306;
|
||||
background: linear-gradient(0deg, #9475B2 30%, #C2AFFE 70%);
|
||||
&--frozen {
|
||||
color: #306 !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #306;
|
||||
background: linear-gradient(180deg, #9475B2 30%, #C2AFFE 70%);
|
||||
&:not(.input__button--frozen) {
|
||||
&:hover {
|
||||
color: #306;
|
||||
background: linear-gradient(0deg, #9475B2 30%, #C2AFFE 70%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #306;
|
||||
background: linear-gradient(180deg, #9475B2 30%, #C2AFFE 70%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
106
resources/assets/less/yuuno/bem/post.less
Normal file
106
resources/assets/less/yuuno/bem/post.less
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
.post {
|
||||
display: flex;
|
||||
word-wrap: break-word;
|
||||
border-top: 1px solid #9475B2;
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&__details {
|
||||
text-align: center;
|
||||
width: 200px;
|
||||
background: linear-gradient(270deg, transparent, #C2AFFE);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
&__user {
|
||||
padding: 6px 2px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 5px auto;
|
||||
|
||||
&--online {
|
||||
box-shadow: 0 3px 7px #484;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
&__username {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 1.5em;
|
||||
|
||||
&--deleted {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
&__usertitle {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
font-size: 2em;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
&__action {
|
||||
color: #8364A1;
|
||||
text-decoration: none !important;
|
||||
text-shadow: 0 0 2px #9475B2;
|
||||
transition: color .2s, text-shadow .2s;
|
||||
|
||||
&:hover {
|
||||
text-shadow: 0 0 6px #9475B2;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #725390;
|
||||
text-shadow: 0 0 8px #8364A1;
|
||||
}
|
||||
}
|
||||
|
||||
&__contents {
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&__info {
|
||||
border-bottom: 1px solid #B19EED;
|
||||
color: #222;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
&__title,
|
||||
&__date {
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
&__signature {
|
||||
border-top: 1px solid #B19EED;
|
||||
padding: 2px 0;
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -33,13 +33,14 @@
|
|||
|
||||
&__stats {
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
&__stat {
|
||||
font-size: 0.8em;
|
||||
color: #555;
|
||||
line-height: 1em;
|
||||
padding: 0 10px;
|
||||
|
||||
&--big {
|
||||
font-size: 1.3em;
|
||||
|
|
|
|||
|
|
@ -1,300 +0,0 @@
|
|||
/*
|
||||
* Forum Styling
|
||||
*/
|
||||
.forum.viewtopic .posts {
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts td {
|
||||
vertical-align: top;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts tr:not(:last-child) td {
|
||||
border-bottom: 1px solid #9475B2;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .userpanel {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
background: linear-gradient(270deg, transparent, #C2AFFE);
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .userpanel .username {
|
||||
font: 1.5em/1.7em "Open Sans", sans-serif;
|
||||
text-shadow: 0 0 7px #888; padding: 0 0 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .userpanel .avatar {
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
border: 3px solid #EEE;
|
||||
background: #EEE;
|
||||
box-shadow: 0 3px 7px #888;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .userpanel .usertitle {
|
||||
font-size: .8em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .userpanel .actions {
|
||||
font-size: 2em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .userpanel .actions a {
|
||||
color: #8364A1;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 0 2px #9475B2;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .userpanel .actions a:hover {
|
||||
text-shadow: 0 0 6px #9475B2;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .userpanel .actions a:active {
|
||||
color: #725390;
|
||||
text-shadow: 0 0 8px #8364A1;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .post-content {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .post-content .details {
|
||||
border-bottom: 1px solid #B19EED;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .post-content .details .subject {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .post-content .details .date {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .post-content .signature {
|
||||
border-top: 1px solid #B19EED;
|
||||
padding-top: 2px;
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.forum.viewtopic .posts .post-content .signature img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.posting-subject {
|
||||
padding: 3px 0 2px;
|
||||
}
|
||||
|
||||
.posting-bbcodes {
|
||||
padding: 4px 0 2px;
|
||||
}
|
||||
|
||||
.posting-bbcode-description {
|
||||
font: .9em/1.2em "Open Sans", sans-serif;
|
||||
padding: 2px 0 3px;
|
||||
}
|
||||
|
||||
.posting-text {
|
||||
padding: 2px 0 0;
|
||||
margin: 0 0 -1px;
|
||||
}
|
||||
|
||||
.posting-emotes {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.posting-emotes img {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.posting-text textarea {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.posting-options > div {
|
||||
float: left;
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
|
||||
.posting-buttons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.forum .buttonRow .leftSide {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.forum .buttonRow .rightSide {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/*
|
||||
* Comments
|
||||
*/
|
||||
#comments .comment-input-section {
|
||||
border-bottom: 1px solid #9475B2;
|
||||
}
|
||||
|
||||
#comments .comment {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#comments .comments-discussion .comment {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-avatar {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background: rgba(0, 0, 0, .2) url("/images/pixel.png") no-repeat scroll left center / contain;
|
||||
flex-shrink: 0;
|
||||
margin-right: 2px;
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-avatar:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-avatar > span {
|
||||
opacity: 0;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-avatar:hover > span {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-pointer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 15px 15px 0;
|
||||
border-color: transparent #F6F6F6 transparent transparent;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-content {
|
||||
border-radius: 5px;
|
||||
border: 0;
|
||||
min-height: 50px;
|
||||
min-width: 300px;
|
||||
flex-grow: 2;
|
||||
padding: 5px;
|
||||
font: 12px/20px "Open Sans", sans-serif;
|
||||
background: #F6F6F6;
|
||||
}
|
||||
|
||||
#comments .comment > textarea.comment-content {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-content > .comment-controls {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-content > .comment-controls > ul > li {
|
||||
float: left;
|
||||
margin: 0 5px;
|
||||
opacity: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-content:hover > .comment-controls > ul > li,
|
||||
#comments .comment > .comment-content > .comment-controls > ul > li.shown {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-content > .comment-controls > ul > li.voting {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-content > .comment-controls > ul > li.like {
|
||||
color: #0A0;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-content > .comment-controls > ul > li.dislike {
|
||||
color: #C00;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-submit {
|
||||
flex-shrink: 0;
|
||||
font-family: FontAwesome;
|
||||
width: 50px;
|
||||
border-radius: 4px;
|
||||
margin-left: 2px;
|
||||
font-size: 2em;
|
||||
background: linear-gradient(0deg, #9475B2 10%, #C2AFFE 90%);
|
||||
color: #306;
|
||||
border: 1px solid #9475B2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-submit.new {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
#comments .comment > .comment-submit:hover {
|
||||
background: linear-gradient(0deg, #9475B2 30%, #C2AFFE 70%);
|
||||
}
|
||||
|
||||
#comments .comment > .comment-submit:active {
|
||||
background: linear-gradient(180deg, #9475B2 30%, #C2AFFE 70%);
|
||||
}
|
||||
|
||||
#comments .comments-discussion {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#comments ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#comments .comments-list > li > ul,
|
||||
#comments .comments-list > li > ul > li > ul,
|
||||
#comments .comments-list > li > ul > li > ul > li > ul,
|
||||
#comments .comments-list > li > ul > li > ul > li > ul > li > ul {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
#comments ul > li > ul .comment > .comment-avatar {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
font-size: .9em;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
#comments ul > li > ul .comment > .comment-content {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
#comments ul > li > ul .comment > textarea.comment-content {
|
||||
height: 40px;
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
@import "bem/banned";
|
||||
@import "bem/bbcode";
|
||||
@import "bem/busy";
|
||||
@import "bem/comment";
|
||||
@import "bem/container";
|
||||
@import "bem/content";
|
||||
@import "bem/dialogue";
|
||||
|
|
@ -26,6 +27,7 @@
|
|||
@import "bem/link";
|
||||
@import "bem/members";
|
||||
@import "bem/news";
|
||||
@import "bem/post";
|
||||
@import "bem/profile";
|
||||
@import "bem/settings";
|
||||
@import "bem/sidepanel-table";
|
||||
|
|
|
|||
|
|
@ -1,29 +1,35 @@
|
|||
<li id="comment-{{ comment.id }}">
|
||||
<div class="comment">
|
||||
<a class="comment-avatar" href="{{ route('user.profile', comment.userData.id) }}" style="background-image: url('{{ route('user.avatar', comment.userData.id) }}');"><span style="color: {{ comment.userData.colour }};">{{ comment.userData.username }}</span></a>
|
||||
<div class="comment-pointer"></div>
|
||||
<div class="comment-content">
|
||||
<div class="comment-controls">
|
||||
<ul>
|
||||
{% if comment.userData.id == user.id %}
|
||||
<li><a href="javascript:void(0);" onclick="commentDelete({{ comment.id }});" class="fa fa-trash-o" title="Delete"></a></li>
|
||||
{% else %}
|
||||
<li><a href="{{ route('user.report', comment.userData.id) }}" class="fa fa-exclamation-circle" title="Report"></a></li>
|
||||
{% endif %}
|
||||
<li><a href="javascript:void(0);" onclick="commentReply({{ comment.id }}, '{{ session_id() }}', '{{ route('user.avatar', user.id) }}');" class="fa fa-reply" title="Reply" id="comment-action-reply-{{ comment.id }}"></a></li>
|
||||
<li class="shown voting like"><a href="javascript:void(0);" onclick="commentVote({{ comment.id }}, 1);"><span class="fa fa-thumbs-up"></span> <span id="comment-{{ comment.id }}-likes">{{ comment.upvotes }}</span></a></li>
|
||||
<li class="shown voting dislike"><a href="javascript:void(0);" onclick="commentVote({{ comment.id }}, 0);"><span class="fa fa-thumbs-down"></span> <span id="comment-{{ comment.id }}-dislikes">{{ comment.downvotes }}</span></a></li>
|
||||
</ul>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="comment-text">
|
||||
{{ comment.parsed|raw|nl2br }}
|
||||
</div>
|
||||
</div>
|
||||
<li id="comment-{{ comment.id }}" class="comment-container">
|
||||
<div class="comment">
|
||||
<a class="avatar avatar--border comment__avatar{% if comment_depth == 0 %} comment__avatar--big{% endif %}" href="{{ route('user.profile', comment.userData.id) }}" style="background-image: url('{{ route('user.avatar', comment.userData.id) }}');">
|
||||
<span class="comment__username" style="color: {{ comment.userData.colour }};">
|
||||
{{ comment.userData.username }}
|
||||
</span>
|
||||
</a>
|
||||
<div class="comment__pointer"></div>
|
||||
<div class="comment__content">
|
||||
<div class="comment__controls">
|
||||
{% if comment.userData.id == user.id %}
|
||||
<div class="fa fa-trash-o comment__control" title="Delete" onclick="commentDelete({{ comment.id }})"></div>
|
||||
{% endif %}
|
||||
<div class="fa fa-reply comment__control" title="Reply" onclick="commentReply({{ comment.id }}, '{{ session_id() }}', '{{ route('user.avatar', user.id) }}')" id="comment-action-reply-{{ comment.id }}"></div>
|
||||
<div class="comment__control comment__control--vote comment__control--vote-up" onclick="commentVote({{ comment.id }}, 1)">
|
||||
<span class="fa fa-chevron-up"></span>
|
||||
<span id="comment-{{ comment.id }}-likes">{{ comment.upvotes }}</span>
|
||||
</div>
|
||||
<ul class="comment-replies">
|
||||
{% for comment in comment.replies %}
|
||||
{% include 'elements/comment.twig' %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
<div class="comment__control comment__control--vote comment__control--vote-down" onclick="commentVote({{ comment.id }}, 0)">
|
||||
<span class="fa fa-chevron-down"></span>
|
||||
<span id="comment-{{ comment.id }}-dislikes">{{ comment.downvotes }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment__text">
|
||||
{{ comment.parsed|raw|nl2br }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="comment__replies">
|
||||
{% set comment_depth = comment_depth + 1 %}
|
||||
{% for comment in comment.replies %}
|
||||
{% include 'elements/comment.twig' %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -2,19 +2,31 @@
|
|||
<div class="comment-input-section">
|
||||
{% if user.isActive %}
|
||||
<div class="comment">
|
||||
<div class="comment-avatar" style="background-image: url('{{ route('user.avatar', user.id) }}');"></div>
|
||||
<div class="comment-pointer"></div>
|
||||
<textarea class="comment-content" name="text" placeholder="Join the conversation..."></textarea>
|
||||
<button class="comment-submit new" name="session" value="{{ session_id() }}" onclick="commentPost(this.parentNode, '{{ route('comments.category.post', commentsCategory) }}');"></button>
|
||||
<div class="avatar avatar--border comment__avatar comment__avatar--big" style="background-image: url('{{ route('user.avatar', user.id) }}');">
|
||||
<span class="comment__username">
|
||||
{{ user.username }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="comment__pointer"></div>
|
||||
<textarea class="comment__content comment__content--create" name="text" placeholder="Join the conversation..."></textarea>
|
||||
<button
|
||||
class="comment__submit comment__submit--new"
|
||||
name="session"
|
||||
value="{{ session_id() }}"
|
||||
onclick="commentPost(this.parentNode, '{{ route('comments.category.post', commentsCategory) }}');"
|
||||
>
|
||||

|
||||
</button>
|
||||
</div>
|
||||
{% else %}
|
||||
<h1 style="text-align: center; padding: 10px 0">Log in to comment!</h1>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="comments-discussion">
|
||||
<ul class="comments-list">
|
||||
<div class="comments">
|
||||
<ul class="comments__list">
|
||||
{% if comments %}
|
||||
{% for comment in comments %}
|
||||
{% set comment_depth = 0 %}
|
||||
{% include 'elements/comment.twig' %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
|
|
@ -162,7 +174,7 @@
|
|||
replies.className = 'comment-replies';
|
||||
container.appendChild(replies);
|
||||
|
||||
var discussion = document.getElementById('comments').querySelector('.comments-list');
|
||||
var discussion = document.getElementById('comments').querySelector('.comments__list');
|
||||
|
||||
if (obj.reply) {
|
||||
discussion = document.getElementById('comment-' + obj.reply).querySelector('.comment-replies');
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{% set paginationClass = 'rightSide' %}
|
||||
|
||||
<div class="buttonRow">
|
||||
<div class="leftSide">
|
||||
<div class="forum-list__buttons">
|
||||
<div>
|
||||
{% if forumBackLink is defined %}
|
||||
<a href="{{ forumBackLink }}" class="input__button"><span class="fa fa-backward"></span> Back</a>
|
||||
{% endif %}
|
||||
|
|
@ -19,5 +19,4 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
{% include 'elements/pagination.twig' %}
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -98,62 +98,76 @@
|
|||
|
||||
{% include 'forum/elements/forumBtns.twig' %}
|
||||
|
||||
<table class="posts">
|
||||
<div class="posts">
|
||||
|
||||
{% if topic is defined %}
|
||||
|
||||
{% set textCache = session.replyText['t' ~ topic.id]|default(null) %}
|
||||
{% set postingAction = route('forums.topic.reply', topic.id) %}
|
||||
|
||||
{% for post in posts[get.page|default(1) - 1] %}
|
||||
<tr class="post" id="p{{ post.id }}">
|
||||
<td class="userpanel">
|
||||
{% if post.poster.activated or post.poster.restricted %}<a href="{{ route('user.profile', post.poster.id) }}" style="color: {{ post.poster.colour }}; text-shadow: 0 0 5px {% if post.poster.colour != 'inherit' %}{{ post.poster.colour }}{% else %}#222{% endif %};" title="Go to {{ post.poster.username }}'s profile">{{ post.poster.username }}</a>
|
||||
<img src="{{ route('user.avatar', post.poster.id) }}" alt="{{ post.poster.username }}" class="avatar" style="box-shadow: 0 3px 7px #{% if post.poster.isOnline %}484{% else %}844{% endif %};">
|
||||
{% else %}
|
||||
<a class="username">[deleted user]</a>
|
||||
{% endif %}
|
||||
<div class="userdata">
|
||||
<div class="usertitle">{{ post.poster.title }}</div>
|
||||
<img src="/images/tenshi.png" alt="Tenshi"{% if not post.poster.isPremium %} style="opacity: 0;"{% endif %}> <img src="/images/flags/{{ post.poster.country|lower }}.png" alt="{{ post.poster.country(true) }}">{% if post.poster.id == (topic.posts|first).poster.id %} <img src="/images/op.png" alt="OP" title="Original Poster">{% endif %}
|
||||
{% if user.isActive %}
|
||||
<div class="actions">
|
||||
{% if (user.id == post.poster.id and forum.perms.edit) or forum.perms.editAny %}
|
||||
<a class="fa fa-pencil-square-o" title="Edit this post" href="javascript:void(0);" onclick="editPost({{ post.id }});"></a>
|
||||
<div class="post" id="p{{ post.id }}">
|
||||
<div class="post__details">
|
||||
<div class="post__user">
|
||||
{% if post.poster.activated or post.poster.restricted %}
|
||||
<a class="post__username" href="{{ route('user.profile', post.poster.id) }}" style="color: {{ post.poster.colour }}; text-shadow: 0 0 5px {% if post.poster.colour != 'inherit' %}{{ post.poster.colour }}{% else %}#222{% endif %}">
|
||||
{{ post.poster.username }}
|
||||
</a>
|
||||
<div class="avatar avatar--border post__avatar{% if post.poster.isOnline %} post__avatar--online{% endif %}" style="background-image: url('{{ route('user.avatar', post.poster.id) }}')"></div>
|
||||
|
||||
<div class="post__usertitle">{{ post.poster.title }}</div>
|
||||
|
||||
<img src="/images/tenshi.png" alt="Tenshi"{% if not post.poster.isPremium %} style="opacity: 0;"{% endif %}>
|
||||
<img src="/images/flags/{{ post.poster.country|lower }}.png" alt="{{ post.poster.country(true) }}">
|
||||
|
||||
{% if post.poster.id == (topic.posts|first).poster.id %}
|
||||
<img src="/images/op.png" alt="OP" title="Original Poster">
|
||||
{% endif %}
|
||||
{% if (user.id == post.poster.id and forum.perms.delete) or forum.perms.deleteAny %}
|
||||
<a class="fa fa-trash" title="Delete this post" href="javascript:;" onclick="deletePost({{ post.id }})"></a>
|
||||
{% endif %}
|
||||
{% if not (post.poster.activated or post.poster.restricted or user.id == post.poster.id) %}
|
||||
<a class="fa fa-{% if user.isFriends(post.poster.id) == 2 %}heart{% else %}star{% endif %} friend-{{ post.poster.id }}-level" title="You are friends" {% if user.isFriends(post.poster.id) == 0 %}style="display: none;"{% endif %}></a>
|
||||
<a class="fa fa-user-{% if user.isFriends(post.poster.id) == 0 %}plus{% else %}times{% endif %} forum-friend-toggle friend-{{ post.poster.id }}-toggle" title="{% if user.isFriends(post.poster.id) == 0 %}Add {{ post.poster.username }} as a friend{% else %}Remove friend{% endif %}" href="javascript:void(0);" onclick="Sakura.Friend.{% if user.isFriends(post.poster.id) == 0 %}Add({{ post.poster.id }}){% else %}Remove({{ post.poster.id }}){% endif %}"></a>
|
||||
<a class="fa fa-flag" title="Report {{ post.poster.username }}" href="{{ route('user.report', post.poster.id) }}"></a>
|
||||
{% endif %}
|
||||
<a class="fa fa-reply" title="Quote this post" href="javascript:void(0);" onclick="Sakura.Editor.QuotePost({{ post.id }}, '{{ post.poster.username }}', pText);"></a>
|
||||
</div>
|
||||
{% else %}
|
||||
<span class="post__username post__username--deleted">deleted user</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
<td class="post-content">
|
||||
<div class="details">
|
||||
<div class="subject">
|
||||
<a href="#p{{ post.id }}">{{ post.subject|slice(0, 50) }}{% if post.subject|length > 50 %}...{% endif %}</a>
|
||||
|
||||
{% if user.isActive %}
|
||||
<div class="post__actions">
|
||||
{% if (user.id == post.poster.id and forum.perms.edit) or forum.perms.editAny %}
|
||||
<a class="post__action fa fa-pencil-square-o" title="Edit this post" href="javascript:void(0);" onclick="editPost({{ post.id }});"></a>
|
||||
{% endif %}
|
||||
{% if (user.id == post.poster.id and forum.perms.delete) or forum.perms.deleteAny %}
|
||||
<a class="post__action fa fa-trash" title="Delete this post" href="javascript:;" onclick="deletePost({{ post.id }})"></a>
|
||||
{% endif %}
|
||||
{% if not (post.poster.activated or post.poster.restricted or user.id == post.poster.id) %}
|
||||
<a class="post__action fa fa-{% if user.isFriends(post.poster.id) == 2 %}heart{% else %}star{% endif %} friend-{{ post.poster.id }}-level" title="You are friends" {% if user.isFriends(post.poster.id) == 0 %}style="display: none;"{% endif %}></a>
|
||||
<a class="post__action fa fa-user-{% if user.isFriends(post.poster.id) == 0 %}plus{% else %}times{% endif %} forum-friend-toggle friend-{{ post.poster.id }}-toggle" title="{% if user.isFriends(post.poster.id) == 0 %}Add {{ post.poster.username }} as a friend{% else %}Remove friend{% endif %}" href="javascript:void(0);" onclick="Sakura.Friend.{% if user.isFriends(post.poster.id) == 0 %}Add({{ post.poster.id }}){% else %}Remove({{ post.poster.id }}){% endif %}"></a>
|
||||
<a class="post__action fa fa-flag" title="Report {{ post.poster.username }}" href="{{ route('user.report', post.poster.id) }}"></a>
|
||||
{% endif %}
|
||||
<a class="post__action fa fa-reply" title="Quote this post" href="javascript:void(0);" onclick="Sakura.Editor.QuotePost({{ post.id }}, '{{ post.poster.username }}', pText);"></a>
|
||||
</div>
|
||||
<div class="date">
|
||||
<a href="{{ route('forums.post', post.id) }}">#{{ post.id }} - <time class="time-ago" datetime="{{ post.time|date('r') }}">{{ post.time|date(config('general.date_format')) }}</time></a>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="post__contents">
|
||||
<div class="post__info">
|
||||
<a href="#p{{ post.id }}" class="post__title">
|
||||
{{ post.subject|slice(0, 50) }}{% if post.subject|length > 50 %}...{% endif %}
|
||||
</a>
|
||||
<a href="{{ route('forums.post', post.id) }}" class="post__date">
|
||||
#{{ post.id }} - <time class="time-ago" datetime="{{ post.time|date('r') }}">
|
||||
{{ post.time|date(config('general.date_format')) }}
|
||||
</time>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-text bbcode">
|
||||
|
||||
<div class="post__text bbcode">
|
||||
{{ post.parsed|raw }}
|
||||
</div>
|
||||
|
||||
{% if post.poster.signature and post.poster.perms.changeSignature %}
|
||||
<div class="clear"></div>
|
||||
<div class="signature bbcode">
|
||||
{{ post.poster.signature()|raw|nl2br }}
|
||||
</div>
|
||||
<div class="post__signature bbcode">
|
||||
{{ post.poster.signature|raw|nl2br }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
|
|
@ -165,32 +179,46 @@
|
|||
{% endif %}
|
||||
|
||||
{% if forumReplyLink is defined or topic is not defined %}
|
||||
<tr class="post" id="postingPreview" style="display: none;">
|
||||
<td class="userpanel">
|
||||
<a href="{{ route('user.profile', user.id) }}" style="color: {{ user.colour }}; text-shadow: 0 0 5px {% if user.colour != 'inherit' %}{{ user.colour }}{% else %}#222{% endif %};" title="Go to {{ user.username }}'s profile">{{ user.username }}</a>
|
||||
<img src="{{ route('user.avatar', user.id) }}" alt="{{ user.username }}" class="avatar" style="box-shadow: 0 3px 7px #484;">
|
||||
<div class="userdata">
|
||||
<div class="usertitle">{{ user.title }}</div>
|
||||
<img src="/images/tenshi.png" alt="Tenshi"{% if not user.isPremium %} style="opacity: 0;"{% endif %}> <img src="/images/flags/{{ user.country|lower }}.png" alt="{{ user.country(true) }}">{% if topic is defined and user.id == (topic.posts|first).poster.id %} <img src="/images/op.png" alt="OP" title="Original Poster">{% endif %}
|
||||
<div class="post" id="postingPreview" style="display: none">
|
||||
<div class="post__details">
|
||||
<div class="post__user">
|
||||
<a class="post__username" href="{{ route('user.profile', user.id) }}" style="color: {{ user.colour }}; text-shadow: 0 0 5px {% if user.colour != 'inherit' %}{{ user.colour }}{% else %}#222{% endif %}">
|
||||
{{ user.username }}
|
||||
</a>
|
||||
<div class="avatar avatar--border post__avatar post__avatar--online" style="background-image: url('{{ route('user.avatar', user.id) }}')"></div>
|
||||
|
||||
<div class="post__usertitle">{{ user.title }}</div>
|
||||
|
||||
<img src="/images/tenshi.png" alt="Tenshi"{% if not user.isPremium %} style="opacity: 0;"{% endif %}>
|
||||
<img src="/images/flags/{{ user.country|lower }}.png" alt="{{ user.country(true) }}">
|
||||
|
||||
{% if not topic is defined %}
|
||||
<img src="/images/op.png" alt="OP" title="Original Poster">
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
<td class="post-content">
|
||||
<div class="details">
|
||||
<div class="subject" id="previewTitle">{% if titleCache is not defined %}Re: {{ topic.title }}{% endif %}</div>
|
||||
<div class="date" id="previewMode">Preview</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="post__contents">
|
||||
<div class="post__info">
|
||||
<span id="previewTitle" class="post__title">
|
||||
{% if not titleCache is defined %}Re: {{ topic.title }}{% endif %}
|
||||
</span>
|
||||
<span id="previewMode" class="post__date">
|
||||
Preview
|
||||
</span>
|
||||
</div>
|
||||
<div class="post-text bbcode" id="previewText"></div>
|
||||
|
||||
<div class="post__text bbcode" id="previewText"></div>
|
||||
|
||||
{% if user.signature and user.perms.changeSignature %}
|
||||
<div class="clear"></div>
|
||||
<div class="signature bbcode">
|
||||
{{ user.signature()|raw|nl2br }}
|
||||
<div class="post__signature bbcode">
|
||||
{{ user.signature|raw|nl2br }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
{% if forumReplyLink is defined or topic is not defined %}
|
||||
{% include 'forum/elements/replyForm.twig' %}
|
||||
|
|
|
|||
Reference in a new issue