Skip to content

Commit

Permalink
docs(search): here and there CSS & JS issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shipow @redox
Shipow authored and redox committed Mar 7, 2016
1 parent 91856d8 commit e6c0b25
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 106 deletions.
20 changes: 16 additions & 4 deletions docs/_includes/searchbar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
</svg>

<form role="search" novalidate="novalidate" class="searchbox sbx-custom">
<input type="search" name="search" placeholder="Search in the documentation" autocomplete="off" required="required" class="sbx-custom__input">
<input onkeyup="updateReset()" type="search" name="search" placeholder="Search in the documentation" autocomplete="off" required="required" class="sbx-custom__input">
<button type="submit" class="sbx-custom__submit">
<svg role="img" aria-label="Search">
<title>Icon Search</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
</svg>
</button>
<button type="reset" class="sbx-custom__reset">
<button type="reset" class="sbx-custom__reset hide">
<svg role="img" aria-label="Reset">
<title>Icon Reset</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-2"></use>
Expand All @@ -27,8 +27,20 @@
<script type="text/javascript">
//<![CDATA[
document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {
this.parentNode.querySelector('input').focus();
document.querySelector('.aa-input').focus();
this.className += " hide";
});

function updateReset() {
var searchbox = document.querySelector('.aa-input');
var reset = document.querySelector('.searchbox [type="reset"]');
reset.className = "";
reset.className = "sbx-custom__reset";
if (searchbox.value.length === 0){
reset.className += " hide";
}
}


//]]>
</script>
</script>
7 changes: 5 additions & 2 deletions docs/_layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<link rel="icon" href="{{ "/img/favicon.png" | prepend: site.baseurl }}">

<!-- Fonts -->
<link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,800" />
<link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Raleway:300,600" />
<link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600" />

<link rel="stylesheet" media="screen" href="{{ "/css/main.css" | prepend: site.baseurl }}" />
Expand Down Expand Up @@ -65,7 +65,10 @@
docsearch({
apiKey: '25626fae796133dc1e734c6bcaaeac3c',
indexName: 'docsearch',
inputSelector: '.sbx-custom__input'
inputSelector: '.sbx-custom__input',
autocompleteOptions: {
debug: false
}
});
</script>

