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

Commit 6633802

Browse files
Fdom92Fdom92
committed
fix(): feedback from pr
1 parent f28decd commit 6633802

File tree

8 files changed

+143
-37
lines changed

8 files changed

+143
-37
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: 34 additions & 6 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,44 @@
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;
124-
}
150+
.author-img-container {
151+
display: flex;
152+
align-items: center;
125153
}

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

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -75,38 +75,42 @@ export class AppBlogContent {
7575
<div class="blog-content">
7676
<div class="header">
7777
<h1 class="text-left">{this.blogPost.title}</h1>
78-
<p class="text-left">{this.blogPost.summary}</p>
7978
<div>
80-
<div class="header--date">{formatDate(publishDate)}</div>
8179
<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-
)}
80+
<div class="author-img-container">
81+
<img class="d-none d-md-block" src={this.blogPost.author.profile_image} alt={`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`} />
82+
<div>
83+
By &nbsp;
84+
{this.blogPost.author.slug === 'jedidiah-weller' ? (
85+
<a href="http://www.twitter.com/jedihacks" target="_blank" rel="noopener">{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</a>
86+
) : (
87+
<stencil-route-link url={`/about/${this.blogPost.author.slug}`}>{`${this.blogPost.author.first_name} ${this.blogPost.author.last_name}`}</stencil-route-link>
88+
)}{' '}
89+
on {formatDate(publishDate)}
90+
</div>
91+
</div>
92+
<div class="d-none d-md-block d-lg-none contact-icons-top" id="contact-icons-top">
93+
{contactIconsTop}
9094
</div>
9195
</div>
9296
</div>
93-
<div class="contact-icons-top" id="contact-icons-top">
94-
{contactIconsTop}
95-
</div>
9697
<img class="header--main-image" src={this.blogPost.featured_image} alt={this.blogPost.title} />
9798
</div>
9899
<div class="content">
99100
<div class="row">
100-
<div class="col-md-2">
101+
<div class="col-md-1 col-lg-2">
101102
<div id="contact-icons-side">{contactIconsSide}</div>
102103
</div>
103-
<div class="text-left col-md-8">
104+
<div class="text-left col-md-10 col-lg-8">
104105
<div innerHTML={this.blogPost.body} class="blog-content-body" />
105106
</div>
106-
<div class="col-md-2 col-sm-2" />
107+
<div class="col-md-1 col-lg-2" />
107108
</div>
108109
</div>
109110
<div class="blog-content-author">
111+
<div class="d-md-none contact-icons-top" id="contact-icons-top">
112+
{contactIconsTop}
113+
</div>
110114
<hr />
111115
<div class="row">
112116
<div class="col-md-2 offset-md-2 blog-content-author-image">

‎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: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,53 @@
6262
color: #9baaab;
6363
}
6464
}
65+
66+
.back-link {
67+
display: flex;
68+
justify-content: center;
69+
margin-bottom: 1rem;
70+
padding: 0 6rem;
71+
72+
@include media-breakpoint-down(md) {
73+
padding: 0;
74+
}
75+
76+
svg {
77+
margin-right: 5px;
78+
}
79+
80+
&.align-left {
81+
justify-content: left;
82+
}
83+
84+
a {
85+
text-decoration: underline;
86+
}
87+
}
88+
89+
.top-buttons-container {
90+
display: flex;
91+
justify-content: space-between;
92+
93+
@include media-breakpoint-down(md) {
94+
padding: 0 1rem;
95+
}
96+
}
97+
98+
button {
99+
background: #fff;
100+
border: 1px solid #c75300;
101+
padding: 4px 15px;
102+
103+
span {
104+
font-size: 14px;
105+
text-transform: capitalize;
106+
color: $gray-dark;
107+
font-weight: bold;
108+
109+
i {
110+
color: #000;
111+
}
112+
}
113+
}
65114
}

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,23 @@ export class AppBlogPost {
175175
return (
176176
<div class="blog-post-page">
177177
<div class="blog-post-content">
178-
<stencil-route-link url={'/blog'}>
179-
<h3>Back to Blog</h3>
180-
</stencil-route-link>
178+
<div class="top-buttons-container">
179+
<div class="back-link align-left">
180+
<stencil-route-link url={'/blog'}>
181+
<a>
182+
<i class="fa fa-angle-left" aria-hidden="true" />
183+
Back
184+
</a>
185+
</stencil-route-link>
186+
</div>
187+
<div class="d-none d-md-block d-lg-none clear">
188+
<button type="submit" name="subscribe" id="mc-embedded-subscribe" class="button">
189+
<span>
190+
Get the Newsletter &nbsp; <i class="fa fa-envelope" aria-hidden="true" />
191+
</span>
192+
</button>
193+
</div>
194+
</div>
181195
<div>{post}</div>
182196
</div>
183197
<div class="blog-next-posts-header">
@@ -192,6 +206,14 @@ export class AppBlogPost {
192206
</div>
193207
</div>
194208
<div class="next-posts">{this.nextPostsHelper}</div>
209+
<div class="d-md-none back-link">
210+
<stencil-route-link url={'/blog'}>
211+
<a>
212+
<i class="fa fa-angle-left" aria-hidden="true" />
213+
Back to blog posts
214+
</a>
215+
</stencil-route-link>
216+
</div>
195217
<app-footer />
196218
</div>
197219
);

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,12 +82,13 @@
8282

8383
@include media-breakpoint-down(sm) {
8484
background: #fff;
85+
border: 1px solid #c75300;
8586
padding: 4px 15px;
8687
}
8788

8889
span {
8990
font-size: 14px;
90-
text-transform: uppercase;
91+
text-transform: capitalize;
9192
color: $gray-dark;
9293
font-weight: bold;
9394

@@ -171,6 +172,11 @@
171172
margin-top: 10px;
172173
margin-left: 10px;
173174
color: #615853;
175+
@include media-breakpoint-down(md) {
176+
position: initial;
177+
margin-top: 0;
178+
margin-left: 0;
179+
}
174180
}
175181

176182
.blog-filters-list {
@@ -182,7 +188,7 @@
182188
padding: 0;
183189
margin-bottom: 5rem;
184190

185-
@include media-breakpoint-down(sm) {
191+
@include media-breakpoint-down(md) {
186192
overflow: auto;
187193
white-space: nowrap;
188194
margin-bottom: 1rem;

‎src/pages/app-blog/app-blog.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -346,12 +346,17 @@ export class AppBlog {
346346

347347
<ul class="blog-filters-list">
348348
{filters}
349-
<li class="blog-filter-item d-none d-md-block">
349+
<li class="blog-filter-item d-none d-lg-block">
350350
<div class="blog-search-group">
351351
<span class="blog-search-icon fa fa-search" />
352352
<input id="blog-search" type="search" class="blog-search-input" placeholder="Search the blog" onKeyUp={e => this.handleSearch(e.target['value'])} />
353353
</div>
354354
</li>
355+
<li class="blog-filter-item d-lg-none">
356+
<div class="blog-search-group">
357+
<span class="blog-search-icon fa fa-search" />
358+
</div>
359+
</li>
355360
</ul>
356361
</div>
357362
</div>
@@ -424,7 +429,7 @@ export class AppBlog {
424429
<div class="clear">
425430
<button type="submit" name="subscribe" id="mc-embedded-subscribe" class="button">
426431
<span class="d-block d-sm-block d-md-none">
427-
Get the Newsletter &nbsp; <i class="fa fa-arrow-right" />
432+
Get the Newsletter &nbsp; <i class="fa fa-envelope" aria-hidden="true" />
428433
</span>
429434
<i class="d-none d-md-block fa fa-arrow-right" />
430435
</button>

0 commit comments

Comments
 (0)