Skip to content

Commit 2632a86

Browse files
author
Daniel Bruce
committed
Adds some UI stylings for spider.
1 parent dc44ac4 commit 2632a86

13 files changed

+3000
-93
lines changed

‎spider/assets/bootstrap/css/bootstrap.min.css

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎spider/assets/bootstrap/js/bootstrap.min.js

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎spider/assets/css/styles.css

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.page {
2+
padding-top: 30px;
3+
}
4+
5+
.filters .filters-list .filters-list-item {
6+
padding-left: 0.5rem;
7+
}
8+
9+
.search-form {
10+
padding-bottom: 15px;
11+
}
12+
13+
.search-form .input-group .input-group-prepend .input-group-text {
14+
background-color: transparent;
15+
border-right: 0;
16+
}
17+
18+
.search-form .input-group .form-control {
19+
border-left: 0;
20+
}
21+
22+
.search-form .input-group .ais-search-box {
23+
flex: 1 1 auto;
24+
}
25+
26+
.hits-container {
27+
padding-top: 10px;
28+
}
29+
30+
.ais-hits--item {
31+
border-bottom: 1px solid #dee2e6;
32+
padding-top: 15px;
33+
}
34+
35+
.ais-hits--item:first-child {
36+
padding-top: 0;
37+
}
38+
39+
.ais-hits--item:last-child {
40+
border-bottom: 0;
41+
}
42+
43+
.ais-hits--item .list-inline li {
44+
max-width: 200px;
45+
overflow: hidden;
46+
text-overflow: ellipsis;
47+
white-space: nowrap;
48+
}
49+
50+
.ais-hits--item .list-inline li::before {
51+
margin-right: 0.5rem;
52+
content: "|";
53+
}
54+
55+
.ais-hits--item .list-inline li:first-child::before {
56+
display: none;
57+
}
58+
59+
.nav .nav-item i.fa {
60+
margin-right: 5px;
61+
}
62+
63+
footer {
64+
bottom: 0;
65+
left: auto;
66+
right: auto;
67+
width: 100%;
68+
padding-top: 10px;
69+
padding-bottom: 10px;
70+
}
71+
72+
footer .footer-links {
73+
margin-left: 1rem;
74+
}
75+
76+
footer .footer-link {
77+
text-decoration: underline;
78+
}
79+
80+
footer .footer-link-divider {
81+
padding: 0 0.5rem;
82+
}

‎spider/assets/fonts/FontAwesome.otf

132 KB
Binary file not shown.

‎spider/assets/fonts/font-awesome.min.css

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎spider/assets/fonts/fontawesome-webfont.eot

162 KB
Binary file not shown.

‎spider/assets/fonts/fontawesome-webfont.svg

Lines changed: 2671 additions & 0 deletions
Loading

‎spider/assets/fonts/fontawesome-webfont.ttf

162 KB
Binary file not shown.

‎spider/assets/fonts/fontawesome-webfont.woff

95.7 KB
Binary file not shown.

‎spider/assets/fonts/fontawesome-webfont.woff2

75.4 KB
Binary file not shown.

‎spider/assets/js/jquery.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎spider/index.html

