Skip to content

Commit 70bfd30

Browse files
mostafaei2002mostafaei2002
committed
feat: add search modal
1 parent 79b33e9 commit 70bfd30

File tree

2 files changed

+183
-133
lines changed

2 files changed

+183
-133
lines changed

‎docs_theme/main.html‎

Lines changed: 177 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,126 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6-
<meta charset="utf-8">
7-
<title>{% if page.title %}{{ page.title }} - {% endif %}{{ config.site_name }}</title>
8-
<link href="{{ 'img/favicon.ico'|url }}" rel="icon" type="image/x-icon">
9-
<link rel="canonical" href="{{ page.canonical_url|url }}" />
10-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11-
<meta name="description" content="Django, API, REST{% if page %}, {{ page.title }}{% endif %}">
12-
<meta name="author" content="Tom Christie">
13-
14-
<!-- Le styles -->
15-
<!-- <link href="{{ 'css/prettify.css'|url }}" rel="stylesheet">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5+
<meta charset="utf-8" />
6+
<title>
7+
{% if page.title %}{{ page.title }} - {% endif %}{{ config.site_name }}
8+
</title>
9+
<link href="{{ 'img/favicon.ico'|url }}" rel="icon" type="image/x-icon" />
10+
<link rel="canonical" href="{{ page.canonical_url|url }}" />
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
12+
<meta
13+
name="description"
14+
content="Django, API, REST{% if page %}, {{ page.title }}{% endif %}"
15+
/>
16+
<meta name="author" content="Tom Christie" />
17+
18+
<!-- Le styles -->
19+
<!-- <link href="{{ 'css/prettify.css'|url }}" rel="stylesheet">
1620
<link href="{{ 'css/bootstrap.css'|url }}" rel="stylesheet">
1721
<link href="{{ 'css/bootstrap-responsive.css'|url }}" rel="stylesheet">
1822
<link href="{{ 'css/default.css'|url }}" rel="stylesheet"> -->
19-
20-
<link rel="stylesheet" href="{{ 'css/bootstrap5.css'|url }}">
21-
22-
23-
<script type="text/javascript">
24-
var _gaq = _gaq || [];
25-
_gaq.push(['_setAccount', 'UA-18852272-2']);
26-
_gaq.push(['_trackPageview']);
27-
28-
(function() {
29-
var ga = document.createElement('script');
30-
ga.type = 'text/javascript';
31-
ga.async = true;
32-
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
33-
var s = document.getElementsByTagName('script')[0];
34-
s.parentNode.insertBefore(ga, s);
35-
})();
36-
</script>
37-
38-
<style>
39-
#sidebarInclude img {
40-
margin-bottom: 10px;
41-
}
42-
#sidebarInclude a.promo {
43-
color: black;
44-
}
45-
@media (max-width: 767px) {
46-
div.promo {
47-
display: none;
48-
}
49-
}
50-
</style>
51-
</head>
52-
<body onload="prettyPrint()" class="{% if page and page.is_homepage %}index{% endif %}-page">
53-
54-
<div class="wrapper">
55-
{% include "nav.html" %}
56-
57-
<div class="body-content">
58-
<div class="container-fluid">
59-
<!-- Search Modal -->
60-
<div id="mkdocs_search_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
61-
<div class="modal-header">
62-
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
63-
<h3 id="myModalLabel">Documentation search</h3>
64-
</div>
6523

