Skip to content

Commit 5b173e9

Browse files
committed
Re-factor the post-list "details" section (change to list, add bullets via css)
1 parent dff78af commit 5b173e9

File tree

2 files changed

+46
-43
lines changed

2 files changed

+46
-43
lines changed

src/components/PostListItem/index.jsx

+25-35
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,8 @@ import './style.scss'
77
class PostListItem extends React.Component {
88
render() {
99
const { showYear } = this.props
10-
const {
11-
title,
12-
date,
13-
} = this.props.data.node.frontmatter
10+
const { title, date, tags } = this.props.data.node.frontmatter
1411
const { slug } = this.props.data.node.fields
15-
16-
const readingTime = <span key="readingTime">
17-
{this.props.data.node.fields.readingTime.text}
18-
</span>
19-
20-
var tags = this.props.data.node.frontmatter.tags
21-
if (tags != null) {
22-
tags = tags.map (tag => (
23-
[<span key={tag}>
24-
{tag}
25-
</span>,
26-
<span key={`${tag}-div`} className="tagDivider">&#183;</span>]
27-
))
28-
29-
tags = [].concat(...tags).slice(0, -1)
30-
31-
tags = [
32-
<span key="tagsDivider" className="divider"/>,
33-
tags
34-
]
35-
}
3612

3713
const itemDate = moment(date)
3814

@@ -61,19 +37,33 @@ class PostListItem extends React.Component {
6137
</Toggle>
6238
)
6339

40+
const detailsHeader = (
41+
<div className="post-item__details-header">
42+
<Link to={slug}>
43+
{title}
44+
</Link>
45+
</div>
46+
)
47+
48+
const detailsFooter = (
49+
<ul className="post-item__details-footer">
50+
<li className="post-item__details-footer-reading-time" key="readingTime">
51+
{this.props.data.node.fields.readingTime.text}
52+
</li>
53+
{tags && <li className="post-item__details-footer-tags-divider" key="divider"/>}
54+
{tags && tags.map(tag => (
55+
<li className="post-item__details-footer-tags-item" key={tag}>
56+
{tag}
57+
</li>
58+
))}
59+
</ul>
60+
)
61+
6462
const details = (
6563
<Toggle isEnabled={!this.props.isFirst}>
6664
<div className="post-item__details">
67-
<header>
68-
<Link to={slug}>
69-
{title}
70-
</Link>
71-
</header>
72-
73-
<footer>
74-
{readingTime}
75-
{tags}
76-
</footer>
65+
{detailsHeader}
66+
{detailsFooter}
7767
</div>
7868
</Toggle>
7969
)

src/components/PostListItem/style.scss

+21-8
Original file line numberDiff line numberDiff line change
@@ -25,20 +25,33 @@ $border-styling: dashed 1px $color-gray-border;
2525
}
2626
}
2727
&__details {
28-
& header {
28+
&-header {
2929
font-size: $typographic-base-font-size * 1.3;
3030
max-width: 70%;
3131
}
32-
& footer {
32+
&-footer {
3333
font-size: $typographic-small-font-size;
34+
list-style: none;
3435
max-width: 75%;
35-
word-break: break-all;
36-
& .divider {
36+
37+
margin: 0;
38+
padding: 0;
39+
&>* {
40+
display: inline-block;
41+
margin: 0;
42+
padding: 0;
43+
}
44+
45+
&-tags-divider {
46+
border-left: 1px solid $color-gray-border;
47+
height: 1rem;
3748
margin-right: 0.8125rem;
3849
margin-left: 0.8125rem;
39-
border-left: 0.075rem solid $color-gray-border;
50+
align-self: center;
4051
}
41-
& .tagDivider {
52+
53+
&-tags-item:not(:last-child)::after {
54+
content: "\00B7";
4255
margin-right: 0.3125rem;
4356
margin-left: 0.3125rem;
4457
}
@@ -104,12 +117,12 @@ $border-styling: dashed 1px $color-gray-border;
104117
border-top: $border-styling;
105118
}
106119

107-
& header {
120+
&-header {
108121
margin-bottom: 0.2rem;
109122
font-size: $typographic-base-font-size * 1.4;
110123
max-width: unset;
111124
}
112-
& footer {
125+
&-footer {
113126
max-width: unset;
114127
}
115128
}

0 commit comments

Comments
 (0)