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

feat: sticky postbar (#507)

Browse Source
main
Barış Soner Uşaklı 4 years ago committed by GitHub
parent c87e0a3a02
commit 88665a5504
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 85 additions and 75 deletions
Show Stats Download Patch File Download Diff File

25
less/topic.less
Unescape Escape View File

@ -9,9 +9,14 @@
.topic-title {
word-wrap: break-word;
font-size: 28px;
font-size: 24px;
color:inherit;
line-height: 36px;
line-height: 32px;
@media (max-width: @screen-sm-max) {
font-size: 18px;
line-height: 24px;
margin-top: 0px;
}
}
> span {
@ -31,10 +36,22 @@
text-transform: initial;
}
}
[component="topic/browsing-users"] {
margin-bottom: -15px;
}
.topic-header {
position: sticky;
top: @navbar-height;
background-color: @body-bg;
z-index: @zindex-navbar;
}
.topic-info {
border-bottom: 1px solid @post-border-color;
margin-bottom: 10px;
padding-bottom: 10px;
> * {
padding-bottom: 10px;
}
}
.category-item {
.icon {
@ -220,7 +237,7 @@
.stats {
font-size: 12px;
margin: 0px 5px 0px 5px;
float: left;
display: inline-block;
}
.title {

10
public/persona.js
Unescape Escape View File

@ -42,6 +42,16 @@ $(document).ready(function () {
showOnBottom: false,
});
}
navbarEl.on('show.autoHidingNavbar', function() {
if (ajaxify.data.template.topic) {
$('.topic .topic-header').css({top: '' });
}
});
navbarEl.on('hide.autoHidingNavbar', function() {
if (ajaxify.data.template.topic) {
$('.topic .topic-header').css('top', '0px');
}
});
}
function setupNProgress() {

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

@ -1,27 +1,20 @@
<div class="clearfix">
<div class="topic-main-buttons pull-right inline-block">
<span class="loading-indicator btn pull-left hidden" done="0">
<span class="hidden-xs">[[topic:loading_more_posts]]</span> <i class="fa fa-refresh fa-spin"></i>
</span>
<!-- IMPORT partials/topic/browsing-users.tpl -->
<!-- IF loggedIn -->
<button component="topic/mark-unread" class="btn btn-sm btn-default" title="[[topic:mark_unread]]">
<i class="fa fa-fw fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"></span>
</button>
<!-- ENDIF loggedIn -->
<div class="topic-main-buttons pull-right">
<span class="loading-indicator btn pull-left hidden" done="0">
<span class="hidden-xs">[[topic:loading_more_posts]]</span> <i class="fa fa-refresh fa-spin"></i>
</span>
<!-- IMPORT partials/topic/watch.tpl -->
<!-- IMPORT partials/topic/reply-button.tpl -->
<!-- IMPORT partials/topic/sort.tpl -->
<!-- IF loggedIn -->
<button component="topic/mark-unread" class="btn btn-default">
<i class="fa fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[topic:mark_unread]]</span>
</button>
<!-- ENDIF loggedIn -->
<!-- IMPORT partials/topic/watch.tpl -->
<!-- IMPORT partials/topic/sort.tpl -->
<div class="pull-right">&nbsp;
<!-- IMPORT partials/thread_tools.tpl -->
</div>
<div class="inline-block">
<!-- IMPORT partials/thread_tools.tpl -->
</div>
<!-- IMPORT partials/topic/reply-button.tpl -->
</div>
<hr/>

6
templates/partials/thread_tools.tpl
Unescape Escape View File

@ -1,9 +1,7 @@
<!-- IF privileges.view_thread_tools -->
<div class="btn-group thread-tools bottom-sheet">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:thread_tools.title]]</span>
<span class="visible-xs-inline"><i class="fa fa-fw fa-gear"></i></span>
<span class="caret"></span>
<button title="[[topic:thread_tools.title]]" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<i class="fa fa-fw fa-gear"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right"></ul>
</div>