66-
<div class="modal-body">
67-
<form role="form" autocomplete="off">
68-
<div class="form-group">
69-
<input type="text" name="q" class="form-control" placeholder="Search..." id="mkdocs-search-query">
24+
<link rel="stylesheet" href="{{ 'css/bootstrap5.css'|url }}" />
25+
26+
<script type="text/javascript">
27+
var _gaq = _gaq || [];
28+
_gaq.push(["_setAccount", "UA-18852272-2"]);
29+
_gaq.push(["_trackPageview"]);
30+
31+
(function () {
32+
var ga = document.createElement("script");
33+
ga.type = "text/javascript";
34+
ga.async = true;
35+
ga.src =
36+
("https:" == document.location.protocol
37+
? "https://ssl"
38+
: "http://www") + ".google-analytics.com/ga.js";
39+
var s = document.getElementsByTagName("script")[0];
40+
s.parentNode.insertBefore(ga, s);
41+
})();
42+
</script>
43+
44+
<style>
45+
#sidebarInclude img {
46+
margin-bottom: 10px;
47+
}
48+
#sidebarInclude a.promo {
49+
color: black;
50+
}
51+
@media (max-width: 767px) {
52+
div.promo {
53+
display: none;
54+
}
55+
}
56+
</style>
57+
</head>
58+
<body
59+
onload="prettyPrint()"
60+
class="{% if page and page.is_homepage %}index{% endif %}-page"
61+
>
62+
<div class="wrapper">
63+
{% include "nav.html" %}
64+
65+
<div class="body-content">
66+
<div class="container-fluid">
67+
<div
68+
class="modal fade"
69+
id="mkdocs_search_modal"
70+
tabindex="-1"
71+
aria-labelledby="searchModal"
72+
aria-hidden="true"
73+
>
74+
<div
75+
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
76+
>
77+
<div class="modal-content">
78+
<div class="modal-header">
79+
<h3 class="modal-title fs-5" id="search_modal_label">
80+
Documentation Search
81+
</h3>
82+
<button
83+
type="button"
84+
class="btn-close"
85+
data-bs-dismiss="modal"
86+
aria-label="Close"
87+
></button>
88+
</div>
89+
90+
<div class="modal-body">
91+
<form role="form" autocomplete="off">
92+
<div class="form-group">
93+
<input
94+
type="text"
95+
name="q"
96+
class="form-control"
97+
placeholder="Search..."
98+
id="mkdocs-search-query"
99+
/>
100+
</div>
101+
</form>
102+
103+
<div id="mkdocs-search-results" class="mt-3"></div>
104+
</div>
105+
106+
<div class="modal-footer">
107+
<button
108+
type="button"
109+
class="btn btn-secondary"
110+
data-bs-dismiss="modal"
111+
>
112+
Close
113+
</button>
114+
</div>
70115
</div>
71-
</form>
72-
<div id="mkdocs-search-results"></div>
116+
</div>
73117
</div>
74118

75-
<div class="modal-footer">
76-
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
77-
</div>
78-
</div>
79-
80-
<div class="row-fluid">
81-
<div class="span3">
82-
<div id="table-of-contents">
83-
<ul class="nav nav-list side-nav well sidebar-nav-fixed">
119+
<!-- Modal End -->
120+
<div class="row-fluid">
121+
<div class="span3">
122+
<div id="table-of-contents">
123+
<!-- <ul class="nav nav-list side-nav well sidebar-nav-fixed">
84124
{% if page and page.is_homepage %}
85125
<li class="main">
86126
<a href="#">Django REST framework</a>
@@ -103,74 +143,83 @@ <h3 id="myModalLabel">Documentation search</h3>
103143
{% if page.toc %}<hr/>{% endif %}
104144
<div id="sidebarInclude">
105145
</div>
106-
</ul>
146+
</ul> -->
147+
</div>
148+
</div>
107149

