Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9cafd4e

Browse files
kamilmysliwieckamilmysliwiec
committed
feat(): add css to search bar
1 parent a4a190e commit 9cafd4e

File tree

8 files changed

+182
-34
lines changed

8 files changed

+182
-34
lines changed

‎.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all"
4+
}

‎src/app/homepage/header/header.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@
4343
<app-social-wrapper></app-social-wrapper>
4444
<div class="menu-wrapper">
4545
<div class="search-wrapper">
46-
<input id="q" />
46+
<i class="fa fa-search search-icon"></i>
47+
<input id="search" class="search-input" placeholder="Search..." />
4748
</div>
4849
<ul>
4950
<li>

‎src/app/homepage/header/header.component.scss‎

Lines changed: 102 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@import '../../../scss/variables.scss';
2-
@import '../../../scss/utils.scss';
1+
@import "../../../scss/variables.scss";
2+
@import "../../../scss/utils.scss";
33

44
:host {
55
background: $black-color;
@@ -94,17 +94,46 @@ header {
9494
position: relative;
9595
float: right;
9696
padding: 14px 25px;
97-
margin-right: 80px;
97+
98+
@media (min-width: 1500px) {
99+
margin-right: 80px;
100+
}
101+
102+
@media (max-width: 1499px) {
103+
li:first-of-type {
104+
display: none;
105+
}
106+
.search-wrapper {
107+
margin-right: 0;
108+
}
109+
}
110+
111+
@media (max-width: 1250px) {
112+
.search-wrapper {
113+
display: none;
114+
}
115+
}
98116

99117
@include media(large) {
100118
margin-right: 0;
101119
padding: 14px 5px;
102120
}
103121

104122
@include media(normal) {
105-
display: none;
123+
ul {
124+
display: none !important;
125+
}
126+
127+
.search-wrapper {
128+
display: inline-block;
129+
}
106130
}
107131

132+
@include media(small) {
133+
.search-wrapper {
134+
display: none;
135+
}
136+
}
108137
ul {
109138
display: inline-block;
110139
vertical-align: middle;
@@ -211,7 +240,7 @@ header {
211240
}
212241

213242
&::after {
214-
content: '';
243+
content: "";
215244
display: block;
216245
background: #246081;
217246
height: 2px;
@@ -264,7 +293,7 @@ header {
264293
span,
265294
&::after,
266295
&::before {
267-
content: '';
296+
content: "";
268297
background: #fff;
269298
display: block;
270299
height: 2px;
@@ -282,8 +311,73 @@ header {
282311
}
283312
}
284313

285-
.search-wrapper{
314+
.search-wrapper {
286315
margin-right: 2em;
287316
height: 100%;
288317
display: inline-block;
289-
}
318+
position: relative;
319+
}
320+
321+
.search-icon {
322+
position: absolute;
323+
margin-top: 7px;
324+
color: #a5a5a5;
325+
font-size: 14px;
326+
}
327+
328+
.search-input {
329+
background: transparent;
330+
border: 0;
331+
border-bottom: 2px solid #414141;
332+
padding: 5px 20px 5px 28px;
333+
color: #fff;
334+
font-family: "Source Sans Pro", "Helvetica Neue", sans-serif;
335+
font-size: 14px;
336+
outline: 0 !important;
337+
transition: all 90ms ease-in-out;
338+
width: 165px;
339+
340+
&:active,
341+
&:focus {
342+
border-bottom-color: $red-color;
343+
width: 190px;
344+
}
345+
}
346+
347+
.search-input::placeholder {
348+
color: #a5a5a5;
349+
opacity: 1;
350+
}
351+
352+
.close-icon {
353+
position: absolute;
354+
right: 0;
355+
width: 15px;
356+
height: 15px;
357+
top: 10px;
358+
cursor: pointer;
359+
visibility: hidden;
360+
transition: all 90ms ease-in-out;
361+
362+
&.visible {
363+
visibility: visible;
364+
}
365+
366+
&::after,
367+
&::before {
368+
content: "";
369+
background: $red-color;
370+
display: block;
371+
height: 2px;
372+
position: absolute;
373+
width: 15px;
374+
}
375+
376+
&::after {
377+
transform: rotate(45deg) translateY(3px);
378+
}
379+
380+
&::before {
381+
transform: rotate(-45deg) translateY(3px);
382+
}
383+
}

‎src/app/homepage/header/header.component.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { Component, Output, EventEmitter, Input, ChangeDetectionStrategy } from '@angular/core';
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
EventEmitter,
5+
Input,
6+
Output
7+
} from '@angular/core';
28

39
@Component({
410
selector: 'app-header',

‎src/app/homepage/homepage.component.scss‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@import '../../scss/utils.scss';
2-
@import '../../scss/variables.scss';
1+
@import "../../scss/utils.scss";
2+
@import "../../scss/variables.scss";
33

44
.container-fluid {
55
position: relative;
@@ -99,7 +99,7 @@
9999
@include opacity(1);
100100
}
101101
&::before {
102-
content: '';
102+
content: "";
103103
display: block;
104104
position: relative;
105105
width: 0;
@@ -452,3 +452,47 @@
452452
display: none;
453453
}
454454
}
455+
456+
.algolia-autocomplete .ds-dropdown-menu {
457+
width: 460px;
458+
min-width: 460px;
459+
margin-top: 18px;
460+
}
461+
462+
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
463+
color: #151515;
464+
text-transform: uppercase;
465+
font-weight: 700;
466+
font-size: 16px;
467+
}
468+
469+
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
470+
color: #757575;
471+
}
472+
473+
.algolia-autocomplete .algolia-docsearch-suggestion--title {
474+
font-weight: 600;
475+
color: 151515;
476+
}
477+
478+
.algolia-autocomplete .algolia-docsearch-suggestion--text {
479+
font-size: 0.8rem;
480+
color: gray;
481+
}
482+
483+
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
484+
color: $red-color;
485+
background: #fff2f4;
486+
}
487+
488+
.algolia-autocomplete
489+
.ds-dropdown-menu
490+
.ds-suggestion.ds-cursor
491+
.algolia-docsearch-suggestion.suggestion-layout-simple,
492+
.algolia-autocomplete
493+
.ds-dropdown-menu
494+
.ds-suggestion.ds-cursor
495+
.algolia-docsearch-suggestion:not(.suggestion-layout-simple)
496+
.algolia-docsearch-suggestion--content {
497+
background: #fff8f9;
498+
}

‎src/app/homepage/homepage.component.ts‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,20 @@ import {
88
OnDestroy,
99
OnInit,
1010
Renderer2,
11-
ViewEncapsulation,
11+
ViewEncapsulation
1212
} from '@angular/core';
1313
import { NavigationEnd, Router } from '@angular/router';
1414
import { fromEvent, Subscription } from 'rxjs';
1515
import { debounceTime } from 'rxjs/operators';
16+
import { environment } from '../../environments/environment';
1617
import { BasePageComponent } from './pages/page/page.component';
1718

1819
@Component({
1920
selector: 'app-homepage',
2021
templateUrl: './homepage.component.html',
2122
styleUrls: ['./homepage.component.scss'],
2223
encapsulation: ViewEncapsulation.None,
23-
changeDetection: ChangeDetectionStrategy.OnPush,
24+
changeDetection: ChangeDetectionStrategy.OnPush
2425
})
2526
export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
2627
isSidebarOpened = true;
@@ -35,7 +36,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
3536
private readonly cd: ChangeDetectorRef,
3637
private readonly router: Router,
3738
private readonly elementRef: ElementRef,
38-
private readonly renderer: Renderer2,
39+
private readonly renderer: Renderer2
3940
) {}
4041

4142
ngOnInit(): void {
@@ -58,7 +59,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
5859

5960
ngAfterViewInit() {
6061
this.checkWindowWidth(window.innerWidth);
61-
this.contentRef.appendChild(this.createDocSearchScriptTag())
62+
this.contentRef.appendChild(this.createDocSearchScriptTag());
6263
}
6364

6465
ngOnDestroy() {
@@ -87,7 +88,7 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
8788
const nativeElement: HTMLElement = this.elementRef.nativeElement;
8889
const footerRef: HTMLElement = nativeElement.querySelector('app-footer');
8990
const newsletterRef: HTMLElement = nativeElement.querySelector(
90-
'.newsletter-wrapper',
91+
'.newsletter-wrapper'
9192
);
9293
const carbonRef = nativeElement.querySelector('#carbonads');
9394
if (!footerRef || !carbonRef) {
@@ -144,18 +145,19 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
144145
}
145146

146147
createDocSearchScriptTag(): HTMLScriptElement {
147-
const scriptTag = document.createElement("script");
148-
scriptTag.type = "text/javascript";
149-
scriptTag.src = "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js";
150-
scriptTag.async = true
148+
const scriptTag = document.createElement('script');
149+
scriptTag.type = 'text/javascript';
150+
scriptTag.src =
151+
'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js';
152+
scriptTag.async = true;
151153
scriptTag.onload = () => {
152154
(window as any).docsearch({
153-
apiKey: '9ea53de1a6911255834352bbbe4d3417',
155+
apiKey: environment.algoliaApiKey,
154156
indexName: 'nestjs',
155-
inputSelector: '#q',
156-
debug: false // Set debug to true if you want to inspect the dropdown
157-
})
157+
inputSelector: '#search',
158+
debug: false
159+
});
158160
};
159-
return scriptTag
161+
return scriptTag;
160162
}
161163
}

‎src/environments/environment.prod.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export const environment = {
2-
production: true
2+
production: true,
3+
algoliaApiKey: '9ea53de1a6911255834352bbbe4d3417'
34
};

‎src/environments/environment.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
// The file contents for the current environment will overwrite these during build.
2-
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
3-
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
4-
// The list of which env maps to which file can be found in `.angular-cli.json`.
5-
61
export const environment = {
7-
production: false
2+
production: false,
3+
algoliaApiKey: '9ea53de1a6911255834352bbbe4d3417'
84
};

0 commit comments

Comments
 (0)