Skip to content
This repository was archived by the owner on Apr 8, 2025. It is now read-only.

[Update] Support Page Sections & Sphinx Domains #19

Merged
merged 43 commits into from
Jul 15, 2019
Merged

[Update] Support Page Sections & Sphinx Domains #19

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
e24214d
Update the extension to support page sections and sphinx domains
dojutsu-user Jun 29, 2019
8b56cee
fix tests
dojutsu-user Jun 29, 2019
3cdedc7
set count to zero
dojutsu-user Jun 29, 2019
a477e9c
set margin
dojutsu-user Jun 29, 2019
eecb619
update docs
dojutsu-user Jun 30, 2019
03f1808
change debounce time
dojutsu-user Jun 30, 2019
2173fc4
update debounce time
dojutsu-user Jun 30, 2019
66d8861
add min js file
dojutsu-user Jul 1, 2019
31f142f
use templating langugage
dojutsu-user Jul 2, 2019
abf809c
add missing bracket
dojutsu-user Jul 2, 2019
c115c52
show sorted results
dojutsu-user Jul 2, 2019
24c84f5
add comments
dojutsu-user Jul 2, 2019
156a8b9
Fix test
dojutsu-user Jul 2, 2019
d533cfc
show more data for domain objects
dojutsu-user Jul 3, 2019
73f3b4b
remove external templating language
dojutsu-user Jul 3, 2019
2d9763b
fix horizontal scroll bar
dojutsu-user Jul 3, 2019
1e39d47
show subprojecs with font reduced
dojutsu-user Jul 4, 2019
e4796a7
fix clashing css class
dojutsu-user Jul 4, 2019
6e869e2
use more .template
dojutsu-user Jul 4, 2019
a789e81
ui improvements and make extension compatible with sphinx <= 1.8
dojutsu-user Jul 4, 2019
604204b
edit tox.ini
dojutsu-user Jul 4, 2019
4a48c8a
Merge branch 'master' into update-extension-with-sections
dojutsu-user Jul 5, 2019
7ed4096
remove sphinx17 from tox
dojutsu-user Jul 5, 2019
84fc171
ignore RemovedInSphinx40Warning in pytest.ini
dojutsu-user Jul 5, 2019
5119812
add test
dojutsu-user Jul 8, 2019
85d082d
use sphinx 18 syntax
dojutsu-user Jul 8, 2019
8dce55e
don't use minified file
dojutsu-user Jul 8, 2019
c735b75
remove html structure comments and from the docs
dojutsu-user Jul 9, 2019
047a438
show max 3 results from page sections
dojutsu-user Jul 9, 2019
d8c9d46
improvements
dojutsu-user Jul 9, 2019
40fef13
use helper functions
dojutsu-user Jul 9, 2019
ab1dbbb
use 100 as constant
dojutsu-user Jul 10, 2019
2957f9a
use minified files
dojutsu-user Jul 10, 2019
7c1dfcf
update minified files
dojutsu-user Jul 10, 2019
dbddbd4
add checkbox for searching in current section
dojutsu-user Jul 10, 2019
bf7dfec
remove checkbox for now
dojutsu-user Jul 10, 2019
ed8764e
clean some code
dojutsu-user Jul 10, 2019
75a0cd9
fix tests
dojutsu-user Jul 10, 2019
46a383b
Merge branch 'master' into update-extension-with-sections
dojutsu-user Jul 11, 2019
2746b35
update minified files
dojutsu-user Jul 11, 2019
b164cb2
provide setting for choosing between minified and unminified files
dojutsu-user Jul 12, 2019
ffa8bc3
follow sphinx convention
dojutsu-user Jul 12, 2019
a79e44d
update docs
dojutsu-user Jul 14, 2019
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
94 changes: 73 additions & 21 deletions docs/custom-design.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,46 +4,98 @@ Custom Design
If you want to change the styles of the search UI,
you can do so by `adding your custom stylesheet`_ to your documentation.

Basic structure of the HTML which is generated for the full-page search UI
Basic structure of the HTML which is generated for the search UI
is given below for the reference:

.. code-block:: html

<div class="search__outer__wrapper search__backdrop display-block">
<div class="search__outer__wrapper search__backdrop">
<div class="search__outer">

<!-- Cross icon on top right corner -->
<div class="search__cross" title="Close">
<!--?xml version='1.0' encoding='UTF-8'?-->
<svg class="search__cross__img" width="15px" height="15px" enable-background="new 0 0 612 612" version="1.1" viewBox="0 0 612 612" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<polygon points="612 36.004 576.52 0.603 306 270.61 35.478 0.603 0 36.004 270.52 306.01 0 576 35.478 611.4 306 341.41 576.52 611.4 612 576 341.46 306.01">
</polygon>
<polygon points="612 36.004 576.52 0.603 306 270.61 35.478 0.603 0 36.004 270.52 306.01 0 576 35.478 611.4 306 341.41 576.52 611.4 612 576 341.46 306.01"></polygon>
</svg>
</div>

<input class="search__outer__input" placeholder="Search ...">
<span class="bar"></span> <!-- This is for underline effect on input field -->
<span class="bar"></span> <!-- For underline effect on input field -->

<!-- Search results -->
<div class="search__result__box">

