Skip to content

Commit 99dfc6d

Browse files
Dhruvi16Dhruvi16
authored
Merge pull request creativecommons#311 from creativecommons/update_single_post
Update single-entry page.
2 parents d7d68a0 + ccb1927 commit 99dfc6d

File tree

2 files changed

+175
-49
lines changed

2 files changed

+175
-49
lines changed

‎themes/vocabulary_theme/templates/blog-post.html

Lines changed: 54 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -6,57 +6,62 @@
66

77
{% set author = this.parent.parent.children.get('authors').children.get(this.author) %}
88

9-
{% block title %}{{ this.title }}{% endblock %}
10-
{% block header %}{{ this.parent.title }}{% endblock %}
119
{% block body %}
12-
<h2 class="mb-0">{{ this.title }}</h2>
13-
{{ check_file('content' + this.parent.parent.path + '/authors/' + this.author + '/contents.lr') }}
14-
<p class="meta text-muted mt-0 mb-2">by <a href="{{ author|url }}">{{ render_author_name(author) }}</a>
15-
on {{ this.pub_date|dateformat('EEEE, yyyy-''MM-d') }}</p>
16-
{% if this.series|length %}
17-
{% set series = this.parent.parent.children.get('series').children.get(this.series) %}
18-
<div class="card bg-light mb-2">
19-
<div class="card-body p-2">
20-
<p class="meta my-0"><span class="mr-2"><strong>This blog is part of the series:</strong></span>
21-
<a href="#series">{{ series.name }}</a>
22-
</p>
23-
</div>
24-
</div>
25-
{% endif %}
26-
<div class="body">{{ this.body }}</div>
27-
{% if this.series|length %}
28-
<div class="mt-3 bg-light" id="series">
29-
<hr/>
30-
<h5 class="font-weight-bold">Posts in the <em>{{ series.name }}</em> series</h5>
31-
<ul class="toc list-unstyled">
32-
{% for post in series.children.order_by('pub_date') %}
33-
<li>
34-
{% if post.path==this.path %}
35-
<strong>{{ post.title }}</strong>
36-
{% else %}
37-
<a href="{{ post|url }}">{{ post.title }}</a>
10+
<div class="single-post">
11+
<header class="single-post-header">
12+
<div class="container">
13+
<h4>CC Open Source Blog</h4>
14+
<h2 class="title">{{ this.title }}</h2>
15+
{{ check_file('content' + this.parent.parent.path + '/authors/' + this.author + '/contents.lr') }}
16+
<div class="author columns is-marginless">
17+
{% if author.md5_hashed_email %}
18+
<figure class="image profile">
19+
<img src="https://secure.gravatar.com/avatar/{{ author.md5_hashed_email }}?size=200" alt="gravatar" class="profile" />
20+
</figure>
21+
{% endif %}
22+
<p class="column">by <a href="{{ author|url }}">{{ render_author_name(author) }}</a>
23+
on {{ this.pub_date|dateformat('yyyy-''MM-d') }}</p>
24+
</div>
25+
{% if this.series|length %}
26+
{% set series = this.parent.parent.children.get('series').children.get(this.series) %}
27+
<div class="series-header">
28+
<span>This blog is part of the series:</span>
29+
<a href="#series">{{ series.name }}</a>
30+
</div>
3831
{% endif %}
39-
</li>
40-
{% endfor %}
41-
</ul>
42-
<hr/>
43-
</div>
44-
{% endif %}
45-
<div class="card bg-light">
46-
<div class="card-body p-2">
47-
<p class="meta my-0"><span class="mr-2"><strong>Categories:</strong></span>
48-
{% if this.categories|length %}
49-
{% for category in this.categories %}
50-
{% set current_category = this.parent.parent.children.get('categories').children.get(category) %}
51-
{{ check_file('content' + this.parent.parent.path + '/categories/' + category + '/contents.lr') }}
52-
<a href=" {{ current_category|url }} ">{{ category }}</a>{{ "," if not loop.last }}
53-
{% endfor %}
54-
{% else %}
55-
none
56-
{% endif %}
57-
</p>
32+
</div>
33+
</header>
34+
<div class="single-post-body container">
35+
{{ this.body }}
5836
</div>
37+
<footer class="single-post-footer container">
38+
<div class="category">
39+
<h4 class="category-title">Categories</h4>
40+
<div class="categories">
41+
{% if this.categories|length %}
42+
{% for category in this.categories %}
43+
{% set current_category = this.parent.parent.children.get('categories').children.get(category) %}
44+
{{ check_file('content' + this.parent.parent.path + '/categories/' + category + '/contents.lr') }}
45+
<a class="button tag" href=" {{ current_category|url }} ">{{ category }}</a>
46+
{% endfor %}
47+
{% else %}
48+
none
49+
{% endif %}
50+
</div>
51+
</div>
52+
{% if this.series|length %}
53+
<div class="series-posts" id="series">
54+
<h5 class="title">Posts in the {{ series.name }} series</h5>
55+
<ul class="posts">
56+
{% for post in series.children.order_by('pub_date') %}
57+
<li>
58+
<i class="icon circle-filled"></i><a href="{{ post|url }}">{{ post.title }}</a>
59+
</li>
60+
{% endfor %}
61+
</ul>
62+
</div>
63+
{% endif %}
64+
<div class="comments">{{ render_disqus_comments() }}</div>
65+
</footer>
5966
</div>
60-
61-
<div class="comments">{{ render_disqus_comments() }}</div>
6267
{% endblock %}

