Merge pull request #11 from hmrc/APIS-3471

APIS-3472 Change to responsive tables

Author: edjannoo

app/uk/gov/hmrc/apidocumentation/views/raml/method_params.scala.html

@@ -20,7 +20,7 @@
 
 @for(param <- params){
 <tr class="table__row--responsive">
-    <td data-heading="Name" class="table__detail--responsive table__col--1-">
+    <td data-heading="Name" class="table__detail--responsive table__col--1-3">
       <div class="table__cell-contents--responsive">
           <div class="parameter-name">@param.name</div>
           <div class="parameter-type">@{param.baseTypeName}</div>

app/uk/gov/hmrc/apidocumentation/views/raml/resource_content.scala.html

@@ -27,15 +27,15 @@
     @if(params.nonEmpty) {
         <section id="request-parameters_@contentID" class="section">
             <h4 class="heading-small">Path parameters</h4>
-            <table>
-                <caption>
+            <table class="table--align-top">
+                <caption class="table__caption--low-vis">
                     <div class="visually-hidden">Path parameters table</div>
                 </caption>
                 <col width="33%"/>
                 <col width="67%"/>
                 <thead>
-                    <tr>
-                        <th>Name</th>
+                    <tr class="table__row--desktop-heading">
+                        <th class="table__col--1-3">Name</th>
                         <th>Description</th>
                     </tr>
                 </thead>
@@ -51,15 +51,15 @@ <h4 class="heading-small">Path parameters</h4>
     @if(params.nonEmpty) {
         <section id="query-parameters_@contentID" class="section">
             <h4 class="heading-small first">Query parameters</h4>
-            <table>
-                <caption>
+            <table class="table--align-top">
+                <caption class="table__caption--low-vis">
                     <div class="visually-hidden">Query parameters table</div>
                 </caption>
                 <col width="33%"/>
                 <col width="67%"/>
                 <thead>
-                    <tr>
-                        <th>Name</th>
+                    <tr class="table__row--desktop-heading">
+                        <th class="table__col--1-3">Name</th>
                         <th>Description</th>
                     </tr>
                 </thead>
@@ -143,12 +143,12 @@ <h4 class="heading-small">Response</h4>
     @if(errorScenarios.nonEmpty) {
         <section id="error-responses_@contentID" class="section">
             <h4 class="heading-small">Error scenarios</h4>
-            <table>
-                <caption>
+            <table class="table--align-top">
+                <caption class="table__caption--low-vis">
                     <div class="visually-hidden">Error scenarios table</div>
                 </caption>
                 <thead>
-                    <tr>
+                    <tr class="table__row--desktop-heading">
                         <th>Scenario</th>
                         <th>HTTP status</th>
                         <th>Code</th>