Skip to content

Commit b78b2bf

Browse files
fkjastack
fk
authored and
jastack
committed
[www] Improve docsearch UI for small devices (gatsbyjs#3597)
* [www] Improve docsearch for small devices * ditch css.global(…) and instead use css.insert() for all CSS overriding/building upon the stock docsearch.css – couldn’t figure out any advantages in using css.global over css.insert() * full-width result list items and calmer subcategory titles for small devices * „purpelize“ UI and replace a few more stock colors with equivalents from utils/presets * slightly wider result dropdown for desktop and above * remove result dropdown outer padding and fiddle with whitespace * debug:false
1 parent b352e42 commit b78b2bf

File tree

1 file changed

+213
-111
lines changed

1 file changed

+213
-111
lines changed

‎www/src/components/search-form.js‎

Lines changed: 213 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -6,120 +6,222 @@ import presets from "../utils/presets"
66

77
import { css } from "glamor"
88

9-
// Override default search result styles
10-
css.global(`.searchWrap .algolia-docsearch-suggestion--highlight`, {
11-
backgroundColor: `${presets.lightPurple} !important`,
12-
boxShadow: `inset 0 -2px 0 0 ${presets.lightPurple} !important`,
13-
color: `black`,
14-
fontWeight: `bold`,
15-
})
16-
css.global(`.searchWrap .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column`, {
17-
width: `100% !important`,
18-
})
19-
css.global(`.searchWrap .algolia-docsearch-suggestion--subcategory-column-text:after`, {
20-
display: `none`,
21-
})
22-
css.global(
23-
`.searchWrap .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content`,
24-
{ backgroundColor: `${presets.brandLighter} !important` }
25-
)
26-
css.global(
27-
`.searchWrap .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results`,
28-
{
29-
maxWidth: `100%`,
30-
paddingLeft: `0 !important`,
31-
width: `100% !important`,
32-
}
33-
)
34-
css.global(
35-
`.searchWrap .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results:before`,
36-
{ display: `none !important` }
37-
)
38-
css.global(`.searchWrap .algolia-autocomplete .ds-dropdown-menu`, {
39-
position: `fixed !important`,
40-
top: `${rhythm(2)} !important`,
41-
left: `${rhythm(0.5)} !important`,
42-
right: `${rhythm(0.5)} !important`,
43-
minWidth: `calc(100vw - ${rhythm(1)})`,
44-
maxWidth: `calc(100vw - 2rem)`,
45-
maxHeight: `calc(100vh - 5rem)`,
46-
display: `block`,
47-
})
48-
css.global(
49-
`.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu, .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu`,
50-
{
51-
left: `${rhythm(0.5)} !important`,
52-
right: `${rhythm(0.5)} !important`,
53-
}
54-
)
55-
css.global(
56-
`.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before`,
57-
{
58-
right: rhythm(5),
59-
}
60-
)
61-
css.global(
62-
`.searchWrap .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu::before`,
63-
{
64-
left: rhythm(7),
65-
}
66-
)
67-
68-
// use css.insert() for media query with global CSS
69-
css.insert(`@media ${presets.phablet}{
70-
.searchWrap .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
71-
font-weight: 400;
72-
width: 30% !important;
73-
text-align: right;
74-
opacity: 1;
75-
padding: ${rhythm(0.5)} ${rhythm(1)} ${rhythm(0.5)} 0;
76-
}
77-
.searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
78-
content: "";
79-
position: absolute;
80-
display: block !important;
81-
top: 0;
82-
height: 100%;
83-
width: 1px;
84-
background: #ddd;
85-
right: 0;
86-
}
87-
.searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
88-
display: none;
89-
}
90-
.searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--content {
91-
width: 70% !important;
92-
max-width: 70%;
93-
display: block;
94-
padding: ${rhythm(0.5)} 0 ${rhythm(0.5)} ${rhythm(1)} !important;
95-
}
96-
.searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--content:before {
97-
content: "";
98-
position: absolute;
99-
display: block !important;
100-
top: 0;
101-
height: 100%;
102-
width: 1px;
103-
background: #ddd;
104-
left: -1px;
105-
}
106-
}`)
107-
108-
css.insert(`@media ${presets.tablet}{
109-
.searchWrap .algolia-autocomplete .ds-dropdown-menu {
110-
top: 100% !important;
111-
position: absolute !important;
112-
max-width: 600px !important;
113-
min-width: 500px !important;
114-
}
115-
.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
116-
right: 0 !important;
117-
left: inherit !important;
9+
// Override default search result styles (docsearch.css)
10+
css.insert(`
11+
.algolia-autocomplete .ds-dropdown-menu {
12+
position: fixed !important;
13+
top: ${rhythm(2)} !important;
14+
left: ${rhythm(0.5)} !important;
15+
right: ${rhythm(0.5)} !important;
16+
min-width: calc(100vw - ${rhythm(1)}) !important;
17+
max-width: calc(100vw - 2rem) !important;
18+
max-height: calc(100vh - 5rem) !important;
19+
box-shadow: 0 3px 10px 0.05rem rgba(${presets.shadowColor}, .25) !important;
11820
}
21+
22+
/* .searchWrap to beat docsearch.css' !important */
23+
.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu,
24+
.searchWrap .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
25+
left: ${rhythm(0.5)} !important;
26+
right: ${rhythm(0.5)} !important;
27+
}
28+
29+
.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
30+
margin-top: 0 !important;
31+
}
32+
33+
.algolia-docsearch-suggestion--wrapper {
34+
padding-top: 0 !important;
35+
}
36+
37+
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
38+
color: ${presets.calm} !important;
39+
font-size: 0.9rem !important;
40+
font-weight: normal !important;
41+
padding: ${rhythm(0.25)} ${rhythm(0.5)} !important;
42+
}
43+
44+
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
45+
background: ${presets.veryLightPurple} !important;
46+
}
47+
48+
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
49+
display: none !important;
50+
}
51+
52+
.algolia-autocomplete .algolia-docsearch-suggestion {
53+
padding: 0 !important;
54+
}
55+
56+
.algolia-autocomplete .algolia-docsearch-suggestion--content {
57+
padding: ${rhythm(0.5)} !important;
58+
width: 100% !important;
59+
max-width: 100% !important;
60+
}
61+
62+
/* Caret */
63+
.algolia-autocomplete .ds-dropdown-menu::before {
64+
border-top-color: ${presets.lightPurple} !important;
65+
border-right-color: ${presets.lightPurple} !important;
66+
}
67+
68+
.algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
69+
padding: 0 !important;
70+
border-color: ${presets.lightPurple} !important;
71+
}
72+
73+
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
74+
background-color: ${presets.lightPurple} !important;
75+
box-shadow: 0 !important;
76+
color: ${presets.brand} !important;
77+
}
78+
79+
.algolia-autocomplete .algolia-docsearch-suggestion--text {
80+
color: ${presets.calm} !important;
81+
}
82+
83+
.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
84+
background: transparent !important;
85+
box-shadow: inset 0 -2px 0 0 ${presets.brand} !important;
86+
}
87+
88+
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
89+
width: 100% !important;
90+
}
91+
92+
.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
93+
background-color: ${presets.brandLighter} !important;
94+
}
95+
96+
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results {
97+
max-width: 100% !important;
98+
width: 100% !important;
99+
font-weight: normal !important;
100+
padding: ${rhythm(0.75)} ${rhythm(0.5)} !important;
101+
}
102+
103+
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--title {
104+
margin-bottom: 0 !important;
105+
}
106+
107+
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text {
108+
color: rgb(38, 32, 44) !important;
109+
font-weight: normal !important;
110+
}
111+
112+
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text:after {
113+
content: "😔";
114+
}
115+
116+
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
117+
padding: ${rhythm(0.25)} ${rhythm(0.5)} !important;
118+
margin-top: 0 !important;
119+
font-size: 0.9rem !important;
120+
border-color: ${presets.veryLightPurple} !important;
121+
color: ${presets.brand} !important;
122+
font-weight: bold !important;
123+
}
124+
119125
.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before {
120-
right: ${rhythm(2)};
126+
right: ${rhythm(4.75)} !important;
127+
}
128+
129+
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results:before {
130+
display: none !important;
131+
}
132+
133+
.algolia-autocomplete .algolia-docsearch-footer {
134+
width: 100% !important;
135+
height: 30px !important;
136+
margin-top: 0 !important;
137+
border-top: 1px dotted ${presets.veryLightPurple} !important;
138+
}
139+
140+
.algolia-autocomplete .algolia-docsearch-footer--logo {
141+
width: 110px !important;
142+
height: 100% !important;
143+
margin-left: auto !important;
144+
margin-right: ${rhythm(0.5)} !important;
145+
}
146+
147+
@media ${presets.phablet} {
148+
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
149+
color: inherit !important;
150+
font-weight: normal !important;
151+
}
152+
153+
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
154+
width: 30% !important;
155+
text-align: right !important;
156+
opacity: 1 !important;
157+
padding: ${rhythm(0.5)} ${rhythm(0.75)} !important;
158+
}
159+
160+
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
161+
padding: ${rhythm(0.5)} ${rhythm(0.75)} !important;
162+
}
163+
164+
.algolia-autocomplete .algolia-docsearch-suggestion--content {
165+
width: 70% !important;
166+
max-width: 70% !important;
167+
padding: ${rhythm(0.5)} ${rhythm(0.75)} !important;
168+
}
169+
170+
.algolia-autocomplete .algolia-docsearch-suggestion--content:before,
171+
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
172+
display: block !important;
173+
content: "" !important;
174+
position: absolute !important;
175+
top: 0 !important;
176+
height: 100% !important;
177+
width: 1px !important;
178+
background: ${presets.veryLightPurple} !important;
179+
}
180+
181+
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
182+
right: 0 !important;
183+
}
184+
185+
.algolia-autocomplete .algolia-docsearch-suggestion--content:before {
186+
left: -1px !important;
187+
}
188+
}
189+
190+
@media ${presets.tablet} {
191+
.algolia-autocomplete .ds-dropdown-menu {
192+
top: 100% !important;
193+
position: absolute !important;
194+
max-width: 600px !important;
195+
min-width: 500px !important;
196+
}
197+
198+
/* .searchWrap to beat docsearch.css' !important */
199+
.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
200+
right: 0 !important;
201+
left: inherit !important;
202+
}
203+
204+
.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before {
205+
right: ${rhythm(3)} !important;
206+
}
207+
}
208+
209+
@media ${presets.desktop} {
210+
.algolia-autocomplete .ds-dropdown-menu {
211+
max-width: 600px !important;
212+
min-width: 540px !important;
213+
}
214+
215+
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
216+
width: 35% !important;
217+
}
218+
219+
.algolia-autocomplete .algolia-docsearch-suggestion--content {
220+
width: 65% !important;
221+
max-width: 65% !important;
222+
}
121223
}
122-
}`)
224+
`)
123225

124226
class SearchForm extends Component {
125227
constructor() {

0 commit comments

Comments
 (0)