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

Commit 925524a

Browse files
WholloranWholloran
authored
Merge pull request #412 from openforge/feat/search
Feat/search
2 parents 1956fef + da16499 commit 925524a

File tree

5 files changed

+429
-73
lines changed

5 files changed

+429
-73
lines changed

‎src/components/app-nav-header/app-nav-header.tsx‎

Lines changed: 105 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -21,89 +21,121 @@ export class AppNavHeader {
2121
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
2222
});
2323
});
24+
25+
this.toogleSearch('hidden');
26+
}
27+
28+
toogleSearch(value: string, pageChanged = false) {
29+
if (value === 'hidden') {
30+
document.querySelector('open-forge-app').style.position = 'initial';
31+
if (!pageChanged) {
32+
const scrollY = document.querySelector('open-forge-app').style.top;
33+
document.querySelector('open-forge-app').style.position = '';
34+
document.querySelector('open-forge-app').style.top = '';
35+
window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
36+
}
37+
} else {
38+
const scrollY = window.scrollY;
39+
document.querySelector('open-forge-app').style.position = 'fixed';
40+
document.querySelector('open-forge-app').style.top = `-${scrollY}px`;
41+
window.scrollTo(0, 0);
42+
setTimeout(() => document.getElementById('blog-search').focus());
43+
}
44+
45+
document.querySelector('app-search-results').style.visibility = value;
2446
}
2547