‎webpack/sass/main.scss

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,124 @@ a {
3535
}
3636
}
3737
}
38+
39+
.single-post {
40+
.container {
41+
@extend .padding-horizontal-xxl;
42+
}
43+
44+
.single-post-header {
45+
@extend .padding-top-bigger;
46+
47+
background-color: $color-lighter-gray;
48+
49+
.title {
50+
@extend .padding-top-big;
51+
52+
overflow-wrap: break-word;
53+
}
54+
55+
.author {
56+
@extend .padding-top-big;
57+
@extend .padding-bottom-normal;
58+
@extend .body-big;
59+
60+
line-height: 1.8125;
61+
62+
.image {
63+
height: 3.75rem;
64+
width: 3.75rem;
65+
}
66+
}
67+
68+
.series-header {
69+
@extend .margin-top-normal;
70+
@extend .padding-horizontal-big;
71+
@extend .padding-vertical-normal;
72+
@extend .body-normal;
73+
74+
background-color: $color-white;
75+
line-height: 1.5625;
76+
font-weight: bold;
77+
}
78+
}
79+
80+
.single-post-body {
81+
@extend .body-big;
82+
@extend .padding-top-bigger;
83+
84+
p {
85+
@extend .padding-vertical-small;
86+
}
87+
88+
h1,h2,h3,h4,h5,h6 {
89+
@extend .padding-top-large;
90+
@extend .padding-bottom-small;
91+
}
92+
93+
ol,ul {
94+
@extend .padding-horizontal-big;
95+
}
96+
97+
&:last-of-type::after {
98+
content: '';
99+
100+
display: block;
101+
102+
@extend .padding-top-bigger;
103+
border-bottom: 0.1875rem solid $color-light-gray;
104+
}
105+
}
106+
107+
.single-post-footer {
108+
.category {
109+
.category-title {
110+
@extend .b-header;
111+
@extend .padding-top-big;
112+
}
113+
114+
.categories {
115+
@extend .padding-top-small;
116+
117+
.tag {
118+
@extend .margin-top-small;
119+
@extend .margin-right-small;
120+
}
121+
}
122+
}
123+
124+
.series-posts {
125+
@extend .margin-top-large;
126+
@extend .padding-horizontal-larger;
127+
@extend .padding-vertical-large;
128+
129+
background-color: $color-lighter-gray;
130+
border-top: 0.375rem solid $color-forest-green;
131+
132+
.title {
133+
@extend .b-header;
134+
@extend .padding-bottom-normal;
135+
}
136+
137+
.posts {
138+
@extend .body-normal;
139+
140+
font-weight: bold;
141+
line-height: 1.5;
142+
overflow-wrap: break-word;
143+
144+
.icon {
145+
@extend .padding-right-small;
146+
147+
font-size: 0.375rem;
148+
color: $color-gray;
149+
}
150+
}
151+
}
152+
}
153+
154+
.comments {
155+
@extend .padding-top-large;
156+
@extend .padding-bottom-xxl;
157+
}
158+
}

0 commit comments

Comments
 (0)