<!-- Results -->
<div class="search__result__single" id="hit__1">
<div class="search__result__single" id="hit__2">

<!-- Sample result structure -->
<div class="search__result__single" id="hit__3">
<a href="https://link-to-the.result">
<div class="content">
<h2 class="search__result__title">Title of the <em>Result</em></h2>
<br>
<small class="search__result__path">path/to/result (from <strong>subproject-slug</strong>)</small>
<p class="search__result__content">... Sample <em>Result</em> Text ...</p>
</div>
</a>
<!-- Search result of a single page -->
<div class="search__result__single">
<div>

<!-- Title of the page -->
<a href="https://example.readthedocs.io/en/latest/">
<h2 class="search__result__title">
Dummy page
</h2>
</a>
<br>

<!-- Page sections -->

<!-- First section -->
<a href="https://example.readthedocs.io/en/latest#dummy-section-1">
<div class="outer_div_page_results" id="hit__1">

<!-- Section heading -->
<span class="search__result__subheading">
Dummy <em>section</em> 1
</span>

<!-- Section content -->
<p class="search__result__content">
... Dummy <em>section</em> description ...
</p>
</div>
</a>
<br class="br-for-hits">

<!-- Second section -->
<a href="https://example.readthedocs.io/en/latest#dummy_section-2">
<div class="outer_div_page_results" id="hit__2">...</div>
</a>
<br class="br-for-hits">


<!-- Sphinx domains of the page -->

<!-- First sphinx domain -->
<a href="https://example.readthedocs.io/en/latest#get--api-v3-sections-">
<div class="outer_div_page_results" id="hit__3">

<!-- Sphinx domain role name -->
<span class="search__result__subheading">
http:get
</span>

<!-- Sphinx domain name -->
<p class="search__result__content">
/api/v3/<em>sections</em>/
</p>
</div>
</a>
<br class="br-for-hits">

<!-- Second sphinx domain -->
<a href="https://example.readthedocs.io/en/latest#get--api-v3-sections-(str-username)">
<div class="outer_div_page_results" id="hit__4">...</div>
</a>
<br class="br-for-hits">

</div>
</div>

<div class="search__result__single" id="hit__4">
<div class="search__result__single" id="hit__5">
<!-- Results from other pages -->
<div class="search__result__single"><div>...</div></div>
<div class="search__result__single"><div>...</div></div>
<div class="search__result__single"><div>...</div></div>
</div>
</div>
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should delete this content until we settle on the final HTML, then we can add it back? Alternatively, we could use literalinclude from Sphinx to include this directly from the HTML: https://www.sphinx-doc.org/en/master/usage/restructuredtext/directives.html#directive-literalinclude

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have removed it for now and we can target these things things in a separate PR to imrpove the docs and other things.
I don't think that we can use literalinclude here because content is being dynamically generated and removed from the DOM.

Expand Down
63 changes: 49 additions & 14 deletions sphinx_search/_static/css/rtd_sphinx_search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,16 +146,19 @@
/* Search result */

.search__result__single {
padding: 10px;
margin-top: 10px;
padding: 0px 10px;
border-bottom: 1px solid #e6e6e6;
}

.search__result__box .active {
background-color: rgb(245, 245, 245);
}

.search__result__single:hover {
background-color: rgb(245, 245, 245);
.outer_div_page_results {
margin: 5px 0px;
overflow: auto;
padding: 3px 5px;
}

.search__result__single a {
Expand All @@ -170,43 +173,49 @@
animation: fade-in 0.4s;
}

/* Title of each search result */
.search__result__title {
/* Display and box model */
display: inline-block;
font-weight: 500;
margin-bottom: 0;
margin-bottom: 15px;
margin-top: 0;
font-size: 14px;
font-size: 15px;

/* Other */
color: #6ea0ec;
border-bottom: 1px solid #6ea0ec;
}

/* Path of each search result */
.search__result__path {
color: #b3b3b3;
.search__result__subheading {
color: black;
font-weight: 700;
float: left;
width: 20%;
font-size: 15px;
margin-right: 10px;
}

/* Content of each search result */
.search__result__content {
margin: 0;
text-decoration: none;
color: black;
font-size: 14px;
font-size: 15px;
display: block;
margin-top: 3px;
margin-bottom: 5px;
margin-bottom: 0;
line-height: inherit;
float: right;
width: calc(80% - 15px);
text-align: left;
}

/* Highlighting of matched results */
.search__outer em {
font-style: normal;
}

.search__outer .search__result__title em {
background-color: #e5f6ff;
padding-bottom: 4px;
padding-bottom: 3px;
border-bottom-color: black;
}

Expand All @@ -215,6 +224,32 @@
border-bottom: 1px solid black;
}

.search__result__subheading em {
border-bottom: 1px solid black;
}

.outer_div_page_results:hover {
background-color: rgb(245, 245, 245);
}

.br-for-hits {
display: block;
content: "";
margin-top: 10px;
}

@media (max-width: 630px) {
.search__result__subheading {
float: none;
width: 90%;
}

.search__result__content {
float: none;
width: 90%;
}
}

@keyframes fade-in {
from {
opacity: 0;
Expand Down
2 changes: 1 addition & 1 deletion sphinx_search/_static/css/rtd_sphinx_search.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading