Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(search): proposal for a new search experience using DocSearch 📄 #2377

Closed
wants to merge 1 commit into from
Closed

docs(search): proposal for a new search experience using DocSearch 📄 #2377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/_includes/_head-include.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesh
link(rel="stylesheet" href="/resources/css/vendor/icomoon/style.css")
link(rel="stylesheet" href="/resources/css/vendor/animate.css")
link(rel="stylesheet" href="/resources/css/main.css")
link(rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css")

<!-- MOBILE ICONS -->
<link rel="apple-touch-icon" sizes="57x57" href="/resources/images/favicons/apple-touch-icon-57x57.png">
Expand Down
16 changes: 9 additions & 7 deletions public/_includes/_scripts-include.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ script(src="/resources/js/directives/if-docs.js")
script(src="/resources/js/directives/live-example.js")
script(src="/resources/js/directives/ngio-ex-path.js")
script(src="/resources/js/directives/scroll-y-offset-element.js")
script(src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js")

<!-- GA -->
script.
Expand All @@ -50,14 +51,15 @@ script.


if current.path[0] == "docs"
<!-- SWIFTYPE -->
<!-- DOCSEARCH -->
script.
(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
})(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st');

_st('install','VsuU7kH5Hnnj9tfyNvfK');
docsearch({
apiKey: '4d0c7e9f3bc6a55d33a7c3a683a841f8',
indexName: 'angular',
inputSelector: '#docsearch',
algoliaOptions: {facetFilters: ['language:#{current.path[1]}'] },
debug: false // Set to true if you want to inspect the dropdown
});

<!-- Google Feedback -->
script(src="//www.gstatic.com/feedback/api.js" type="text/javascript")
Expand Down
4 changes: 2 additions & 2 deletions public/docs/_includes/_side-nav.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ nav(class="sidenav l-pinned-left l-layer-4 l-offset-nav" ng-class="appCtrl.show
// SEARCH BAR
header.sidenav-search.st-input-wrapper
form.st-input-inner
label(for="search-io" class="is-hidden") Search Docs
input(type="search" id="search-io" placeholder="SEARCH DOCS...")
label(for="docsearch" class="is-hidden") Search Docs
input(type="search" id="docsearch" placeholder="SEARCH DOCS...")
button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>

ul(class="sidenav-links")
Expand Down
45 changes: 42 additions & 3 deletions public/resources/css/module/_side-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ $sidenav-width: 240px;
#{$sidenav} {
background: $sidenav-background;
box-shadow: 3px 0px 6px rgba($black, .24);
padding-bottom: 72px;
padding-top: 104px; // 48px (searchbar) + 56px (header)
padding-bottom: 72px; // nav footer fixed button
width: $sidenav-width;
bottom: 0px;
overflow: auto;
Expand All @@ -38,6 +39,7 @@ $sidenav-width: 240px;
right: 0;
bottom: auto;
padding-bottom: 0;
padding-top: 56px;

#{$sidenav}-links {
display: none;
Expand Down Expand Up @@ -69,12 +71,15 @@ $sidenav-width: 240px;
box-shadow: none;
padding: $unit;
height: $unit * 6;
position: relative;
position: fixed;
width: $sidenav-width;
z-index: $layer-10;
top: 56px;

@include respond-to('mobile') {
border-bottom: none;
padding-right: $unit * 14;
overflow: hidden;
width: 100%;
}

input {
Expand Down Expand Up @@ -106,6 +111,40 @@ $sidenav-width: 240px;
color: $blue-grey-100;
font-size: 12px;
}
&:focus {
outline: 0
}
}

.algolia-autocomplete {
width: 100%;

&.algolia-autocomplete-left {
// DROPDOWN MENU ON THE RIGHT ON DESKTOP
.ds-dropdown-menu {
top: -7px !important;
left: calc(100% + 10px) !important;

&::before { // arrow
transform: rotate(-135deg);
left: -6px !important;
top: 10px !important;
}

// DROPDOWN MENU BELOW ON MOBILE
@include respond-to('mobile') {
min-width: auto;
top: 100% !important;
left: 0 !important;

&::before { // arrow
transform: rotate(-45deg);
left: 48px !important;
top: -6px !important;
}
}
}
}
}

.mobile-trigger {
Expand Down