Style Headers

Author: Emmanouil Konstantinidis

rest_framework_docs/static/rest_framework_docs/css/style.css

@@ -23,7 +23,7 @@ var jsonPP = {
 $( document ).ready(function() {
 
   var setResponse = function (method, response) {
-    if (method == 'OPTIONS') {
+    if (!response.status) {
       return $('#responseData').html(jsonPP.prettyPrint(response));
     }
 
@@ -95,10 +95,11 @@ $( document ).ready(function() {
 
   var _setupFields = function (fields) {
     $.each( fields, function( i, field ) {
+      var label = field.name.replace('_', ' ');
       $('#fields').append("" +
         '<div class="form-group">' +
-          '<label for="field' + field.name + '">' + field.name + '</label>' +
-          '<input type="text" class="form-control" id="field' + field.name + '" placeholder="' + field.type + '">' +
+          '<label for="field' + field.name + '">' + label + '</label>' +
+          '<input type="text" class="form-control input-sm" id="field' + field.name + '" placeholder="' + field.type + '">' +
         '</div>' +
       "");
     });

rest_framework_docs/static/rest_framework_docs/js/index.js

@@ -172,6 +172,12 @@ body {
 
   .request {
 
+    .section-title {
+      background-color: @gray-lighter;
+      text-align: center;
+      padding: 5px;
+      .BorderRadius(3px);
+    }
 
     .methods {
 

rest_framework_docs/static/rest_framework_docs/less/style.less

@@ -102,18 +102,18 @@ <h3>Request</h3>
               <form id="requestForm">
                 <div class="form-group">
                   <label for="urlInput">Endpoint</label>
-                  <input type="text" class="form-control" id="urlInput" placeholder="Url">
+                  <input type="text" class="form-control input-sm" id="urlInput" placeholder="Url">
                 </div>
 
                 <div class="btn-group methods" id="methods" role="group"></div>
 
-                <h5>Headers</h5>
+                <h5 class="section-title"><span>Headers</span></h5>
                 <div class="form-group">
                   <label for="exampleInputPassword1">Authorization</label>
-                  <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Token">
+                  <input type="text" class="form-control input-sm" id="exampleInputPassword1" placeholder="Token">
                 </div>
 
-                <h5>Data</h5>
+                <h5 class="section-title"><span>Data</span></h5>
                 <div id="fields" class="fields"></div>
 
                 <button type="submit" class="btn btn-default">Send</button>