hyperzlib
/
nodebb-theme-persona
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styled the post bar

Browse Source
main
psychobunny 10 years ago
parent 92afca48a9
commit fa9f10bf5c
4 changed files with 124 additions and 391 deletions
Show Stats Download Patch File Download Diff File

30
less/categories.less
Unescape Escape View File

@ -38,20 +38,6 @@
}
}
.stats {
font-size: 20px;
text-align: center;
margin-top: 5px;
line-height: 22px;
small {
text-transform: uppercase;
color: @gray-light;
font-weight: 300;
font-size: 12px;
}
}
.card {
border-left: 4px solid #ccc;
text-align: left;
@ -129,7 +115,6 @@
}
}
}
}
.category-header-image-auto {
@ -154,4 +139,19 @@
-o-background-size: contain!important;
background-size: contain!important;
background-position: center!important;
}
.stats {
font-size: 20px;
text-align: center;
margin-top: 5px;
line-height: 22px;
small {
text-transform: uppercase;
color: @gray-light;
font-weight: 300;
font-size: 12px;
}
}

314
less/topic.less
Unescape Escape View File

@ -1,57 +1,55 @@
.topic {
.post-content {
> blockquote {
> *:not(:first-child) {
display: none;
}
.posts {
.icon {
font-size: 17px;
line-height: 17px;
border-radius: 50%;
margin-right: 15px;
min-width: 46px;
min-height: 46px;
margin-top: 2px;
> blockquote {
display: block!important;
> *:not(:first-child) {
display: none;
}
img {
margin-right: 15px;
width: 46px;
height: 46px;
border-radius: 50%;
}
}
> blockquote.uncollapsed {
> *:not(:first-child) {
display: block;
}
> blockquote {
display: block!important;
> *:not(:first-child) {
display: block;
}
}
h1 {
font-size: 22px;
line-height: 24px;
margin: 0;
}
}
.toggle {
padding: 0px 5px;
border: 1px solid #e0e0e0;
background: #fcfcfc;
width: 50px;
text-align: center;
display:block!important;
.browsing-users {
span {
text-transform: uppercase;
color: @gray-light;
}
}
pre {
max-height: 350px;
code {
white-space: pre;
word-wrap: normal;
}
}
.stats {
width: 60px;
float: left;
margin-top: -5px;
}
@media (max-width: @screen-sm-min) {
pre {
max-height: 250px;
}
}
.topic-main-buttons a {
margin-left: 20px;
}
}
.topic {
&.deleted {
-moz-opacity: 0.30;
opacity: 0.30;
@ -71,224 +69,84 @@
}
}
@media (max-width: 475px) {
.favourite-text {
display: none;
}
}
.well {
padding-top: 10px;
padding-bottom: 10px;
}
.topic-stats {
height: 34px;
line-height: 34px;
}
.topic-main-buttons {
padding-bottom: 0px;
}
@media (max-width: 767px) {
.topic-main-buttons {
margin-bottom: 0px;
}
}
.posts {
.post-content {
ul {
> li {
list-style-type: disc;
.post-info, .post-block {
position: relative;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 0 0 5px 5px;
padding: 10px;
.post-signature {
font-size: 12px;
border-top: 1px solid #ddd;
display: inline-block;
> p {
padding-top: 5px;
}
ul > li {
list-style-type: circle;
img {
max-width: 200px;
max-height: 60px;
ul > li {
list-style-type: square;
}
}
}
margin-left: 5px;
}
}
.post-block {
border-radius: 5px;
margin-bottom: 15px;
.topic-buttons {
background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.06);
margin: -5px 0 0 0;
padding: 8px 0 0 23px;
button.show {
display: inline-block !important;
> blockquote {
> *:not(:first-child) {
display: none;
}
@media (max-width: 767px) {
padding-left: 9px;
> blockquote {
display: block!important;
> *:not(:first-child) {
display: none;
}
}
}
.post-content {
padding: 10px 5px 0 5px;
word-wrap: break-word;
clear: left;
> ul, ol {
padding-bottom: 10px;
> blockquote.uncollapsed {
> *:not(:first-child) {
display: block;
}
ul {
> li {
list-style-type: disc;
ul > li {
list-style-type: circle;
ul > li {
list-style-type: square;
}
}
> blockquote {
display: block!important;
> *:not(:first-child) {
display: block;
}
}
blockquote p {
font-size: 14px;
}
}
.post-images{
padding: 2px 5px 0 5px;
}
}
}
.posts {
.main-post {
display: none;
}
.post-block {
.post-signature {
margin-left: 15px;
}
.topic-buttons {
margin: -11px -10px 0px -10px;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
padding: 8px 9px 7px 23px;
}
.post-content {
margin-left: 10px;
}
}
.img-thumbnail {
float:none;
padding: 2px;
border-radius: 0;
margin-bottom: 5px;
}
}
.posts li[data-index="0"] {
.sub-post {
display: none !important;
}
.main-post {
display: block;
}
.col-md-11 {
width: 100%;
}
.topic-title {
line-height: 1.5em;
width: auto;
overflow: hidden;
margin: 0 0 -5px 0;
padding: 0 0 5px 0;
i {
opacity: 0.7;
}
}
.avatar {
position: relative;
float: left;
margin: 0 10px 0 0;
padding-bottom: 0px;
text-align: center;
width: 100px;
@media (max-width: 767px) {
display: none;
}
.img-thumbnail {
padding: 2px;
border-radius: 0;
.toggle {
padding: 0px 5px;
border: 1px solid #e0e0e0;
background: #fcfcfc;
width: 50px;
text-align: center;
display:block!important;
}
}
.post-content {
min-height: 80px;
}
.post-block {
>h3 {
margin:0px;
}
.topic-buttons {
background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.06);
margin: 0 -11px 0 92px;
padding: 10px;
border-right: 0;
pre {
max-height: 350px;
@media (max-width: 767px) {
margin-left: -11px;
border-left: 0;
code {
white-space: pre;
word-wrap: normal;
}
}
button.show {
display: inline-block!important;
@media (max-width: @screen-sm-min) {
pre {
max-height: 250px;
}
}
}
}
.loading-indicator {
display: inline-block;
font-size: 14px;
margin-right: 1em;
}
}
.thread_active_users {
a[data-uid] {
img {
height:24px;
width:24px;
border-radius: 50%;
margin-top: -4px;
margin-left: 1px;
margin-right: -12px;
width: 46px;
height: 46px;
}
&::after {

33
templates/partials/post_bar.tpl
Unescape Escape View File

@ -1,5 +1,6 @@
<div class="inline-block">
<hr />
<div class="inline-block">
<span class="tags">
<!-- BEGIN tags -->
<a href="{relative_path}/tags/{tags.value}"><span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span><span class="tag-topic-count">{tags.score}</span></a>
@ -10,28 +11,32 @@
<span>|</span>
<!-- ENDIF tags.length -->
<small class="topic-stats">
<span>[[global:posts]]</span>
<strong><span class="topic-post-count human-readable-number" title="{postcount}">{postcount}</span></strong> |
<span>[[global:views]]</span>
<strong><span class="human-readable-number" title="{viewcount}">{viewcount}</span></strong>
</small>
<span class="browsing-users hidden">
&bull;
<small><span>[[category:browsing]]</span></small>
<div component="topic/browsing/list" class="thread_active_users active-users inline-block"></div>
<small class="hidden">
<i class="fa fa-users"></i> <span component="topic/browsing/count" class="user-count"></span>
</small>
<span>[[category:browsing]]</span>
</span>
</div>
<div class="topic-main-buttons pull-right inline-block">
<div class="loading-indicator" done="0" style="display:none;">
<div class="topic-main-buttons pull-right">
<span class="loading-indicator btn" done="0" style="display:none;">
<span class="hidden-xs">[[topic:loading_more_posts]]</span> <i class="fa fa-refresh fa-spin"></i>
</span>
<div class="stats">
<span class="topic-post-count human-readable-number" title="{postcount}">{postcount}</span><br />
<small>[[global:views]]</small>
</div>
<div class="stats">
<span class="human-readable-number" title="{viewcount}">{viewcount}</span><br />
<small>[[global:posts]]</small>
</div>
<!-- IF privileges.topics:reply -->
<button component="topic/reply" class="btn btn-primary post_reply" type="button">[[topic:reply]]</button>
<a component="topic/reply" class="btn btn-primary post_reply">[[topic:reply]]</a>
<!-- ELSE -->
<!-- IF !loggedIn -->
<a href="/login?next=topic/{slug}" class="btn btn-primary">[[topic:guest-login-reply]]</a>
@ -42,4 +47,6 @@
<!-- IMPORT partials/thread_tools.tpl -->
</div>
<div style="clear:both;"></div>
<div style="clear:both;"></div>
<hr />

138
templates/topic.tpl
Unescape Escape View File

@ -9,150 +9,18 @@
<meta itemprop="datePublished" content="{posts.relativeTime}">
<meta itemprop="dateModified" content="{posts.relativeEditTime}">
<div class="col-md-1 profile-image-block hidden-xs hidden-sm sub-post">
<a href="<!-- IF posts.user.userslug -->{relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
<img src="{posts.user.picture}" align="left" class="img-thumbnail" itemprop="image" />
<!-- IF posts.user.banned -->
<span class="label label-danger">[[user:banned]]</span>
<!-- ENDIF posts.user.banned -->
</a>
</div>
<div class="col-md-11 panel panel-default post-block topic-item">
<a class="main-post avatar" href="<!-- IF posts.user.userslug -->{relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
<img itemprop="image" src="{posts.user.picture}" align="left" class="img-thumbnail" width=150 height=150 />
</a>
<h3 class="main-post">
<p component="post/header" itemprop="name"><i class="fa fa-thumb-tack hide"></i> <i class="fa fa-lock hide"></i> {title}</p>
</h3>
<div class="topic-buttons">
<div class="btn-group">
<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button" title="<!-- IF posts.user.userslug -->[[topic:posted_by, {posts.user.username}]]<!-- ELSE -->[[topic:posted_by_guest]]<!-- ENDIF posts.user.userslug -->">
<i class="fa fa-circle status {posts.user.status}" title="[[global:{posts.user.status}]]"></i>
<span class="visible-xs visible-md"><img class="" src="{posts.user.picture}" width=18 height=18 />&nbsp;</span>
<span class="username-field" href="<!-- IF posts.user.userslug -->{relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->" itemprop="author" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.username}&nbsp;</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="<!-- IF posts.user.userslug -->{relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->"><i class="fa fa-user"></i> [[topic:profile]]</a></li>
<!-- IF !posts.selfPost -->
<!-- IF posts.user.userslug -->
<!-- IF loggedIn -->
<!-- IF !config.disableChat -->
<li><a href="#" component="post/chat"><i class="fa fa-comment"></i> [[topic:chat]]</a></li>
<!-- ENDIF !config.disableChat -->
<!-- ENDIF loggedIn -->
<!-- ENDIF posts.user.userslug -->
<!-- ENDIF !posts.selfPost -->
</ul>
</div>
<div class="btn-group">
<!-- IF !posts.index -->
<button component="topic/follow" class="btn btn-sm btn-default" type="button" title="[[topic:notify_me]]"><!-- IF isFollowing --><i class="fa fa-eye-slash"><!-- ELSE --><i class="fa fa-eye"><!-- ENDIF isFollowing --></i></button>
<!-- ENDIF !posts.index -->
<!-- IF !posts.selfPost -->
<button component="post/flag" class="btn btn-sm btn-default" type="button" title="[[topic:flag_title]]"><i class="fa fa-flag-o"></i></button>
<!-- ENDIF !posts.selfPost -->
<button component="post/favourite" data-favourited="{posts.favourited}" class="btn btn-sm btn-default <!-- IF posts.favourited --> btn-warning <!-- ENDIF posts.favourited -->" type="button">
<span class="favourite-text">[[topic:favourite]]</span>
<span component="post/favourite-count" data-favourites="{posts.reputation}">{posts.reputation}</span>&nbsp;
<!-- IF posts.favourited -->
<i class="fa fa-star"></i>
<!-- ELSE -->
<i class="fa fa-star-o"></i>
<!-- ENDIF posts.favourited -->
</button>
</div>
<!-- IF !reputation:disabled -->
<div class="btn-group">
<button component="post/upvote" class="btn btn-sm btn-default <!-- IF posts.upvoted --> upvoted btn-primary <!-- ENDIF posts.upvoted -->">
<i class="fa fa-chevron-up"></i>
</button>
<button component="post/vote-count" class="btn btn-sm btn-default" data-votes="{posts.votes}">{posts.votes}</button>
<!-- IF !downvote:disabled -->
<button component="post/downvote" class="btn btn-sm btn-default <!-- IF posts.downvoted --> downvoted btn-primary <!-- ENDIF posts.downvoted -->">
<i class="fa fa-chevron-down"></i>
</button>
<!-- ENDIF !downvote:disabled -->
</div>
<!-- ENDIF !reputation:disabled -->
<!-- IF privileges.topics:reply -->
<div class="btn-group">
<button component="post/quote" class="btn btn-sm btn-default" type="button" title="[[topic:quote]]"><i class="fa fa-quote-left"></i></button>
<button component="post/reply" class="btn btn-sm btn-primary" type="button">[[topic:reply]] <i class="fa fa-reply"></i></button>
</div>
<!-- ENDIF privileges.topics:reply -->
<div class="pull-right">
<div class="btn-group post-tools">
<div class="dropdown share-dropdown pull-right">
<button title="[[topic:share]]"class="btn btn-sm btn-default share" data-toggle="dropdown" href="#"><i class="fa fa-share-square-o"></i></button>
<!-- IMPORT partials/share_dropdown.tpl -->
</div>
</div>
<!-- IF posts.display_moderator_tools -->
<div class="btn-group post-tools">
<div class="dropdown">
<button title="[[topic:tools]]" class="btn btn-sm btn-default" data-toggle="dropdown" href="#"><i class="fa fa-gear"></i></button>
<ul class="dropdown-menu text-center pull-right" role="menu" aria-labelledby="dLabel">
<button component="post/edit" class="btn btn-sm btn-default" type="button" title="[[topic:edit]]"><i class="fa fa-pencil"></i></button>
<button component="post/delete" class="btn btn-sm btn-default" type="button" title="[[topic:delete]]"><i class="fa fa-trash-o"></i></button>
<button component="post/purge" class="btn btn-sm btn-default <!-- IF !posts.deleted -->none<!-- ENDIF !posts.deleted -->" type="button" title="[[topic:purge]]"><i class="fa fa-eraser"></i></button>
<!-- IF posts.display_move_tools -->
<button component="post/move" class="btn btn-sm btn-default" type="button" title="[[topic:move]]"><i class="fa fa-arrows"></i></button>
<!-- ENDIF posts.display_move_tools -->
</ul>
</div>
</div>
<!-- ENDIF posts.display_moderator_tools -->
</div>
</div>
<div component="post/content" itemprop="text">{posts.content}</div>
<!-- IF posts.user.signature -->
<div class="post-signature">{posts.user.signature}</div>
<!-- ENDIF posts.user.signature -->
<div class="post-info">
<span class="pull-right">
[[global:posted_ago, <span class="timeago" title="{posts.relativeTime}"></span>]]
<!-- IF posts.editor.username -->
<span>| [[global:last_edited_by_ago, <strong><a href="{relative_path}/user/{posts.editor.userslug}">{posts.editor.username}</a></strong>, <span class="timeago" title="{posts.relativeEditTime}"></span>]]</span>
<!-- ENDIF posts.editor.username -->
</span>
<span class="pull-left">
[[global:reputation]]: <i class='fa fa-star'></i> <span component="user/reputation" data-reputation="{posts.user.reputation}" data-uid="{posts.uid}" class='formatted-number reputation'>{posts.user.reputation}</span>&nbsp;|&nbsp;[[global:posts]]: <i class='fa fa-pencil'></i> <span class='formatted-number' component="user/postcount" data-uid="{posts.uid}" data-postcount="{posts.user.postcount}">{posts.user.postcount}</span>
<!-- IF posts.user.custom_profile_info.length -->
<!-- BEGIN custom_profile_info -->
| {posts.user.custom_profile_info.content}
<!-- END custom_profile_info -->
<!-- ENDIF posts.user.custom_profile_info.length -->
</span>
<div style="clear:both;"></div>
</div>
</div>
<div style="clear:both;"></div>
<!-- IMPORT partials/topic/post.tpl -->
</li>
<!-- IF !posts.index -->
<li class="well post-bar" data-index="{posts.index}">
<li class="post-bar" data-index="{posts.index}">
<!-- IMPORT partials/post_bar.tpl -->
</li>
<!-- ENDIF !posts.index -->
<!-- END posts -->
</ul>
<div class="well col-md-11 col-xs-12 pull-right post-bar bottom-post-bar <!-- IF unreplied -->hide<!-- ENDIF unreplied -->">
<div class="post-bar bottom-post-bar <!-- IF unreplied -->hide<!-- ENDIF unreplied -->">
<!-- IMPORT partials/post_bar.tpl -->
</div>

Write Preview
Loading…
Cancel
Save