Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

added all docsearch styles

pull/19/head
Scott Anderson 2019-01-19 16:10:22 -07:00
parent 117a18d387
commit 1ef90c19e1
6 changed files with 162 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/js/search-interactions.js Normal file
View File

@ -0,0 +1,8 @@
$('#algolia-search-input').focus(function() {
$('.article--content').fadeTo(400, .25);
})
$('#algolia-search-input').blur(function() {
$('.article--content').fadeTo(200, 1);
$('.ds-dropdown-menu').hide();
})

135
assets/styles/layouts/_algolia-search-overrides.scss Normal file
View File

@ -0,0 +1,135 @@
.algolia-autocomplete {
width: 100%;
/* Main dropdown wrapper */
.ds-dropdown-menu {
width: 74vw;
max-width: 800px;
background: $article-bg;
[class^=ds-dataset-] {
background-color: $article-bg;
border: none;
box-shadow: 2px 2px 10px $sidebar-search-shadow;
transition: background-color .2s;
}
&:before {
display: none;
}
.ds-suggestions {
padding: 2rem;
}
}
/* Main category (eg. Getting Started) */
.algolia-docsearch-suggestion {
background: $article-bg;
&--category-header {
color: $article-heading;
border-color: $article-hr;
text-decoration: none;
&-lvl0{
font-size: 1.5rem;
font-weight: bold !important;
padding-bottom: 1rem;
}
}
/* Category (eg. Downloads) */
&--subcategory-column {
color: rgba($article-text, .5) !important;
&:before { background: $article-hr; }
}
/* Title (eg. Bootstrap CDN) */
&--title {
font-weight: bold;
color: $article-heading;
}
/* Description description (eg. Bootstrap currently works...) */
&--text {
font-size: 0.8rem;
color: $article-text;
}
/* Highlighted text */
&--highlight {
color: $article-link;
}
&--content {
&:before { background: $article-hr; }
}
}
}
//////////////////////////////// HARD OVERRIDES ////////////////////////////////
.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
.algolia-docsearch-suggestion--category-header,
.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary {
text-decoration: none;
}
.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main
.algolia-docsearch-suggestion--category-header {
padding-bottom: .75rem;
margin-bottom: .5rem;
}
.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
left: 24vw !important;
top: -.45rem !important;
}
.ds-suggestion:not(:first-child) {
.algolia-docsearch-suggestion--category-header{
margin-top: 1.5rem;
}
}
////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
@media (min-width: 801px) and (max-width: 1200px) {
.algolia-autocomplete .ds-dropdown-menu {
max-width: 70vw;
}
.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
left: 28.5vw !important;
top: -.45rem !important;
}
}
@include media(medium) {
.algolia-autocomplete .ds-dropdown-menu {
max-width: 100vw;
width: 100vw;
min-width: 0;
}
.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
left: -1rem !important;
top: 112% !important;
}
.algolia-autocomplete .algolia-docsearch-suggestion {
.algolia-docsearch-suggestion--subcategory-column,
.algolia-docsearch-suggestion--content {
display: block;
margin: 2px 0;
float: none;
&:after { content: ""; }
}
}
}
@include media(small) {
.algolia-autocomplete .ds-dropdown-menu {
width: 100vw;
}
.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
padding: .5rem;
}
}

3
assets/styles/styles-default.scss
View File

@ -17,4 +17,5 @@
"layouts/layout-content-wrapper",
"layouts/layout-article",
"layouts/syntax-highlighting",
"layouts/layout-error-page";
"layouts/layout-error-page",
"layouts/algolia-search-overrides";

12
layouts/partials/footer.html
View File

@ -1,3 +1,15 @@
<!-- Docsearch JS -->
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script>
docsearch({
apiKey: '25626fae796133dc1e734c6bcaaeac3c',
indexName: 'docsearch',
inputSelector: '#algolia-search-input',
// Set debug to true if you want to inspect the dropdown
debug: true
});
</script>
</body>
{{ partial "footer/javascript.html" }}
</html>

3
layouts/partials/footer/javascript.html
View File

@ -1,5 +1,6 @@
{{ $versionSelector := resources.Get "js/version-selector.js" }}
{{ $contentInteractions := resources.Get "js/content-interactions.js" }}
{{ $footerjs := slice $versionSelector $contentInteractions | resources.Concat "js/footer.bundle.js" }}
{{ $searchInteractions := resources.Get "js/search-interactions.js" }}
{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions | resources.Concat "js/footer.bundle.js" }}
<script type="text/javascript" src="{{ $footerjs.RelPermalink }}" ></script>

3
layouts/partials/header/stylesheets.html
View File

@ -1,3 +1,6 @@
<!-- Docsearch Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"/>
{{ $cssOptionsDark := (dict "targetPath" "dark-theme.css" "outputStyle" "compressed" "enableSourceMap" true) }}
{{ $cssOptionsLight := (dict "targetPath" "light-theme.css" "outputStyle" "compressed" "enableSourceMap" true) }}
{{ $cssSidebarOpen := (dict "targetPath" "sidebar-open.css" "outputStyle" "compressed" "enableSourceMap" true) }}