Skip to content

Commit 1ba8722

Browse files
praveenwebpraveenweb
authored
search ui update
1 parent 544bba5 commit 1ba8722

File tree

4 files changed

+110
-72
lines changed

4 files changed

+110
-72
lines changed

‎src/components/Header.js‎

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import './styles.css';
66
import config from '../../config.js';
77

88
import Search from './search/index';
9-
9+
const help = require('./images/help.svg');
1010
const isSearchEnabled = config.header.search && config.header.search.enabled ? true : false;
1111

1212
let searchIndices = [];
@@ -76,45 +76,49 @@ const Header = ({location}) => (
7676
<span className={'icon-bar'}></span>
7777
</button>
7878
</div>
79+
{isSearchEnabled ? (
80+
<div className={'searchWrapper hidden-xs navBarUL'}>
81+
<Search collapse indices={searchIndices} />
82+
</div>
83+
): null}
7984
<div id="navbar" className={'navbar-collapse collapse navBarCollapse'}>
80-
<div className="navBarParent">
81-
<div className={'visible-xs'}>
82-
<Sidebar location={location} />
83-
<hr/>
84-
</div>
85-
<ul className={'nav navbar-nav navBarUL'}>
86-
{githubUrl !== '' ?
87-
(<li className={'githubBtn'}>
88-
<GitHubButton href={githubUrl} data-show-count="true" aria-label="Star on GitHub">Star</GitHubButton>
89-
</li>) : null}
90-
{helpUrl !== '' ?
91-
(<li><a href={helpUrl}>Need Help?</a></li>) : null
92-
}
93-
</ul>
94-
<ul className={'nav navbar-nav navBarUL navbar-right navBarULRight'}>
95-
{tweetText !== '' ?
96-
(<li>
97-
<a href={'https://twitter.com/intent/tweet?&text=' + tweetText} target="_blank">
98-
<img className={'twitterIcon'} src={twitter} alt={'Twitter'} />
99-
</a>
100-
</li>) : null
101-
}
102-
{headerLinks.map((link, key) => {
103-
if(link.link !== '' && link.text !== '') {
104-
return(
105-
<li key={key}>
106-
<a href={link.link} target="_blank">{link.text}</a>
107-
</li>
108-
);
109-
}
110-
})}
111-
{isSearchEnabled ? (
112-
<div className={'searchWrapper'}>
113-
<Search collapse indices={searchIndices} />
114-
</div>
115-
): null}
116-
</ul>
85+
<div className={'visible-xs'}>
86+
<Sidebar location={location} />
87+
<hr/>
88+
{isSearchEnabled ? (
89+
<div className={'searchWrapper navBarUL'}>
90+
<Search collapse indices={searchIndices} />
91+
</div>
92+
): null}
11793
</div>
94+
<ul className={'nav navbar-nav navBarUL navBarNav navbar-right navBarULRight'}>
95+
{headerLinks.map((link, key) => {
96+
if(link.link !== '' && link.text !== '') {
97+
return(
98+
<li key={key}>
99+
<a href={link.link} target="_blank" dangerouslySetInnerHTML={{__html: link.text}} />
100+
</li>
101+
);
102+
}
103+
})}
104+
{helpUrl !== '' ?
105+
(<li><a href={helpUrl}><img src={help} alt={'Help icon'}/></a></li>) : null
106+
}
107+
{(tweetText !== '' || githubUrl !== '') ?
108+
(<li className="divider hidden-xs"></li>): null
109+
}
110+
{tweetText !== '' ?
111+
(<li>
112+
<a href={'https://twitter.com/intent/tweet?&text=' + tweetText} target="_blank">
113+
<img className={'twitterIcon'} src={twitter} alt={'Twitter'} />
114+
</a>
115+
</li>) : null
116+
}
117+
{githubUrl !== '' ?
118+
(<li className={'githubBtn'}>
119+
<GitHubButton href={githubUrl} data-show-count="true" aria-label="Star on GitHub">Star</GitHubButton>
120+
</li>) : null}
121+
</ul>
118122
</div>
119123
</nav>
120124
</div>

‎src/components/images/help.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎src/components/sidebar/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ const Sidebar = styled('aside')`
8282
}
8383
@media only screen and (max-width: 1023px) {
8484
width: 100%;
85-
position: relative;
86-
height: auto;
85+
/* position: relative; */
86+
height: 100vh;
8787
}
8888
`;
8989

‎src/components/styles.css‎

Lines changed: 57 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,16 @@ body {
2929
display: flex;
3030
align-items: center;
3131
}
32+
.divider
33+
{
34+
height: 30px;
35+
margin: 0 15px;
36+
border-right: 1px solid rgba(255, 255, 255, 0.3);
37+
}
3238
.navBarULRight {
33-
position: absolute;
34-
right: 30px;
39+
/* position: absolute;
40+
right: 30px; */
3541
}
36-
3742
.githubIcon {
3843
width: 15px;
3944
margin-right: 5px;
@@ -67,36 +72,51 @@ body {
6772
}
6873
.formElement
6974
{
70-
background-color: #fff;
75+
background-color: transparent;
7176
padding: 4px;
72-
border-radius: 4px;
77+
/* border-radius: 4px; */
78+
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
7379
}
7480
.formElement:focus {
7581
outline: none;
7682
border: none;
77-
}
83+
}
84+
.formElement svg path {
85+
fill: #fff;
86+
}
87+
.searchInput {
88+
width: calc(100% - 26px);
89+
background-color: transparent !important;
90+
border-width: 0 !important;
91+
color: rgba(255, 255, 255, 0.5);
92+
}
7893
.searchInput:focus, .searchInput:visited, .searchInput:hover, .searchInput:focus-within {
7994
outline: none;
8095
border: 0;
8196
}
8297
.searchWrapper
8398
{
84-
padding-left: 20px;
99+
padding-left: 0px;
100+
padding-right: 20px;
101+
flex: 1;
102+
max-width: 600px;
103+
}
104+
.searchWrapper a {
105+
font-weight: 500;
85106
}
86107
.hitWrapper
87108
{
88109
background-color: #fff;
89110
padding: 4px;
90111
border-radius: 4px;
91112
position: absolute;
92-
width: 500px;
93-
top: 60px;
113+
max-width: 600px;
114+
top: 70px;
94115
border: 1px solid #ccc;
95116
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16);
96117
height: auto;
97118
max-height: 80vh;
98119
overflow: scroll;
99-
right: 0px;
100120
}
101121
.showResults {
102122
display: block;
@@ -118,7 +138,7 @@ body {
118138
}
119139

120140
.navBarCollapse {
121-
flex: 1;
141+
padding-left: 0;
122142
}
123143

124144
.logoWrapper {
@@ -151,7 +171,10 @@ body {
151171
z-index: 1;
152172
padding: 15px;
153173
}
154-
174+
.navBarHeader {
175+
min-width: 335px;
176+
padding-right: 20px;
177+
}
155178
.navBarBrand {
156179
height: auto;
157180
font-size: 28px;
@@ -178,7 +201,7 @@ body {
178201
line-height: 1em;
179202
opacity: 1;
180203
}
181-
.navBarUL
204+
.navBarNav
182205
{
183206
display: flex;
184207
align-items: center;
@@ -564,7 +587,8 @@ img {
564587
display: flex;
565588
align-items: center;
566589
font-size: 16px;
567-
padding: 10px 15px;
590+
padding: 10px 0px;
591+
padding-left: 15px;
568592
}
569593
.githubBtn span span {
570594
display: flex;
@@ -629,8 +653,8 @@ img {
629653

630654
.navBarUL {
631655
display: flex;
632-
padding-left: 16px;
633656
align-items: center;
657+
margin: 7.5px 0px;
634658
}
635659

636660
.navBarUL li a {
@@ -643,17 +667,20 @@ img {
643667
}
644668

645669
.navBarToggle {
646-
margin-top: 15px;
647670
margin-right: 0;
648671
height: 44px;
649672
}
650673
.navBarHeader {
651674
display: flex;
675+
min-width: auto;
676+
padding-right: 0;
677+
align-items: center;
652678
}
653679
.navBarBrand {
654680
font-size: 20px;
655681
padding: 15px;
656682
padding-left: 0;
683+
flex: 1;
657684
}
658685

659686
.titleWrapper {
@@ -687,21 +714,15 @@ img {
687714
padding-left: 0 !important;
688715
}
689716
.searchWrapper {
690-
position: absolute;
691-
right: 15px;
692-
padding-left: 10px;
717+
padding: 10px 0;
718+
padding-top: 20px;
693719
}
694720
.hitWrapper {
695721
width: 100%;
696722
right: 0;
697723
top: 35px;
698724
max-height: fit-content;
699-
}
700-
.formElement {
701-
width: 165px;
702-
}
703-
.searchInput {
704-
width: 130px;
725+
position: static;
705726
}
706727
}
707728

@@ -712,25 +733,29 @@ img {
712733
.navBarBrand {
713734
font-size: 22px;
714735
}
736+
.navBarHeader {
737+
min-width: 240px;
738+
}
715739
.navBarCollapse {
716740
padding-right: 10px;
717741
padding-left: 10px;
718742
}
719743
.githubBtn {
720744
padding: 10px 10px;
721745
}
746+
.divider {
747+
margin: 0 5px;
748+
height: 20px;
749+
}
750+
.hitWrapper {
751+
max-width: 500px;
752+
}
722753
.navBarUL li a {
723-
padding: 10px 10px;
754+
padding: 10px 5px;
724755
}
725756
.searchWrapper {
726757
padding-left: 0px;
727758
}
728-
.formElement {
729-
width: 171px;
730-
}
731-
.searchInput {
732-
width: 136px;
733-
}
734759
.navBarCollapse {
735760
display: flex !important;
736761
align-items: center;

0 commit comments

Comments
 (0)