Skip to content

Commit 8bae84e

Browse files
Dhruvi16Dhruvi16
authored
Merge pull request creativecommons#308 from creativecommons/update_blog_post
Update blog posts list page
2 parents 4d198c3 + 34273eb commit 8bae84e

File tree

5 files changed

+105
-32
lines changed

5 files changed

+105
-32
lines changed

‎models/blog.ini

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,4 @@ order_by = -pub_date, title
1919

2020
[pagination]
2121
enabled = yes
22-
per_page = 10
22+
per_page = 12

‎themes/vocabulary_theme/templates/blog.html

+16-6
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,21 @@
33
{% from "macros/pagination.html" import render_pagination %}
44
{% from "macros/posts.html" import render_posts %}
55

6-
{% block title %}{{ this.title }}{% endblock %}
76
{% block body %}
8-
{{ this.description }}
9-
{{ render_posts(this.pagination.items) }}
10-
{% if this.pagination.pages > 1 %}
11-
{{ render_pagination(this.pagination) }}
12-
{% endif %}
7+
<div class="blog-page">
8+
<div class="blog-page-header">
9+
<div class="container">
10+
<h1>{{ this.title }}</h1>
11+
<div class="blog-page-description column is-9 is-paddingless">{{ this.description }}</div>
12+
</div>
13+
</div>
14+
<div class="container blog-page-posts">
15+
{{ render_posts(this.pagination.items) }}
16+
<div class="pagination-wrapper">
17+
{% if this.pagination.pages > 1 %}
18+
{{ render_pagination(this.pagination) }}
19+
{% endif %}
20+
</div>
21+
</div>
22+
</div>
1323
{% endblock %}

‎themes/vocabulary_theme/templates/macros/pagination.html

+24-18
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
11
{% macro render_pagination(pagination) %}
2-
<ul class="pagination table-responsive mb-2">
3-
{% if pagination.has_prev %}
4-
<li class="page-item"><a class="page-link" href="{{ pagination.prev|url }}">Previous</a></li>
5-
{% else %}
6-
<li class="page-item disabled"><a class="page-link">Previous</a></li>
7-
{% endif %}
8-
{% for p in range(pagination.pages) %}
9-
{% if pagination.current|url == pagination.for_page(p+1)|url %}
10-
<li class="page-item active"><a class="page-link" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a></li>
2+
<nav class="pagination" role="navigation" aria-label="pagination">
3+
<ul class="pagination-list">
4+
<!-- {% if pagination.has_prev %}
5+
<li class="page-item"><a class="page-link" href="{{ pagination.prev|url }}">Previous</a></li>
116
{% else %}
12-
<li class="page-item"><a class="page-link" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a></li>
13-
{% endif %}
14-
{% endfor %}
15-
{% if pagination.has_next %}
16-
<li class="page-item"><a class="page-link" href="{{ pagination.next|url }}">Next</a></li>
17-
{% else %}
18-
<li class="page-item disabled"><a class="page-link">Next</a></li>
19-
{% endif %}
20-
</ul>
7+
<li class="page-item disabled"><a class="page-link">Previous</a></li>
8+
{% endif %} -->
9+
{% for p in range(pagination.pages) %}
10+
{% if pagination.current|url == pagination.for_page(p+1)|url %}
11+
<li class="common">
12+
<a class="pagination-link is-current common-link" aria-label="Goto page {{p+1}}" aria-current="page" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a>
13+
</li>
14+
{% else %}
15+
<li class="inactive">
16+
<a class="pagination-link inactive-link" aria-label="Goto page {{p+1}}" href="{{ pagination.for_page(p+1)|url}}">{{p+1}}</a>
17+
</li>
18+
{% endif %}
19+
{% endfor %}
20+
<!-- {% if pagination.has_next %}
21+
<li class="page-item"><a class="page-link" href="{{ pagination.next|url }}">Next</a></li>
22+
{% else %}
23+
<li class="page-item disabled"><a class="page-link">Next</a></li>
24+
{% endif %} -->
25+
</ul>
26+
</nav>
2127
{% endmacro %}

‎themes/vocabulary_theme/templates/macros/posts.html

+23-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,30 @@
11
{% from "macros/author_name.html" import render_author_name %}
22

33
{% macro render_posts(posts) %}
4-
<ul class="blog-index list-unstyled">
4+
<div class="columns is-multiline blog-entries">
55
{% for post in posts %}
66
{% set author = post.parent.parent.children.get('authors').children.get(post.author) %}
7-
<li>
8-
<a href="{{ post|url }}">{{ post.title }}</a>
9-
<p class="text-muted small">by <a href="{{ author|url }}">{{ render_author_name(author) }}</a>
10-
on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</p>
11-
</li>
7+
<article class="card entry-post horizontal no-border blog-entry column is-one-third">
8+
<header>
9+
<figure class="image blog-image">
10+
{% if author.about %}
11+
{% if author.md5_hashed_email %}
12+
<img class="profile" src="https://secure.gravatar.com/avatar/{{ author.md5_hashed_email }}?size=200" alt="gravatar" />
13+
{% else %}
14+
<img class="profile" src="./blank_profile.svg" alt="gravatar" />
15+
{% endif %}
16+
{% endif %}
17+
</figure>
18+
</header>
19+
<div class="blog-content">
20+
<h4 class="b-header"><a class="blog-title" href="{{ post|url }}">{{ post.title }}</a></h4>
21+
<span class="blog-author">by <a href="{{ author|url }}">{{ render_author_name(author) }}</a>
22+
on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</span>
23+
<div class="excerpt">
24+
{{ post.body | excerpt | string | striptags() | truncate(100) }}
25+
</div>
26+
</div>
27+
</article>
1228
{% endfor %}
13-
</ul>
29+
</div>
1430
{% endmacro %}

‎webpack/sass/main.scss

+41
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,47 @@ a {
103103
}
104104
}
105105

106+
.blog-entries {
107+
.blog-entry {
108+
@extend .padding-vertical-larger;
109+
@extend .padding-horizontal-big;
110+
111+
border-bottom: 0.1875rem solid $color-light-gray !important;
112+
113+
.blog-title {
114+
@extend .has-color-dark-slate-gray;
115+
}
116+
}
117+
}
118+
119+
.blog-page {
120+
.blog-page-header {
121+
@extend .padding-top-bigger;
122+
@extend .padding-bottom-xl;
123+
124+
background-color: $color-lighter-gray;
125+
126+
.container {
127+
@extend .padding-horizontal-big;
128+
}
129+
130+
.blog-page-description {
131+
@extend .padding-top-normal;
132+
@extend .body-big;
133+
}
134+
}
135+
136+
.blog-page-posts {
137+
@extend .padding-top-normal;
138+
139+
.pagination-wrapper {
140+
@extend .padding-top-xl;
141+
@extend .padding-bottom-xxl;
142+
}
143+
}
144+
}
145+
146+
106147
.single-post {
107148
.container {
108149
@extend .padding-horizontal-xxl;

0 commit comments

Comments
 (0)