💄 omit creation date on sketch and collection list

Author: ghalestrilo

client/modules/App/App.jsx

@@ -34,7 +34,10 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        <div style={{ display: 'none' }}>
+
+          {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
+        </div>
         {this.props.children}
       </div>
     );

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

@@ -127,6 +127,7 @@ class CollectionList extends React.Component {
 
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
+    const { mobile } = this.props;
 
     return (
       <article className="sketches-table-container">
@@ -141,15 +142,16 @@ class CollectionList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Name')}
-                {this._renderFieldHeader('createdAt', 'Date Created')}
-                {this._renderFieldHeader('updatedAt', 'Date Updated')}
+                {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')}
+                {(!mobile) && this._renderFieldHeader('updatedAt', 'Date Updated')}
                 {this._renderFieldHeader('numItems', '# sketches')}
                 <th scope="col"></th>
               </tr>
             </thead>
             <tbody>
               {this.props.collections.map(collection =>
                 (<CollectionListRow
+                  mobile={mobile}
                   key={collection.id}
                   collection={collection}
                   user={this.props.user}
@@ -209,7 +211,8 @@ CollectionList.propTypes = {
     owner: PropTypes.shape({
       id: PropTypes.string
     })
-  })
+  }),
+  mobile: PropTypes.bool,
 };
 
 CollectionList.defaultProps = {
@@ -218,7 +221,8 @@ CollectionList.defaultProps = {
     id: undefined,
     owner: undefined
   },
-  username: undefined
+  username: undefined,
+  mobile: false
 };
 
 function mapStateToProps(state, ownProps) {

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

@@ -199,7 +199,7 @@ class CollectionListRowBase extends React.Component {
   }
 
   render() {
-    const { collection } = this.props;
+    const { collection, mobile } = this.props;
 
     return (
       <tr
@@ -211,8 +211,8 @@ class CollectionListRowBase extends React.Component {
             {this.renderCollectionName()}
           </span>
         </th>
-        <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
-        <td>{format(new Date(collection.updatedAt), 'MMM D, YYYY')}</td>
+        {(!mobile) && <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>}
+        {(!mobile) && <td>{format(new Date(collection.updatedAt), 'MMM D, YYYY')}</td>}
         <td>{(collection.items || []).length}</td>
         <td className="sketch-list__dropdown-column">
           {this.renderActions()}
@@ -245,6 +245,11 @@ CollectionListRowBase.propTypes = {
   deleteCollection: PropTypes.func.isRequired,
   editCollection: PropTypes.func.isRequired,
   onAddSketches: PropTypes.func.isRequired,
+  mobile: PropTypes.bool,
+};
+
+CollectionListRowBase.defaultProps = {
+  mobile: false,
 };
 
 function mapDispatchToPropsSketchListRow(dispatch) {

client/modules/IDE/components/SketchList.jsx

@@ -251,6 +251,7 @@ class SketchListRowBase extends React.Component {
     const {
       sketch,
       username,
+      mobile
     } = this.props;
     const { renameOpen, renameValue } = this.state;
     let url = `/${username}/sketches/${sketch.id}`;
@@ -287,7 +288,7 @@ class SketchListRowBase extends React.Component {
           <th scope="row">
             {name}
           </th>
-          <td>{format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}</td>
+          {(!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>
           {this.renderDropdown()}
         </tr>
@@ -312,7 +313,12 @@ SketchListRowBase.propTypes = {
   cloneProject: PropTypes.func.isRequired,
   exportProjectAsZip: PropTypes.func.isRequired,
   changeProjectName: PropTypes.func.isRequired,
-  onAddToCollection: PropTypes.func.isRequired
+  onAddToCollection: PropTypes.func.isRequired,
+  mobile: PropTypes.bool
+};
+
+SketchListRowBase.defaultProps = {
+  mobile: false
 };
 
 function mapDispatchToPropsSketchListRow(dispatch) {
@@ -413,6 +419,7 @@ class SketchList extends React.Component {
 
   render() {
     const username = this.props.username !== undefined ? this.props.username : this.props.user.username;
+    const { mobile } = this.props;
     return (
       <article className="sketches-table-container">
         <Helmet>
@@ -425,14 +432,15 @@ class SketchList extends React.Component {
             <thead>
               <tr>
                 {this._renderFieldHeader('name', 'Sketch')}
-                {this._renderFieldHeader('createdAt', 'Date Created')}
+                {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')}
                 {this._renderFieldHeader('updatedAt', 'Date Updated')}
                 <th scope="col"></th>
               </tr>
             </thead>
             <tbody>
               {this.props.sketches.map(sketch =>
                 (<SketchListRow
+                  mobile={mobile}
                   key={sketch.id}
                   sketch={sketch}
                   user={this.props.user}
@@ -482,10 +490,12 @@ SketchList.propTypes = {
     field: PropTypes.string.isRequired,
     direction: PropTypes.string.isRequired
   }).isRequired,
+  mobile: PropTypes.bool,
 };
 
 SketchList.defaultProps = {
-  username: undefined
+  username: undefined,
+  mobile: false,
 };
 
 function mapStateToProps(state) {

client/modules/Mobile/MobileDashboardView.jsx

@@ -72,7 +72,7 @@ const getCreatePathname = (panel, username) => (CreatePathname[panel] || '#').re
 
 const isOwner = (user, params) => user && params && user.username === params.username;
 
-const renderPanel = (name, props) => (Component => (Component && <Component {...props} />))(Panels[name]);
+const renderPanel = (name, props) => (Component => (Component && <Component {...props} mobile />))(Panels[name]);
 
 const MobileDashboard = ({ params, location }) => {
   const user = useSelector(state => state.user);

client/modules/Mobile/MobileViewContent.jsx

@@ -4,22 +4,34 @@ import { remSize } from '../../theme';
 
 
 export default styled.div`
+  /* Dashboard Styles */
   z-index: 0;
   margin-top: ${props => remSize(props.slimheader ? 50 : 68)};
 
-  .sketch-list__sort-button { padding: 0 }
+
+
+  /* Dashboard Styles */
+  
 
   td {
     font-size: ${remSize(10)};
     min-width: ${remSize(72)};
   };
   tbody th {
-    flex-direction: row;
     font-size: ${remSize(14)};
     /* font-weight: bold; */
-    /* width: 100%; */
-    max-width: ${remSize(140)};
+    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; }
 `;