Skip to content

Commit

Permalink
[www] Improve docsearch UI for small devices (#3597)
Browse files Browse the repository at this point in the history 
* [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
  • Loading branch information
@fk @calcsam
fk authored and calcsam committed Jan 19, 2018
1 parent a2af45f commit 7572e0d
Showing 1 changed file with 213 additions and 111 deletions.
324 changes: 213 additions & 111 deletions www/src/components/search-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,120 +6,222 @@ import presets from "../utils/presets"

import { css } from "glamor"

// Override default search result styles
css.global(`.searchWrap .algolia-docsearch-suggestion--highlight`, {
backgroundColor: `${presets.lightPurple} !important`,
boxShadow: `inset 0 -2px 0 0 ${presets.lightPurple} !important`,
color: `black`,
fontWeight: `bold`,
})
css.global(`.searchWrap .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column`, {
width: `100% !important`,
})
css.global(`.searchWrap .algolia-docsearch-suggestion--subcategory-column-text:after`, {
display: `none`,
})
css.global(
`.searchWrap .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content`,
{ backgroundColor: `${presets.brandLighter} !important` }
)
css.global(
`.searchWrap .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results`,
{
maxWidth: `100%`,
paddingLeft: `0 !important`,
width: `100% !important`,
}
)
css.global(
`.searchWrap .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results:before`,
{ display: `none !important` }
)
css.global(`.searchWrap .algolia-autocomplete .ds-dropdown-menu`, {
position: `fixed !important`,
top: `${rhythm(2)} !important`,
left: `${rhythm(0.5)} !important`,
right: `${rhythm(0.5)} !important`,
minWidth: `calc(100vw - ${rhythm(1)})`,
maxWidth: `calc(100vw - 2rem)`,
maxHeight: `calc(100vh - 5rem)`,
display: `block`,
})
css.global(
`.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu, .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu`,
{
left: `${rhythm(0.5)} !important`,
right: `${rhythm(0.5)} !important`,
}
)
css.global(
`.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before`,
{
right: rhythm(5),
}
)
css.global(
`.searchWrap .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu::before`,
{
left: rhythm(7),
}
)

// use css.insert() for media query with global CSS
css.insert(`@media ${presets.phablet}{
.searchWrap .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
font-weight: 400;
width: 30% !important;
text-align: right;
opacity: 1;
padding: ${rhythm(0.5)} ${rhythm(1)} ${rhythm(0.5)} 0;
}
.searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
content: "";
position: absolute;
display: block !important;
top: 0;
height: 100%;
width: 1px;
background: #ddd;
right: 0;
}
.searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
display: none;
}
.searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--content {
width: 70% !important;
max-width: 70%;
display: block;
padding: ${rhythm(0.5)} 0 ${rhythm(0.5)} ${rhythm(1)} !important;
}
.searchWrap .algolia-autocomplete .algolia-docsearch-suggestion--content:before {
content: "";
position: absolute;
display: block !important;
top: 0;
height: 100%;
width: 1px;
background: #ddd;
left: -1px;
}
}`)

css.insert(`@media ${presets.tablet}{
.searchWrap .algolia-autocomplete .ds-dropdown-menu {
top: 100% !important;
position: absolute !important;
max-width: 600px !important;
min-width: 500px !important;
}
.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
right: 0 !important;
left: inherit !important;
// Override default search result styles (docsearch.css)
css.insert(`
.algolia-autocomplete .ds-dropdown-menu {
position: fixed !important;
top: ${rhythm(2)} !important;
left: ${rhythm(0.5)} !important;
right: ${rhythm(0.5)} !important;
min-width: calc(100vw - ${rhythm(1)}) !important;
max-width: calc(100vw - 2rem) !important;
max-height: calc(100vh - 5rem) !important;
box-shadow: 0 3px 10px 0.05rem rgba(${presets.shadowColor}, .25) !important;
}
/* .searchWrap to beat docsearch.css' !important */
.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu,
.searchWrap .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
left: ${rhythm(0.5)} !important;
right: ${rhythm(0.5)} !important;
}
.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
margin-top: 0 !important;
}
.algolia-docsearch-suggestion--wrapper {
padding-top: 0 !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
color: ${presets.calm} !important;
font-size: 0.9rem !important;
font-weight: normal !important;
padding: ${rhythm(0.25)} ${rhythm(0.5)} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
background: ${presets.veryLightPurple} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
display: none !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion {
padding: 0 !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--content {
padding: ${rhythm(0.5)} !important;
width: 100% !important;
max-width: 100% !important;
}
/* Caret */
.algolia-autocomplete .ds-dropdown-menu::before {
border-top-color: ${presets.lightPurple} !important;
border-right-color: ${presets.lightPurple} !important;
}
.algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
padding: 0 !important;
border-color: ${presets.lightPurple} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
background-color: ${presets.lightPurple} !important;
box-shadow: 0 !important;
color: ${presets.brand} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--text {
color: ${presets.calm} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
background: transparent !important;
box-shadow: inset 0 -2px 0 0 ${presets.brand} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
width: 100% !important;
}
.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
background-color: ${presets.brandLighter} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results {
max-width: 100% !important;
width: 100% !important;
font-weight: normal !important;
padding: ${rhythm(0.75)} ${rhythm(0.5)} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--title {
margin-bottom: 0 !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text {
color: rgb(38, 32, 44) !important;
font-weight: normal !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text:after {
content: "😔";
}
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
padding: ${rhythm(0.25)} ${rhythm(0.5)} !important;
margin-top: 0 !important;
font-size: 0.9rem !important;
border-color: ${presets.veryLightPurple} !important;
color: ${presets.brand} !important;
font-weight: bold !important;
}
.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before {
right: ${rhythm(2)};
right: ${rhythm(4.75)} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results:before {
display: none !important;
}
.algolia-autocomplete .algolia-docsearch-footer {
width: 100% !important;
height: 30px !important;
margin-top: 0 !important;
border-top: 1px dotted ${presets.veryLightPurple} !important;
}
.algolia-autocomplete .algolia-docsearch-footer--logo {
width: 110px !important;
height: 100% !important;
margin-left: auto !important;
margin-right: ${rhythm(0.5)} !important;
}
@media ${presets.phablet} {
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
color: inherit !important;
font-weight: normal !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
width: 30% !important;
text-align: right !important;
opacity: 1 !important;
padding: ${rhythm(0.5)} ${rhythm(0.75)} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
padding: ${rhythm(0.5)} ${rhythm(0.75)} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--content {
width: 70% !important;
max-width: 70% !important;
padding: ${rhythm(0.5)} ${rhythm(0.75)} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--content:before,
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
display: block !important;
content: "" !important;
position: absolute !important;
top: 0 !important;
height: 100% !important;
width: 1px !important;
background: ${presets.veryLightPurple} !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:after {
right: 0 !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--content:before {
left: -1px !important;
}
}
@media ${presets.tablet} {
.algolia-autocomplete .ds-dropdown-menu {
top: 100% !important;
position: absolute !important;
max-width: 600px !important;
min-width: 500px !important;
}
/* .searchWrap to beat docsearch.css' !important */
.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
right: 0 !important;
left: inherit !important;
}
.searchWrap .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before {
right: ${rhythm(3)} !important;
}
}
@media ${presets.desktop} {
.algolia-autocomplete .ds-dropdown-menu {
max-width: 600px !important;
min-width: 540px !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
width: 35% !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion--content {
width: 65% !important;
max-width: 65% !important;
}
}
}`)
`)

class SearchForm extends Component {
constructor() {
Expand Down

0 comments on commit 7572e0d

Please sign in to comment.