r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

🚧 move drop arrow to top of card, unhide CollectionList createdAt

Browse source
This commit is contained in:
ghalestrilo 2020-08-12 17:13:03 -03:00
parent 4b12f2f2f6
commit 9f3e083c17
3 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/modules/IDE/components/CollectionList/CollectionList.jsx
View file

@ -143,7 +143,7 @@ class CollectionList extends React.Component {
<thead> <thead>
<tr> <tr>
{this._renderFieldHeader('name', 'Name')} {this._renderFieldHeader('name', 'Name')}
{(!mobile) && this._renderFieldHeader('createdAt', 'Date Created')} {this._renderFieldHeader('createdAt', 'Date Created')}
{this._renderFieldHeader('updatedAt', 'Date Updated')} {this._renderFieldHeader('updatedAt', 'Date Updated')}
{this._renderFieldHeader('numItems', '# sketches')} {this._renderFieldHeader('numItems', '# sketches')}
<th scope="col"></th> <th scope="col"></th>

2
client/modules/IDE/components/CollectionList/CollectionListRow.jsx
View file

@ -213,7 +213,7 @@ class CollectionListRowBase extends React.Component {
{this.renderCollectionName()} {this.renderCollectionName()}
</span> </span>
</th> </th>
{(!mobile) && <td>{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>} <td>{mobile && 'Created: '}{format(new Date(collection.createdAt), 'MMM D, YYYY')}</td>
<td>{mobile && 'Updated: '}{formatDateCell(collection.updatedAt)}</td> <td>{mobile && 'Updated: '}{formatDateCell(collection.updatedAt)}</td>
<td>{mobile && '# sketches: '}{(collection.items || []).length}</td> <td>{mobile && '# sketches: '}{(collection.items || []).length}</td>
<td className="sketch-list__dropdown-column"> <td className="sketch-list__dropdown-column">

13
client/modules/Mobile/MobileDashboardView.jsx
View file

@ -55,7 +55,12 @@ const ContentWrapper = styled(Content)`
tbody td { justify-self: start; text-align: start; padding: 0 } tbody td { justify-self: start; text-align: start; padding: 0 }
tbody td:nth-child(2) { justify-self: start; text-align: start; padding-left: ${remSize(12)}}; tbody td:nth-child(2) { justify-self: start; text-align: start; padding-left: ${remSize(12)}};
tbody td:last-child { justify-self: end; text-align: end; }; tbody td:last-child {
justify-self: end;
text-align: end;
grid-row-start: 1;
grid-column-start: 3;
};
.sketch-list__dropdown-column { width: auto; }; .sketch-list__dropdown-column { width: auto; };
@ -78,13 +83,13 @@ const ContentWrapper = styled(Content)`
}; };
thead tr { thead tr {
grid-template-columns: 1fr 1fr 1fr 0fr; grid-template-columns: repeat(${props => props.fieldcount}, 1fr) 0fr;
} }
tbody tr { tbody tr {
padding: ${remSize(8)}; padding: ${remSize(8)};
border-radius: ${remSize(4)}; border-radius: ${remSize(4)};
grid-template-columns: 5fr 5fr 1fr; grid-template-columns: repeat(${props => props.fieldcount - 1}) 1fr;
grid-template-areas: "name name name" "content content content"; grid-template-areas: "name name name" "content content content";
} }
@ -180,7 +185,7 @@ const MobileDashboard = ({ params, location }) => {
</Header> </Header>
<ContentWrapper slimheader> <ContentWrapper slimheader fieldcount={panel === Tabs[1] ? 4 : 3}>
<Subheader> <Subheader>
{panel === Tabs[0] && <SketchSearchbar />} {panel === Tabs[0] && <SketchSearchbar />}
{panel === Tabs[1] && <CollectionSearchbar />} {panel === Tabs[1] && <CollectionSearchbar />}