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

Commit 6b30cc7

Browse files
PaulPaulDevelopsPaulPaulDevelops
committed
fix(blog): resolve issues from PR and style issues
1 parent 9945983 commit 6b30cc7

File tree

9 files changed

+193
-172
lines changed

9 files changed

+193
-172
lines changed

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

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,21 @@
66
color: $black;
77
font-weight: 600;
88

9-
@include media-breakpoint-down(sm) {
10-
text-align: center;
11-
padding: 15px;
12-
}
13-
149
&:hover {
1510
text-decoration: underline black;
1611
}
12+
13+
@include media-breakpoint-down(sm) {
14+
padding: 15px;
15+
text-align: center;
16+
}
1717
}
1818

1919
.blog-card-image {
20-
min-height: 300px;
21-
width: 100%;
22-
height: 100%;
23-
object-fit: cover;
2420
border-radius: 15px;
21+
height: 263px;
22+
object-fit: cover;
23+
width: 286px;
2524

2625
img {
2726
height: 300px;
@@ -32,34 +31,44 @@
3231
display: flex;
3332
flex-direction: column;
3433
justify-content: space-around;
35-
@include media-breakpoint-down(sm) {
36-
text-align: center;
34+
35+
.blog-card-summary {
36+
color: #827e7d;
3737
}
3838

3939
.blog-card-author {
40+
align-items: center;
4041
display: flex;
4142
flex-direction: row;
42-
align-items: center;
43+
4344
@include media-breakpoint-down(sm) {
44-
text-align: left;
4545
padding: 14px 0 26px;
46+
text-align: left;
4647
}
4748

4849
.profile-image {
50+
border-radius: 50%;
4951
height: 75px;
50-
width: 75px;
5152
margin-right: 15px;
5253
object-fit: cover;
53-
border-radius: 50%;
54+
width: 75px;
55+
}
56+
57+
.profile-text {
58+
color: #827e7d;
5459
}
5560
}
61+
62+
@include media-breakpoint-down(sm) {
63+
text-align: center;
64+
}
5665
}
5766

5867
hr {
59-
width: 100%;
60-
margin-top: 48px;
61-
margin-bottom: 96px;
6268
border: 0;
6369
border-top: 2px solid #f1f3f7;
70+
margin-top: 48px;
71+
margin-bottom: 96px;
72+
width: 100%;
6473
}
6574
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,17 @@ export class AppBlogCard {
1818
return (
1919
<div class="blog-card">
2020
<div class="row">
21-
<div class="col-md-4">
21+
<div class="col-md-4 text-center">
2222
<img class="blog-card-image" src={this.blogPost.featured_image} />
2323
</div>
2424
<div class="blog-card-content col-md-8">
2525
<stencil-route-link url={`/blog/${this.blogPost.slug}`}>
2626
<h3 class="blog-card-title">{this.blogPost.title}</h3>
2727
</stencil-route-link>
28-
<div>{this.blogPost.summary}</div>
29-
<div class="blog-card-author">
28+
<div class="blog-card-summary">{this.blogPost.summary}</div>
29+
<div class="blog-card-author mt-3">
3030
<img class="profile-image" src={this.blogPost.author.profile_image} />
31-
<div>
31+
<div class="profile-text">
3232
Published by &nbsp;
3333
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
3434
&nbsp; on {formatDate(publishDate)}

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

Lines changed: 44 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,61 @@
1-
.blog-content-header {
1+
.header {
22
text-align: left;
3-
@include media-breakpoint-down(sm) {
4-
text-align: center;
5-
}
63

4+
padding: 0 6rem;
5+
76
h1 {
8-
@include media-breakpoint-down(sm) {
7+
@include media-breakpoint-down(md) {
98
padding: 20px 0;
109
}
1110
}
1211

13-
.blog-content-date-author {
14-
align-content: center;
15-
justify-content: center;
16-
17-
.blog-content-date {
18-
display: flex;
19-
flex-direction: column;
20-
justify-content: center;
21-
font-size: 12px;
22-
}
12+
p {
13+
margin-bottom: 10px;
14+
}
2315

24-
.blog-content-author {
25-
@include media-breakpoint-down(sm) {
26-
padding: 20px 0;
27-
}
16+
.--date {
17+
color: #6d6e71;
18+
font-size: 12px;
19+
}
2820

29-
display: flex;
30-
flex-direction: row;
31-
align-items: center;
32-
justify-content: center;
21+
.--author {
22+
align-items: center;
23+
display: flex;
24+
flex-direction: row;
25+
margin: 1rem 0;
3326

34-
.profile-image {
35-
height: 75px;
36-
width: 75px;
37-
margin-right: 15px;
38-
object-fit: cover;
39-
border-radius: 50%;
40-
}
27+
img {
28+
border-radius: 50%;
29+
height: 75px;
30+
margin-right: 15px;
31+
object-fit: cover;
32+
width: 75px;
4133
}
42-
}
4334

44-
.blog-content-post {
45-
text-align: left;
4635
@include media-breakpoint-down(sm) {
47-
text-align: center;
36+
justify-content: center;
4837
}
4938
}
5039

51-
.blog-content-image {
40+
.--main-image {
41+
border-radius: 35px;
5242
padding: 2%;
5343
width: 100%;
54-
border-radius: 35px;
44+
}
45+
46+
@include media-breakpoint-down(sm) {
47+
text-align: center;
48+
padding: 0 1rem;
49+
}
50+
51+
}
52+
53+
.content {
54+
text-align: left;
55+
margin-top: 1rem;
56+
57+
@include media-breakpoint-down(sm) {
58+
text-align: center;
5559
}
5660
}
5761

@@ -101,23 +105,16 @@
101105
}
102106
}
103107

104-
#blog-content-contact-icons-top {
105-
@include media-breakpoint-down(sm) {
106-
display: block !important;
107-
text-align: center;
108-
}
109-
}
110-
111108
.contact-icons-top {
112109
display: flex;
113-
@include media-breakpoint-down(sm) {
114-
display: block;
115-
}
110+
justify-content: center;
111+
margin-bottom: 10px;
116112
}
117113

118114
.contact-icons-side {
119115
display: flex;
120116
flex-direction: column;
117+
float: right;
121118
padding: 15px;
122119
}
123120

@@ -126,11 +123,4 @@
126123
img {
127124
width: 20px;
128125
}
129-
}
130-
131-
.blog-content-body {
132-
@include media-breakpoint-down(sm) {
133-
text-align: center;
134-
padding: 20px 0;
135-
}
136-
}
126+
}

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,15 @@ export class AppBlogContent {
2121
}
2222

2323
handleIcons() {
24-
const topIcons = document.getElementById('blog-content-contact-icons-top');
25-
const sideIcons = document.getElementById('blog-content-contact-icons-side');
24+
const topIcons = document.getElementById('contact-icons-top');
25+
const sideIcons = document.getElementById('contact-icons-side');
2626
if (window.innerWidth < 768) {
2727
topIcons.style.setProperty('display', 'flex');
2828
sideIcons.style.setProperty('display', 'none');
2929
} else {
3030
topIcons.style.setProperty('display', 'none');
3131
sideIcons.style.setProperty('display', 'flex');
32+
sideIcons.style.setProperty('float', 'right');
3233
}
3334
}
3435

@@ -72,34 +73,33 @@ export class AppBlogContent {
7273

7374
return (
7475
<div class="blog-content">
75-
<div class="blog-content-header">
76+
<div class="header">
7677
<h1>{this.blogPost.title}</h1>
77-
<div>{this.blogPost.summary}</div>
78-
<div class="blog-content-date-author row">
79-
<div class="blog-content-date col-md-6">{formatDate(publishDate)}</div>
80-
<div class="blog-content-author col-md-6">
81-
<img class="profile-image " src={this.blogPost.author.profile_image} />
78+
<p>{this.blogPost.summary}</p>
79+
<div>
80+
<div class="--date">{formatDate(publishDate)}</div>
81+
<div class="--author">
82+
<img src={this.blogPost.author.profile_image} />
8283
<div>
8384
By &nbsp;
8485
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
8586
</div>
8687
</div>
8788
</div>
88-
<div id="blog-content-contact-icons-top">{contactIconsTop}</div>
89-
<img class="blog-content-image" src={this.blogPost.featured_image} />
89+
<div class="contact-icons-top" id="contact-icons-top">{contactIconsTop}</div>
90+
<img class="--main-image" src={this.blogPost.featured_image} />
9091
</div>
91-
<div class="blog-content-post">
92+
<div class="content">
9293
<div class="row">
9394
<div class="col-md-2">
94-
<div id="blog-content-contact-icons-side">{contactIconsSide}</div>
95+
<div id="contact-icons-side">{contactIconsSide}</div>
9596
</div>
9697
<div class="col-md-8">
9798
<div innerHTML={this.blogPost.body} class="blog-content-body" />
9899
</div>
99100
<div class="col-md-2" />
100101
</div>
101102
</div>
102-
103103
<div class="blog-content-author">
104104
<hr />
105105
<div class="row">

0 commit comments

Comments
 (0)