Skip to content

Commit 3359304

Browse files
leebyronleebyron
committed
right-align search
1 parent cff143d commit 3359304

File tree

7 files changed

+135
-83
lines changed

7 files changed

+135
-83
lines changed

‎site/_core/DocsSidebar.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,9 @@
88

99
var React = require('react');
1010

11-
var Search = require('./Search');
12-
1311
var DocsSidebar = React.createClass({
1412
render: function() {
1513
return <div className="nav-docs">
16-
<Search />
1714
{getCategories(this.props.site).map((category) =>
1815
<div className="nav-docs-section" key={category.name}>
1916
<h3>{category.name}</h3>

‎site/_core/Search.js

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,17 @@
88

99
var React = require('react');
1010

11-
var Search = React.createClass({
12-
render: function() {
13-
return <div className="algolia-search-wrapper">
14-
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
15-
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
16-
<script dangerouslySetInnerHTML={{__html: `
17-
docsearch({
18-
apiKey: 'd103541f3e6041148aade2e746ed4d61',
19-
indexName: 'graphql',
20-
inputSelector: '#algolia-doc-search'
21-
});
22-
`}} />
23-
</div>;
24-
}
25-
});
26-
27-
module.exports = Search;
11+
export default function Search() {
12+
const uuid = Math.floor(Math.random() * 999999999999999);
13+
return <div className="algolia-search-wrapper">
14+
<input id={uuid} type="text" placeholder="Search docs..." />
15+
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
16+
<script dangerouslySetInnerHTML={{__html: `
17+
docsearch({
18+
apiKey: 'd103541f3e6041148aade2e746ed4d61',
19+
indexName: 'graphql',
20+
inputSelector: '#${uuid}'
21+
});
22+
`}} />
23+
</div>;
24+
}

‎site/_core/Site.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
var React = require('react');
1010
var HeaderLinks = require('./HeaderLinks');
11+
var Search = require('./Search');
1112
var SiteData = require('./SiteData');
1213

1314
var Site = React.createClass({
@@ -41,6 +42,7 @@ var Site = React.createClass({
4142
GraphQL
4243
</a>
4344
<HeaderLinks section={this.props.section} />
45+
{this.props.noSearch || <Search />}
4446
</section>
4547
</header>
4648

‎site/_css/algolia.less

Lines changed: 87 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,99 @@
22

33
/** Algolia Doc Search **/
44

5-
div.algolia-search-wrapper {
5+
.algolia-search-wrapper {
6+
float: right;
67
display: inline-block;
78
vertical-align: top;
8-
}
9-
10-
.algolia-autocomplete .aa-dropdown-menu {
11-
.body-font();
12-
margin-top: -4px;
13-
}
9+
pointer-events: auto;
1410

15-
@media screen and (max-width: 960px) {
16-
div.algolia-search-wrapper {
11+
@media screen and (max-width: 960px) {
1712
display: none;
1813
}
19-
}
2014

21-
input#algolia-doc-search {
22-
background: transparent url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E'%3C/span%3E../img/search.png%3Cspan%20class=%22pl-pds%22%3E'%3C/span%3E%3C/span%3E) no-repeat 10px center;
23-
background-size: 16px 16px;
24-
25-
padding: 0 10px;
26-
padding-left: 35px;
27-
margin-top: 9px;
28-
height: 30px;
29-
.headline-font(@size: 15px, @color: white);
30-
background-color: #555;
31-
border-radius: 4px;
32-
outline: none;
33-
border: none;
34-
width: 200px;
35-
}
15+
input {
16+
.headline-font(@size: 15px, @color: desaturate(lighten(@dark-color, 50%), 50%));
17+
background: transparent url(http://github.com/%3Cspan%20class=%22pl-s%22%3E%3Cspan%20class=%22pl-pds%22%3E'%3C/span%3E../img/search.svg%3Cspan%20class=%22pl-pds%22%3E'%3C/span%3E%3C/span%3E) no-repeat 10px center;
18+
background-color: rgba(255, 255, 255, 0.1);
19+
background-size: 16px 16px;
20+
border-radius: 4px;
21+
border: solid 1px fadeout(@dark-color, 80%);
22+
height: 30px;
23+
margin-top: 9px;
24+
outline: none;
25+
padding: 0 10px 0 35px;
26+
width: 200px;
27+
}
3628

37-
.algolia-autocomplete {
38-
vertical-align: top;
39-
height: 53px;
40-
}
29+
.algolia-autocomplete {
30+
vertical-align: top;
31+
height: 53px;
32+
}
4133

42-
.algolia-docsearch-suggestion--category-header {
43-
background-color: #B51780;
44-
}
45-
.algolia-docsearch-suggestion--highlight {
46-
color: @rhodamine-color;
47-
}
48-
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
49-
background-color: @rhodamine-color;
50-
}
51-
.aa-cursor .algolia-docsearch-suggestion--content {
52-
color: @rhodamine-color;
53-
}
54-
.aa-cursor .algolia-docsearch-suggestion {
55-
background: #FEF6FB;
56-
}
57-
.algolia-docsearch-suggestion {
58-
border-bottom-color: #FEF6FB;
59-
}
60-
.algolia-docsearch-suggestion--subcategory-column {
61-
border-right-color: #FEF6FB;
62-
background-color: #FEF6FB;
63-
color: @rhodamine-color;
34+
.aa-dropdown-menu {
35+
.body-font(@size: 15px);
36+
margin-top: -10px;
37+
width: 600px;
38+
margin-left: -400px;
39+
padding: 0;
40+
border: none;
41+
border-radius: 4px;
42+
box-shadow:
43+
0 0 1px rgba(0, 0, 0, 0.2),
44+
0 2px 8px rgba(0, 0, 0, 0.2);
45+
46+
.aa-suggestion {
47+
border-top: solid 1px #F3F3F3;
48+
49+
&:first-child {
50+
border: none;
51+
border-radius: 4px 4px 0 0;
52+
53+
.algolia-docsearch-suggestion--subcategory-column {
54+
border-top-left-radius: 4px;
55+
}
56+
}
57+
58+
&:last-child {
59+
border-radius: 0 0 4px 4px;
60+
61+
.algolia-docsearch-suggestion--subcategory-column {
62+
border-bottom-left-radius: 4px;
63+
}
64+
}
65+
}
66+
67+
.algolia-docsearch-suggestion--category-header,
68+
.algolia-docsearch-footer {
69+
display: none;
70+
}
71+
72+
// highlighted matching search query
73+
.algolia-docsearch-suggestion--highlight {
74+
background-color: @rhodamine-color;
75+
color: white;
76+
}
77+
78+
// hover
79+
.aa-cursor {
80+
.algolia-docsearch-suggestion {
81+
background: #FCF9FB;
82+
}
83+
84+
.algolia-docsearch-suggestion--content {
85+
color: @rhodamine-color;
86+
}
87+
}
88+
89+
.algolia-docsearch-suggestion,
90+
.algolia-docsearch-suggestion--content {
91+
border: none;
92+
}
93+
94+
.algolia-docsearch-suggestion--subcategory-column {
95+
.headline-font(@size: 13px, @color: lighten(@dark-color, 50%));
96+
border: none;
97+
padding-top: 9px;
98+
}
99+
}
64100
}

‎site/_css/graphql.less

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,11 @@ header {
8989
height: 50px;
9090
background: white;
9191
box-shadow: inset 0 -1px 0 0px rgba(0, 0, 0, 0.1);
92-
z-index: 100;
92+
z-index: 10;
9393

9494
// Home link within nav.
9595
.nav-home {
96+
float: left;
9697
font-size: 18px;
9798
color: @rhodamine-color;
9899
line-height: 50px;
@@ -110,7 +111,7 @@ header {
110111
}
111112

112113
nav {
113-
float: right;
114+
float: left;
114115

115116
a {
116117
color: #aaa;
@@ -123,10 +124,6 @@ nav {
123124
color: @text-color;
124125
text-decoration: none;
125126
}
126-
127-
&:last-child {
128-
margin-right: -1em;
129-
}
130127
}
131128
}
132129

@@ -209,12 +206,20 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
209206
visibility: hidden;
210207
}
211208

209+
.fixedSearch {
210+
position: fixed;
211+
right: 0;
212+
left: 0;
213+
z-index: 12;
214+
pointer-events: none;
215+
}
216+
212217
.hero {
213218
background: @dark-color;
214219
color: #f8f8f8;
215220
height: 80vh;
216221
position: relative;
217-
z-index: 101;
222+
z-index: 11;
218223
margin-top: -50px;
219224
padding-top: 50px;
220225

@@ -225,6 +230,10 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
225230
nav a:hover, nav a:focus {
226231
color: white;
227232
}
233+
234+
a:first-child {
235+
margin-left: -1em;
236+
}
228237
}
229238

230239
.abs {

‎site/img/search.svg

Lines changed: 10 additions & 0 deletions
Loading

‎site/index.html.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,21 @@ var Search = require('./_core/Search');
88
var index = React.createClass({
99
render: function() {
1010
return (
11-
<Site className="index">
11+
<Site className="index" noSearch={true}>
12+
<section className="fixedSearch" aria-hidden>
13+
<Search />
14+
</section>
15+
1216
<div className="hero">
1317
<div className="abs">
14-
1518
<header aria-hidden>
1619
<section>
17-
<Search />
1820
<HeaderLinks section={this.props.section} />
1921
</section>
2022
</header>
2123

2224
<div className="content">
23-
<img className="main-logo" src={'/img/logo.svg'} width="240" height="240" />
25+
<img className="main-logo" src="/img/logo.svg" width="240" height="240" />
2426
<h1>GraphQL</h1>
2527
<h3>
2628
{SiteData.description}
@@ -29,7 +31,6 @@ var index = React.createClass({
2931
</div>
3032
</div>
3133

32-
3334
<section className="marketing-row">
3435
<div className="marketing-col">
3536
<h3>Declarative</h3>

0 commit comments

Comments
 (0)