Improve formatting of named logo list

badges · Jul 23, 2018 · d7065ee · d7065ee
1 parent 9855c0f
commit d7065ee
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/frontend/components/usage.js b/frontend/components/usage.js
@@ -66,7 +66,15 @@ export default class Usage extends React.PureComponent {
     );
   }
 
-  render () {
+  static renderNamedLogos() {
+    const renderLogo = logo => <span className="nowrap">{logo}</span>;
+    const [first, ...rest] = logos;
+    return [renderLogo(first)].concat(
+      rest.reduce((result, logo) => result.concat([', ', renderLogo(logo)]), [])
+    );
+  }
+
+  render() {
     const { baseUri } = this.props;
     return (
       <section>
@@ -142,7 +150,7 @@ export default class Usage extends React.PureComponent {
         <p>
           Here are a few other parameters you can use: (connecting several with "&" is possible)
         </p>
-        <table>
+        <table class="usage">
           <tbody>
             <tr>
               <td>
@@ -160,7 +168,9 @@ export default class Usage extends React.PureComponent {
               <td>
                 <code>?logo=appveyor</code>
               </td>
-              <td>Insert one of the named logos ({logos.join(', ')})</td>
+              <td>
+                Insert one of the named logos ({this.constructor.renderNamedLogos()})
+              </td>
             </tr>
             <tr>
               <td>

diff --git a/static/main.css b/static/main.css
@@ -57,6 +57,23 @@ table.centered > tbody > tr > td:first-child {
   text-align: right;
 }
 
+table.usage {
+  table-layout: fixed;
+  border-spacing: 20px 10px;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+table.usage td:first-of-type {
+  max-width: 300px;
+}
+
+table.usage td:nth-of-type(2) {
+  max-width: 600px;
+}
+
 th,
 td {
   text-align: left;