- {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; }
`;