Style response elements

Author: Emmanouil Konstantinidis

rest_framework_docs/static/package.json

@@ -8,6 +8,7 @@
     "build-bootstrap-fonts": "cp -r node_modules/bootstrap/fonts rest_framework_docs/",
     "build-less": "lessc --clean-css rest_framework_docs/less/style.less rest_framework_docs/css/style.css",
     "watch-less": "watch 'npm run build-less' rest_framework_docs/less/",
+    "watch": "npm run watch-less",
     "build": "npm run build-font-awesome && npm run build-bootstrap-fonts && npm run build-less",
     "start": "npm run build && npm run watch-less",
     "test": "echo \"Error: no test specified\" && exit 1"

rest_framework_docs/static/rest_framework_docs/css/style.css

@@ -1,5 +1,39 @@
 $( document ).ready(function() {
 
+  var setResponse = function (response) {
+
+    // Status Code
+    var statusCodeFirstChar = String(response.status).charAt(0);
+    var statusCodeClass;
+
+    switch (parseInt(statusCodeFirstChar)) {
+      case 1:
+        statusCodeClass = 'label-info';
+        break;
+      case 2:
+        statusCodeClass = 'label-success';
+        break;
+      case 3:
+        statusCodeClass = 'label-warning';
+        break;
+      case 4:
+        statusCodeClass = 'label-danger';
+        break;
+      case 5:
+        statusCodeClass = 'label-primary';
+        break;
+    }
+
+    $('#responseStatusCode').text(response.status);
+    $('#responseStatusCode').addClass(statusCodeClass);
+
+    $('#responseStatusText').text(response.statusText.toLowerCase());
+    $('#responseData').text(JSON.stringify(response.responseJSON, undefined, 2));
+
+    // console.log(response);
+    // console.log(response.responseJSON);
+  };
+
   var makeRequest = function () {
     var url = $('#requestForm #urlInput').val();
     var method = 'POST';
@@ -13,21 +47,11 @@ $( document ).ready(function() {
         password: 'test'
       }
     }).always(function(response) {
-
-      $('#responseStatusCode').text(response.status);
-      $('#responseStatusText').text(response.statusText);
-      $('#responseData').text(JSON.stringify(response.responseJSON, undefined, 2));
-
-      console.log(response);
-      console.log(response.responseJSON);
+      setResponse(response);
     });
   };
 
   var setupForm = function (data) {
-    console.log('------');
-    console.log(data.path);
-    console.log('------');
-
     $('#urlInput').val(data.path);
 
     $('#requestForm').submit(function (e) {

rest_framework_docs/static/rest_framework_docs/js/index.js

@@ -162,6 +162,34 @@ body {
 /* @end Footer */
 
 
+/* @group Modal API */
+
+.modal {
+
+  h3 {
+    margin-top: 0;
+  }
+
+  .request {
+
+  }
+
+  .response {
+    .status-text {
+      text-transform: capitalize;
+    }
+
+    pre {
+      font-size: 12px;
+      margin-top: 20px;
+    }
+  }
+}
+
+
+/* @end Modal API */
+
+
 /* @group Github Ribbon - SVG */
 
 .github-corner:hover .octo-arm {

rest_framework_docs/static/rest_framework_docs/less/style.less

@@ -87,8 +87,7 @@ <h2 class="text-center">No endpoints found for {{ query }}.</h2>
   {% endif %}
 
   <!-- Modal -->
-  <!-- Modal -->
-  <div class="modal fade" id="liveAPIModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  <div class="modal fade api-modal" id="liveAPIModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog modal-lg" role="document">
       <div class="modal-content">
         <div class="modal-header">
@@ -98,7 +97,7 @@ <h4 class="modal-title">Live API Endpoints</h4>
         <div class="modal-body">
 
           <div class="row">
-            <div class="col-md-6">
+            <div class="col-md-6 request">
 
               <h3>Request</h3>
               <form id="requestForm">
@@ -123,13 +122,9 @@ <h5>Data</h5>
 
 
             </div>
-            <div class="col-md-6">
-              <h3>Response</h3>
-              <ul class="list">
-                <li>Status Code: <span id="responseStatusCode"></span></li>
-                <li>Status Text: <span id="responseStatusText"></span></li>
-              </ul>
-
+            <div class="col-md-6 response">
+              <h3>Response <span id="responseStatusCode" class="label pull-right"></span></h3>
+              <div><strong>Status Text</strong>: <span class="status-text" id="responseStatusText"></span></div>
               <pre id="responseData"></pre>
             </div>
           </div>