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

23
less/topic.less
Unescape Escape View File

@ -9,9 +9,14 @@
.topic-title { .topic-title {
word-wrap: break-word; word-wrap: break-word;
font-size: 28px; font-size: 24px;
color:inherit; color:inherit;
line-height: 36px; line-height: 32px;
@media (max-width: @screen-sm-max) {
font-size: 18px;
line-height: 24px;
margin-top: 0px;
}
} }
> span { > span {
@ -31,11 +36,23 @@
text-transform: initial; 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 { .topic-info {
border-bottom: 1px solid @post-border-color; border-bottom: 1px solid @post-border-color;
margin-bottom: 10px; margin-bottom: 10px;
> * {
padding-bottom: 10px; padding-bottom: 10px;
} }
}
.category-item { .category-item {
.icon { .icon {
min-width: 23px; min-width: 23px;
@ -220,7 +237,7 @@
.stats { .stats {
font-size: 12px; font-size: 12px;
margin: 0px 5px 0px 5px; margin: 0px 5px 0px 5px;
float: left; display: inline-block;
} }
.title { .title {

10
public/persona.js
Unescape Escape View File

@ -42,6 +42,16 @@ $(document).ready(function () {
showOnBottom: false, 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() { function setupNProgress() {

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

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

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

@ -1,9 +1,7 @@
<!-- IF privileges.view_thread_tools --> <!-- IF privileges.view_thread_tools -->
<div class="btn-group thread-tools bottom-sheet"> <div class="btn-group thread-tools bottom-sheet">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"> <button title="[[topic:thread_tools.title]]" class="btn btn-sm 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> <i class="fa fa-fw fa-gear"></i>
<span class="visible-xs-inline"><i class="fa fa-fw fa-gear"></i></span>
<span class="caret"></span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-right"></ul> <ul class="dropdown-menu dropdown-menu-right"></ul>
</div> </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}}} {{{each browsingUsers}}}
<div class="pull-left" data-uid="{browsingUsers.uid}"> <div class="pull-left" data-uid="{browsingUsers.uid}">
<a href="<!-- IF browsingUsers.userslug -->{config.relative_path}/user/{browsingUsers.userslug}<!-- ELSE -->#<!-- ENDIF browsingUsers.userslug -->"> <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 -->"> <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> <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-info dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
@ -11,17 +11,17 @@
<!-- IF loggedIn --> <!-- IF loggedIn -->
<!-- IF !privileges.topics:reply --> <!-- IF !privileges.topics:reply -->
<!-- IF locked --> <!-- 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 locked -->
<!-- ENDIF !privileges.topics:reply --> <!-- ENDIF !privileges.topics:reply -->
<!-- IF !locked --> <!-- 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 --> <!-- ENDIF !locked -->
<!-- ELSE --> <!-- ELSE -->
<!-- IF !privileges.topics:reply --> <!-- 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 !privileges.topics:reply -->
<!-- ENDIF loggedIn --> <!-- ENDIF loggedIn -->

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

@ -1,7 +1,7 @@
<!-- IF config.loggedIn --> <!-- IF config.loggedIn -->
<div class="btn-group bottom-sheet" component="thread/sort"> <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> <button title="[[topic:sort_by]]" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span> <span class="caret"></span></button> <span><i class="fa fa-fw fa-sort"></i></span></button>
<ul class="dropdown-menu dropdown-menu-right"> <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="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> <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 --> <!-- IF config.loggedIn -->
<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch"> <div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"> <button class="btn btn-sm 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> <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> </button>
<ul class="dropdown-menu dropdown-menu-right"> <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> <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>

25
templates/topic.tpl
Unescape Escape View File

@ -6,8 +6,8 @@
</div> </div>
<div class="row"> <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 <!-- 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="hidden-xs" itemprop="name"> <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/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 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> <i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
@ -24,17 +24,19 @@
{{{ end }}} {{{ end }}}
<a href="{config.relative_path}/category/{category.slug}">{category.name}</a> <a href="{config.relative_path}/category/{category.slug}">{category.name}</a>
</div> </div>
{{{ if tags.length }}}
&bull;
{{{ end}}}
<div class="tags tag-list inline-block"> <div class="tags tag-list inline-block">
<!-- IMPORT partials/topic/tags.tpl --> <!-- IMPORT partials/topic/tags.tpl -->
</div> </div>
<div class="pull-right"> <div class="inline-block">
<!-- IMPORT partials/topic/stats.tpl --> <!-- IMPORT partials/topic/stats.tpl -->
</div> </div>
</div>
<!-- IMPORT partials/topic/browsing-users.tpl -->
<!-- IMPORT partials/post_bar.tpl -->
</div>
</div>
<!-- IF merger --> <!-- IF merger -->
<div component="topic/merged/message" class="alert alert-warning clearfix"> <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> <span class="pull-left">[[topic:merged_message, {config.relative_path}/topic/{mergeIntoTid}, {merger.mergedIntoTitle}]]</span>
@ -59,11 +61,6 @@
<!-- IMPORT partials/topic/post.tpl --> <!-- IMPORT partials/topic/post.tpl -->
</li> </li>
<!-- IF !posts.index -->
<li>
<div class="post-bar-placeholder"></div>
</li>
<!-- ENDIF !posts.index -->
{{{end}}} {{{end}}}
</ul> </ul>
@ -71,10 +68,6 @@
<!-- IMPORT partials/topic/quickreply.tpl --> <!-- IMPORT partials/topic/quickreply.tpl -->
<!-- ENDIF config.enableQuickReply --> <!-- ENDIF config.enableQuickReply -->
<div class="post-bar">
<!-- IMPORT partials/post_bar.tpl -->
</div>
<!-- IF config.usePagination --> <!-- IF config.usePagination -->
<!-- IMPORT partials/paginator.tpl --> <!-- IMPORT partials/paginator.tpl -->
<!-- ENDIF config.usePagination --> <!-- ENDIF config.usePagination -->

Write Preview
Loading…
Cancel
Save