feat: details page styling (#44)

Co-authored-by: Jim Thoburn <[email protected]>

Author: gr2m

api/detail.js

@@ -55,15 +55,14 @@ module.exports = async (request, response) => {
             endpoint.parameters
           )) {
             parameters.push(`
-            <tr>
-              <td>${parameterField({
+            <dt>${parameterField({
                 name,
                 type,
                 value: request.query[name] || ""
-              })}</td>
-              <td><code>${type}</code></td>
-              <td>${markdown.render(description)}</td>
-            </tr>
+              })}</dt>
+              <dd>
+              ${markdown.render(`\`${type}\` ` + description)}
+              </dd>
             `);
           }
 
@@ -137,30 +136,18 @@ module.exports = async (request, response) => {
 
     <section>
       <h2>Parameters</h2>
-      <form action="#request-preview" id="parametersForm">
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Type</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                <label>
-                  <code>token</code><br />
-                  <input type="text" name="token" value="${request.query
-                    .token || ""}" />
-                </label>
-              </td>
-              <td><code>string</code></td>
-              <td><p>The token will be passed in the authorization header.</p></td>
-            </tr>
-            ${parameters.join("")}
-          </tbody>
-        </table>
+      <form action="#request-preview" id="parametersForm" class="parameters">
+        <dl>
+          <dt>
+            <label>
+              <span>token</span>
+              <input type="text" name="token" value="${request.query
+                .token || ""}" />
+            </label>
+          </dt>
+          <dd><p><code>string</code> The token will be passed in the authorization header.</p></dd>
+          ${parameters.join("")}
+        </dl>
         <p><button type="submit">Update request preview</button></p>
       </form>
   

public/components/parameter-field.js

@@ -7,7 +7,7 @@ function radioFieldSet({ name, options, selectedValue }) {
           <input type="radio" name="${name}" value="${option}" ${
       selectedValue === option ? `checked` : ""
     } />
-          <code>${option}</code>
+          <span>${option}</span>
         </label>
       </li>
     `);
@@ -29,7 +29,7 @@ function parameterField({ name, type, value }) {
   if (type === "integer") {
     return `
       <label>
-        <code>${name}</code><br />
+        <span>${name}</span>
         <input type="number" name="${name}" value="${value}" />
       </label>
     `;
@@ -44,7 +44,7 @@ function parameterField({ name, type, value }) {
   // Text field (Default)
   return `
     <label>
-      <code>${name}</code><br />
+      <span>${name}</span>
       <input type="text" name="${name}" value="${value}" />
     </label>
   `;

public/style.css

@@ -104,7 +104,7 @@ th {
   font-weight: 700;
 }
 tbody {
-  vertical-align: middle;
+  vertical-align: top;
   border-color: inherit;
 }
 tr {
@@ -180,5 +180,45 @@ form h1 {
 .details > * {
   margin: 3rem auto;
   padding: 1.5rem;
-  max-width: 45rem;
+  /* max-width: 45rem; */
+}
+
+/* Parameters */
+.parameters input {
+  width: 10em;
+  display: block;
+  margin: 0;
+}
+.parameters dt,
+.parameters dd {
+  border: none;
+  padding: 1em 0;
+}
+.parameters dt {
+  border-top: 1px solid hsl(0, 0%, 80%);
+}
+.parameters dd {
+  margin-left: 0;
+}
+
+.parameters dd p {
+  margin: 0;
+}
+
+@media (min-width: 60em) {
+  .parameters dl {
+    display: grid;
+    grid-template-columns: max-content auto;
+  }
+  .parameters label {
+    display: flex;
+    align-items: center;
+  }
+  .parameters label span {
+    min-width: 7em;
+  }
+  .parameters dd {
+    border-top: 1px solid hsl(0, 0%, 80%);
+    padding-left: 2em;
+  }
 }