Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7051f29

Browse files
author
Joseph Damiba
authored
Merge pull request #8 from plotly/algolia-start-fresh
update search ux/ui [ready for review]
2 parents af29d62 + b69552a commit 7051f29

15 files changed

+217
-200
lines changed

‎_includes/layouts/_footer-main.html

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ <h6 style="color:#119dff" class="--footer-heading">JOIN OUR MAILING LIST</h6>&#x
4949
&#x9;&#x9;&#x9;&#x9;
5050
<li>
5151
<p class="subscribe-text"> Sign up to stay in the loop with all things Plotly — from Dash Club to product updates, webinars, and more!</p>
52-
<a
53-
href="https://go.plot.ly/subscription"
54-
class="subscribe-button"
52+
<a
53+
href="https://go.plot.ly/subscription"
54+
class="subscribe-button"
5555
target="_blank">
5656
Subscribe
5757
</a>
@@ -81,9 +81,29 @@ <h6 style="color:#119dff" class="--footer-heading">JOIN OUR MAILING LIST</h6>&#x
8181
<script type='text/x-mathjax-config'>MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true}});</script>
8282
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML%2CSafe.js&#038;ver=4.1'></script>
8383
{% endif %}
84-
{% if page.layout == "langindex" %}
84+
{% if page.layout == "langindex" or page.layout == "base" %}
85+
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
86+
<div class="modal-dialog" role="document">
87+
<div class="modal-content" id="modal-content">
88+
<div class="modal-header">
89+
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
90+
<span style="float: left; padding-top:13px; padding-right:10px;"><i class="fa fa-search fa-lg"></i></span>
91+
<input id="search-input" class="search-input" type="text" placeholder=""/>
92+
</div>
93+
<div class="modal-body" id="modal-body">
94+
<div id="search-results" class="search-results">
95+
<div id="primary-search-results" class="primary-search-results"></div>
96+
<div id="schema-search-results" class="schema-search-results"></div>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
<script>
103+
window.plotly_doc_language = "{{page.language}}";
104+
</script>
85105
<!-- ALGOLIA SEARCH -->
86-
{% if page.permalink == "/python/" %}
106+
{% if page.permalink contains "python/" %}
87107
<script>
88108
window.ALGOLIA_CONFIG = {
89109
'applicationId': '{{ site.algolia.application_id }}',
@@ -92,7 +112,7 @@ <h6 style="color:#119dff" class="--footer-heading">JOIN OUR MAILING LIST</h6>&#x
92112
'baseurl': '/'
93113
}
94114
</script>
95-
{% elsif page.permalink == "/javascript/" %}
115+
{% elsif page.permalink contains "javascript/" %}
96116
<script>
97117
window.ALGOLIA_CONFIG = {
98118
'applicationId': '{{ site.algolia.application_id }}',
@@ -101,7 +121,7 @@ <h6 style="color:#119dff" class="--footer-heading">JOIN OUR MAILING LIST</h6>&#x
101121
'baseurl': '/'
102122
}
103123
</script>
104-
{% elsif page.permalink == "/r/" or page.permalink == "/ggplot2/" %}
124+
{% elsif page.permalink contains "r/" or page.permalink contains "ggplot2/" %}
105125
<script>
106126
window.ALGOLIA_CONFIG = {
107127
'applicationId': '{{ site.algolia.application_id }}',
@@ -120,19 +140,23 @@ <h6 style="color:#119dff" class="--footer-heading">JOIN OUR MAILING LIST</h6>&#x
120140
}
121141
</script>
122142
{% endif %}
123-
<script id="algolia__template" type="text/template">
124-
{% raw %}
125-
<div class="algolia__result">
126-
<a class="algolia__result-link" href="{{ full_url }}">{{{ _highlightResult.name.value }}}</a>
127-
<div class="algolia__result-text">{{{ _highlightResult.description.value }}}</div>
128-
</div>
129-
{% endraw %}
143+
<script id="algolia__template" type="text/template">
144+
{% raw %}
145+
<div class="algolia__result">
146+
<a class="algolia__result-link" href="/{{ permalink }}">{{{ _highlightResult.name.value }}}</a>
147+
<div class="algolia__result-text">{{{ _highlightResult.description.value }}}</div>
148+
</div>
149+
{% endraw %}
130150
</script>
131-
<script id="algolia__template--no-results" type="text/template">
132-
No results found.
151+
<script id="algolia__secondary-template" type="text/template">
152+
{% raw %}
153+
<div class="algolia__secondary-result">
154+
<a class="algolia__result-link" href="/{{ permalink }}">{{{ _highlightResult.name.value }}}</a>
155+
<div class="algolia__result-text">{{{ _highlightResult.description.value }}}</div>
156+
</div>
157+
{% endraw %}
133158
</script>
134-
<script src="//cdn.jsdelivr.net/algoliasearch/3.6.0/algoliasearch.min.js"></script>
135-
<script src="//cdn.jsdelivr.net/algoliasearch.helper/2.1.0/algoliasearch.helper.min.js"></script>
159+
<script id="algolia__template--no-results" type="text/template">No results found.</script>
136160
<script src="//cdn.jsdelivr.net/hogan.js/3.0.2/hogan.min.js"></script>
137161
<script src="//cdn.jsdelivr.net/momentjs/2.10.3/moment.min.js"></script>
138162
<script src="/all_static/javascripts/algolia/algolia.js"></script>

