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

Commit d67b8a9

Browse files
luiskcs89luiskcs89
committed
fix(blog): fix styles and newsletter buttons
1 parent 9b3e567 commit d67b8a9

File tree

6 files changed

+56
-36
lines changed

6 files changed

+56
-36
lines changed

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
.header {
22
text-align: left;
33

4-
padding: 0 6rem;
5-
6-
@include media-breakpoint-down(md) {
7-
padding: 0 1rem;
8-
}
9-
104
h1 {
115
@include media-breakpoint-down(md) {
126
padding: 20px 0;

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

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -74,28 +74,32 @@ export class AppBlogContent {
7474

7575
return (
7676
<div class="blog-content">
77-
<div class="header">
78-
<h1 class="text-left">{this.blogPost.title}</h1>
79-
<div>
80-
<div class="header--author">
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)}
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}
9197
</div>
92-
</div>
93-
<div class="d-none d-md-block d-lg-none contact-icons-top" id="contact-icons-top">
94-
{contactIconsTop}
9598
</div>
9699
</div>
100+
<img class="header--main-image" src={this.blogPost.featured_image} alt={this.blogPost.title} />
97101
</div>
98-
<img class="header--main-image" src={this.blogPost.featured_image} alt={this.blogPost.title} />
102+
<div class="col-md-1 col-lg-2" />
99103
</div>
100104
<div class="content">
101105
<div class="row">

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
}
2626
}
2727

28+
.hidden {
29+
display: none;
30+
}
31+
2832
.back-link {
2933
display: flex;
3034
justify-content: center;

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

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -198,13 +198,28 @@ export class AppBlogPost {
198198
</a>
199199
</stencil-route-link>
200200
</div>
201-
<div class="d-none d-md-block d-lg-none clear">
202-
<button type="submit" name="subscribe" id="mc-embedded-subscribe" class="button">
203-
<span>
204-
Get the Newsletter &nbsp; <i class="fa fa-envelope" aria-hidden="true" />
205-
</span>
206-
</button>
207-
</div>
201+
<form
202+
action="https://openforge.us8.list-manage.com/subscribe/post?u=7e95d70b390d0adf7aaa31ad6&amp;id=78738bfcb4"
203+
method="post"
204+
id="mc-embedded-subscribe-form"
205+
name="mc-embedded-subscribe-form"
206+
class="validate"
207+
target="_blank"
208+
novalidate="true"
209+
>
210+
<div class="form-group d-none d-md-block">
211+
<div class="hidden" aria-hidden="true">
212+
<input type="text" name="b_7e95d70b390d0adf7aaa31ad6_78738bfcb4" tabindex="-1" value="" />
213+
</div>
214+
<div class="clear">
215+
<button type="submit" name="subscribe" id="mc-embedded-subscribe" class="button">
216+
<span class="d-none d-md-block">
217+
Get the Newsletter &nbsp; <i class="fa fa-envelope" aria-hidden="true" />
218+
</span>
219+
</button>
220+
</div>
221+
</div>
222+
</form>
208223
</div>
209224
<div>{post}</div>
210225
</div>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,10 @@
203203

204204
.searchbar-top {
205205
display: flex;
206+
207+
button {
208+
height: 52px;
209+
}
206210
}
207211

208212
.blog-filters-list {
@@ -218,7 +222,6 @@
218222
overflow: auto;
219223
white-space: nowrap;
220224
margin-bottom: 1rem;
221-
justify-content: normal;
222225
}
223226

224227
.blog-filter-item {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -347,14 +347,14 @@ export class AppBlog {
347347
<div class="blog-filters-nav">
348348
<div class="blog-search-group d-md-none">
349349
<span class="blog-search-icon-top fa fa-search" />
350-
<input id="blog-search" type="search" class="blog-search-input" placeholder="Search the blog" onKeyUp={e => this.handleSearch(e.target['value'])} />
350+
<input id="blog-search" type="text" class="blog-search-input" placeholder="Search the blog" onKeyUp={e => this.handleSearch(e.target['value'])} />
351351
</div>
352352

353353
{this.displaySearchBar ? (
354354
<div class="searchbar-top">
355355
<div class="blog-search-group">
356356
<span class="blog-search-icon-top fa fa-search" />
357-
<input id="blog-search" type="search" class="blog-search-input-top" placeholder="Search the blog" onKeyUp={e => this.handleSearch(e.target['value'])} />
357+
<input id="blog-search" type="text" class="blog-search-input-top" placeholder="Search the blog" onKeyUp={e => this.handleSearch(e.target['value'])} />
358358
</div>
359359
<button onClick={() => this.hideSearchBar()}>
360360
<i class="far fa-times-circle" />
@@ -366,10 +366,10 @@ export class AppBlog {
366366
<li class="blog-filter-item d-none d-lg-block">
367367
<div class="blog-search-group">
368368
<span class="blog-search-icon fa fa-search" />
369-
<input id="blog-search" type="search" class="blog-search-input" placeholder="Search the blog" onKeyUp={e => this.handleSearch(e.target['value'])} />
369+
<input id="blog-search" type="text" class="blog-search-input" placeholder="Search the blog" onKeyUp={e => this.handleSearch(e.target['value'])} />
370370
</div>
371371
</li>
372-
<li class="blog-filter-item d-lg-none" onClick={() => this.showSearchbar()}>
372+
<li class="blog-filter-item d-none d-md-block d-lg-none" onClick={() => this.showSearchbar()}>
373373
<div class="blog-search-group">
374374
<span class="blog-search-icon fa fa-search" />
375375
</div>

0 commit comments

Comments
 (0)