2648
render() {
2749
return (
28-
<nav class="navbar navbar-expand-lg align-items-lg-end fixed-top navbar-light">
29-
<div class="container">
30-
<div class="navbar-brand">
31-
<stencil-route-link tabindex="0" url="/" exact={true} anchorClass="nav-link" activeClass="active">
32-
<h1>
33-
<app-img class="img-fluid" src="/assets/logo-openforge.png" alt={translate('nav.header.img.alt')} />
34-
</h1>
35-
</stencil-route-link>
36-
</div>
37-
<button
38-
class="navbar-toggler"
39-
data-cy="burgerMenu"
40-
type="button"
41-
data-toggle="collapse"
42-
data-target="#navbarSupportedContent"
43-
aria-controls="navbarSupportedContent"
44-
aria-expanded="false"
45-
aria-label="Toggle navigation"
46-
>
47-
<span class="navbar-toggler-icon" />
48-
</button>
50+
<div>
51+
<nav class="navbar navbar-expand-lg align-items-lg-end fixed-top navbar-light">
52+
<div class="container">
53+
<div class="navbar-brand">
54+
<stencil-route-link tabindex="0" url="/" exact={true} anchorClass="nav-link" activeClass="active">
55+
<h1>
56+
<app-img class="img-fluid" src="/assets/logo-openforge.png" alt={translate('nav.header.img.alt')} />
57+
</h1>
58+
</stencil-route-link>
59+
</div>
60+
<button
61+
class="navbar-toggler"
62+
data-cy="burgerMenu"
63+
type="button"
64+
data-toggle="collapse"
65+
data-target="#navbarSupportedContent"
66+
aria-controls="navbarSupportedContent"
67+
aria-expanded="false"
68+
aria-label="Toggle navigation"
69+
>
70+
<span class="navbar-toggler-icon" />
71+
</button>
4972

50-
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
51-
<ul class="navbar-nav">
52-
<li class="nav-item" data-target="#navbarSupportedContent">
53-
<stencil-route-link url="/our-work" exact={true} anchorClass="nav-link" activeClass="active">
54-
{translate('nav.links.ourWork')}
55-
</stencil-route-link>
56-
</li>
57-
<li class="nav-item dropdown" data-target="#navbarSupportedContent">
58-
<a href="" class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
59-
{translate('nav.links.resources')}
60-
</a>
61-
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
62-
<stencil-route-link url="/blog" anchorClass="nav-link dropdown-item" activeClass="active">
63-
Blog
73+
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
74+
<ul class="navbar-nav">
75+
<li class="nav-item" data-target="#navbarSupportedContent">
76+
<stencil-route-link url="/our-work" exact={true} anchorClass="nav-link" activeClass="active">
77+
{translate('nav.links.ourWork')}
6478
</stencil-route-link>
65-
<stencil-route-link url="/forge" anchorClass="nav-link dropdown-item" activeClass="active">
66-
The Forge
67-
</stencil-route-link>
68-
<a class="nav-link" id="github" href="https://github.com/openforge" title={translate('nav.links.github')} target="_blank" rel="noopener">
69-
Github
79+
</li>
80+
<li class="nav-item dropdown" data-target="#navbarSupportedContent">
81+
<a href="" class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
82+
{translate('nav.links.resources')}
7083
</a>
71-
</div>
72-
</li>
73-
<li class="nav-item dropdown" data-target="#navbarSupportedContent">
74-
<a href="" class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
75-
{translate('nav.links.about')}
76-
</a>
77-
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
78-
<stencil-route-link url="/about" anchorClass="nav-link dropdown-item" activeClass="active">
79-
Meet the Team
80-
</stencil-route-link>
81-
<stencil-route-link url="/process" anchorClass="nav-link dropdown-item" activeClass="active">
82-
Our Process
83-
</stencil-route-link>
84-
<stencil-route-link url="/partners" anchorClass="nav-link dropdown-item" activeClass="active">
85-
Partners
84+
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
85+
<stencil-route-link url="/blog" anchorClass="nav-link dropdown-item" activeClass="active">
86+
Blog
87+
</stencil-route-link>
88+
<stencil-route-link url="/forge" anchorClass="nav-link dropdown-item" activeClass="active">
89+
The Forge
90+
</stencil-route-link>
91+
<a class="nav-link" id="github" href="https://github.com/openforge" title={translate('nav.links.github')} target="_blank" rel="noopener">
92+
Github
93+
</a>
94+
</div>
95+
</li>
96+
<li class="nav-item dropdown" data-target="#navbarSupportedContent">
97+
<a href="" class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
98+
{translate('nav.links.about')}
99+
</a>
100+
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
101+
<stencil-route-link url="/about" anchorClass="nav-link dropdown-item" activeClass="active">
102+
Meet the Team
103+
</stencil-route-link>
104+
<stencil-route-link url="/process" anchorClass="nav-link dropdown-item" activeClass="active">
105+
Our Process
106+
</stencil-route-link>
107+
<stencil-route-link url="/partners" anchorClass="nav-link dropdown-item" activeClass="active">
108+
Partners
109+
</stencil-route-link>
110+
</div>
111+
</li>
112+
<li class="nav-item contact-us-button" data-target="#navbarSupportedContent">
113+
<stencil-route-link url="/contact" anchorClass="nav-link contact-us" activeClass="active">
114+
{translate('nav.links.workWithUs')}
86115
</stencil-route-link>
87-
</div>
88-
</li>
89-
<li class="nav-item contact-us-button" data-target="#navbarSupportedContent">
90-
<stencil-route-link url="/contact" anchorClass="nav-link contact-us" activeClass="active">
91-
{translate('nav.links.workWithUs')}
92-
</stencil-route-link>
93-
</li>
94-
<li class="nav-item search d-none d-lg-block" data-target="#navbarSupportedContent">
95-
<i class="fa fa-search" />
96-
</li>
97-
<li class="nav-item search-bar d-md-block d-lg-none" data-target="#navbarSupportedContent">
98-
<input type="text" placeholder="Type to search content..." class="search-input" />
99-
<div class="search-icon">
116+
</li>
117+
<li class="nav-item search d-none d-lg-block" data-target="#navbarSupportedContent" onClick={() => this.toogleSearch('visible')}>
100118
<i class="fa fa-search" />
101-
</div>
102-
</li>
103-
</ul>
119+
</li>
120+
<li
121+
class="nav-item search-bar d-md-block d-lg-none"
122+
data-target="#navbarSupportedContent"
123+
data-toggle="collapse"
124+
aria-controls="navbarSupportedContent"
125+
aria-expanded="false"
126+
onClick={() => this.toogleSearch('visible')}
127+
>
128+
<input type="text" placeholder="Type to search content..." class="search-input" />
129+
<div class="search-icon">
130+
<i class="fa fa-search" />
131+
</div>
132+
</li>
133+
</ul>
134+
</div>
104135
</div>
105-
</div>
106-
</nav>
136+
</nav>
137+
<app-search-results onClose={ev => this.toogleSearch('hidden', ev.detail.pageChanged)} />
138+
</div>
107139
);
108140
}
109141
}

