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

Commit dad0d30

Browse files
WholloranWholloran
authored
Merge pull request #427 from openforge/feat/blog-ui
Updated Blog UI styles to match Marvel
2 parents 27355c9 + 5bc131e commit dad0d30

File tree

15 files changed

+540
-220
lines changed

15 files changed

+540
-220
lines changed

‎src/assets/blog/facebook.png‎

-2 KB
Loading

‎src/assets/blog/facebook.webp‎

-146 Bytes
Loading

‎src/assets/blog/linkedin.png‎

-2.35 KB
Loading

‎src/assets/blog/linkedin.webp‎

-72 Bytes
Loading

‎src/assets/blog/twitter.png‎

333 Bytes
Loading

‎src/assets/blog/twitter.webp‎

1.58 KB
Loading

‎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: 87 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
.header {
22
text-align: left;
33

4-
padding: 0 6rem;
5-
64
h1 {
75
@include media-breakpoint-down(md) {
86
padding: 20px 0;
@@ -19,10 +17,12 @@
1917
}
2018

2119
&--author {
20+
position: relative;
2221
align-items: center;
2322
display: flex;
2423
flex-direction: row;
2524
margin: 1rem 0;
25+
justify-content: space-between;
2626

2727
img {
2828
border-radius: 50%;
@@ -104,22 +104,102 @@
104104
}
105105
}
106106

107+
.contact-icon {
108+
margin: 10px;
109+
img {
110+
width: 20px;
111+
}
112+
}
113+
107114
.contact-icons-top {
108115
display: flex;
109116
justify-content: center;
110-
margin-bottom: 10px;
117+
118+
.contact-icon {
119+
margin: 5px;
120+
img {
121+
border-radius: 0;
122+
width: 15px;
123+
height: 15px;
124+
}
125+
}
126+
127+
@include media-breakpoint-down(sm) {
128+
display: initial;
129+
margin-bottom: 0;
130+
justify-content: initial;
131+
}
111132
}
112133

113134
.contact-icons-side {
114135
display: flex;
115136
flex-direction: column;
116137
float: right;
117138
padding: 15px;
139+
@include media-breakpoint-down(md) {
140+
display: none;
141+
}
118142
}
119143

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

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

Lines changed: 41 additions & 23 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) {
@@ -73,54 +74,71 @@ export class AppBlogContent {
7374

7475
return (
7576
<div class="blog-content">
76-
<div class="header">
77-
<h1 class="text-left">{this.blogPost.title}</h1>
78-
<p class="text-left">{this.blogPost.summary}</p>
79-
<div>
80-
<div class="header--date">{formatDate(publishDate)}</div>
81-
<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-
)}
77+
<div class="row">
78+
<div class="col-md-1 col-lg-2" />
79+
<div class="header col-md-10 col-lg-8">
80+
<h1 class="text-left">{this.blogPost.title}</h1>
81+
<div>
82+
<div class="header--author">
83+
<div class="author-img-container">
84+
<img class="d-none d-md-block" src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
85+
<div>
86+
By &nbsp;
87+
{this.blogPost.author.slug === 'jedidiah-weller' ? (
88+
<a href="http://www.twitter.com/jedihacks" target="_blank" rel="noopener">{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</a>
89+
) : (
90+
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
91+
)}{' '}
92+
on {formatDate(publishDate)}
93+
</div>
94+
</div>
95+
<div class="d-none d-md-block d-lg-none contact-icons-top" id="contact-icons-top">
96+
{contactIconsTop}
97+
</div>
9098
</div>
9199
</div>
100+
<img class="header--main-image" src={this.blogPost.featured_image} alt={this.blogPost.title} />
92101
</div>
93-
<div class="contact-icons-top" id="contact-icons-top">
94-
{contactIconsTop}
95-
</div>
96-
<img class="header--main-image" src={this.blogPost.featured_image} alt={this.blogPost.title} />
102+
<div class="col-md-1 col-lg-2" />
97103
</div>
98104
<div class="content">
99105
<div class="row">
100-
<div class="col-md-2">
106+
<div class="col-md-1 col-lg-2">
101107
<div id="contact-icons-side">{contactIconsSide}</div>
102108
</div>
103-
<div class="text-left col-md-8">
109+
<div class="text-left col-md-10 col-lg-8">
104110
<div innerHTML={this.blogPost.body} class="blog-content-body" />
105111
</div>
106-
<div class="col-md-2 col-sm-2" />
112+
<div class="col-md-1 col-lg-2">
113+
<div class="blog-next-posts" id="blog-next-posts-side">
114+
<h1>Related Blog Articles</h1>
115+
<div>{this.nextPostsHelper}</div>
116+
</div>
117+
</div>
107118
</div>
108119
</div>
109120
<div class="blog-content-author">
121+
<div class="d-md-none contact-icons-top" id="contact-icons-top">
122+
{contactIconsTop}
123+
</div>
110124
<hr />
111125
<div class="row">
112-
<div class="col-md-2 offset-md-2 blog-content-author-image">
126+
<div class="col-md-3 col-lg-2 offset-md-1 offset-lg-2 blog-content-author-image">
113127
<h5>About the Author</h5>
114128
<img src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
115129
</div>
116-
<div class="col-md-6 blog-content-author-text">
130+
<div class="col-md-7 col-lg-6 blog-content-author-text">
117131
<h5>About the Author</h5>
118132
<h2>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</h2>
119133
<p class="text-left">{this.blogPost.author.bio}</p>
120134
</div>
121135
<div class="col-md-2" />
122136
</div>
123137
</div>
138+
<div class="blog-next-posts" id="blog-next-posts-bottom">
139+
<h1>Related Blog Articles</h1>
140+
<div>{this.nextPostsHelper}</div>
141+
</div>
124142
</div>
125143
);
126144
}

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

Lines changed: 29 additions & 8 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
}
@@ -13,6 +9,17 @@
139
}
1410

1511
.featured-title {
12+
h4 {
13+
color: #c75300;
14+
font-size: 26px;
15+
font-weight: 700;
16+
letter-spacing: 2.08px;
17+
18+
@include media-breakpoint-down(sm) {
19+
text-align: center;
20+
font-size: 22px;
21+
}
22+
}
1623
h2 {
1724
color: $gray-dark;
1825
margin-bottom: 2rem;
@@ -32,14 +39,20 @@
3239

3340
img {
3441
padding: 30px 0;
35-
border-radius: 15px;
42+
43+
@include media-breakpoint-down(md) {
44+
padding-top: 4px;
45+
padding-bottom: 20px;
46+
}
47+
3648
object-fit: cover;
3749
}
3850
}
3951

4052
.summary {
41-
margin-top: 25px;
42-
margin-bottom: 25px;
53+
margin-top: 12px;
54+
margin-bottom: 12px;
55+
font-size: 18px;
4356
}
4457

4558
p {
@@ -51,6 +64,13 @@
5164
display: flex;
5265
flex-direction: row;
5366
align-items: center;
67+
color: $gray-dark;
68+
font-weight: 300;
69+
font-size: 16px;
70+
71+
a {
72+
text-decoration: underline;
73+
}
5474

5575
.profile-image {
5676
height: 40px;
@@ -62,7 +82,8 @@
6282
}
6383

6484
.read-more {
65-
font-size: 18px;
85+
font-size: 16px;
6686
text-decoration: underline;
87+
font-weight: 600;
6788
}
6889
}

0 commit comments

Comments
 (0)