💄 format dates for mobile, limit <td /> width

Author: ghalestrilo

client/modules/IDE/components/CollectionList/CollectionList.jsx

@@ -21,6 +21,7 @@ import CollectionListRow from './CollectionListRow';
 import ArrowUpIcon from '../../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../../images/sort-arrow-down.svg';
 
+
 class CollectionList extends React.Component {
   constructor(props) {
     super(props);
@@ -143,7 +144,7 @@ class CollectionList extends React.Component {
               <tr>
                 {this._renderFieldHeader('name', 'Name')}
                 {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')}
-                {(!mobile) && this._renderFieldHeader('updatedAt', 'Date Updated')}
+                {this._renderFieldHeader('updatedAt', 'Date Updated')}
                 {this._renderFieldHeader('numItems', '# sketches')}
                 <th scope="col"></th>
               </tr>

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -11,6 +11,8 @@ import * as ToastActions from '../../actions/toast';
 
 import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
 
+const formatDateCell = (date, mobile = false) => format(new Date(date), 'MMM D, YYYY');
+
 class CollectionListRowBase extends React.Component {
   static projectInCollection(project, collection) {
     return collection.items.find(item => item.project.id === project.id) != null;
@@ -212,7 +214,7 @@ class CollectionListRowBase extends React.Component {
           </span>
         </th>
         {(!mobile) && <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>}
-        {(!mobile) && <td>{format(new Date(collection.updatedAt), 'MMM D, YYYY')}</td>}
+        <td>{formatDateCell(collection.updatedAt)}</td>
         <td>{(collection.items || []).length}</td>
         <td className="sketch-list__dropdown-column">
           {this.renderActions()}

client/modules/IDE/components/SketchList.jsx

@@ -22,6 +22,11 @@ import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
 
+
+const formatDateCell = (date, mobile = false) =>
+  format(new Date(date), mobile ? 'MMM D, YYYY' : 'MMM D, YYYY h:mm A')
+    .replace(', ', mobile ? '\n' : ', ');
+
 class SketchListRowBase extends React.Component {
   constructor(props) {
     super(props);
@@ -288,8 +293,8 @@ class SketchListRowBase extends React.Component {
           <th scope="row">
             {name}
           </th>
-          {(!mobile) && <td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>}
-          <td>{format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')}</td>
+          <td>{formatDateCell(sketch.createdAt, mobile)}</td>
+          <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
           {this.renderDropdown()}
         </tr>
       </React.Fragment>);
@@ -432,7 +437,7 @@ class SketchList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Sketch')}
-                {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')}
+                {this._renderFieldHeader('createdAt', 'Date Created')}
                 {this._renderFieldHeader('updatedAt', 'Date Updated')}
                 <th scope="col"></th>
               </tr>

client/modules/Mobile/MobileDashboardView.jsx

@@ -19,6 +19,32 @@ import Button from '../../common/Button';
 
 const EXAMPLE_USERNAME = 'p5';
 
+const ContentWrapper = styled(Content)`
+  td,thead button {
+    font-size: ${remSize(10)};
+    padding-left: 0;
+    text-align: left;
+  };
+
+  thead th { padding-left: 0; }
+
+  tbody th {
+    font-size: ${remSize(12)};
+    /* font-weight: bold; */
+    width: 100%;
+    max-width: 70%;
+  };
+
+  .sketch-list__sort-button { padding: 0 }
+  .sketches-table__row {
+    height: ${remSize(48)};
+  }
+
+  .sketches-table-container { padding-bottom: ${remSize(160)} }
+
+  /* td.sketch-list__dropdown-column { min-width: unset; } */
+`;
+
 const FooterTab = styled(Link)`
   background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
   color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
@@ -90,14 +116,14 @@ const MobileDashboard = ({ params, location }) => {
       </Header>
 
 
-      <Content slimheader>
+      <ContentWrapper slimheader>
         <Subheader>
           {isOwner(user, params) && <SubheaderButton to={getCreatePathname(panel, username)}>new</SubheaderButton>}
           {panel === Tabs[0] && <SketchSearchbar />}
           {panel === Tabs[1] && <CollectionSearchbar />}
         </Subheader>
         {renderPanel(panel, { username, key: pathname })}
-      </Content>
+      </ContentWrapper>
       <Footer>
         {!isExamples &&
           <FooterTabSwitcher>

client/modules/Mobile/MobileViewContent.jsx

@@ -7,31 +7,4 @@ export default styled.div`
   /* Dashboard Styles */
   z-index: 0;
   margin-top: ${props => remSize(props.slimheader ? 50 : 68)};
-
-
-
-  /* Dashboard Styles */
-  
-
-  td {
-    font-size: ${remSize(10)};
-    min-width: ${remSize(72)};
-  };
-  tbody th {
-    font-size: ${remSize(14)};
-    /* font-weight: bold; */
-    width: 100%;
-    /* max-width: ${remSize(280)}; */
-
-    
-  };
-
-  .sketch-list__sort-button { padding: 0 }
-  .sketches-table__row {
-    height: ${remSize(48)};
-  }
-
-  .sketches-table-container { padding-bottom: ${remSize(160)} }
-
-  td.sketch-list__dropdown-column { min-width: unset; }
 `;