Skip to content

Commit 513f829

Browse files
humitoshumitos
committed
Search: integrate under /
- update styles - integrate under `/` I copied all the code from readthedocs/readthedocs-sphinx-search#132. However, there are lot of things that are not required for this stage. I removed some of them and make the integration nicer with the client we are creating. These changes are related to the HTML structure and the CSS style. The functionality is exactly the same. Related #19
1 parent ff0d93d commit 513f829

File tree

5 files changed

+1220
-2
lines changed

5 files changed

+1220
-2
lines changed

‎package-lock.json

+38
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323
"doc-diff": "github:readthedocs/doc-diff#humitos/nodejs-version",
2424
"ethical-ad-client": "github:readthedocs/ethical-ad-client#humitos/node-sass",
2525
"express-interceptor": "^1.2.0",
26+
"@fortawesome/fontawesome-svg-core": "^6.3.0",
27+
"@fortawesome/free-solid-svg-icons": "^6.3.0",
2628
"jest": "^29.5.0",
2729
"jest-environment-jsdom": "^29.5.0",
2830
"jest-fetch-mock": "^3.0.3",

‎src/search.css

+317
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
.search__outer__wrapper {
2+
position: fixed;
3+
top: 0;
4+
left: 0;
5+
width: 100%;
6+
height: 100%;
7+
z-index: 700;
8+
}
9+
10+
/* Backdrop */
11+
12+
.search__backdrop {
13+
/* Positioning */
14+
position: fixed;
15+
top: 0;
16+
left: 0;
17+
z-index: 500;
18+
19+
/* Display and box model */
20+
width: 100%;
21+
height: 100%;
22+
display: none;
23+
24+
/* Other */
25+
background-color: rgba(0, 0, 0, 0.3);
26+
}
27+
28+
.search__outer {
29+
/* Positioning */
30+
margin: auto;
31+
position: absolute;
32+
top: 0;
33+
left: 0;
34+
right: 0;
35+
bottom: 0;
36+
z-index: 100000;
37+
38+
/* Display and box model */
39+
height: 60%;
40+
width: 60%;
41+
max-height: 1000px;
42+
max-width: 1500px;
43+
overflow-y: scroll;
44+
45+
/* Other */
46+
border: 1px solid #e0e0e0;
47+
border-radius: 0.5rem 0.5rem 0 0;
48+
line-height: 1.875;
49+
background-color: #fcfcfc;
50+
box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 5px 5px,
51+
rgba(0, 0, 0, 0.05) -5px -5px 5px 5px;
52+
text-align: left;
53+
}
54+
55+
/* Custom scrollbar */
56+
57+
.search__outer::-webkit-scrollbar-track {
58+
border-radius: 10px;
59+
background-color: #fcfcfc;
60+
}
61+
62+
.search__outer::-webkit-scrollbar {
63+
width: 7px;
64+
height: 7px;
65+
background-color: #fcfcfc;
66+
}
67+
68+
.search__outer::-webkit-scrollbar-thumb {
69+
border-radius: 10px;
70+
background-color: #8f8f8f;
71+
}
72+
73+
.search__outer form {
74+
background-color: #eaeaea;
75+
margin: 1rem;
76+
border-radius: 0.3rem;
77+
font-size: 1.2rem;
78+
padding: 5px;
79+
}
80+
81+
.search__outer form label {
82+
display: inline-block;
83+
cursor: default;
84+
font-size: 1.3rem;
85+
padding-left: 10px;
86+
margin: 0;
87+
}
88+
89+
.search__outer form input {
90+
border: 0;
91+
outline: none;
92+
background: inherit;
93+
width: 95%;
94+
}
95+
96+
/* Cross icon on top-right corner */
97+
98+
.search__cross {
99+
position: absolute;
100+
top: 0;
101+
right: 0;
102+
margin: 1rem;
103+
font-size: large;
104+
}
105+
106+
.search__result__box {
107+
padding: 5px;
108+
margin: 1rem;
109+
}
110+
111+
.search__result__single {
112+
margin-top: 10px;
113+
border-bottom: 1px solid #e6e6e6;
114+
}
115+
116+
.search__result__box .active {
117+
background-color: rgb(245, 245, 245);
118+
}
119+
120+
.search__error__box {
121+
color: black;
122+
min-width: 300px;
123+
font-weight: 700;
124+
}
125+
126+
.outer_div_page_results {
127+
margin: 5px 0px;
128+
overflow: auto;
129+
padding: 3px 5px;
130+
}
131+
132+
.search__result__single a {
133+
text-decoration: none;
134+
cursor: pointer;
135+
}
136+
137+
/* Title of each search result */
138+
139+
.search__result__title {
140+
/* Display and box model */
141+
display: inline-block;
142+
font-weight: 500;
143+
margin-bottom: 15px;
144+
margin-top: 0;
145+
font-size: 15px;
146+
147+
/* Other */
148+
color: #6ea0ec;
149+
border-bottom: 1px solid #6ea0ec;
150+
}
151+
152+
.search__result__subheading {
153+
color: black;
154+
font-weight: 700;
155+
float: left;
156+
width: 20%;
157+
font-size: 15px;
158+
margin-right: 10px;
159+
word-break: break-all;
160+
overflow-x: hidden;
161+
}
162+
163+
.search__result__content {
164+
margin: 0;
165+
text-decoration: none;
166+
color: black;
167+
font-size: 15px;
168+
display: block;
169+
margin-bottom: 5px;
170+
margin-bottom: 0;
171+
line-height: inherit;
172+
float: right;
173+
width: calc(80% - 15px);
174+
text-align: left;
175+
}
176+
177+
/* Highlighting of matched results */
178+
179+
.search__outer span {
180+
font-style: normal;
181+
}
182+
183+
.search__outer .search__result__title span {
184+
background-color: #e5f6ff;
185+
padding-bottom: 3px;
186+
border-bottom-color: black;
187+
}
188+
189+
.search__outer .search__result__content span {
190+
background-color: #e5f6ff;
191+
border-bottom: 1px solid black;
192+
}
193+
194+
.search__result__subheading span {
195+
border-bottom: 1px solid black;
196+
}
197+
198+
.outer_div_page_results:hover {
199+
background-color: rgb(245, 245, 245);
200+
}
201+
202+
.br-for-hits {
203+
display: block;
204+
content: "";
205+
margin-top: 10px;
206+
}
207+
208+
.rtd_ui_search_subtitle {
209+
all: unset;
210+
color: inherit;
211+
font-size: 85%;
212+
}
213+
214+
.rtd__search__credits {
215+
margin: auto;
216+
position: absolute;
217+
top: 0;
218+
left: 0;
219+
right: 0;
220+
bottom: calc(-60% - 20px);
221+
width: 60%;
222+
max-width: 1500px;
223+
height: 30px;
224+
overflow: hidden;
225+
background: #eee;
226+
z-index: 100000;
227+
border-radius: 0 0 0.5rem 0.5rem;
228+
box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 5px;
229+
padding: 3px;
230+
text-align: center;
231+
color: black;
232+
}
233+
234+
.rtd__search__credits a {
235+
color: black;
236+
text-decoration: underline;
237+
display: inline-block;
238+
}
239+
240+
.rtd__search__credits a img {
241+
display: inline-block;
242+
width: 125px;
243+
}
244+
245+
.search__domain_role_name {
246+
font-size: 80%;
247+
letter-spacing: 1px;
248+
}
249+
250+
.search__filters {
251+
padding: 5px;
252+
margin-left: 1rem;
253+
}
254+
255+
.search__filters ul {
256+
list-style: none;
257+
padding: 0;
258+
margin: 0;
259+
display: flex;
260+
}
261+
262+
.search__filters li {
263+
display: flex;
264+
align-items: center;
265+
margin-right: 15px;
266+
}
267+
268+
.search__filters li label {
269+
border: 3px;
270+
padding: 3px;
271+
}
272+
273+
.search__filters label {
274+
color: black;
275+
font-size: 15px;
276+
margin: auto;
277+
}
278+
279+
.search__filters .search__filters__title {
280+
color: black;
281+
font-size: 15px;
282+
}
283+
284+
@media (max-width: 670px) {
285+
.rtd__search__credits {
286+
height: 50px;
287+
bottom: calc(-60% - 40px);
288+
overflow: hidden;
289+
}
290+
}
291+
292+
@media (min-height: 1250px) {
293+
.rtd__search__credits {
294+
bottom: calc(-60% - 30px);
295+
}
296+
}
297+
298+
@media (max-width: 630px) {
299+
.search__result__subheading {
300+
float: none;
301+
width: 90%;
302+
}
303+
304+
.search__result__content {
305+
float: none;
306+
width: 90%;
307+
}
308+
}
309+
310+
@keyframes fade-in {
311+
from {
312+
opacity: 0;
313+
}
314+
to {
315+
opacity: 1;
316+
}
317+
}

0 commit comments

Comments
 (0)