2
templates/partials/topic/browsing-users.tpl
Unescape Escape View File

@ -1,4 +1,4 @@
<div component="topic/browsing-users">
<div component="topic/browsing-users" class="inline-block hidden-xs">
{{{each browsingUsers}}}
<div class="pull-left" data-uid="{browsingUsers.uid}">
<a href="<!-- IF browsingUsers.userslug -->{config.relative_path}/user/{browsingUsers.userslug}<!-- ELSE -->#<!-- ENDIF browsingUsers.userslug -->">

10
templates/partials/topic/reply-button.tpl
Unescape Escape View File

@ -1,6 +1,6 @@
<div component="topic/reply/container" class="btn-group action-bar bottom-sheet <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">
<a href="{config.relative_path}/compose?tid={tid}&title={title}" class="btn btn-primary" component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply visible-xs-inline"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[topic:reply]]</span></a>
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<a href="{config.relative_path}/compose?tid={tid}&title={title}" class="btn btn-sm btn-primary" component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply visible-xs-inline"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[topic:reply]]</span></a>
<button type="button" class="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
@ -11,17 +11,17 @@
<!-- IF loggedIn -->
<!-- IF !privileges.topics:reply -->
<!-- IF locked -->
<a component="topic/reply/locked" class="btn btn-primary" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
<a component="topic/reply/locked" class="btn btn-sm btn-primary" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
<!-- ENDIF locked -->
<!-- ENDIF !privileges.topics:reply -->
<!-- IF !locked -->
<a component="topic/reply/locked" class="btn btn-primary hidden" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
<a component="topic/reply/locked" class="btn btn-sm btn-primary hidden" disabled><i class="fa fa-lock"></i> [[topic:locked]]</a>
<!-- ENDIF !locked -->
<!-- ELSE -->
<!-- IF !privileges.topics:reply -->
<a component="topic/reply/guest" href="{config.relative_path}/login" class="btn btn-primary">[[topic:guest-login-reply]]</a>
<a component="topic/reply/guest" href="{config.relative_path}/login" class="btn btn-sm btn-primary">[[topic:guest-login-reply]]</a>
<!-- ENDIF !privileges.topics:reply -->
<!-- ENDIF loggedIn -->

4
templates/partials/topic/sort.tpl
Unescape Escape View File

@ -1,7 +1,7 @@
<!-- IF config.loggedIn -->
<div class="btn-group bottom-sheet" component="thread/sort">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:sort_by]]</span>
<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span> <span class="caret"></span></button>
<button title="[[topic:sort_by]]" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<span><i class="fa fa-fw fa-sort"></i></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
<li><a href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>

9
templates/partials/topic/watch.tpl
Unescape Escape View File

@ -1,13 +1,12 @@
<!-- IF config.loggedIn -->
<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<span component="topic/following/menu" <!-- IF !isFollowing -->class="hidden"<!-- ENDIF !isFollowing -->><i class="fa fa-fw fa-bell-o"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:watching]]</span></span>
<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<span title="[[topic:watching]]" component="topic/following/menu" <!-- IF !isFollowing -->class="hidden"<!-- ENDIF !isFollowing -->><i class="fa fa-fw fa-bell-o"></i></span>
<span component="topic/not-following/menu" <!-- IF !isNotFollowing -->class="hidden"<!-- ENDIF !isNotFollowing -->><i class="fa fa-fw fa-bell-slash-o"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:not-watching]]</span></span>
<span title="[[topic:not-watching]]" component="topic/not-following/menu" <!-- IF !isNotFollowing -->class="hidden"<!-- ENDIF !isNotFollowing -->><i class="fa fa-fw fa-bell-slash-o"></i></span>
<span component="topic/ignoring/menu" <!-- IF !isIgnoring -->class="hidden"<!-- ENDIF !isIgnoring -->><i class="fa fa-fw fa-eye-slash"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:ignoring]]</span></span>
<span title="[[topic:ignoring]]" component="topic/ignoring/menu" <!-- IF !isIgnoring -->class="hidden"<!-- ENDIF !isIgnoring -->><i class="fa fa-fw fa-eye-slash"></i></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#" component="topic/following"><i component="topic/following/check" class="fa fa-fw <!-- IF isFollowing -->fa-check<!-- ENDIF isFollowing -->"></i><i class="fa fa-fw fa-bell-o"></i> [[topic:watching]]<p class="help-text hidden-xs"><small>[[topic:watching.description]]</small></p></a></li>

