Skip to content

Commit 0213e35

Browse files
mkroutikovmkroutikov
committed
demo spider faceted search
1 parent bc625ff commit 0213e35

File tree

4 files changed

+447
-0
lines changed

4 files changed

+447
-0
lines changed

‎spider/css/main_public_dataset.css

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
body {
2+
min-height: 100%;
3+
font-family: Roboto;
4+
background: #F1F1F1; }
5+
6+
a {
7+
color: #333333; }
8+
9+
hr {
10+
margin: 10px 14px; }
11+
12+
.is-logo {
13+
float: left;
14+
margin-left: 18px; }
15+
16+
.logo {
17+
margin-left: 15px;
18+
font-size: 30px;
19+
font-weight: bold;
20+
float: left; }
21+
.logo:hover {
22+
text-decoration: none; }
23+
.logo i {
24+
margin-left: 5px;
25+
color: #E91D00; }
26+
27+
header {
28+
background: #FFFFFF;
29+
padding: 10px;
30+
border-bottom: 1px solid #E8E8E8;
31+
position: fixed;
32+
top: 0;
33+
left: 0;
34+
right: 0;
35+
z-index: 2; }
36+
header .searchbox-container {
37+
margin-left: 240px;
38+
max-width: 400px;
39+
}
40+
header .searchbox-container .input-group {
41+
margin-top: 5px;
42+
}
43+
header .searchbox-container .input-group .form-control:focus {
44+
outline: none;
45+
box-shadow: none;
46+
}
47+
header .searchbox-container .input-group .input-group-btn button {
48+
padding-left: 20px;
49+
padding-right: 20px;
50+
background: #F8F8F8;
51+
border-radius: 0;
52+
}
53+
54+
55+
56+
section {
57+
background: #F1F1F1;
58+
min-height: 100%;
59+
z-index: 1; }
60+
61+
section ads {
62+
position: fixed;
63+
top: 70px;
64+
right: 0px;
65+
bottom: 10px;
66+
width: 240px;
67+
background: #FFFFFF;
68+
border-left: 1px solid #E8E8E8; }
69+
section ads .nav {
70+
margin: 20px 20px; }
71+
section ads .nav li.separator {
72+
height: 1px;
73+
background: #E8E8E8; }
74+
75+
section aside {
76+
overflow: auto;
77+
position: fixed;
78+
top: 70px;
79+
left: 0;
80+
bottom: 10px;
81+
width: 340px;
82+
background: #FFFFFF;
83+
border-right: 1px solid #E8E8E8; }
84+
section aside .nav {
85+
margin: 0 20px; }
86+
section aside .nav-narrow {
87+
margin: 40px 30px 20px 40px; }
88+
section aside .nav li a {
89+
display: block;
90+
padding: 2px 10px;
91+
margin: 10px 0; }
92+
section aside .nav li a:hover {
93+
color: #FFFFFF;
94+
background: #333333; }
95+
section aside .nav li.separator {
96+
height: 1px;
97+
background: #E8E8E8; }
98+
section aside h5 {
99+
color: #CE1312;
100+
margin-left: 30px;
101+
text-transform: uppercase;
102+
font-size: 10px;
103+
margin-top: 20px; }
104+
section aside .badge {
105+
font-size: .8em;
106+
background: #BBBBBB;
107+
position: relative;
108+
top: 1px; }
109+
110+
section aside #organizations label {
111+
display: block;
112+
cursor: pointer;
113+
padding: 4px 4px 4px 8px;
114+
font-weight: normal;
115+
font-size: .9em;
116+
margin: 0 0 -1px; }
117+
section aside #organizations label:hover {
118+
color: #FFFFFF;
119+
background: #333333; }
120+
section aside #organizations label input {
121+
display: none; }
122+
section aside #organizations .active label {
123+
border: 1px solid #CE1312;
124+
margin-top: -1px; }
125+
section aside #organizations .active .badge {
126+
background: #333333; }
127+
128+
section aside #formats label {
129+
display: block;
130+
cursor: pointer;
131+
padding: 4px 4px 4px 8px;
132+
font-weight: normal;
133+
font-size: .9em;
134+
margin: 0 0 -1px; }
135+
section aside #formats label:hover {
136+
color: #FFFFFF;
137+
background: #333333; }
138+
section aside #formats label input {
139+
display: none; }
140+
section aside #formats .active label {
141+
border: 1px solid #CE1312;
142+
margin-top: -1px; }
143+
section aside #formats .active .badge {
144+
background: #333333; }
145+
146+
section aside #domains label {
147+
display: block;
148+
cursor: pointer;
149+
padding: 4px 4px 4px 8px;
150+
font-weight: normal;
151+
font-size: .9em;
152+
margin: 0 0 -1px; }
153+
section aside #domains label:hover {
154+
color: #FFFFFF;
155+
background: #333333; }
156+
section aside #domains label input {
157+
display: none; }
158+
section aside #domains .active label {
159+
border: 1px solid #CE1312;
160+
margin-top: -1px; }
161+
section aside #domains .active .badge {
162+
background: #333333; }
163+
164+
section aside #sizemb label {
165+
display: block;
166+
cursor: pointer;
167+
padding: 4px 4px 4px 8px;
168+
font-weight: normal;
169+
font-size: .9em;
170+
margin: 0 0 -1px; }
171+
section aside #sizemb label:hover {
172+
color: #FFFFFF;
173+
background: #333333; }
174+
section aside #sizemb label input {
175+
display: none; }
176+
section aside #sizemb .active label {
177+
border: 1px solid #CE1312;
178+
margin-top: -1px; }
179+
180+
181+
section article {
182+
margin-top: 70px;
183+
margin-bottom: 10px;
184+
margin-left: 347px;
185+
margin-right: 247px;
186+
padding: 10px 0;
187+
max-width: 100%;
188+
background: #FFFFFF;
189+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
190+
section article #stats {
191+
padding-right: 14px;
192+
font-size: .8em;
193+
line-height: 24px; }
194+
section article #hits {
195+
padding: 0 15px; }
196+
section article #pagination .pagination a {
197+
background: #F8F8F8;
198+
padding: 3px 8px;
199+
color: #333333;
200+
margin-right: 4px; }
201+
section article #pagination .pagination a.active {
202+
border-color: #b5b5b5;
203+
background: #E8E8E8; }
204+
section article #pagination .pagination a:hover {
205+
border-color: #cfcfcf;
206+
background: #ebebeb; }
207+
section article .hit {
208+
margin-bottom: 10px;
209+
margin-top: 10px;
210+
margin-left: 30px;
211+
border: 0px solid #F3F3F3; }
212+
section article .hit em {
213+
font-style: normal;
214+
background: #FFFFD4;}
215+
section article .hit .media-object {
216+
height: 130px;
217+
width: 130px;
218+
overflow: hidden;
219+
background-size: contain;
220+
background-repeat: no-repeat;
221+
background-position: center center; }
222+
section article .hit .media-heading {
223+
color: #008cc4;
224+
font-weight: normal;
225+
font-size: 20px; }
226+
section article .hit .badge em {
227+
font-style: normal;
228+
color: #333333;
229+
background: #FFFFD4;}
230+
section .thank-you {
231+
font-size: .8em;
232+
margin-top: 18px;
233+
margin-left: 30px; }
234+
section .thank-you a {
235+
color: #008cc4;
236+
}
237+
238+
.ais-search-box--input {
239+
padding-left: 14px; }
240+
241+
.ais-show-more {
242+
color: #008cc4;
243+
font-weight: normal;
244+
font-size: 12px;
245+
padding-left: 8px;
246+
}
247+
248+
.genre, .year, .description, .host {
249+
margin: 12px 0; }
250+
251+
.year, .host {
252+
font-weight: bold;
253+
font-style: italic; }
254+
255+
.description {}
256+
257+
.genre .badge {
258+
background: #064163; }
259+

‎spider/images/favicon.ico

1.95 KB
Binary file not shown.

‎spider/index.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Innodata Spider</title>
6+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css" />
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
8+
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@1/dist/instantsearch.min.css" />
10+
<link rel="stylesheet" type="text/css" href="css/main_public_dataset.css" />
11+
<!--[if lte IE 9]>
12+
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
13+
<![endif]-->
14+
</head>
15+
<body>
16+
<header class="row">
17+
<div class="">
18+
<a href="https://www.innodata.com/" class="is-logo"><img src="images/Innodata-Logo.png" ></a>
19+
</div>
20+
<div class="searchbox-container">
21+
<div class="input-group">
22+
<input type="text" class="form-control" id="q" />
23+
<span class="input-group-btn">
24+
<button class="btn btn-default"><i class="fa fa-search"></i></button>
25+
</span>
26+
</div>
27+
28+
</div>
29+
30+
31+
</header>
32+
33+
<section class="">
34+
<aside>
35+
<ul class="nav nav-list">
36+
<li><a href="public_datasets.html"><i class="fa fa-home"></i> Public Datasets Survey</a></li>
37+
<li class="separator"></li>
38+
</ul>
39+
40+
<h5><i class="fa fa-chevron-right"></i> Organizations</h5>
41+
<div id="organizations"></div>
42+
<h5><i class="fa fa-chevron-right"></i> Formats</h5>
43+
<div id="formats"></div>
44+
<h5><i class="fa fa-chevron-right"></i> Domains</h5>
45+
<div id="domains"></div>
46+
<h5><i class="fa fa-chevron-right"></i> Dataset size (Mb)</h5>
47+
<div id="sizemb"></div>
48+
<hr />
49+
50+
<div class="thank-you"><img src="images/algolia-powered-by.svg"></div>
51+
<div class="thank-you">Copyright © 2019 Innodata Inc.</div>
52+
<div class="thank-you">
53+
<a href="https://innodata.com/privacy-policy/">privacy policy</a>
54+
</div>
55+
56+
</aside>
57+
<article>
58+
<div id="stats" class="text-right text-muted"></div>
59+
<hr />
60+
<div id="hits"></div>
61+
<div id="pagination" class="text-center"></div>
62+
</article>
63+
</section>
64+
65+
66+
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@1/dist/instantsearch.min.js"></script>
67+
68+
<script src="js/search.js"></script>
69+
70+
</body>
71+
</html>

0 commit comments

Comments
 (0)