‎src/components/app-search-results/app-search-results.scss‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
.search-results {
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
z-index: 1000000;
6+
width: 100%;
7+
8+
.header {
9+
position: fixed;
10+
height: 75px;
11+
padding: 0 16px;
12+
background-color: #ffffff;
13+
margin: 0;
14+
z-index: 1;
15+
width: 100%;
16+
}
17+
18+
.result {
19+
margin: 0 100px 50px 100px;
20+
background-color: #ffffff;
21+
border-radius: 20px;
22+
padding: 25px;
23+
24+
@include media-breakpoint-down(sm) {
25+
margin: 0 10px 50px 10px;
26+
}
27+
28+
h1 {
29+
color: #ff5d00;
30+
font-family: Muli;
31+
font-size: 16px;
32+
font-weight: 700;
33+
letter-spacing: 0.7px;
34+
line-height: 19px;
35+
text-align: left;
36+
margin-bottom: 25px;
37+
}
38+
39+
p {
40+
color: #292a2d;
41+
font-family: Muli;
42+
font-size: 16px;
43+
font-weight: 700;
44+
line-height: 19px;
45+
text-align: left;
46+
}
47+
48+
.categories {
49+
display: block;
50+
border-spacing: 25px 0;
51+
margin-left: -25px;
52+
53+
div {
54+
background-color: #ff5d00;
55+
border-radius: 20px;
56+
min-width: 128px;
57+
height: 53px;
58+
text-align: center;
59+
display: table-cell;
60+
vertical-align: middle;
61+
color: #fff;
62+
font-family: Muli;
63+
font-size: 16px;
64+
font-weight: 700;
65+
line-height: 19px;
66+
display: inline-block;
67+
padding: 15px;
68+
margin: 3px;
69+
70+
@include media-breakpoint-up(md) {
71+
margin: 3px 20px;
72+
}
73+
}
74+
}
75+
}
76+
77+
.divider {
78+
margin: 150px 0 0 0;
79+
80+
@include media-breakpoint-down(sm) {
81+
margin: 120px 0 0 0;
82+
}
83+
}
84+
85+
.bkg {
86+
background-color: rgba(41, 42, 45, 0.7);
87+
opacity: 0.95;
88+
position: fixed;
89+
top: 0;
90+
left: 0;
91+
width: 100%;
92+
height: 100%;
93+
z-index: -1;
94+
}
95+
96+
.blog-search-group {
97+
display: flex;
98+
}
99+
100+
.blog-search-icon {
101+
font-size: 37px;
102+
margin-left: 50px;
103+
104+
@include media-breakpoint-down(sm) {
105+
margin-left: 0;
106+
}
107+
}
108+
109+
#blog-search {
110+
color: #375659;
111+
font-family: Muli;
112+
font-size: 29px;
113+
font-weight: 700;
114+
letter-spacing: 1.45px;
115+
line-height: 35px;
116+
border: 0;
117+
margin-left: 25px;
118+
margin-right: 25px;
119+
width: 100%;
120+
}
121+
122+
#blog-search:focus {
123+
outline: none;
124+
}
125+
126+
.blog-close-icon {
127+
font-size: 37px;
128+
margin-right: 50px;
129+
margin-left: auto;
130+
131+
@include media-breakpoint-down(sm) {
132+
margin-right: 0;
133+
}
134+
}
135+
136+
.load-more {
137+
background-color: #e88212;
138+
border: 0.75px solid #ffffff;
139+
box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
140+
width: 125px;
141+
height: 32px;
142+
color: #ffffff;
143+
font-family: Roboto;
144+
font-size: 11px;
145+
font-weight: 700;
146+
letter-spacing: 1.25px;
147+
line-height: 32px;
148+
text-align: center;
149+
text-transform: uppercase;
150+
margin: 0 auto 50px auto;
151+
border-radius: 16px;
152+
cursor: pointer;
153+
}
154+
}

‎src/components/app-search-results/app-search-results.spec.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { render } from '@stencil/core/testing';
2+
3+
import { AppSearchResults } from './app-search-results';
4+
5+
describe('app', () => {
6+
it('should build', () => {
7+
expect(new AppSearchResults()).toBeTruthy();
8+
});
9+
10+
describe('rendering', () => {
11+
beforeEach(async () => {
12+
await render({
13+
components: [AppSearchResults],
14+
html: '<app-search-results></app-search-results>',
15+
});
16+
});
17+
});
18+
});

0 commit comments

Comments
 (0)