diff --git a/client/modules/App/App.jsx b/client/modules/App/App.jsx index af441a9d..4f69fb7c 100644 --- a/client/modules/App/App.jsx +++ b/client/modules/App/App.jsx @@ -34,7 +34,10 @@ class App extends React.Component { render() { return (
- {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } +
+ + {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && } +
{this.props.children}
); diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx index 251f3e3c..0381ca09 100644 --- a/client/modules/IDE/components/CollectionList/CollectionList.jsx +++ b/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 (
@@ -141,8 +142,8 @@ class CollectionList extends React.Component { {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')} @@ -150,6 +151,7 @@ class CollectionList extends React.Component { {this.props.collections.map(collection => ( - {format(new Date(collection.createdAt), 'MMM D, YYYY')} - {format(new Date(collection.updatedAt), 'MMM D, YYYY')} + {(!mobile) && {format(new Date(collection.createdAt), 'MMM D, YYYY')}} + {(!mobile) && {format(new Date(collection.updatedAt), 'MMM D, YYYY')}} {(collection.items || []).length} {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) { diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index bbece87a..d6cfd29b 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/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 { {name} - {format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')} + {(!mobile) && {format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}} {format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')} {this.renderDropdown()} @@ -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 (
@@ -425,7 +432,7 @@ class SketchList extends React.Component { {this._renderFieldHeader('name', 'Sketch')} - {this._renderFieldHeader('createdAt', 'Date Created')} + {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')} {this._renderFieldHeader('updatedAt', 'Date Updated')} @@ -433,6 +440,7 @@ class SketchList extends React.Component { {this.props.sketches.map(sketch => ( (CreatePathname[panel] || '#').re const isOwner = (user, params) => user && params && user.username === params.username; -const renderPanel = (name, props) => (Component => (Component && ))(Panels[name]); +const renderPanel = (name, props) => (Component => (Component && ))(Panels[name]); const MobileDashboard = ({ params, location }) => { const user = useSelector(state => state.user); diff --git a/client/modules/Mobile/MobileViewContent.jsx b/client/modules/Mobile/MobileViewContent.jsx index 11582982..ded9301d 100644 --- a/client/modules/Mobile/MobileViewContent.jsx +++ b/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; } `;