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

Commit 80ea34c

Browse files
luiskcs89luiskcs89
committed
feat(search): implementation of search with buttercms
1 parent 3d48ae7 commit 80ea34c

File tree

4 files changed

+243
-94
lines changed

4 files changed

+243
-94
lines changed

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

Lines changed: 111 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -21,99 +21,127 @@ 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+
}
43+
document.querySelector('app-search-results').style.visibility = value;
2444
}
2545

2646
render() {
2747
return (
28-
<nav class="navbar navbar-expand-lg navbar-dark align-items-lg-end fixed-top">
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>
48+
<div>
49+
<nav class="navbar navbar-expand-lg navbar-dark align-items-lg-end fixed-top">
50+
<div class="container">
51+
<div class="navbar-brand">
52+
<stencil-route-link tabindex="0" url="/" exact={true} anchorClass="nav-link" activeClass="active">
53+
<h1>
54+
<app-img class="img-fluid" src="/assets/logo-openforge.png" alt={translate('nav.header.img.alt')} />
55+
</h1>
56+
</stencil-route-link>
57+
</div>
58+
<button
59+
class="navbar-toggler"
60+
data-cy="burgerMenu"
61+
type="button"
62+
data-toggle="collapse"
63+
data-target="#navbarSupportedContent"
64+
aria-controls="navbarSupportedContent"
65+
aria-expanded="false"
66+
aria-label="Toggle navigation"
67+
>
68+
<span class="navbar-toggler-icon" />
69+
</button>
4970

50-
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
51-
<ul class="navbar-nav ml-md-auto">
52-
<li class="nav-item" data-target="#navbarSupportedContent">
53-
<stencil-route-link url="/" exact={true} anchorClass="nav-link" activeClass="active">
54-
{translate('nav.links.home')}
55-
</stencil-route-link>
56-
</li>
57-
<li class="nav-item dropdown split" data-target="#navbarSupportedContent">
58-
<stencil-route-link anchorClass="nav-link main" url="/services" role="button" activeClass="active">
59-
Services
60-
</stencil-route-link>
61-
<a href="" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
62-
<span class="sr-only">Toggle Dropdown</span>
63-
</a>
64-
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
65-
<stencil-route-link url="/services/app-developer" anchorClass="nav-link dropdown-item" activeClass="active">
66-
Development
67-
</stencil-route-link>
68-
<stencil-route-link url="/services/app-designer" anchorClass="nav-link dropdown-item" activeClass="active">
69-
Design
70-
</stencil-route-link>
71-
<stencil-route-link url="/services/startup-consulting" anchorClass="nav-link dropdown-item" activeClass="active">
72-
Consulting
73-
</stencil-route-link>
74-
<stencil-route-link url="/services/training" anchorClass="nav-link dropdown-item" activeClass="active">
75-
Training
76-
</stencil-route-link>
77-
</div>
78-
</li>
79-
<li class="nav-item dropdown" data-target="#navbarSupportedContent">
80-
<a href="" class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
81-
{translate('nav.links.about')}
82-
</a>
83-
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
84-
<stencil-route-link url="/about" anchorClass="nav-link dropdown-item" activeClass="active">
85-
Meet the team
71+
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
72+
<ul class="navbar-nav ml-md-auto">
73+
<li class="nav-item" data-target="#navbarSupportedContent">
74+
<stencil-route-link url="/" exact={true} anchorClass="nav-link" activeClass="active">
75+
{translate('nav.links.home')}
8676
</stencil-route-link>
87-
<stencil-route-link url="/juntoscope" anchorClass="nav-link dropdown-item" activeClass="active">
88-
Juntoscope Case Study
77+
</li>
78+
<li class="nav-item dropdown split" data-target="#navbarSupportedContent">
79+
<stencil-route-link anchorClass="nav-link main" url="/services" role="button" activeClass="active">
80+
Services
8981
</stencil-route-link>
90-
<stencil-route-link url="/toolbox" anchorClass="nav-link dropdown-item" activeClass="active">
91-
Toolbox
82+
<a href="" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
83+
<span class="sr-only">Toggle Dropdown</span>
84+
</a>
85+
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
86+
<stencil-route-link url="/services/app-developer" anchorClass="nav-link dropdown-item" activeClass="active">
87+
Development
88+
</stencil-route-link>
89+
<stencil-route-link url="/services/app-designer" anchorClass="nav-link dropdown-item" activeClass="active">
90+
Design
91+
</stencil-route-link>
92+
<stencil-route-link url="/services/startup-consulting" anchorClass="nav-link dropdown-item" activeClass="active">
93+
Consulting
94+
</stencil-route-link>
95+
<stencil-route-link url="/services/training" anchorClass="nav-link dropdown-item" activeClass="active">
96+
Training
97+
</stencil-route-link>
98+
</div>
99+
</li>
100+
<li class="nav-item dropdown" data-target="#navbarSupportedContent">
101+
<a href="" class="nav-link dropdown-toggle" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
102+
{translate('nav.links.about')}
103+
</a>
104+
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
105+
<stencil-route-link url="/about" anchorClass="nav-link dropdown-item" activeClass="active">
106+
Meet the team
107+
</stencil-route-link>
108+
<stencil-route-link url="/juntoscope" anchorClass="nav-link dropdown-item" activeClass="active">
109+
Juntoscope Case Study
110+
</stencil-route-link>
111+
<stencil-route-link url="/toolbox" anchorClass="nav-link dropdown-item" activeClass="active">
112+
Toolbox
113+
</stencil-route-link>
114+
<stencil-route-link url="/resources/pwa-white-paper" anchorClass="nav-link dropdown-item" activeClass="active">
115+
PWA White Paper
116+
</stencil-route-link>
117+
</div>
118+
</li>
119+
<li class="nav-item" data-target="#navbarSupportedContent">
120+
<stencil-route-link url="/contact" anchorClass="nav-link" activeClass="active">
121+
{translate('nav.links.contact')}
92122
</stencil-route-link>
93-
<stencil-route-link url="/resources/pwa-white-paper" anchorClass="nav-link dropdown-item" activeClass="active">
94-
PWA White Paper
123+
</li>
124+
<li class="nav-item" data-target="#navbarSupportedContent">
125+
<stencil-route-link url="/blog" exact={true} anchorClass="nav-link" activeClass="active">
126+
{translate('nav.links.blog')}
95127
</stencil-route-link>
96-
</div>
97-
</li>
98-
<li class="nav-item" data-target="#navbarSupportedContent">
99-
<stencil-route-link url="/contact" anchorClass="nav-link" activeClass="active">
100-
{translate('nav.links.contact')}
101-
</stencil-route-link>
102-
</li>
103-
<li class="nav-item" data-target="#navbarSupportedContent">
104-
<stencil-route-link url="/blog" exact={true} anchorClass="nav-link" activeClass="active">
105-
{translate('nav.links.blog')}
106-
</stencil-route-link>
107-
</li>
108-
<li class="nav-item" data-target="#navbarSupportedContent">
109-
<a class="nav-link" id="github" href="https://github.com/openforge" title={translate('nav.links.github')} target="_blank" rel="noopener">
110-
<div class="fab fa-github" />
111-
</a>
112-
</li>
113-
</ul>
128+
</li>
129+
<li class="nav-item" data-target="#navbarSupportedContent">
130+
<a class="nav-link" id="github" href="https://github.com/openforge" title={translate('nav.links.github')} target="_blank" rel="noopener">
131+
<div class="fab fa-github" />
132+
</a>
133+
</li>
134+
<li class="nav-item" data-target="#navbarSupportedContent" onClick={() => this.toogleSearch('visible')}>
135+
<a class="nav-link">
136+
<div class="fa fa-search" />
137+
</a>
138+
</li>
139+
</ul>
140+
</div>
114141
</div>
115-
</div>
116-
</nav>
142+
</nav>
143+
<app-search-results onClose={ev => this.toogleSearch('hidden', ev.detail.pageChanged)} />
144+
</div>
117145
);
118146
}
119147
}

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

