Jump to Menu

Author: Emmanouil Konstantinidis

drfdocs/static/less/style.less

@@ -1,7 +1,25 @@
+/* @group Colours */
+
+@BgColor: #FEFEFE;
+
+@GetColor: #18bc9c;
+@PostColor: #f39c12;
+@PutColor: #028d94;
+@PatchColor: #028d94;
+@DeleteColor: #e74c3c;
+@OptionsColor: #3498db;
+
+/* @end Colours */
+
+
 /* @group Misc */
 
 body {
-  background-color: #FEFEFE;
+  background-color: @BgColor;
+}
+
+.navbar {
+  margin-top: 20px;
 }
 
 .jumbotron {
@@ -32,12 +50,12 @@ body {
       margin-top: 10.5px;
       color: #FFF;
 
-      &.get { background-color: #18bc9c; }
-      &.post { background-color: #f39c12; }
-      &.patch { background-color: #028d94; }
-      &.put { background-color: #028d94; }
-      &.delete { background-color: #e74c3c; }
-      &.options { background-color: #3498db; }
+      &.get { background-color: @GetColor; }
+      &.post { background-color: @PostColor; }
+      &.patch { background-color: @PutColor; }
+      &.put { background-color: @PatchColor; }
+      &.delete { background-color: @DeleteColor; }
+      &.options { background-color: @OptionsColor; }
     }
   }
 }
@@ -80,7 +98,11 @@ body {
   100% { transform: rotate(0deg); }
 }
 
-@media (max-width: 500px) {
+@media (max-width: 768px) {
+    .github-corner {
+      display: none;
+    }
+
     .github-corner:hover .octo-arm {
         animation: none;
     }

drfdocs/templates/drfdocs/base.html

@@ -9,9 +9,7 @@
 
     <title>DRF Docs</title>
 
-    <!-- Bootstrap -->
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Flatly -->
+    <!-- Bootstrap & Flatly -->
     <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/flatly/bootstrap.min.css" rel="stylesheet">
     <!-- Font Awesome -->
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
@@ -32,9 +30,37 @@
     </a>
 
     <div class="container">
+
+      <nav class="navbar navbar-default">
+        <div class="container-fluid">
+          <!-- Brand and toggle get grouped for better mobile display -->
+          <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#drfdoc-navbar" aria-expanded="false">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">DRF Docs</a>
+          </div>
+
+          <!-- Collect the nav links, forms, and other content for toggling -->
+          <div class="collapse navbar-collapse" id="drfdoc-navbar">
+            <form class="navbar-form navbar-right" role="search">
+              <div class="form-group">
+                <input type="text" class="form-control" placeholder="Search">
+              </div>
+            </form>
+            <ul class="nav navbar-nav navbar-right">
+              {% block apps_menu %}{% endblock %}
+            </ul>
+          </div><!-- /.navbar-collapse -->
+        </div><!-- /.container-fluid -->
+      </nav>
+
       <div class="jumbotron">
         <h1>DRF Docs</h1>
-        <h3>Documentation for Web APIs made with <a href="http://www.django-rest-framework.org/" target="_blank">Django Rest Framework</a>.</h3>
+        <h3>Document Web APIs made with <a href="http://www.django-rest-framework.org/" target="_blank">Django Rest Framework</a>.</h3>
       </div>
 
       {% block content %}{% endblock %}
@@ -48,5 +74,10 @@ <h3>Documentation for Web APIs made with <a href="http://www.django-rest-framewo
         Copyright © 2015 Emmanouil Konstantinidis.
       </div>
     </div>
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
   </body>
 </html>

drfdocs/templates/drfdocs/home.html

@@ -1,12 +1,25 @@
 {% extends "drfdocs/base.html" %}
 
+{% block apps_menu %}
+{% regroup endpoints by name_parent as endpoints_grouped %}
+<li class="dropdown">
+  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Jump To <span class="caret"></span></a>
+  <ul class="dropdown-menu">
+    <!-- <li><a href="#dd">ddsf{{group.grouper}}</a></li> -->
+    {% for group in endpoints_grouped %}
+      <li><a href="#{{ group.grouper|lower }}">{{ group.grouper }}</a></li>
+    {% endfor %}
+  </ul>
+</li>
+{% endblock %}
+
+
 {% block content %}
 
-  <h1>API Endpoints</h1>
   {% regroup endpoints by name_parent as endpoints_grouped %}
 
   {% for group in endpoints_grouped %}
-    <h1>{{group.grouper}}</h1>
+    <h1 id="{{ group.grouper|lower }}">{{group.grouper}}</h1>
 
     {% for endpoint in group.list %}
       <div class="endpoint">