Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit 9b3e567

Browse files
luiskcs89luiskcs89
committed
fix(blog): add redesing of next posts
2 parents 0f94dc1 + f8a74f1 commit 9b3e567

File tree

8 files changed

+272
-93
lines changed

8 files changed

+272
-93
lines changed

‎src/components/app-blog-card/app-blog-card.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
.blog-card {
2-
a {
3-
color: #4099a8;
4-
}
5-
62
.author a {
73
text-decoration: underline;
84
}

‎src/components/app-blog-content/app-blog-content.scss‎

Lines changed: 84 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33

44
padding: 0 6rem;
55

6+
@include media-breakpoint-down(md) {
7+
padding: 0 1rem;
8+
}
9+
610
h1 {
711
@include media-breakpoint-down(md) {
812
padding: 20px 0;
@@ -19,10 +23,12 @@
1923
}
2024

2125
&--author {
26+
position: relative;
2227
align-items: center;
2328
display: flex;
2429
flex-direction: row;
2530
margin: 1rem 0;
31+
justify-content: space-between;
2632

2733
img {
2834
border-radius: 50%;
@@ -104,22 +110,95 @@
104110
}
105111
}
106112

113+
.contact-icon {
114+
margin: 10px;
115+
img {
116+
width: 20px;
117+
}
118+
}
119+
107120
.contact-icons-top {
108121
display: flex;
109122
justify-content: center;
110-
margin-bottom: 10px;
123+
124+
.contact-icon {
125+
margin: 5px;
126+
img {
127+
border-radius: 0;
128+
width: 15px;
129+
height: 15px;
130+
}
131+
}
132+
133+
@include media-breakpoint-down(sm) {
134+
display: initial;
135+
margin-bottom: 0;
136+
justify-content: initial;
137+
}
111138
}
112139

113140
.contact-icons-side {
114141
display: flex;
115142
flex-direction: column;
116143
float: right;
117144
padding: 15px;
145+
@include media-breakpoint-down(md) {
146+
display: none;
147+
}
118148
}
119149

120-
.contact-icon {
121-
margin: 10px;
122-
img {
123-
width: 20px;
150+
.author-img-container {
151+
display: flex;
152+
align-items: center;
153+
}
154+
155+
#blog-next-posts-side {
156+
display: block;
157+
158+
@include media-breakpoint-down(md) {
159+
display: none;
160+
}
161+
}
162+
163+
#blog-next-posts-bottom {
164+
display: none;
165+
166+
@include media-breakpoint-down(md) {
167+
display: block;
168+
}
169+
}
170+
171+
.blog-next-posts {
172+
h1 {
173+
color: #292a2d;
174+
font-family: Muli;
175+
font-size: 16px;
176+
font-weight: 400;
177+
line-height: 32px;
178+
text-align: center;
179+
margin-bottom: 20px;
180+
181+
@include media-breakpoint-down(sm) {
182+
font-size: 24px;
183+
margin-bottom: 40px;
184+
}
185+
}
186+
187+
.blog-next-posts-title {
188+
h2 {
189+
color: #292a2d;
190+
font-family: Muli;
191+
font-size: 16px;
192+
font-weight: 700;
193+
letter-spacing: 1.02px;
194+
line-height: 19px;
195+
text-align: center;
196+
margin-top: 10px;
197+
198+
@include media-breakpoint-down(sm) {
199+
margin-top: 20px;
200+
margin-bottom: 35px;
201+
}
202+
}
124203
}
125204
}

‎src/components/app-blog-content/app-blog-content.tsx‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { formatDate } from '../../shared/date-format';
88
})
99
export class AppBlogContent {
1010
@Prop() blogPost: BlogPost;
11+
@Prop() nextPostsHelper: any;
1112

1213
componentDidLoad() {
1314
if (Build.isBrowser) {
@@ -75,38 +76,47 @@ export class AppBlogContent {
7576
<div class="blog-content">
7677
<div class="header">
7778
<h1 class="text-left">{this.blogPost.title}</h1>
78-
<p class="text-left">{this.blogPost.summary}</p>
7979
<div>
80-
<div class="header--date">{formatDate(publishDate)}</div>
8180
<div class="header--author">
82-
<img src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
83-
<div>
84-
By &nbsp;
85-
{this.blogPost.author.slug === 'jedidiah-weller' ? (
86-
<a href="http://www.twitter.com/jedihacks" target="_blank" rel="noopener">{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</a>
87-
) : (
88-
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
89-
)}
81+
<div class="author-img-container">
82+
<img class="d-none d-md-block" src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
83+
<div>
84+
By &nbsp;
85+
{this.blogPost.author.slug === 'jedidiah-weller' ? (
86+
<a href="http://www.twitter.com/jedihacks" target="_blank" rel="noopener">{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</a>
87+
) : (
88+
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
89+
)}{' '}
90+
on {formatDate(publishDate)}
91+
</div>
92+
</div>
93+
<div class="d-none d-md-block d-lg-none contact-icons-top" id="contact-icons-top">
94+
{contactIconsTop}
9095
</div>
9196
</div>
9297
</div>
93-
<div class="contact-icons-top" id="contact-icons-top">
94-
{contactIconsTop}
95-
</div>
9698
<img class="header--main-image" src={this.blogPost.featured_image} alt={this.blogPost.title} />
9799
</div>
98100
<div class="content">
99101
<div class="row">
100-
<div class="col-md-2">
102+
<div class="col-md-1 col-lg-2">
101103
<div id="contact-icons-side">{contactIconsSide}</div>
102104
</div>
103-
<div class="text-left col-md-8">
105+
<div class="text-left col-md-10 col-lg-8">
104106
<div innerHTML={this.blogPost.body} class="blog-content-body" />
105107
</div>
106-
<div class="col-md-2 col-sm-2" />
108+
<div class="col-md-1 col-lg-2">
109+
<div class="blog-next-posts" id="blog-next-posts-side">
110+
<h1>Related Blog Articles</h1>
111+
<div>{this.nextPostsHelper}</div>
112+
</div>
113+
</div>
107114
</div>
108115
</div>
109116
<div class="blog-content-author">
117+
<div class="d-md-none contact-icons-top" id="contact-icons-top">
118+
{contactIconsTop}
119+
</div>
110120
<hr />
111121
<div class="row">
112122
<div class="col-md-2 offset-md-2 blog-content-author-image">
@@ -121,6 +131,10 @@ export class AppBlogContent {
121131
<div class="col-md-2" />
122132
</div>
123133
</div>
134+
<div class="blog-next-posts" id="blog-next-posts-bottom">
135+
<h1>Related Blog Articles</h1>
136+
<div>{this.nextPostsHelper}</div>
137+
</div>
124138
</div>
125139
);
126140
}

‎src/components/app-blog-featured/app-blog-featured.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
.blog-featured {
2-
a {
3-
color: #4099a8;
4-
}
5-
62
.author a {
73
text-decoration: underline;
84
}

‎src/pages/app-blog-post/app-blog-post.scss‎

Lines changed: 44 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -16,50 +16,61 @@
1616
}
1717
}
1818

19-
.blog-next-posts-header {
20-
display: flex;
21-
flex-direction: row;
19+
.loading {
20+
text-align: center;
21+
svg {
22+
height: 75px;
23+
font-size: 40px;
24+
color: #9baaab;
25+
}
26+
}
2227

23-
.blog-next-posts-title {
24-
text-align: center;
25-
width: 26%;
26-
font-size: 25px;
28+
.back-link {
29+
display: flex;
30+
justify-content: center;
31+
margin-bottom: 1rem;
32+
padding: 0 6rem;
2733

28-
@include media-breakpoint-down(sm) {
29-
width: 100%;
30-
}
34+
@include media-breakpoint-down(md) {
35+
padding: 0;
3136
}
32-
.blog-next-posts-divider {
33-
width: 37%;
34-
.line-break {
35-
height: 50%;
36-
border-bottom: 1px solid $gray-800;
37-
}
38-
.spacer {
39-
height: 50%;
40-
}
37+
38+
svg {
39+
margin-right: 5px;
4140
}
42-
}
4341

44-
.next-posts {
45-
padding: 5% 10% 0 10%;
42+
&.align-left {
43+
justify-content: left;
44+
}
4645

47-
.blog-posts-message {
48-
min-height: 80vh;
46+
a {
47+
text-decoration: underline;
4948
}
49+
}
5050

51-
.blog-card-wrapper {
52-
min-height: 300px;
53-
margin-bottom: 20px;
51+
.top-buttons-container {
52+
display: flex;
53+
justify-content: space-between;
54+
55+
@include media-breakpoint-down(md) {
56+
padding: 0 1rem;
5457
}
5558
}
5659

57-
.loading {
58-
text-align: center;
59-
svg {
60-
height: 75px;
61-
font-size: 40px;
62-
color: #9baaab;
60+
button {
61+
background: #fff;
62+
border: 1px solid #c75300;
63+
padding: 4px 15px;
64+
65+
span {
66+
font-size: 14px;
67+
text-transform: capitalize;
68+
color: $gray-dark;
69+
font-weight: bold;
70+
71+
i {
72+
color: #000;
73+
}
6374
}
6475
}
6576
}

0 commit comments

Comments
 (0)