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 })}
-
+