Lines changed: 136 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,152 @@
22
<html>
33
<head>
44
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
56
<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://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" />
8-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
9-
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css" />
10-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@1/dist/instantsearch.min.css" />
11-
<!-- <link rel="stylesheet" type="text/css" href="css/main_public_dataset.css" /> -->
7+
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
9+
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
10+
<link rel="stylesheet" href="assets/css/styles.css">
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.js@1/dist/instantsearch.min.css"/>
1212
</head>
1313
<body>
14-
<div class="section">
15-
<div class="">
16-
<a href="https://www.innodata.com/" class="is-logo"><img src="images/innodata-logo.png" ></a>
17-
<!-- <a href="https://www.innodata.com/" class="is-logo"><img src="images/spider-hanging.png" ></a> -->
14+
<nav class="navbar navbar-dark navbar-expand-md bg-dark">
15+
<div class="container">
16+
<a href="https://www.innodata.com/" class="navbar-brand">
17+
<img
18+
src="images/innodata-logo.png"
19+
style="height: 22px; width: auto; margin-top: -5px"
20+
>
21+
</a>
22+
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
23+
<span class="sr-only">Toggle navigation</span>
24+
<span class="navbar-toggler-icon"></span>
25+
</button>
26+
<div class="collapse navbar-collapse" id="navcol-1">
27+
<ul class="nav navbar-nav">
28+
<li class="nav-item" role="presentation">
29+
<a class="nav-link active" href="#">
30+
<i class="fa fa-search"></i>
31+
Search
32+
</a>
33+
</li>
34+
<li class="nav-item" role="presentation">
35+
<a class="nav-link" href="#">
36+
<i class="fa fa-briefcase"></i>
37+
Briefing
38+
</a>
39+
</li>
40+
<li class="nav-item" role="presentation">
41+
<a class="nav-link" href="#">
42+
<i class="fa fa-files-o"></i>
43+
Archive
44+
</a>
45+
</li>
46+
<li class="nav-item" role="presentation">
47+
<a class="nav-link" href="#">
48+
<i class="fa fa-pie-chart"></i>
49+
Reports
50+
</a>
51+
</li>
52+
</ul>
53+
<ul class="nav navbar-nav ml-auto">
54+
<li class="nav-item dropdown" role="presentation">
55+
<a class="nav-link active dropdown-toggle" href="#">
56+
<i class="fa fa-user"></i>
57+
My Profile
58+
</a>
59+
</li>
60+
</ul>
1861
</div>
1962
</div>
20-
<div class="">
21-
<div class="field">
22-
<div class="control has-icons-left">
23-
<input class="input is-info is-medium" type="text" placeholder="Search Me" id="q" >
63+
</nav>
64+
<div class="container page">
65+
<div class="row">
66+
<div class="col-4 filters">
67+
<div class="card shadow">
68+
<div class="card-header">
69+
<h5 class="mb-0">Filters</h5>
70+
</div>
71+
<div class="card-body">
72+
<div>
73+
<h4>Topic</h4>
74+
<div id="topic"></div>
75+
</div>
76+
<div>
77+
<h4>Keywords</h4>
78+
<div id="keywords"></div>
79+
</div>
80+
<div>
81+
<h4>Authority</h4>
82+
<div id="authority"></div>
83+
</div>
84+
<div>
85+
<h4>Content Type</h4>
86+
<div id="content-type"></div>
87+
</div>
88+
<div>
89+
<h4>Jurisdiction</h4>
90+
<div id="jurisdiction"></div>
91+
</div>
92+
<div>
93+
<h4>Source</h4>
94+
<div id="source"></div>
95+
</div>
96+
<div>
97+
<h4>Compliance User</h4>
98+
<div id="compliance-user"></div>
99+
</div>
24100
</div>
25101
</div>
26102
</div>
27-
</div>
28-
<div class="columns">
29-
<div class="column is-one-third">
30-
<section class="section has-background-white-ter">
31-
<div class="control">
32-
<h5 class="h4"><i class="fa fa-chevron-right"></i> Topic</h5>
33-
<div id="topic"></div>
34-
<h5 class="h4"><i class="fa fa-chevron-right"></i> Keywords</h5>
35-
<div id="keywords"></div>
36-
<h5 class="h4"><i class="fa fa-chevron-right"></i> Authority</h5>
37-
<div id="authority"></div>
38-
<h5 class="h4"><i class="fa fa-chevron-right"></i> Content Type</h5>
39-
<div id="content-type"></div>
40-
<h5 class="h4"><i class="fa fa-chevron-right"></i> Jurisdiction</h5>
41-
<div id="jurisdiction"></div>
42-
<h5 class="h4"><i class="fa fa-chevron-right"></i> Source</h5>
43-
<div id="source"></div>
44-
<h5 class="h4"><i class="fa fa-chevron-right"></i> Compliance User</h5>
45-
<div id="compliance-user"></div>
103+
<div class="col-8">
104+
<div class="row">
105+
<div class="col">
106+
<form class="search-form">
107+
<div class="input-group shadow">
108+
<div class="input-group-prepend">
109+
<span class="input-group-text">
110+
<i class="fa fa-search"></i>
111+
</span>
112+
</div>
113+
<input class="form-control" id="q" type="search">
114+
</div>
115+
</form>
46116
</div>
47-
</section>
48-
</div>
49-
<div class="column">
50-
<div id="stats" class="text-right text-muted"></div>
51-
<div id="hits" class="section"></div>
52-
<div id="pagination" class="text-center"></div>
117+
</div>
118+
<div class="row">
119+
<div class="col">
120+
<small id="stats"></small>
121+
</div>
122+
<div class="col text-right"><a href="#">Advanced</a></div>
123+
</div>
124+
<div class="row">
125+
<div class="col hits-container">
126+
<div class="card shadow">
127+
<div class="card-body" id="hits">
128+
</div>
129+
</div>
130+
</div>
131+
</div>
132+
<div class="row">
133+
<div class="col">
134+
<div id="pagination"></div>
135+
</div>
136+
</div>
53137
</div>
54138
</div>
55-
56-
57-
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@1/dist/instantsearch.min.js"></script>
58-
59-
<script src="js/search.js"></script>
60-
139+
</div>
140+
<footer class="text-center d-xl-flex justify-content-xl-center align-items-xl-center bg-dark text-light position-fixed">
141+
<p class="d-xl-flex m-0">Copyright © 2019 Innodata</p>
142+
<small class="footer-links">
143+
<a class="footer-link text-light" href="#">Terms of Use</u></a>
144+
<span class="footer-link-divider">|</span>
145+
<a class="footer-link text-light" href="#">Privacy Policy</a>
146+
</small>
147+
</footer>
148+
<script src="assets/js/jquery.min.js"></script>
149+
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
150+
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@1/dist/instantsearch.min.js"></script>
151+
<script src="js/search.js"></script>
61152
</body>
62153
</html>

0 commit comments

Comments
 (0)