59
templates/topic.tpl
Unescape Escape View File

@ -6,35 +6,37 @@
</div>
<div class="row">
<div class="topic <!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
<div class="topic-header">
<h1 component="post/header" class="" itemprop="name">
<i component="topic/pinned" class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->" title="[[topic:pinned]]"></i>
<i component="topic/locked" class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->" title="[[topic:locked]]"></i>
<i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
{{{each icons}}}@value{{{end}}}
<span class="topic-title" component="topic/title">{title}</span>
</h1>
<h1 component="post/header" class="hidden-xs" itemprop="name">
<i component="topic/pinned" class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->" title="[[topic:pinned]]"></i>
<i component="topic/locked" class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->" title="[[topic:locked]]"></i>
<i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
{{{each icons}}}@value{{{end}}}
<span class="topic-title" component="topic/title">{title}</span>
</h1>
<div class="topic-info clearfix">
<div class="category-item inline-block">
{{{ if category.icon }}}
<div role="presentation" class="icon pull-left" style="{{{ if category.bgColor }}}background-color: {category.bgColor};{{{end}}}; {{{ if category.color}}}color: {category.color};{{{end}}}">
<i class="fa fa-fw {category.icon}"></i>
</div>
{{{ end }}}
<a href="{config.relative_path}/category/{category.slug}">{category.name}</a>
</div>
<div class="topic-info clearfix">
<div class="category-item inline-block">
{{{ if category.icon }}}
<div role="presentation" class="icon pull-left" style="{{{ if category.bgColor }}}background-color: {category.bgColor};{{{end}}}; {{{ if category.color}}}color: {category.color};{{{end}}}">
<i class="fa fa-fw {category.icon}"></i>
<div class="tags tag-list inline-block">
<!-- IMPORT partials/topic/tags.tpl -->
</div>
{{{ end }}}
<a href="{config.relative_path}/category/{category.slug}">{category.name}</a>
</div>
{{{ if tags.length }}}
&bull;
{{{ end}}}
<div class="tags tag-list inline-block">
<!-- IMPORT partials/topic/tags.tpl -->
</div>
<div class="pull-right">
<!-- IMPORT partials/topic/stats.tpl -->
<div class="inline-block">
<!-- IMPORT partials/topic/stats.tpl -->
</div>
<!-- IMPORT partials/topic/browsing-users.tpl -->
<!-- IMPORT partials/post_bar.tpl -->
</div>
</div>
<!-- IF merger -->
<div component="topic/merged/message" class="alert alert-warning clearfix">
<span class="pull-left">[[topic:merged_message, {config.relative_path}/topic/{mergeIntoTid}, {merger.mergedIntoTitle}]]</span>
@ -59,11 +61,6 @@
<!-- IMPORT partials/topic/post.tpl -->
</li>
<!-- IF !posts.index -->
<li>
<div class="post-bar-placeholder"></div>
</li>
<!-- ENDIF !posts.index -->
{{{end}}}
</ul>
@ -71,10 +68,6 @@
<!-- IMPORT partials/topic/quickreply.tpl -->
<!-- ENDIF config.enableQuickReply -->
<div class="post-bar">
<!-- IMPORT partials/post_bar.tpl -->
</div>
<!-- IF config.usePagination -->
<!-- IMPORT partials/paginator.tpl -->
<!-- ENDIF config.usePagination -->

Write Preview
Loading…
Cancel
Save