‎_includes/layouts/_header-main.html

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,14 @@
99
<div class="--wrap-right">
1010
<nav class="--nav-meta" role="navigation">
1111
<ul>
12-
<li><a href="https://plot.ly/get-demo/" data-mode="1" target="_blank" class="typeform-share button --enterprise-quaternary">DEMO DASH</a></li>
12+
{% if page.permalink contains "javascript/" or page.permalink contains "python/" or page.permalink contains "r/" or page.permalink contains "ggplot2/" %}
13+
<li>
14+
<button id="modal-button" type="button" data-toggle="modal" data-target="#myModal">
15+
<input id="modal-input" style="border-radius: 10px; width: 140px" type="text" placeholder=" Search..." readonly/>
16+
</button>
17+
</li>
18+
{% endif %}
19+
<li><a href="https://go.plot.ly/demo_live" data-mode="1" target="_blank" class="typeform-share button --enterprise-quaternary">DEMO DASH</a></li>
1320
</ul>
1421
</nav>
1522
</div>

‎_includes/layouts/head.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33

44
<!-- Media query magic - http://stackoverflow.com/questions/19945658/my-iphone-thinks-its-980px-wide -->
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
7-
6+
<script src="/all_static/javascripts/algolia/instantsearch.js"></script>
7+
<script src="/all_static/javascripts/algolia/polyfill.min.js"></script>
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
89
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
9-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
10-
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
11-
crossorigin="anonymous"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
11+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
1212

1313
{% if page.language != "python" %}
1414
<!-- code highlighting -->

‎_posts/ggplot2/2016-12-16-ggplot2-index.md

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,6 @@ redirect_from: ggplot2/reference/
2020
</div>
2121
</header>
2222

23-
<div class="content container">
24-
<div class="search-header">Search</div>
25-
<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search Plotly's R & ggplot2 Docs" />
26-
<!-- <nav class="--sidebar-body watch" id="search"> -->
27-
28-
<div class="algolia__search-content js-algolia__search-content">
29-
<div class="posts algolia__results"></div>
30-
</div>
31-
</div>
32-
3323
{% assign languagelist = site.posts | where:"page_type","example_index" | where:"language","ggplot2" | sort: "order" %}
3424

3525
{% include posts/documentation_eg.html %}

‎_posts/plotly_js/2015-04-05-plotly_js-index.html

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -148,16 +148,5 @@ <h1>Plotly JavaScript Open Source Graphing Library</h1>
148148
</div>
149149
</header>
150150

151-
<!-- SEARCH -->
152-
<div class="content container">
153-
<div class="search-header">Search</div>
154-
<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search Plotly.js Docs" />
155-
<!-- <nav class="--sidebar-body watch" id="search"> -->
156-
157-
<div class="algolia__search-content js-algolia__search-content">
158-
<div class="posts algolia__results"></div>
159-
</div>
160-
</div>
161-
162151
{% assign languagelist = site.posts | where:"page_type","example_index" | where:"language","plotly_js" | sort: "order" %}
163152
{% include posts/documentation_eg.html %}

‎_posts/python/2019-07-03-index.html

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,6 @@ <h1>Plotly Python Open Source Graphing Library</h1>
2727
</header>
2828

2929

30-
<div class="content container">
31-
<div class="search-header">Search</div>
32-
<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search Plotly's Python Docs" />
33-
34-
<div class="algolia__search-content js-algolia__search-content">
35-
<div class="posts algolia__results"></div>
36-
</div>
37-
</div>
38-
3930

4031
{% assign languagelist = site.posts | where:"page_type","example_index" | where:"language","python" | sort: "order" %}
4132
{% include posts/documentation_eg.html %}

‎_posts/r/2015-07-30-r-index.md

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,6 @@ language: r
2323
</div>
2424
</header>
2525

26-
<div class="content container">
27-
<div class="search-header">Search</div>
28-
<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search Plotly's R & ggplot2 Docs" />
29-
<!-- <nav class="--sidebar-body watch" id="search"> -->
30-
31-
<div class="algolia__search-content js-algolia__search-content">
32-
<div class="posts algolia__results"></div>
33-
</div>
34-
</div>
3526

3627
{% assign languagelist = site.posts | where:"page_type","example_index" | where:"language","r" | sort: "order" %}
3728

‎_posts/reference_pages/2015-08-19-plotly_js-reference.html

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -57,16 +57,7 @@ <h2>JavaScript Figure Reference</h2>
5757
</div>
5858
</details>
5959

