Merge pull request #9 from ekonstantinidis/collapsible-endpoints

Style collapsible endpoints(accordions)

Author: ekonstantinidis

rest_framework_docs/static/less/style.less

@@ -1,6 +1,9 @@
 /* @group Colours */
 
+@ThemeAlt: #c9c9c9;
+
 @BgColor: #FEFEFE;
+@AccordionBgColor: #ecf0f1;
 
 @GetColor: #18bc9c;
 @PostColor: #f39c12;
@@ -34,30 +37,53 @@ body {
 
 .endpoint {
   padding: 5px 20px;
-  margin: 20px 0;
+  margin: 0;
   background-color: #ecf0f1;
 
-  .title {
-    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
-    word-wrap: break-word;
+  &:hover {
+    background-color: darken(@AccordionBgColor, 5%);
+
+    .panel-heading {
+      background-color: darken(@AccordionBgColor, 5%);
+    }
   }
 
-  .methods {
-    margin-bottom: 0;
+  .panel-heading {
+    padding: 5px;
+    cursor: pointer;
+
+    .title {
+      margin-top: 6px;
+      font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+      word-wrap: break-word;
+
+      .fa {
+        color: darken(@AccordionBgColor, 15%);
+      }
+    }
+
+    .methods {
+      margin-bottom: 0;
 
-     .method {
-      padding: 4px 8px;
-      margin-top: 10.5px;
-      color: #FFF;
+       .method {
+        padding: 4px 8px;
+        color: #FFF;
 
-      &.get { background-color: @GetColor; }
-      &.post { background-color: @PostColor; }
-      &.patch { background-color: @PutColor; }
-      &.put { background-color: @PatchColor; }
-      &.delete { background-color: @DeleteColor; }
-      &.options { background-color: @OptionsColor; }
+        &.get { background-color: @GetColor; }
+        &.post { background-color: @PostColor; }
+        &.patch { background-color: @PutColor; }
+        &.put { background-color: @PatchColor; }
+        &.delete { background-color: @DeleteColor; }
+        &.options { background-color: @OptionsColor; }
+      }
     }
   }
+
+  .panel-body {
+    padding: 0;
+  }
+
+  > .panel-heading +.panel-collapse > .panel-body { border: 0; }
 }
 
 /* @end Endpoint */

rest_framework_docs/templates/rest_framework_docs/home.html

@@ -20,35 +20,49 @@
   {% for group in endpoints_grouped %}
     <h1 id="{{ group.grouper|lower }}">{{group.grouper}}</h1>
 
+    <div class="panel-group" role="tablist">
+
     {% for endpoint in group.list %}
-      <div class="endpoint">
-        <div class="row">
-          <div class="col-md-7">
-            <h4 class="title">{{ endpoint.path }}</h4>
+
+      <div class="panel panel-default endpoint">
+
+        <div class="panel-heading" role="tab" data-toggle="collapse" data-target="#{{ endpoint.path|slugify }}">
+          <div class="row">
+            <div class="col-md-7">
+              <h4 class="panel-title title">
+                <i class="fa fa-link"></i> {{ endpoint.path }}
+              </h4>
+            </div>
+
+            <div class="col-md-5 text-right">
+              <ul class="list-inline methods">
+                {% for method in endpoint.allowed_methods %}
+                  <li class="method {{ method|lower }}">{{ method }}</li>
+                {% endfor %}
+              </ul>
+            </div>
           </div>
-          <div class="col-md-5 text-right">
-            <ul class="list-inline methods">
-              {% for method in endpoint.allowed_methods %}
-                <li class="method {{ method|lower }}">{{ method }}</li>
+        </div>
+
+        <div id="{{ endpoint.path|slugify }}" class="panel-collapse collapse" role="tabpanel">
+          <div class="panel-body">
+            {% if endpoint.fields %}
+            <p>Fields:</p>
+              <ul class="list fields">
+              {% for field in endpoint.fields %}
+                <li class="field">{{ field.name }}: {{ field.type }}</li>
               {% endfor %}
-            </ul>
+              </ul>
+            {% else %}
+            <p>No fields.</p>
+            {% endif %}
           </div>
         </div>
-
-        {% if endpoint.fields %}
-        <p>Fields:</p>
-          <ul class="list fields">
-          {% for field in endpoint.fields %}
-            <li class="field">{{ field.name }}: {{ field.type }}</li>
-          {% endfor %}
-          </ul>
-        {% else %}
-        <p>No fields.</p>
-        {% endif %}
-
       </div>
     {% endfor %}
 
+    </div>
+
   {% endfor %}
 
 {% endblock %}