Add search and next/prev

2 files changed, 42 insertions, 0 deletions

diff --git a/docs/css/default.css b/docs/css/default.css
index c160b63d..173d70e0 100644
--- a/docs/css/default.css
+++ b/docs/css/default.css
@@ -277,3 +277,14 @@ footer a {
 footer a:hover {
   color: gray;
 }
+
+.btn-inverse {
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#606060), to(#404040)) !important;
+  background-image: -webkit-linear-gradient(top, #606060, #404040) !important;
+}
+
+.modal-open .modal,.btn:focus{outline:none;}
+
+@media (max-width: 650px) {
+  .repo-link.btn-inverse {display: none;}
+}
diff --git a/docs/template.html b/docs/template.html
index 3e0f29aa..7e929762 100644
--- a/docs/template.html
+++ b/docs/template.html
@@ -41,6 +41,9 @@
       <div class="navbar-inner">
         <div class="container-fluid">
             <a class="repo-link btn btn-primary btn-small" href="https://github.com/tomchristie/django-rest-framework/tree/master">GitHub</a>
+            <a class="repo-link btn btn-inverse btn-small {{ next_url_disabled }}" href="{{ next_url }}">Next <i class="icon-arrow-right icon-white"></i></a>
+            <a class="repo-link btn btn-inverse btn-small {{ prev_url_disabled }}" href="{{ prev_url }}"><i class="icon-arrow-left icon-white"></i> Previous</a>
+            <a class="repo-link btn btn-inverse btn-small" href="#searchModal" data-toggle="modal"><i class="icon-search icon-white"></i> Search</a>
           <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -118,6 +121,34 @@
 
     <div class="body-content">
       <div class="container-fluid">
+
+<!-- Search Modal -->
+<div id="searchModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3 id="myModalLabel">Documentation search</h3>
+  </div>
+  <div class="modal-body">
+    <!-- Custom google search -->
+    <script>
+      (function() {
+        var cx = '015016005043623903336:rxraeohqk6w';
+        var gcse = document.createElement('script');
+        gcse.type = 'text/javascript';
+        gcse.async = true;
+        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
+            '//www.google.com/cse/cse.js?cx=' + cx;
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(gcse, s);
+      })();
+    </script>
+    <gcse:search></gcse:search>
+  </div>
+  <div class="modal-footer">
+    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
+  </div>
+</div>
+
         <div class="row-fluid">
 
           <div class="span3">