Style elements

Author: Emmanouil Konstantinidis

rest_framework_docs/static/rest_framework_docs/css/style.css

@@ -98,8 +98,10 @@ $( document ).ready(function() {
       var label = field.name.replace('_', ' ');
       $('#fields').append("" +
         '<div class="form-group">' +
-          '<label for="field' + field.name + '">' + label + '</label>' +
+          '<label for="field' + field.name + '" class="col-sm-4 control-label">' + label + '</label>' +
+          '<div class="col-sm-8">' +
           '<input type="text" class="form-control input-sm" id="field' + field.name + '" placeholder="' + field.type + '">' +
+          '</div>' +
         '</div>' +
       "");
     });

rest_framework_docs/static/rest_framework_docs/js/index.js

@@ -170,6 +170,10 @@ body {
     margin-top: 0;
   }
 
+  .control-label {
+    padding-top: 7px;
+  }
+
   .request {
 
     .section-title {

rest_framework_docs/static/rest_framework_docs/less/style.less

@@ -99,18 +99,23 @@ <h4 class="modal-title">Live API Endpoints</h4>
           <div class="row">
             <div class="col-md-6 request">
               <h3>Request</h3>
-              <form id="requestForm">
+              <form class="form-horizontal" id="requestForm">
                 <div class="form-group">
-                  <label for="urlInput">Endpoint</label>
-                  <input type="text" class="form-control input-sm" id="urlInput" placeholder="Url">
+                  <label for="urlInput" class="col-sm-4 control-label">Endpoint</label>
+                  <div class="col-sm-8">
+                    <input type="text" class="form-control input-sm" id="urlInput" placeholder="Url">
+                  </div>
                 </div>
 
+                <h5 class="section-title"><span>Method</span></h5>
                 <div class="btn-group methods" id="methods" role="group"></div>
 
                 <h5 class="section-title"><span>Headers</span></h5>
                 <div class="form-group">
-                  <label for="exampleInputPassword1">Authorization</label>
-                  <input type="text" class="form-control input-sm" id="exampleInputPassword1" placeholder="Token">
+                  <label for="exampleInputPassword1" class="col-sm-4 control-label">Authorization</label>
+                  <div class="col-sm-8">
+                    <input type="text" class="form-control input-sm" id="exampleInputPassword1" placeholder="Token">
+                  </div>
                 </div>
 
                 <h5 class="section-title"><span>Data</span></h5>