Skip to content

Commit 79ca25d

Browse files
JasonStoltzJasonStoltz
authored
Merge pull request #1 from swiftype/styles
Styles
2 parents 446895e + 1a4c0a9 commit 79ca25d

30 files changed

+1862
-288
lines changed

‎package.json‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,18 @@
1111
"swiftype-app-search-javascript": "^1.3.1"
1212
},
1313
"scripts": {
14+
"build-css": "node-sass-chokidar src/ -o src/",
15+
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
1416
"start": "react-scripts start",
15-
"build": "react-scripts build",
17+
"start-dev": "npm-run-all -p watch-css start",
18+
"build-js": "react-scripts build",
19+
"build": "npm-run-all build-css build-js",
1620
"test": "react-scripts test --env=jsdom",
17-
"eject": "react-scripts eject"
21+
"eject": "react-scripts eject",
22+
"postinstall": "npm-run-all build-css"
23+
},
24+
"devDependencies": {
25+
"node-sass-chokidar": "^1.3.3",
26+
"npm-run-all": "^4.1.3"
1827
}
1928
}

‎public/index.html‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<meta name="theme-color" content="#000000">
7-
<!--
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
89
manifest.json provides metadata used when your web app is added to the
910
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1011
-->
11-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13-
<!--
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
15+
<!--
1416
Notice the use of %PUBLIC_URL% in the tags above.
1517
It will be replaced with the URL of the `public` folder during the build.
1618
Only files inside the `public` folder can be referenced from the HTML.
@@ -19,14 +21,15 @@
1921
work correctly both with client-side routing and a non-root public URL.
2022
Learn how to configure a non-root public URL by running `npm run build`.
2123
-->
22-
<title>React App</title>
23-
</head>
24-
<body>
25-
<noscript>
26-
You need to enable JavaScript to run this app.
27-
</noscript>
28-
<div id="root"></div>
29-
<!--
24+
<title>React App</title>
25+
</head>
26+
27+
<body>
28+
<noscript>
29+
You need to enable JavaScript to run this app.
30+
</noscript>
31+
<div id="root" class="app-container" \></div>
32+
<!--
3033
This HTML file is a template.
3134
If you open it directly in the browser, you will see an empty page.
3235
@@ -36,5 +39,6 @@
3639
To begin the development, run `npm start` or `yarn start`.
3740
To create a production bundle, use `npm run build` or `yarn build`.
3841
-->
39-
</body>
42+
</body>
43+
4044
</html>

‎src/App.css‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/App.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, { Component } from "react";
22

3-
import "./App.css";
4-
53
import Header from "./components/Header";
64
import Body from "./components/Body";
75

@@ -74,12 +72,12 @@ class App extends Component {
7472

7573
return (
7674
<AppSearchProvider driver={createDriverFromConfig(config)}>
77-
<div className="App">
78-
<div className="App-body">
79-
<Header />
80-
<Body />
75+
{({ searchTerm }) => (
76+
<div className={`reference-ui${searchTerm ? " active-search" : ""}`}>
77+
<Header />
78+
<Body />
8179
</div>
82-
</div>
80+
)}
8381
</AppSearchProvider>
8482
);
8583
}

‎src/app-search/AppSearchProvider.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import AppSearchContext from "./AppSearchContext";
55

