m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2025-02-14 21:10:25 +01:00
Code

new pagination style

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-04-29 00:42:43 +02:00
parent 37c0747e34
commit 8f859dfd80
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
4 changed files with 45 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
_src/_assets/styl/_kremalicious/navigation.styl
View File

@ -75,25 +75,30 @@
///////////////////////////////////// /////////////////////////////////////
.paginator .paginator
@extend .textcenter
padding-top: ($spacer*2) padding-top: ($spacer*2)
padding-bottom: ($spacer*2) padding-bottom: ($spacer*2)
.icon .icon
margin-bottom: -3px margin-bottom: -5px
p
margin-bottom: 0;
.paginator-next .paginator__link
text-align: right width: 2rem
height: 2rem
line-height: 1.7
display: inline-block
border-radius: 50%
.paginator-pages &:hover,
@extend .textcenter, .dimmed &:focus
font-size: $font-size-small background: rgba(255,255,255,.3)
.paginator-number &.active
font-size: $font-size-base color: $text-color-dimmed
color: $text-color-light cursor: default
padding: 0 2px pointer-events: none
background: rgba(255,255,255,.3)
.paginator-title .paginator-title
@extend .page-title @extend .page-title
margin-top: -($spacer*2)

59
_src/_includes/paginator.html
View File

@ -1,52 +1,43 @@
{% if paginator.total_pages > 1 %} {% if paginator.total_pages > 1 %}
<nav class="paginator grid"> <nav class="paginator">
{% if paginator.previous_page %}
<p class="paginator-previous grid__col"> <a class="paginator__link"
{% if paginator.previous_page %} {% if paginator.previous_page == 1 %}
<a href="/">
{% if page.category %}
{% if paginator.previous_page == 1 %}
href="/{{ page.category }}/"
{% else %}
href="/{{ page.category }}/page/{{ paginator.previous_page }}/"
{% endif %}
{% else %} {% else %}
{% if paginator.previous_page == 1 %} href="/page/{{paginator.previous_page}}">
href="/"
{% else %}
href="/page/{{ paginator.previous_page }}/"
{% endif %}
{% endif %} {% endif %}
rel="prev">
<svg class="icon icon-entypo icon-entypo-chevron-left"> <svg class="icon icon-entypo icon-entypo-chevron-left">
<use xlink:href="/assets/img/sprite.svg#entypo-chevron-left"></use> <use xlink:href="/assets/img/sprite.svg#entypo-chevron-left"></use>
</svg> </svg>
Previous
</a> </a>
{% endif %}
<a
{% if paginator.page == 1 %}
href="#" class="paginator__link active"
{% else %}
href="/" class="paginator__link"
{% endif %} {% endif %}
</p> >1</a>
<p class="paginator-pages grid__col"> {% for count in (2..paginator.total_pages) %}
<span class="paginator-number">{{ paginator.page }}</span> of <span class="paginator-number">{{ paginator.total_pages }}</span> {% if count == paginator.page %}
</p> <a href="#" class="paginator__link active">{{count}}</a>
{% else %}
<a class="paginator__link" href="/page/{{count}}">{{count}}</a>
{% endif %}
{% endfor %}
<p class="paginator-next grid__col"> {% if paginator.next_page %}
{% if paginator.next_page %} <a class="paginator__link" href="/page/{{paginator.next_page}}">
<a
{% if page.category %}
href="/{{ page.category }}/page/{{ paginator.next_page }}/"
{% else %}
href="/page/{{ paginator.next_page }}/"
{% endif %}
rel="next">Next
<svg class="icon icon-entypo icon-entypo-chevron-right"> <svg class="icon icon-entypo icon-entypo-chevron-right">
<use xlink:href="/assets/img/sprite.svg#entypo-chevron-right"></use> <use xlink:href="/assets/img/sprite.svg#entypo-chevron-right"></use>
</svg> </svg>
</a> </a>
{% endif %} {% endif %}
</p>
</nav> </nav>
{% endif %} {% endif %}

3
gulpfile.js
View File

@ -178,6 +178,7 @@ gulp.task('css', function() {
.pipe($.if(isProduction, $.header(BANNER, { pkg: pkg }))) .pipe($.if(isProduction, $.header(BANNER, { pkg: pkg })))
.pipe($.rename({ suffix: '.min' })) .pipe($.rename({ suffix: '.min' }))
.pipe(gulp.dest(DIST + '/assets/css/')) .pipe(gulp.dest(DIST + '/assets/css/'))
.pipe(browser.stream())
}); });
@ -313,7 +314,7 @@ gulp.task('server', ['build'], function() {
// Build site, run server, and watch for file changes // Build site, run server, and watch for file changes
// //
gulp.task('default', ['build', 'server'], function() { gulp.task('default', ['build', 'server'], function() {
gulp.watch([SRC + '/_assets/styl/**/*.styl'], ['css', browser.reload]); gulp.watch([SRC + '/_assets/styl/**/*.styl'], ['css']);
gulp.watch([SRC + '/_assets/js/*.js'], ['js', browser.reload]); gulp.watch([SRC + '/_assets/js/*.js'], ['js', browser.reload]);
gulp.watch([SRC + '/_assets/img/**/*.{png,jpg,jpeg,gif}'], ['images', browser.reload]); gulp.watch([SRC + '/_assets/img/**/*.{png,jpg,jpeg,gif}'], ['images', browser.reload]);
gulp.watch([SRC + '/_assets/img/**/*.{svg}'], ['icons', browser.reload]); gulp.watch([SRC + '/_assets/img/**/*.{svg}'], ['icons', browser.reload]);