Skip to content

Commit 2af8385

Browse files
fzaninottofzaninotto
authored
Merge pull request #5991 from marmelab/improve-design-search
[DOC] Improve design on search modal
2 parents 3b3d664 + 920ed15 commit 2af8385

File tree

3 files changed

+63
-107
lines changed

3 files changed

+63
-107
lines changed

‎docs/_layouts/default.html

+8-27
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,16 @@
3131
/>
3232
<link
3333
rel="stylesheet"
34-
href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
34+
href="https://cdn.jsdelivr.net/npm/@docsearch/css@1.0.0-alpha.28"
3535
/>
3636
<link
3737
rel="stylesheet"
3838
href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.css"
3939
/>
40+
<link
41+
rel="stylesheet"
42+
href="{{ '/css/docsearch.css' | relative_url }}"
43+
/>
4044
</head>
4145

4246
<body>
@@ -56,25 +60,7 @@
5660
"
5761
>
5862
<div class="left">
59-
<form action="#" onsubmit="return false;">
60-
<div class="input-field" style="position: absolute">
61-
<input
62-
type="search"
63-
name="q"
64-
id="query"
65-
size="31"
66-
maxlength="255"
67-
value=""
68-
style="vertical-align: inherit !important"
69-
placeholder="Search..."
70-
/>
71-
<label class="label-icon" for="test"
72-
><i class="material-icons">search</i></label
73-
>
74-
<i class="material-icons">close</i>
75-
</div>
76-
<span id="search"></span>
77-
</form>
63+
<div id="docsearch" class="center"></div>
7864
</div>
7965
<ul id="nav-mobile" class="right hide-on-med-and-down">
8066
<li class="active">
@@ -182,18 +168,13 @@
182168
</script>
183169
<script
184170
type="text/javascript"
185-
src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
171+
src="https://cdn.jsdelivr.net/npm/@docsearch/js@1.0.0-alpha.28"
186172
></script>
187173
<script type="text/javascript">
188174
docsearch({
189175
apiKey: '32f254b1de6a25a96665d1229b6eb8f7',
190176
indexName: 'marmelab-react-admin',
191-
inputSelector: '#query',
192-
debug: false, // Set debug to true if you want to inspect the dropdown
193-
autocompleteOptions: {
194-
appendTo: '#search',
195-
hint: false,
196-
},
177+
container: '#docsearch',
197178
});
198179
</script>
199180
<script

‎docs/css/docsearch.css

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
:root {
2+
--docsearch-highlight-color: #368fe7;
3+
--docsearch-primary-color: #368fe7;
4+
}
5+
6+
#docsearch .DocSearch-Button {
7+
position: absolute;
8+
margin-top: 1rem;
9+
width: 400px;
10+
border-radius: 4px;
11+
12+
--docsearch-searchbox-background: #368fe7;
13+
--docsearch-muted-color: white;
14+
--docsearch-text-color: white;
15+
--docsearch-searchbox-focus-background: #5fa2e6;
16+
}
17+
18+
#docsearch .DocSearch-Button-Key {
19+
border: 1px solid #5fa2e6;
20+
background: transparent;
21+
box-shadow: none;
22+
}
23+
24+
div.DocSearch-Container {
25+
z-index: 1000; /* navbar materialize is z-index: 999; */
26+
}
27+
28+
/* Start override materialize input color */
29+
input[type='search']:not(.browser-default) {
30+
border: none;
31+
margin: 0px;
32+
padding: 0 0 0 8px;
33+
}
34+
input[type='search']:not(.browser-default):focus:not([readonly]) {
35+
box-shadow: none;
36+
border-bottom: none;
37+
}
38+
/* End override materialize input color */
39+
40+
@media only screen and (max-width: 1300px) {
41+
#docsearch .DocSearch-Button {
42+
width: 250px;
43+
}
44+
}
45+
46+
@media only screen and (max-width: 992px) {
47+
#docsearch .DocSearch-Button {
48+
width: 200px;
49+
}
50+
}
51+
52+
#docsearch .DocSearch-Button-Placeholder {
53+
display: block; /* display on mobile */
54+
margin-right: auto;
55+
}

‎docs/css/style-v9.css

-80
Original file line numberDiff line numberDiff line change
@@ -36,63 +36,6 @@ nav ul#nav-mobile a {
3636
font-size: 16px;
3737
}
3838

39-
.input-field .label-icon {
40-
-webkit-transform: none;
41-
transform: none;
42-
left: 2rem;
43-
}
44-
45-
nav .input-field label.active i {
46-
color: #8dbbe9;
47-
}
48-
49-
.nav-wrapper .input-field input[type='search'] {
50-
height: 2em;
51-
margin-top: 1em;
52-
margin-left: 1em;
53-
background-color: #368fe7;
54-
border-radius: 4px;
55-
color: #8dbbe9;
56-
width: calc(100% - 6rem);
57-
}
58-
59-
.nav-wrapper .input-field input[type='search']::placeholder {
60-
color: #8dbbe9;
61-
}
62-
63-
.input-field input[type='search'] ~ .material-icons {
64-
font-size: 1.5rem;
65-
right: 1.5rem;
66-
}
67-
68-
.nav-wrapper .input-field input[type='search']:hover,
69-
.nav-wrapper .input-field input[type='search']:active,
70-
.nav-wrapper .input-field input[type='search']:focus {
71-
background-color: #5fa2e6;
72-
color: white;
73-
}
74-
75-
.input-field input[type='search']:focus:not(.browser-default) ~ label i,
76-
.input-field
77-
input[type='search']:focus:not(.browser-default)
78-
~ .material-icons {
79-
color: white;
80-
}
81-
82-
.input-field input[type='search'] {
83-
color: #1976d2;
84-
}
85-
86-
@media only screen and (max-width: 600px) {
87-
.nav-wrapper .input-field input[type='search'] {
88-
margin-top: 0.7em;
89-
}
90-
}
91-
92-
.algolia-docsearch-suggestion--wrapper {
93-
line-height: initial;
94-
}
95-
9639
.sidenav {
9740
height: 100%;
9841
padding-bottom: 1em;
@@ -445,29 +388,6 @@ ul.sidenav code {
445388
text-decoration: underline;
446389
}
447390

448-
.search input[type='text'] {
449-
font: inherit;
450-
width: 100%;
451-
color: inherit;
452-
border: none;
453-
margin: 10px;
454-
cursor: inherit;
455-
resize: none;
456-
height: 38px;
457-
outline: none;
458-
padding: 0 8px 0 0;
459-
background: transparent;
460-
text-align: inherit;
461-
box-sizing: border-box;
462-
line-height: inherit;
463-
border-radius: 3px;
464-
font-size: 16px;
465-
}
466-
.search .octicon {
467-
margin: 10px 0 10px 20px;
468-
font-size: 16px;
469-
}
470-
471391
.markdown-section .icon {
472392
box-shadow: none;
473393
margin: 0;

0 commit comments

Comments
 (0)