150+
<div id="main-content" class="span9">
151+
{% block content %} {% if page.meta.source %} {% for filename in
152+
page.meta.source %}
153+
<a
154+
class="github"
155+
href="https://github.com/encode/django-rest-framework/tree/master/rest_framework/{{ filename }}"
156+
>
157+
<span class="label label-info">{{ filename }}</span>
158+
</a>
159+
{% endfor %} {% endif %} {{ page.content }} {% endblock %}
108160
</div>
161+
<!--/span-->
109162
</div>
110-
111-
<div id="main-content" class="span9">
112-
{% block content %}
113-
{% if page.meta.source %}
114-
{% for filename in page.meta.source %}
115-
<a class="github" href="https://github.com/encode/django-rest-framework/tree/master/rest_framework/{{ filename }}">
116-
<span class="label label-info">{{ filename }}</span>
117-
</a>
118-
{% endfor %}
119-
{% endif %}
120-
121-
{{ page.content }}
122-
{% endblock %}
123-
124-
</div> <!--/span-->
125-
</div> <!--/row-->
126-
</div> <!--/.fluid-container-->
127-
</div> <!--/.body content-->
128-
<div id="push"></div>
129-
</div> <!--/.wrapper -->
130-
131-
<footer class="span12">
132-
<p>Documentation built with <a href="http://www.mkdocs.org/">MkDocs</a>.
133-
</p>
134-
</footer>
135-
136-
<!-- Le javascript
163+
<!--/row-->
164+
</div>
165+
<!--/.fluid-container-->
166+
</div>
167+
<!--/.body content-->
168+
<div id="push"></div>
169+
</div>
170+
<!--/.wrapper -->
171+
172+
<footer class="span12">
173+
<p>
174+
Documentation built with <a href="http://www.mkdocs.org/">MkDocs</a>.
175+
</p>
176+
</footer>
177+
178+
<!-- Le javascript
137179
================================================== -->
138-
<!-- Placed at the end of the document so the pages load faster -->
139-
<!-- <script async src="https://fund.django-rest-framework.org/sidebar_include.js"></script>
180+
<!-- Placed at the end of the document so the pages load faster -->
181+
<!-- <script async src="https://fund.django-rest-framework.org/sidebar_include.js"></script>
140182
<script src="{{ 'js/jquery-1.8.1-min.js'|url }}"></script>
141183
<script src="{{ 'js/prettify-1.0.js'|url }}"></script>
142184
<script src="{{ 'js/bootstrap-2.1.1-min.js'|url }}"></script>
143185
<script src="{{ 'js/theme.js'|url }}"></script> -->
144186

145-
<script>var base_url = '{{ base_url }}';</script>
146-
147-
<script src="{{ 'js/bootstrap5.bundle.js'|url }}"></script>
187+
<script>
188+
var base_url = "{{ base_url }}";
189+
</script>
148190

149-
{% for path in config.extra_javascript %}
150-
<script src="{{ path|url }}" defer></script>
151-
{% endfor %}
191+
<script src="{{ 'js/bootstrap5.bundle.js'|url }}"></script>
152192

153-
<script>
154-
var shiftWindow = function() {
155-
scrollBy(0, -50)
156-
};
193+
{% for path in config.extra_javascript %}
194+
<script src="{{ path|url }}" defer></script>
195+
{% endfor %}
157196

158-
if (location.hash) shiftWindow();
159-
window.addEventListener("hashchange", shiftWindow);
197+
<script>
198+
var shiftWindow = function () {
199+
scrollBy(0, -50);
200+
};
160201

161-
$('.dropdown-menu').on('click touchstart', function(event) {
162-
event.stopPropagation();
163-
});
202+
if (location.hash) shiftWindow();
203+
window.addEventListener("hashchange", shiftWindow);
164204

165-
// Dynamically force sidenav/dropdown to no higher than browser window
166-
$('.side-nav, .dropdown-menu').css('max-height', window.innerHeight - 130);
167-
168-
$(function() {
169-
$(window).resize(function() {
170-
$('.side-nav, .dropdown-menu').css('max-height', window.innerHeight - 130);
205+
$(".dropdown-menu").on("click touchstart", function (event) {
206+
event.stopPropagation();
171207
});
172-
});
173-
</script>
174-
</body>
175208

209+
// Dynamically force sidenav/dropdown to no higher than browser window
210+
$(".side-nav, .dropdown-menu").css(
211+
"max-height",
212+
window.innerHeight - 130
213+
);
214+
215+
$(function () {
216+
$(window).resize(function () {
217+
$(".side-nav, .dropdown-menu").css(
218+
"max-height",
219+
window.innerHeight - 130
220+
);
221+
});
222+
});
223+
</script>
224+
</body>
176225
</html>

‎docs_theme/nav.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -140,15 +140,16 @@
140140
{% endif %}
141141

142142
<div class="d-flex gap-2">
143-
<a
144-
id="search_modal_btn"
143+
<button
144+
type="button"
145+
id="search_modal_show"
145146
class="btn btn-sm btn-secondary"
146-
href="#search_modal"
147+
href="#mkdocs_search_modal"
147148
data-bs-toggle="modal"
148-
data-bs-target="#search_modal"
149+
data-bs-target="#mkdocs_search_modal"
149150
>
150151
Search
151-
</a>
152+
</button>
152153
<!-- prettier-ignore -->
153154
<a
154155
{% if page.previous_page %}href="{{ page.previous_page.url|url }}"{% endif %}

0 commit comments

Comments
 (0)