Skip to content

Commit

Permalink
improve docs content structure for search (#1216)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rikinsk @shahidhk
rikinsk authored and shahidhk committed Dec 15, 2018
1 parent 432a151 commit b0eb263
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 59 deletions.
65 changes: 37 additions & 28 deletions docs/_static/hasura-custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ tt, code, kbd, pre, samp {
font-size: 15px !important;
}

#docs-content {
#docs-content, #docs-header {
font-size: 16px !important;
margin-left: 40px; margin-right: 40px;
}
Expand Down Expand Up @@ -554,12 +554,12 @@ p {
color: #FEC53D;
}

.input_search_box {
#input_search_box {
position: relative;
width: 64%;
}

.input_search_box .search_icon {
#input_search_box .search_icon {
position: absolute;
top: 13px;
left: 10px;
Expand All @@ -569,32 +569,41 @@ p {
z-index: 1;
}

.input_search_box .algolia-autocomplete {
#input_search_box .algolia-autocomplete {
width: 100%;
}

.input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu,
.input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
#input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu,
#input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
left: -25px !important;
max-width: calc(156% + 50px);
min-width: calc(156% + 50px); /* 1 / width(input_search_box) + 50px */
}

.input_search_box .algolia-autocomplete a {
#input_search_box .algolia-autocomplete a {
text-decoration: none;
}

.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
#input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
color: #FF993A;
}

.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,
.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight,
.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
#input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,
#input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight,
#input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
box-shadow: inset 0 -2px 0 0 #FF993A;
}

.input_search_box input {
#input_search_box .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion.suggestion-layout-simple,
#input_search_box .algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content {
background-color: #FEECC0;
}

#input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
background: #FEEFFE;
}

#input_search_box input {
height: 44px;
box-sizing: border-box;
text-indent: 30px;
Expand All @@ -613,27 +622,27 @@ p {

}

.input_search_box input:focus {
#input_search_box input:focus {
outline: none;
}

.input_search_box input::placeholder {
#input_search_box input::placeholder {
color:#ccc;
}

.input_search_box input::-webkit-input-placeholder {
#input_search_box input::-webkit-input-placeholder {
color:#ccc;
}

.input_search_box input::-moz-placeholder { /* Firefox 19+ */
#input_search_box input::-moz-placeholder { /* Firefox 19+ */
color:#ccc;
}

.input_search_box input:-ms-input-placeholder { /* IE 10+ */
#input_search_box input:-ms-input-placeholder { /* IE 10+ */
color:#ccc;
}

.input_search_box input:-moz-placeholder { /* Firefox 18- */
#input_search_box input:-moz-placeholder { /* Firefox 18- */
color:#ccc;
}

Expand Down Expand Up @@ -959,7 +968,7 @@ p {
overflow-y: auto;
}

.search_head_wrapper {
#docs-header-actions {
margin-top: 29px;
}

Expand Down Expand Up @@ -1336,13 +1345,13 @@ ol, ul {
min-width: 0px !important;
}

.input_search_box {
#input_search_box {
width: 60%;
margin-left: 10px;
}

.input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu,
.input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
#input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu,
#input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
left: -34px !important;
max-width: calc(166% + 10px);
min-width: calc(166% + 10px); /* 1 / width(input_search_box) + 10px */
Expand Down Expand Up @@ -1381,16 +1390,16 @@ ol, ul {
margin: 0 auto !important;
}

.mobile-logo {
#mobile-logo {
display: flex;
margin-top: 20px;
}

.search_head_wrapper {
#docs-header-actions {
margin-top: 20px;
}

