Style accordions

Author: Emmanouil Konstantinidis

rest_framework_docs/static/less/style.less

@@ -1,6 +1,9 @@
 /* @group Colours */
 
+@ThemeAlt: #c9c9c9;
+
 @BgColor: #FEFEFE;
+@AccordionBgColor: #ecf0f1;
 
 @GetColor: #18bc9c;
 @PostColor: #f39c12;
@@ -37,13 +40,26 @@ body {
   margin: 0;
   background-color: #ecf0f1;
 
+  &:hover {
+    background-color: darken(@AccordionBgColor, 10%);
+
+    .panel-heading {
+      background-color: darken(@AccordionBgColor, 10%);
+    }
+  }
+
   .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 {
@@ -66,6 +82,8 @@ body {
   .panel-body {
     padding: 0;
   }
+
+  > .panel-heading +.panel-collapse > .panel-body { border: 0; }
 }
 
 /* @end Endpoint */

rest_framework_docs/templates/rest_framework_docs/home.html

@@ -25,11 +25,12 @@ <h1 id="{{ group.grouper|lower }}">{{group.grouper}}</h1>
     {% for endpoint in group.list %}
 
       <div class="panel panel-default endpoint">
-        <div class="panel-heading" role="tab" id="headingOne">
+
+        <div class="panel-heading" role="tab" id="headingOne" data-toggle="collapse" data-target="#{{ endpoint.path|slugify }}">
           <div class="row">
             <div class="col-md-7">
               <h4 class="panel-title title">
-                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#{{ endpoint.path|slugify }}" aria-expanded="true" aria-controls="{{ endpoint.path|slugify }}">{{ endpoint.path }}</a>
+                <i class="fa fa-link"></i> {{ endpoint.path }}
               </h4>
             </div>
 
@@ -42,7 +43,8 @@ <h4 class="panel-title title">
             </div>
           </div>
         </div>
-        <div id="{{ endpoint.path|slugify }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
+
+        <div id="{{ endpoint.path|slugify }}" class="panel-collapse collapse" role="tabpanel">
           <div class="panel-body">
             {% if endpoint.fields %}
             <p>Fields:</p>