Navigator (#511)

* pagination changes 0.1

* feat: mvoe navigator to core branch

* feat: navigation changes

* remove unused css, add lang key

* feat: create partial for pagination
main
Barış Soner Uşaklı 4 years ago committed by GitHub
parent 05c998c0d0
commit 7b6a898f94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -179,68 +179,6 @@
}
}
.pagination-block {
margin-right: 10px !important;
margin-left: 10px !important;
transition: opacity 250ms ease-in;
opacity: 0;
pointer-events: none;
&.ready {
opacity: 1;
pointer-events: inherit;
}
a {
display: inline-block;
padding-left: 2px;
padding-right: 2px;
}
.progress-container {
height: 2px;
position: absolute;
bottom: 8px;
left: 8px;
background: #666;
width: 90%;
margin: auto;
.progress-bar {
background-color: @gray-lighter;
height: 2px;
}
}
.dropdown-toggle {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px;
}
.open>a {
background-color: rgba(0, 0, 0, 0)!important;
}
.dropdown-menu {
padding: 10px;
}
@media (max-width: @screen-xs-max) {
.progress-container {
display: inline-block;
position: static;
bottom: 0px;
margin-left: 1em;
width: 100px;
margin-bottom: 3px;
}
}
}
.notif-dropdown-link {
// margin-top: 1em;
border-top: 1px solid rgba(163, 163, 163, 0.5);

@ -511,33 +511,64 @@
}
}
.navigator-thumb {
position: fixed;
background-color: @gray-lighter;
bottom: 60px;
left: 0px;
padding: 10px;
border-radius: 5px;
white-space: nowrap;
z-index: 100;
}
.pagination-block {
position: fixed;
width: 100%;
background-color: @gray-lighter;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
transition: opacity 250ms ease-in;
opacity: 0;
.pagination-text {
color: @text-color;
}
&.ready {
opacity: 1;
}
.wrapper {
padding: 5px 0px 5px 0px;
.dropdown-toggle {
padding-left:20px;
padding-right: 20px;
}
.dropdown-menu {
width: 400px;
li {
padding: 10px;
}
.post-content {
height: 350px;
overflow: hidden;
}
.scroller-bg {
width: 3px;
height: 300px;
margin-left: 3px;
background-color: @gray-lighter;
.scroller-thumb {
width: 9px;
height: 20px;
background-color: @brand-primary;
position: relative;
left: -3px;
cursor: pointer;
border-radius: 3px;
.thumb-text {
font-weight: bolder;
margin-left: 20px;
}
}
}
}
@media (max-width: @screen-sm-min) {
.dropdown-menu {
width: 100%;
}
}
}
.progress-bar {
background-color: @brand-info;
@ -547,6 +578,11 @@
transition: width 50ms ease-in;
}
}
@media (max-width: @screen-sm-min) {
.pagination-block {
width: 100%;
}
}
}
.thread_active_users {

@ -199,30 +199,6 @@
</li>
</ul>
<ul class="nav navbar-nav navbar-right pagination-block visible-lg visible-md">
<li class="dropdown">
<a><i class="fa fa-angle-double-up pointer fa-fw pagetop"></i></a>
<a><i class="fa fa-angle-up pointer fa-fw pageup"></i></a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="pagination-text"></span>
</a>
<a><i class="fa fa-angle-down pointer fa-fw pagedown"></i></a>
<a><i class="fa fa-angle-double-down pointer fa-fw pagebottom"></i></a>
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<ul class="dropdown-menu" role="menu">
<li>
<input type="text" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
</li>
</ul>
</li>
</ul>
<ul id="main-nav" class="nav navbar-nav">
{{{each navigation}}}
<!-- IF function.displayMenuItem, @index -->

@ -0,0 +1,12 @@
<div class="clearfix">
<div class="icon pull-left">
<a href="<!-- IF post.user.userslug -->{config.relative_path}/user/{post.user.userslug}<!-- ELSE -->#<!-- ENDIF post.user.userslug -->">
{buildAvatar(post.user, "sm", true, "", "user/picture")} {post.user.username}
</a>
</div>
<small class="pull-right">
<span class="timeago" title="{post.timestampISO}"></span>
</small>
</div>
<div>{post.content}</div>

@ -0,0 +1,31 @@
<div class="pagination-block text-center">
<div class="progress-bar"></div>
<div class="wrapper dropup">
<i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop"></i>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="pagination-text"></span>
</a>
<i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom"></i>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>
<div class="row">
<div class="col-xs-9 post-content"></div>
<div class="col-xs-3">
<span class="pointer pagetop"><i class="fa fa-angle-double-up"></i> [[topic:first-post]]</span>
<div class="scroller-bg">
<div class="scroller-thumb">
<span class="thumb-text"></span>
</div>
</div>
<span class="pointer pagebottom"><i class="fa fa-angle-double-down"></i> [[topic:last-post]]</span>
</div>
</div>
</li>
<li>
<input type="text" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
</li>
</ul>
</div>
</div>

@ -78,20 +78,7 @@
<!-- IMPORT partials/paginator.tpl -->
<!-- ENDIF config.usePagination -->
<div class="navigator-thumb text-center hidden">
<strong class="text"></strong><br/>
<span class="time"></span>
</div>
<div class="visible-xs visible-sm pagination-block text-center">
<div class="progress-bar"></div>
<div class="wrapper">
<i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop"></i>
<i class="fa fa-2x fa-angle-up pointer fa-fw pageup"></i>
<span class="pagination-text"></span>
<i class="fa fa-2x fa-angle-down pointer fa-fw pagedown"></i>
<i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom"></i>
</div>
</div>
<!-- IMPORT partials/topic/navigator.tpl -->
</div>
<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 <!-- IF !widgets.sidebar.length -->hidden<!-- ENDIF !widgets.sidebar.length -->">
{{{each widgets.sidebar}}}

Loading…
Cancel
Save