Lines changed: 78 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,64 @@
1616
width: 100%;
1717
}
1818

19-
.results {
20-
margin: 76px 0 0 0;
19+
.result {
20+
margin: 0 100px 50px 100px;
21+
background-color: #ffffff;
22+
border-radius: 20px;
23+
padding: 25px;
24+
25+
@include media-breakpoint-down(sm) {
26+
margin: 0 10px 50px 10px;
27+
}
28+
29+
h1 {
30+
color: #ff5d00;
31+
font-family: Muli;
32+
font-size: 16px;
33+
font-weight: 700;
34+
letter-spacing: 0.7px;
35+
line-height: 19px;
36+
text-align: left;
37+
margin-bottom: 25px;
38+
}
39+
40+
p {
41+
color: #292a2d;
42+
font-family: Muli;
43+
font-size: 16px;
44+
font-weight: 700;
45+
line-height: 19px;
46+
text-align: left;
47+
}
48+
49+
.categories {
50+
display: table;
51+
border-spacing: 25px 0;
52+
margin-left: -25px;
53+
54+
div {
55+
background-color: #ff5d00;
56+
border-radius: 20px;
57+
width: 128px;
58+
height: 53px;
59+
text-align: center;
60+
display: table-cell;
61+
vertical-align: middle;
62+
color: #fff;
63+
font-family: Muli;
64+
font-size: 16px;
65+
font-weight: 700;
66+
line-height: 19px;
67+
}
68+
}
69+
}
70+
71+
.divider {
72+
margin: 150px 0 0 0;
73+
74+
@include media-breakpoint-down(sm) {
75+
margin: 120px 0 0 0;
76+
}
2177
}
2278

2379
.bkg {
@@ -28,6 +84,7 @@
2884
left: 0;
2985
width: 100%;
3086
height: 100%;
87+
z-index: -1;
3188
}
3289

3390
.blog-search-group {
@@ -65,4 +122,23 @@
65122
margin-right: 0;
66123
}
67124
}
125+
126+
.load-more {
127+
background-color: #e88212;
128+
border: 0.75px solid #ffffff;
129+
box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
130+
width: 125px;
131+
height: 32px;
132+
color: #ffffff;
133+
font-family: Roboto;
134+
font-size: 11px;
135+
font-weight: 700;
136+
letter-spacing: 1.25px;
137+
line-height: 32px;
138+
text-align: center;
139+
text-transform: uppercase;
140+
margin: 0 auto 50px auto;
141+
border-radius: 16px;
142+
cursor: pointer;
143+
}
68144
}

0 commit comments

Comments
 (0)