update parameters design

demo/main.css

@@ -7,6 +7,10 @@ body {
   padding-top: 50px;
 }
 
+p {
+  margin: 0;
+}
+
 nav input, nav button  {
   font-size: 16px;
   line-height: 28px;

lib/components/ParamsList/params-list.css

@@ -1,58 +1,92 @@
-h4 {
+h2 {
-  font-size: 16px;
+  border-bottom: 1px solid #999;
-  font-weight: 200;
+  font-size: 18px;
-  color: black;
+  padding: 0.2em 0;
+  margin: 0.5em 0;
+  color: #253137;
 }
 
-table {
+.params-wrap {
+  display: table;
+}
+
+.param-name {
+  display: table-cell;
+  padding: 0 5px;
+  font-weight: bold;
+}
+
+.param-info {
+  display: table-cell;
   width: 100%;
-  border-spacing: 0;
+  padding: 0 5px;
-  border: 2px solid #053361;
 }
 
-td.param-name {
+.param {
-  width: 20%;
+  display: table-row;
 }
 
-td.param-description {
+.param-required {
-  width: 30%;
+  color: red;
-}
+  font-weight: bold;
-
-thead tr:first-child {
-  background: #053361;
-  color: #fff;
-  border: none;
-}
-
-thead tr:last-child th {
-  border-bottom: 3px solid #ddd;
-}
-
-tbody tr:last-child td {
-  border: none;
-}
-tbody td {
-  border-bottom: 1px solid #ddd;
-}
-
-td, th {
-  vertical-align: top;
-  padding: 10px 10px;
   font-size: 12px;
 }
 
-th {
+.param-description {
-  text-align: left;
+  padding: 0.5em 0;
+  border-bottom: 1px solid #999;
 }
 
 .param-type {
-  background-color: #EAEAEA;
+  text-transform: capitalize;
-  border: silver 1px solid;
+  color: #999;
-  padding: 5px 10px;
+  font-weight: bold;
-  line-height: 14px;
+  font-size: 12px;
-  font-family: monospace;
 }
 
-.body-schema {
+.param-name {
-  display: inline-block;
+  border-left: 2px solid #7D97CE;
+  white-space: nowrap;
+  position: relative;
+}
+/* tree */
+.param-name > span:before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: #7D97CE;
+  margin: 0 5px;
+  top: -1px;
+  position: relative;
+}
+
+.param-name > span:after {
+  content: "";
+  position: absolute;
+  border-top: 2px solid #7D97CE;
+  width: 10px;
+  left: 0;
+  top: 10px;
+}
+
+.param:first-of-type .param-name:before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: -2px;
+  width: 2px;
+  background-color: white;
+  height: 10px;
+}
+
+.param:last-of-type .param-name:after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: -2px;
+  width: 2px;
+  top: 18px;
+  background-color: white;
+  bottom: 0;
 }

lib/components/ParamsList/params-list.html

@@ -1,5 +1,31 @@
+<h2 *ng-if="data.params.length"> Parameters </h2>
+<div class="params-wrap">
+  <div *ng-for="#param of data.params" class="param">
+    <div class="param-name">
+      <span> {{param.name}} </span>
+    </div>
+    <div class="param-info">
+      <div>
+        <span class="param-type" [ng-class]="param.type">{{param.type}}</span>
+        <span *ng-if="param.required" class="param-required">Required</span>
+      </div>
+      <div class="param-description" inner-html="{{param.description | marked}}"></div>
+    </div>
+  </div>
+</div>
+
+<div *ng-if="data.bodyParam">
+  <h2 *ng-if="data.bodyParam"> Request Body </h2>
+
+  <div class="body-param-description" inner-html="{{data.bodyParam.description | marked}}"></div>
+  <div>
+    <schema class="body-schema param-type" pointer="{{data.bodyParam.pointer}}/schema">
+    </schema>
+  </div>
+</div>
+<!--
 <table class="inline">
-  <!-- No params -->
+  <!- No params ->
   <tr *ng-if="data.noParams">
     <td colspan="3">
       <small class="no-params" > No parameters </small>
@@ -17,17 +43,17 @@
     </tr>
   </thead>
   <tbody>
-    <!-- General parameters -->
+    <!- General parameters ->
     <tr *ng-for="#param of data.params">
-      <!--<div class="param">-->
+      <!-<div class="param">->
         <td class="param-name">{{param.name}}</td>
         <td class="param-description" inner-html="{{param.description | marked}}"></td>
         <td>
           <span class="type" [ng-class]="param.type">{{param.type}}</span>
         </td>
-      <!--</div>-->
+      <!-</div>->
     </tr>
-    <!-- in-body parameter -->
+    <!- in-body parameter ->
     <tr class="param body-param" *ng-if="data.bodyParam">
       <td class="param-name">{{data.bodyParam.name}}</td>
       <td class="param-description" inner-html="{{data.bodyParam.description | marked}}"></td>
@@ -38,3 +64,4 @@
     </tr>
   </tbody>
 </table>
+-->