66
class AppSearchProvider extends Component {
77
static propTypes = {
8-
children: PropTypes.element.isRequired,
8+
children: PropTypes.func.isRequired,
99
driver: PropTypes.object.isRequired
1010
};
1111

@@ -27,23 +27,23 @@ class AppSearchProvider extends Component {
2727
totalResults
2828
} = this.state;
2929

30+
const providerValue = {
31+
current: current,
32+
facets: facets,
33+
filters: filters,
34+
results: results,
35+
size: size,
36+
searchTerm: searchTerm,
37+
totalResults: totalResults,
38+
addFilter: driver.addFilter,
39+
removeFilter: driver.removeFilter,
40+
setSearchTerm: driver.setSearchTerm,
41+
updatePage: driver.updatePage
42+
};
43+
3044
return (
31-
<AppSearchContext.Provider
32-
value={{
33-
current: current,
34-
facets: facets,
35-
filters: filters,
36-
results: results,
37-
size: size,
38-
searchTerm: searchTerm,
39-
totalResults: totalResults,
40-
addFilter: driver.addFilter,
41-
removeFilter: driver.removeFilter,
42-
setSearchTerm: driver.setSearchTerm,
43-
updatePage: driver.updatePage
44-
}}
45-
>
46-
{children}
45+
<AppSearchContext.Provider value={providerValue}>
46+
{children(providerValue)}
4747
</AppSearchContext.Provider>
4848
);
4949
}

‎src/components/Body.css‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/components/Body.js‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,31 @@
11
import React from "react";
22

3-
import "./Body.css";
4-
53
import Facets from "../containers/Facets";
64
import Meta from "../containers/Meta";
75
import Paging from "../containers/Paging";
86
import Results from "../containers/Results";
7+
import Sorting from "../containers/Sorting";
98

109
export default function Body() {
1110
return (
12-
<div className="Body">
13-
<div className="Body-left">
14-
<Facets />
15-
</div>
16-
<div className="Body-right">
17-
<Meta />
18-
<Results />
19-
<Paging />
11+
<div className="reference-ui-body">
12+
<div className="initial-state-message">Type a search above to begin.</div>
13+
<div className="search-results">
14+
<div className="sidebar">
15+
<Sorting />
16+
<Facets />
17+
</div>
18+
<div className="results">
19+
<div className="results__header">
20+
<Meta />
21+
</div>
22+
<div className="results__body">
23+
<Results />
24+
</div>
25+
<div className="results__footer">
26+
<Paging />
27+
</div>
28+
</div>
2029
</div>
2130
</div>
2231
);

‎src/components/Facet.css‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/components/Facet.js‎

Lines changed: 35 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,44 @@
11
import PropTypes from "prop-types";
22
import React from "react";
33

4-
import "./Facet.css";
5-
64
function Facet({ name, onRemove, onSelect, options, value }) {
75
return (
8-
<div className="Facet">
9-
<div className="Facet-title">{name}</div>
10-
{value && (
11-
<div>
12-
{value}{" "}
13-
<a onClick={clickEvent => onRemove({ clickEvent, value })} href="/">
14-
X
15-
</a>
16-
</div>
17-
)}
18-
{!value && (
19-
<ul className="Facet-list">
20-
{options.map(option => (
21-
<div key={option.value}>
22-
<a
23-
href="/"
24-
onClick={clickEvent =>
25-
onSelect({ clickEvent, value: option.value })
26-
}
27-
>
28-
{option.value}
29-
</a>{" "}
30-
({option.count})
31-
</div>
32-
))}
6+
<div className="facet">
7+
<div>
8+
<div className="facet__title">{name}</div>
9+
<ul className="facet__list">
10+
{value && (
11+
<li className="facet__selected">
12+
{value}{" "}
13+
<span class="facet__remove">
14+
(
15+
<a
16+
onClick={clickEvent => onRemove({ clickEvent, value })}
17+
href="/"
18+
>
19+
Remove
20+
</a>
21+
)
22+
</span>
23+
</li>
24+
)}
25+
{!value &&
26+
options.map(option => (
27+
<li className="facet__item" key={option.value}>
28+
<a
29+
className="facet__link"
30+
href="/"
31+
onClick={clickEvent =>
32+
onSelect({ clickEvent, value: option.value })
33+
}
34+
>
35+
{option.value}
36+
</a>{" "}
37+
<span className="facet__count">{option.count}</span>
38+
</li>
39+
))}
3340
</ul>
34-
)}
41+
</div>
3542
</div>
3643
);
3744
}

‎src/components/Facets.css‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)