fix: use tables for tabular data and add table styles

dhis2 · Sep 17, 2020 · a140b9d · a140b9d
1 parent 775f3c8
commit a140b9d
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 18 deletions.
diff --git a/src/aboutPage/AboutSection.component.js b/src/aboutPage/AboutSection.component.js
@@ -18,7 +18,7 @@ const AboutSection = ({ header, attributes }) => (
         <InfoHeader text={header} />
         <Card style={styles.card}>
             <CardText>
-                <div className="info-content">
+                <table className="info-content">
                     {attributes.map(({ label, value }) => (
                         <InfoItem
                             key={label}
@@ -30,7 +30,7 @@ const AboutSection = ({ header, attributes }) => (
                             }
                         />
                     ))}
-                </div>
+                </table>
             </CardText>
         </Card>
     </div>

diff --git a/src/layout/InfoCard.component.js b/src/layout/InfoCard.component.js
@@ -113,9 +113,9 @@ class InfoCard extends Component {
         return (
             <Card style={styles.card}>
                 <CardText>
-                    <div className="info-content">
+                    <table className="info-content">
                         {this.getLabelComponents(labelNames)}
-                    </div>
+                    </table>
                 </CardText>
             </Card>
         );

diff --git a/src/layout/InfoItem.component.js b/src/layout/InfoItem.component.js
@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const InfoItem = ({ label, value, labelStyle }) => (
-    <div className="label-row">
-        <span className="label-name" style={labelStyle}>{label}</span>
-        <span className="label-value">{value}</span>
-    </div>
+    <tr className="label-row">
+        <td className="label-name" style={labelStyle}>{label}</td>
+        <td className="label-value">{value}</td>
+    </tr>
 );
 
 InfoItem.propTypes = {

diff --git a/src/layout/app.css b/src/layout/app.css
@@ -20,27 +20,21 @@ html, body {
   margin-bottom: 64px;
 }
 
-.label-row {
-  display: flex;
-  padding: 4px 0px;
-  flex-direction: row;
-  justify-content: space-between;
+.info-content {
+  width: 100%;
+  margin: 0;
 }
 
 .label-name {
-  display: inline-block;
-  flex: 1;
   color: #777;
   font-size: 12pt;
   width: 110px;
-  text-align: right;
   padding-right: 20px;
+  white-space: nowrap;
   vertical-align: top;
 }
 
 .label-value {
-  display: inline-block;
-  flex: 2;
   font-size: 12pt;
   max-width: 510px;
 }