Add styling up to small screen
This commit is contained in:
Pixelastic
parent
beb3f15040
commit
4ed73b19b3
5 changed files with 155 additions and 96 deletions
|
|
@ -1,7 +1,9 @@
|
|||
import docSearch from '../index.js';
|
||||
|
||||
docSearch({
|
||||
apiKey: '14d0acfb8112462711980dd2a5e5c43d',
|
||||
indexName: 'stripe-dev',
|
||||
apiKey: '52a6d7ab710fcef44537c3cff5290e55',
|
||||
indexName: 'tim_stripe',
|
||||
inputSelector: '#search-input'
|
||||
});
|
||||
|
||||
document.getElementById('search-input').focus();
|
||||
|
|
|
|||
|
|
@ -98,15 +98,24 @@ class DocSearch {
|
|||
// Translate hits into smaller objects to be send to the template
|
||||
return groupedHits.map((hit) => {
|
||||
let url = hit.anchor ? `${hit.url}#${hit.anchor}` : hit.url;
|
||||
let displayTitle = utils.compact([hit.lvl2, hit.lvl3, hit.lvl4, hit.lvl5, hit.lvl6]).join(' › ');
|
||||
let category = this.getHighlightedValue(hit, 'lvl0');
|
||||
let subcategory = this.getHighlightedValue(hit, 'lvl1') || category;
|
||||
let displayTitle = utils.compact([
|
||||
this.getHighlightedValue(hit, 'lvl2') || subcategory,
|
||||
this.getHighlightedValue(hit, 'lvl3'),
|
||||
this.getHighlightedValue(hit, 'lvl4'),
|
||||
this.getHighlightedValue(hit, 'lvl5'),
|
||||
this.getHighlightedValue(hit, 'lvl6')
|
||||
]).join(' › ');
|
||||
let text = this.getSnippettedValue(hit, 'content');
|
||||
|
||||
return {
|
||||
isCategoryHeader: hit.isCategoryHeader,
|
||||
isSubcategoryHeader: hit.isSubcategoryHeader,
|
||||
category: this.getHighlightedValue(hit, 'lvl0'),
|
||||
subcategory: this.getHighlightedValue(hit, 'lvl1'),
|
||||
category: category,
|
||||
subcategory: subcategory,
|
||||
title: displayTitle,
|
||||
text: hit.content,
|
||||
text: text,
|
||||
url: url
|
||||
};
|
||||
});
|
||||
|
|
@ -117,6 +126,20 @@ class DocSearch {
|
|||
return highlight ? highlight.value : object[key];
|
||||
}
|
||||
|
||||
getSnippettedValue(object, key) {
|
||||
if (!object._snippetResult || !object._snippetResult[key].value) {
|
||||
return object[key];
|
||||
}
|
||||
let snippet = object._snippetResult[key].value;
|
||||
if (snippet[0] !== snippet[0].toUpperCase()) {
|
||||
snippet = `…${snippet}`;
|
||||
}
|
||||
if (['.', '!', '?'].indexOf(snippet[snippet.length - 1]) === -1) {
|
||||
snippet = `${snippet}…`;
|
||||
}
|
||||
return snippet;
|
||||
}
|
||||
|
||||
getSuggestionTemplate() {
|
||||
const template = Hogan.compile(templates.suggestion);
|
||||
return (suggestion) => {
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ let templates = {
|
|||
<div class="${prefix} {{#isCategoryHeader}}${prefix}__main{{/isCategoryHeader}} {{#isSubcategoryHeader}}${prefix}__secondary{{/isSubcategoryHeader}}">
|
||||
<div class="${prefix}--category-header">{{{category}}}</div>
|
||||
<div class="${prefix}--wrapper">
|
||||
<div class="${prefix}--subcategory">{{{subcategory}}}</div>
|
||||
<div class="${prefix}--subcategory-column">{{{subcategory}}}</div>
|
||||
<div class="${prefix}--content">
|
||||
<div class="${prefix}--subcategory">{{{subcategory}}}</div>
|
||||
<div class="${prefix}--subcategory-inline">{{{subcategory}}}</div>
|
||||
<div class="${prefix}--title">{{{title}}}</div>
|
||||
<div class="${prefix}--text">{{{text}}}</div>
|
||||
</div>
|
||||
|
|
|
|||
3
src/styles/_variables.scss
Normal file
3
src/styles/_variables.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
$color1: #4B54DE;
|
||||
$color2: #4D47D5;
|
||||
$color3: #3A33D1;
|
||||
|
|
@ -1,95 +1,126 @@
|
|||
// /* Main autocomplete wrapper */
|
||||
// .eslint-nav .algolia-autocomplete {
|
||||
// width: 100%;
|
||||
// }
|
||||
// .eslint-nav .aa-dropdown-menu {
|
||||
// background-color: #FFF;
|
||||
// border: 1px solid #333;
|
||||
// border-radius: 4px;
|
||||
// font-size: 16px;
|
||||
// margin: 6px 0 0;
|
||||
// padding: 4px;
|
||||
// text-align: left;
|
||||
// left: -20px !important;
|
||||
// right: -20px !important;
|
||||
// }
|
||||
@import "variables";
|
||||
$color-border: #3A33D1;
|
||||
$color-category-header: #4B54DE;
|
||||
$color-highlight-header: #4D47D5;
|
||||
$color-highlight: #3A33D1;
|
||||
$color-selected-text: #272296;
|
||||
$color-selected-background: #EBEBFB;
|
||||
$breakpoint-small: 568px;
|
||||
|
||||
|
||||
// Need to add to the readme something along the lines of:
|
||||
//
|
||||
// The dropdown adapts to screen size. It more or less follows the breakpoints
|
||||
// of Bootstrap (need to list them). The code is written mobile-first. The
|
||||
// larger the screen size, the more rules we add to overwrite the previous one,
|
||||
// moving from one to two column.
|
||||
//
|
||||
// It is expected that the page layout also follow those breakpoints. The
|
||||
// breakpoints are defined as variables in the SCSS, so one can update them.
|
||||
|
||||
// Main autocomplete wrapper
|
||||
.aa-dropdown-menu {
|
||||
background-color: #FFF;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
margin: 6px 0 0;
|
||||
padding: 4px;
|
||||
text-align: left;
|
||||
left: -20px !important; // Hardcoded
|
||||
right: -320px !important; // Hardcoded
|
||||
}
|
||||
|
||||
// Each suggestion
|
||||
.ads-suggestion {
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid $color-border;
|
||||
}
|
||||
|
||||
// Main category headers
|
||||
.ads-suggestion--category-header {
|
||||
display: none;
|
||||
background-color: $color-category-header;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
padding: 5px 10px;
|
||||
text-align: left;
|
||||
// Only show it when flaggued as "__main"
|
||||
.ads-suggestion__main & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Highlight
|
||||
.ads-suggestion--highlight {
|
||||
padding: 0;
|
||||
color: $color-highlight;
|
||||
background: none;
|
||||
font-weight: 600;
|
||||
// Highlight the background in header
|
||||
.ads-suggestion--category-header & {
|
||||
color: inherit;
|
||||
background-color: $color-highlight-header;
|
||||
}
|
||||
}
|
||||
|
||||
// Selected suggestion
|
||||
.aa-cursor .ads-suggestion--content {
|
||||
color: $color-selected-text;
|
||||
}
|
||||
.aa-cursor .ads-suggestion {
|
||||
background: $color-selected-background;
|
||||
}
|
||||
|
||||
// The secondary column is hidden on small screens
|
||||
.ads-suggestion--subcategory-column {
|
||||
display: none;
|
||||
}
|
||||
// The text snippet is hidden on small screens
|
||||
.ads-suggestion--text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ads-suggestion--content {
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.ads-suggestion--subcategory-inline {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
&:after {
|
||||
content: " › ";
|
||||
}
|
||||
}
|
||||
.ads-suggestion--title {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// BREAKPOINT 1:
|
||||
// Screen is big enough to display the text snippets
|
||||
@media (min-width: $breakpoint-small) {
|
||||
.ads-suggestion--text {
|
||||
display: block;
|
||||
font-size: .9em;
|
||||
padding: 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// /* Category headers */
|
||||
// .eslint-nav .suggestion-category {
|
||||
// background-color: #4B54DE;
|
||||
// color: white;
|
||||
// font-weight: 600;
|
||||
// padding: 5px 10px;
|
||||
// text-align: left;
|
||||
// }
|
||||
// .eslint-nav .suggestion-category mark {
|
||||
// background-color: #4D47D5;
|
||||
// color: white;
|
||||
// padding: 0;
|
||||
// }
|
||||
//
|
||||
// /* Suggestion */
|
||||
// .eslint-nav .suggestion {
|
||||
// color: #333;
|
||||
// cursor: pointer;
|
||||
// overflow: hidden;
|
||||
// border-bottom: 1px solid #3A33D1;
|
||||
// }
|
||||
// .eslint-nav .aa-suggestion:last-child .suggestion {
|
||||
// border-bottom-color: transparent;
|
||||
// }
|
||||
// .eslint-nav .suggestion mark {
|
||||
// padding: 0;
|
||||
// color: #3A33D1;
|
||||
// background: none;
|
||||
// font-weight: 600;
|
||||
// }
|
||||
// .eslint-nav .suggestion-subcategory-secondary {
|
||||
// display: inline-block;
|
||||
// font-weight: bold;
|
||||
// }
|
||||
// .eslint-nav .suggestion-subcategory-secondary:after {
|
||||
// content: " › ";
|
||||
// }
|
||||
// .eslint-nav .suggestion-title {
|
||||
// display: inline;
|
||||
// }
|
||||
// .eslint-nav .suggestion-content {
|
||||
// padding: 3px 5px;
|
||||
// }
|
||||
// /* Hidden elements for this viewport */
|
||||
// .eslint-nav .suggestion-subcategory-main,
|
||||
// .eslint-nav .suggestion-text {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// /* Selected suggestion */
|
||||
// .eslint-nav .aa-cursor .suggestion-content,
|
||||
// .eslint-nav .aa-cursor .suggestion-content code,
|
||||
// .eslint-nav .aa-cursor .suggestion-content mark {
|
||||
// color: #272296;
|
||||
// }
|
||||
// .eslint-nav .aa-cursor .suggestion {
|
||||
// background: #EBEBFB;
|
||||
// }
|
||||
//
|
||||
// /* Screen big enough to display the text snippets */
|
||||
// @media (min-width: 568px) {
|
||||
// .eslint-nav .suggestion-text {
|
||||
// display: block;
|
||||
// font-size: .9em;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// /* Screen big enough to display results in two columns */
|
||||
// @media (min-width: 768px) {
|
||||
// /* Use table display for the two columns */
|
||||
// .eslint-nav .suggestion {
|
||||
// .suggestion {
|
||||
// display: table;
|
||||
// width: 100%;
|
||||
// border-bottom: 1px solid #9D99E8;
|
||||
// }
|
||||
// .eslint-nav .suggestion-subcategory-main {
|
||||
// .suggestion-subcategory-main {
|
||||
// border-right: 1px solid #9D99E8;
|
||||
// background: #F2F2FF;
|
||||
// color: #4E4726;
|
||||
|
|
@ -103,17 +134,17 @@
|
|||
// vertical-align: top;
|
||||
// width: 135px;
|
||||
// }
|
||||
// .eslint-nav .suggestion-content {
|
||||
// .suggestion-content {
|
||||
// display: table-cell;
|
||||
// padding: 5px 10px;
|
||||
// }
|
||||
// .eslint-nav .suggestion-subcategory-secondary {
|
||||
// .suggestion-subcategory-secondary {
|
||||
// display: none;
|
||||
// }
|
||||
// .eslint-nav .suggestion-title {
|
||||
// .suggestion-title {
|
||||
// font-weight: 600;
|
||||
// }
|
||||
// .eslint-nav .suggestion-text {
|
||||
// .suggestion-text {
|
||||
// display: block;
|
||||
// font-weight: normal;
|
||||
// padding: 2px;
|
||||
|
|
@ -122,7 +153,7 @@
|
|||
//
|
||||
// /* Enough room to display the autocomplete in the header directly */
|
||||
// @media (min-width: 996px) {
|
||||
// .eslint-nav .aa-dropdown-menu {
|
||||
// .aa-dropdown-menu {
|
||||
// left: -30px !important;
|
||||
// right: -270px !important;
|
||||
// }
|
||||
|
|
|
|||
Loading…
Reference in a new issue