Skip to content

Commit 5ab06a7

Browse files
Dhruvi16Dhruvi16
committed
Update series section
1 parent 2223d82 commit 5ab06a7

File tree

2 files changed

+103
-59
lines changed

2 files changed

+103
-59
lines changed

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

+39-34
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
{% set author = this.parent.parent.children.get('authors').children.get(this.author) %}
88

99
{% block body %}
10-
<div class="single-entry">
11-
<div class="single-entry-header">
10+
<div class="single-post">
11+
<header class="single-post-header">
1212
<div class="container">
1313
<h4>CC Open Source Blog</h4>
1414
<h2 class="title">{{ this.title }}</h2>
@@ -22,40 +22,19 @@ <h2 class="title">{{ this.title }}</h2>
2222
<p class="column">by <a href="{{ author|url }}">{{ render_author_name(author) }}</a>
2323
on {{ this.pub_date|dateformat('yyyy-''MM-d') }}</p>
2424
</div>
25-
</div>
26-
</div>
27-
<div class="single-entry-body container">
28-
<!-- TODO: This section to be discussed -->
29-
{% if this.series|length %}
30-
{% set series = this.parent.parent.children.get('series').children.get(this.series) %}
31-
<div class="card bg-light mb-2">
32-
<div class="card-body p-2">
33-
<p class="meta my-0"><span class="mr-2"><strong>This blog is part of the series:</strong></span>
34-
<a href="#series">{{ series.name }}</a>
35-
</p>
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>
3630
</div>
31+
{% endif %}
3732
</div>
38-
{% endif %}
39-
<div class="body">{{ this.body }}</div>
33+
</header>
34+
<div class="single-post-body container">
35+
{{ this.body }}
4036
</div>
41-
<div class="single-entry-footer container">
42-
<!-- TODO: This section to be discussed -->
43-
{% if this.series|length %}
44-
<div class="mt-3 bg-light" id="series">
45-
<h5 class="font-weight-bold">Posts in the <em>{{ series.name }}</em> series</h5>
46-
<ul class="toc list-unstyled">
47-
{% for post in series.children.order_by('pub_date') %}
48-
<li>
49-
{% if post.path==this.path %}
50-
<strong>{{ post.title }}</strong>
51-
{% else %}
52-
<a href="{{ post|url }}">{{ post.title }}</a>
53-
{% endif %}
54-
</li>
55-
{% endfor %}
56-
</ul>
57-
</div>
58-
{% endif %}
37+
<footer class="single-post-footer container">
5938
<div class="category">
6039
<h4 class="category-title">Categories</h4>
6140
<div class="categories">
@@ -70,7 +49,33 @@ <h4 class="category-title">Categories</h4>
7049
{% endif %}
7150
</div>
7251
</div>
73-
</div>
52+
<!-- {% if this.series|length %}
53+
<div class="mt-3 bg-light" id="series">
54+
<h5 class="font-weight-bold">Posts in the <em>{{ series.name }}</em> series</h5>
55+
<ul class="toc list-unstyled">
56+
{% for post in series.children.order_by('pub_date') %}
57+
<li>
58+
{% if post.path==this.path %}
59+
<strong>{{ post.title }}</strong>
60+
{% else %}
61+
<a href="{{ post|url }}">{{ post.title }}</a>
62+
{% endif %}
63+
</li>
64+
{% endfor %}
65+
</ul>
66+
</div>
67+
{% endif %} -->
68+
<div class="series-posts" id="series">
69+
<h5 class="title">Posts in the {{ series.name }} series</h5>
70+
<ul class="posts">
71+
{% for post in series.children.order_by('pub_date') %}
72+
<li>
73+
<i class="icon circle-filled"></i><a href="{{ post|url }}">{{ post.title }}</a>
74+
</li>
75+
{% endfor %}
76+
</ul>
77+
</div>
78+
</footer>
7479
</div>
7580

7681
<div class="comments">{{ render_disqus_comments() }}</div>

‎webpack/sass/main.scss

+64-25
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,13 @@ a {
3636
}
3737
}
3838

39-
.single-entry {
39+
.single-post {
4040
.container {
4141
@extend .padding-horizontal-xxl;
4242
}
4343

44-
.single-entry-header {
44+
.single-post-header {
4545
@extend .padding-top-bigger;
46-
@extend .padding-bottom-xl;
4746

4847
background-color: $color-lighter-gray;
4948

@@ -53,44 +52,56 @@ a {
5352

5453
.author {
5554
@extend .padding-top-big;
55+
@extend .body-big;
56+
57+
line-height: 1.8125;
5658

5759
.image {
5860
height: 3.75rem;
5961
width: 3.75rem;
6062
}
6163
}
64+
65+
.series-header {
66+
@extend .margin-top-big;
67+
@extend .padding-horizontal-big;
68+
@extend .padding-vertical-normal;
69+
@extend .body-normal;
70+
71+
background-color: $color-white;
72+
line-height: 1.5625;
73+
font-weight: bold;
74+
}
6275
}
6376

64-
.single-entry-body {
65-
.body {
66-
@extend .body-big;
67-
@extend .padding-top-bigger;
77+
.single-post-body {
78+
@extend .body-big;
79+
@extend .padding-top-bigger;
6880

69-
p {
70-
@extend .padding-vertical-small;
71-
}
81+
p {
82+
@extend .padding-vertical-small;
83+
}
7284

73-
h1,h2,h3,h4,h5,h6 {
74-
@extend .padding-top-large;
75-
@extend .padding-bottom-small;
76-
}
85+
h1,h2,h3,h4,h5,h6 {
86+
@extend .padding-top-large;
87+
@extend .padding-bottom-small;
88+
}
7789

78-
ol,ul {
79-
@extend .padding-horizontal-big;
80-
}
90+
ol,ul {
91+
@extend .padding-horizontal-big;
92+
}
8193

82-
&:last-of-type::after {
83-
content: '';
94+
&:last-of-type::after {
95+
content: '';
8496

85-
display: block;
97+
display: block;
8698

87-
@extend .padding-top-bigger;
88-
border-bottom: 0.1875rem solid $color-light-gray;
89-
}
99+
@extend .padding-top-bigger;
100+
border-bottom: 0.1875rem solid $color-light-gray;
90101
}
91-
}
102+
}
92103

93-
.single-entry-footer {
104+
.single-post-footer {
94105
.category {
95106
.category-title {
96107
@extend .b-header;
@@ -105,5 +116,33 @@ a {
105116
}
106117
}
107118
}
119+
120+
.series-posts {
121+
@extend .margin-top-large;
122+
@extend .padding-horizontal-larger;
123+
@extend .padding-vertical-large;
124+
125+
background-color: $color-lighter-gray;
126+
border-top: 0.375rem solid $color-forest-green;
127+
128+
.title {
129+
@extend .b-header;
130+
@extend .padding-bottom-normal;
131+
}
132+
133+
.posts {
134+
@extend .body-normal;
135+
136+
font-weight: bold;
137+
line-height: 1.5;
138+
139+
.icon {
140+
@extend .padding-right-small;
141+
142+
font-size: 0.375rem;
143+
color: $color-gray;
144+
}
145+
}
146+
}
108147
}
109148
}

0 commit comments

Comments
 (0)