diff --git a/client/modules/IDE/components/CollectionList/CollectionList.jsx b/client/modules/IDE/components/CollectionList/CollectionList.jsx index 0381ca09..c161d2bb 100644 --- a/client/modules/IDE/components/CollectionList/CollectionList.jsx +++ b/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 { {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')} diff --git a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx b/client/modules/IDE/components/CollectionList/CollectionListRow.jsx index 9bc70e42..f7a645e6 100644 --- a/client/modules/IDE/components/CollectionList/CollectionListRow.jsx +++ b/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 { {(!mobile) && {format(new Date(collection.createdAt), 'MMM D, YYYY')}} - {(!mobile) && {format(new Date(collection.updatedAt), 'MMM D, YYYY')}} + {formatDateCell(collection.updatedAt)} {(collection.items || []).length} {this.renderActions()} diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index d6cfd29b..38f69f8b 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/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 { {name} - {(!mobile) && {format(new Date(sketch.createdAt), 'MMM D, YYYY h:mm A')}} - {format(new Date(sketch.updatedAt), 'MMM D, YYYY h:mm A')} + {formatDateCell(sketch.createdAt, mobile)} + {formatDateCell(sketch.updatedAt, mobile)} {this.renderDropdown()} ); @@ -432,7 +437,7 @@ class SketchList extends React.Component { {this._renderFieldHeader('name', 'Sketch')} - {(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')} + {this._renderFieldHeader('createdAt', 'Date Created')} {this._renderFieldHeader('updatedAt', 'Date Updated')} diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx index 7a662ad9..f65b52bf 100644 --- a/client/modules/Mobile/MobileDashboardView.jsx +++ b/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 }) => { - + {isOwner(user, params) && new} {panel === Tabs[0] && } {panel === Tabs[1] && } {renderPanel(panel, { username, key: pathname })} - +