60-
<!-- Search -->
61-
<div class="content container">
62-
<div class="search-header">Search</div>
63-
<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search Plotly's Figure Reference" />
64-
<!-- <nav class="--sidebar-body watch" id="search"> -->
6560

66-
<div class="algolia__search-content js-algolia__search-content">
67-
<div class="posts algolia__results"></div>
68-
</div>
69-
</div>
7061

7162
{% assign quote='"' %}
7263
{% assign array='array' %}

‎_posts/reference_pages/2015-09-06-python-reference.html

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,7 @@ <h2>Python Figure Reference</h2>
5858
</div>
5959
</details>
6060

61-
<!-- Search -->
62-
<div class="content container">
63-
<div class="search-header">Search</div>
64-
<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search Plotly's Figure Reference" />
65-
<!-- <nav class="--sidebar-body watch" id="search"> -->
6661

67-
<div class="algolia__search-content js-algolia__search-content">
68-
<div class="posts algolia__results"></div>
69-
</div>
70-
</div>
7162

7263
{% assign quote='"' %}
7364
{% assign array='list' %}

‎_posts/reference_pages/2015-09-06-r-reference.html

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,7 @@ <h2>R Figure Reference</h2>
5151
</div>
5252
</details>
5353

54-
<!-- Search -->
55-
<div class="content container">
56-
<div class="search-header">Search</div>
57-
<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search Plotly's Figure Reference" />
58-
<!-- <nav class="--sidebar-body watch" id="search"> -->
5954

60-
<div class="algolia__search-content js-algolia__search-content">
61-
<div class="posts algolia__results"></div>
62-
</div>
63-
</div>
6455

6556
{% assign quote='"' %}
6657
{% assign array='list' %}

‎_posts/reference_pages/2015-09-09-matlab-reference.html

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -85,17 +85,6 @@ <h2><code>matlab</code> figure reference</h2>
8585
</div>
8686
</details>
8787

88-
<!-- Search -->
89-
<div class="content container">
90-
<div class="search-header">Search</div>
91-
<input type="text" class="algolia__input js-algolia__input" autocomplete="off" name="query" placeholder="Search Plotly's Figure Reference" />
92-
<!-- <nav class="--sidebar-body watch" id="search"> -->
93-
94-
<div class="algolia__search-content js-algolia__search-content">
95-
<div class="posts algolia__results"></div>
96-
</div>
97-
</div>
98-
9988
{% assign quote="'" %}
10089
{% assign array='cell array' %}
10190
{% assign arrays='cell arrays' %}

‎all_static/css/main.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9279,3 +9279,91 @@ pre, code, .hljs {
92799279
opacity: 0.75;
92809280
text-align: left;
92819281
padding-right: 20px; }
9282+
9283+
.modal{
9284+
top: 50px;
9285+
}
9286+
9287+
.search-results{
9288+
display:flex;
9289+
}
9290+
9291+
#modal-button{
9292+
background-color: #00004f;
9293+
border: none;
9294+
}
9295+
9296+
.ais-hits{
9297+
margin: 30px;
9298+
margin-top: 0;
9299+
padding: 20px;
9300+
}
9301+
9302+
.primary-search-results > .ais-hits::before{
9303+
content: "Documentation Results";
9304+
font-size: 2rem;
9305+
}
9306+
9307+
.schema-search-results > .ais-hits::before{
9308+
content: "Figure Reference Results";
9309+
font-size: 2rem;
9310+
}
9311+
9312+
.ais-hits--item:first-of-type{
9313+
padding-top: 30px;
9314+
}
9315+
9316+
.algolia__result-link{
9317+
color: #2391fe !important;
9318+
}
9319+
9320+
.modal-body{
9321+
background: white;
9322+
padding: 0 !important;
9323+
max-height: calc(100vh - 200px);
9324+
overflow-y: scroll;
9325+
}
9326+
9327+
.primary-search-results, .schema-search-results{
9328+
width: 45%;
9329+
}
9330+
9331+
.search-input{
9332+
width: 90%;
9333+
border: none;
9334+
margin: auto;
9335+
font-size: 2rem;
9336+
}
9337+
9338+
.modal-content{
9339+
border-radius: 0px !important;
9340+
border: none !important;
9341+
}
9342+
9343+
.ais-hits--item{
9344+
padding-bottom: 20px;
9345+
}
9346+
9347+
.modal-header{
9348+
background: #fff;
9349+
}
9350+
9351+
.modal > .modal-dialog{
9352+
width: 1050px;
9353+
max-width: 1050px;
9354+
}
9355+
9356+
@media (max-width: 1025px) {
9357+
.modal > .modal-dialog{
9358+
width: 80%;
9359+
}
9360+
}
9361+
9362+
.\--body > h1, .\--body > h2 {
9363+
margin-bottom: 0.5em !important;
9364+
}
9365+
9366+
#installation, #rendering-charts, #note-for-rstudio-users, #download-from-github, #download-from-cran {
9367+
margin-bottom: 0.5em !important;
9368+
margin-top: 0.5em !important;
9369+
}

0 commit comments

Comments
 (0)