#docs-content {
#docs-content, #docs-header {
margin-left: 0;
margin-right: 0;
}
Expand All @@ -1399,13 +1408,13 @@ ol, ul {

/* Mobile overrides */
@media (max-width: 768px) {
.input_search_box {
#input_search_box {
width: 90%;
margin-left: 10px;
}

.input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu,
.input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
#input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu,
#input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
left: -34px !important;
max-width: calc(111% + 10px);
min-width: calc(111% + 10px); /* 1 / width(input_search_box) + 10px */
Expand Down
54 changes: 23 additions & 31 deletions docs/_theme/djangodocs/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,42 +31,29 @@
{% set pagenameSplit = pagename.split('/') %}
{% block sidebarwrapper %}
<div class="yui-b mobile-hide" id="sidebar">
{%- if last_updated %}
<span><b>Last updated:</b> {{ last_updated }}</span>
{%- endif %}
{{ sidebar() }}
</div>
{% endblock %}
<div class="content_inner_wrapper">
<div role="main" parent={{ rootpage }}>
<div id="docs-content">
<!-- div class="media_wrapper details_media">
<div class="float_right wd_100">
<div class="share_wrapper">
<button class="share_btn green_btn">
<span>Share</span>
<i class="fa fa-share" aria-hidden="true"></i>
</button>
</div>
</div>
</div -->
<div class="mobile-logo mobile-only">
<div id="docs-header">
<div class="mobile-only" id="mobile-logo">
<a href="https://{{ BASE_DOMAIN }}/" target="_blank">
<div class="img_wrapper inline-block">
<img class="responsive logo_img no-shadow" src="{{ pathto('_images/layout/logo-dark.svg', 1) }}" />
</div>
</a>
<a href="https://docs.{{ BASE_DOMAIN }}" class="docs_label mobile-logo-docs">DOCS&nbsp;&nbsp;v{{version}}</a>
</div>
<div class="search_head_wrapper">
<div id="docs-header-actions">
<div class="inline-block mobile-only" id="nav_tree_icon">
<span class="fa fa-bars"></span>
</div>
<div class="inline-block input_search_box">
<div class="inline-block" id="input_search_box">
<span class="fa fa-search search_icon"></span>
<input type="text" class="search_element" placeholder="Search docs..." />
</div>
<div class="header_links inline-block">
<div class="inline-block header_links">
<div class="social_icons_wrapper">
<div class="social_icons">
<iframe src="https://ghbtns.com/github-btn.html?user=hasura&repo=graphql-engine&type=star&count=true" frameBorder="0" scrolling="0" width="95px" height="25px"></iframe>
Expand All @@ -82,26 +69,16 @@
</a>
<span class="tooltiptext">Get instant support on our discord server</span>
</div>

</div>
<!-- no need support button
<div class="buttons">
<div class="inline-block"> -->
<!-- a target="_blank" href="https://dashboard.{{ BASE_DOMAIN }}/login" -->
<!-- no need support button <button class="indiv_btns black supportBtn"> Support </button> -->
<!--/ a -->
<!-- no need support button
</div>
</div> -->
</div>
</div>
</div>
<div id="docs-content">
<div id="{{ pagename|replace('/', '-') }}">
{% block body %}{% endblock %}
</div>

</div>
<div class="nav">{{ secondnav() }}</div>

<div class="feedback_wrapper">
<div class="feedback">
Was this page helpful?
Expand Down Expand Up @@ -135,7 +112,6 @@
Thank you for your feedback!
</div>
</div>

<div class="footer-hasura-custom">
Want to contribute or report missing content? Check out the <a target="_blank" href="https://github.com/hasura/graphql-engine/tree/master/docs">github repo for docs</a>.<br>
Powered by <a target="_blank" href="http://www.sphinx-doc.org">Sphinx</a>.
Expand Down Expand Up @@ -271,6 +247,22 @@
apiKey: 'c59018461c19e20fe11459136e57900c',
indexName: 'hasura',
inputSelector: '.search_element',
transformData: function(suggestions) {
if (window.location.origin !== 'https://docs.hasura.io') {
suggestions.forEach(suggestion => {
if (window.location.origin === 'http://localhost:8000') {
suggestion.url = suggestion.url.replace(/https:\/\/docs.hasura.io\/[^\/]*/, window.location.origin)
} else {
suggestion.url = suggestion.url.replace('https://docs.hasura.io', window.location.origin);
}
});
}

return suggestions;
},
// algoliaOptions: {
// hitsPerPage: 10
// },
debug: false
});
</script>
Expand Down

0 comments on commit b0eb263

Please sign in to comment.