Expand Down
140 changes: 65 additions & 75 deletions docs/css/_docsearch.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
$color-border: #3A3A3A;
$color-border: #EEE;
$color-border-light: lighten($color-border, 15%);
$color-category-header-background: #3C4658;
$color-category-header-background: white;
$color-highlight-header-background: lighten($color-category-header-background, 15%);
$color-highlight-text: #0064E1;
$color-selected-background: #E7EDF3;
$color-selected-text: #0064E1;
$color-left-column-bg: #F1F3F5;
$color-left-column: #555;
$color-selected-background: rgba(#40ADDC,.07);
$color-selected-text: black;
$color-left-column-bg: white;
$color-left-column: #aaa;

$breakpoint-medium: 568px;
$breakpoint-large: 768px;
Expand Down Expand Up @@ -41,11 +41,13 @@ $dropdown-min-width-large: 600px;
// Main category headers
.algolia-docsearch-suggestion--category-header {
display: none;
background: $color-category-header-background;
color: white;
border-bottom: solid 1px #ccc;
color: #40ADDC;
font-weight: 600;
padding: 5px 10px;
padding: 5px 15px;
text-align: left;
font-size: 1.1em;
background-color: white;
// Only show it when flaggued as "__main"
.algolia-docsearch-suggestion__main & {
display: block;
Expand All @@ -55,9 +57,9 @@ $dropdown-min-width-large: 600px;
// Highlight
.algolia-docsearch-suggestion--highlight {
padding: 0;
color: $color-highlight-text;
background: none;
font-weight: 600;
color: #40ADDC;
padding: 0 2px;
background: rgba(#40ADDC,.1);
// Highlight the background in header
.algolia-docsearch-suggestion--category-header & {
color: inherit;
Expand Down Expand Up @@ -86,27 +88,26 @@ $dropdown-min-width-large: 600px;
.algolia-docsearch-suggestion--content {
padding: 3px 5px;
width: 100%;
border-top: 1px solid lighten($color-border, 60%);
}

.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--content,
.algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--content {
border-top: 0;
}

.algolia-docsearch-suggestion--subcategory-inline {
display: inline-block;
font-weight: bold;
font-weight: 400;
&:after {
content: " › ";
}
}
.algolia-docsearch-suggestion--title {
display: inline;
font-weight: 600;
}

// Footer

.algolia-docsearch-footer {
border-top: 1px solid $color-border-light;
text-align: right;
Expand All @@ -128,70 +129,59 @@ $dropdown-min-width-large: 600px;
}
}

// BREAKPOINT 1:
// Screen is big enough to display the text snippets
@media (min-width: $breakpoint-medium) {
.aa-dropdown-menu {
min-width: $dropdown-min-width-medium;
}
.algolia-docsearch-suggestion--text {
display: block;
font-size: .9em;
padding: 2px 0;
}
.aa-dropdown-menu {
min-width: $dropdown-min-width-large;
}
.algolia-docsearch-suggestion {
display: table;
width: 100%;
}

// BREAKPOINT 2:
// Screen is big enough to display results in two columns
@media (min-width: $breakpoint-large) {
.aa-dropdown-menu {
min-width: $dropdown-min-width-large;
}
.algolia-docsearch-suggestion {
display: table;
width: 100%;
}

.algolia-docsearch-suggestion__secondary {
border-top: 1px solid $color-border-light;
}
.algolia-docsearch-suggestion__secondary {
border-top: 1px solid $color-border-light;
}

.algolia-docsearch-suggestion--subcategory-column {
border-right: 1px solid $color-border-light;
background: $color-left-column-bg;
color: $color-left-column;
display: table-cell;
overflow: hidden;
padding: 5px 7px 5px 5px;
text-align: right;
text-overflow: ellipsis;
vertical-align: top;

width: 135px; // Hardcoded
max-width: 135px; // Hardcoded
min-width: 135px; // Hardcoded
}
.algolia-docsearch-suggestion--subcategory-column {
border-right: 1px solid $color-border-light;
background: transparent;
color: #999;
display: table-cell;
overflow: hidden;
padding: 5px 7px 5px 10px;
text-align: left;
font-size: 0.9em;
font-family: "Open Sans";
text-overflow: ellipsis;
vertical-align: top;
border-right: 1px solid #ccc;

width: 160px; // Hardcoded
max-width: 160px; // Hardcoded
min-width: 160px; // Hardcoded
}

.algolia-docsearch-suggestion--subcategory-column-text {
display: none;
.algolia-docsearch-suggestion--subcategory-column-text {
display: none;

.algolia-docsearch-suggestion__secondary & {
display: block;
}
}
.algolia-docsearch-suggestion--content {
display: table-cell;
padding: 5px 10px;
}
.algolia-docsearch-suggestion--subcategory-inline {
display: none;
}
.algolia-docsearch-suggestion--title {
font-weight: 600;
}
.algolia-docsearch-suggestion--text {
.algolia-docsearch-suggestion__secondary & {
display: block;
font-weight: normal;
padding: 2px;
}
}
.algolia-docsearch-suggestion--content {
display: table-cell;
padding: 5px 10px;
}
.algolia-docsearch-suggestion--subcategory-inline {
display: none;
}
.algolia-docsearch-suggestion--text {
display: block;
font-weight: 400;
font-family: "Open Sans";
font-size: .8em;
padding: 2px;
}

.algolia-docsearch-suggestion--wrapper {
margin: 10px;
}
41 changes: 21 additions & 20 deletions docs/css/_searchbar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
$custom:(
input-width: 240px,
input-height: 36px,
border-width: 2px,
border-radius: 18px,
input-border-color: #1D96C7,
input-focus-border-color: #1D96C7,
input-background: #091724,
input-focus-background: #091724,
font-size: 13px,
placeholder-color: #AAAAAA,
icon: sbx-icon-search-13,
icon-size: 16px,
icon-position: left,
icon-color: #1D96C7,
icon-background: #FFFFFF,
icon-background-opacity: 0,
icon-clear: sbx-icon-clear-2,
icon-clear-size: 12px
input-width: 240px,
input-height: 36px,
border-width: 2px,
border-radius: 18px,
input-border-color: darken(#1D96C7,10%),
input-focus-border-color: #1D96C7,
input-background: #091724,
input-focus-background: #091724,
font-size: 13px,
placeholder-color: #AAAAAA,
icon-size: 16px,
icon-position: left,
icon-color: #1D96C7,
icon-background: #FFFFFF,
icon-background-opacity: 0,
icon-clear-size: 12px
);

@mixin searchbox(
Expand Down Expand Up @@ -130,7 +128,6 @@ $custom:(
}

&__reset {
display: none;
position: absolute;
top: ($input-height - $icon-clear-size) / 2 - 4px;
right: if($icon-position == 'right', 8px + $input-height, ($input-height - $icon-clear-size) / 2) - 4px;
Expand All @@ -140,7 +137,10 @@ $custom:(
cursor: pointer;
padding: 0;
user-select: none;
fill: rgba(#000, .5);

&.hide{
display: none;
}

&:focus {
outline: 0;
Expand All @@ -151,6 +151,7 @@ $custom:(
margin: 4px;
width: $icon-clear-size;
height: $icon-clear-size;
fill: $icon-color;
}
}

Expand Down
12 changes: 7 additions & 5 deletions docs/documentation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,10 @@ need to add the following code snippet to your website:
docsearch({
apiKey: '<API_KEY>',
indexName: '<INDEX_NAME>',
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>'
inputSelector: '<YOUR_INPUT_DOM_SELECTOR>',
autocompleteOptions: {
debug: false
}
});
</script>
```
Expand Down Expand Up @@ -93,7 +96,7 @@ If you want to do heavily change the way results are displayed, you might find
it easier to directly edit the `scss` files in this repository.

[`_variables.scss`][18]
contains all the color, breakpoints and size definitions while
contains all the color, breakpoints and size definitions while
[`_main.scss`][19]
holds the structure of the display.

Expand All @@ -113,7 +116,7 @@ results from the Algolia API. As such, you can use any options provided by

You can pass any options to the underlying `autocomplete` instance through
the`autocompleteOptions` parameter. You will find all `autocomplete` options in
its [own documentation][22].
its [own documentation][22].

You can also listen to `autocomplete` events through the `.autocomplete`
property of the `docsearch` instance.
Expand Down Expand Up @@ -175,7 +178,7 @@ You will find all Algolia API options in its [own documentation][23]
[16]: https://community.algolia.com/docsearch/
[17]: https://community.algolia.com/docsearch/img/default-colorscheme.png
[18]: https://github.com/algolia/docsearch/blob/master/src/styles/_variables.scss
[19]: https://github.com/algolia/docsearch/blob/master/src/styles/_main.scss
[19]: https://github.com/algolia/docsearch/blob/master/src/styles/main.scss
[20]: https://github.com/algolia/autocomplete.js
[21]: https://github.com/algolia/autocomplete.js
[22]: https://github.com/algolia/autocomplete.js#options
Expand All @@ -184,4 +187,3 @@ You will find all Algolia API options in its [own documentation][23]
[25]: https://jekyllrb.com/
[26]: https://www.ruby-lang.org/en/
[27]: http://bundler.io/

0 comments on commit e6c0b25

Please sign in to comment.