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

👌 update card fields alignment

Browse source
This commit is contained in:
ghalestrilo 2020-08-11 16:30:48 -03:00
parent 4a1eb0e3c5
commit 9c25daac8c
3 changed files with 12 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

4
client/modules/IDE/components/SketchList.jsx
View file

@ -293,8 +293,8 @@ class SketchListRowBase extends React.Component {
<th scope="row"> <th scope="row">
{name} {name}
</th> </th>
<td>{formatDateCell(sketch.createdAt, mobile)}</td> <td>{mobile && 'Created: '}{formatDateCell(sketch.createdAt, mobile)}</td>
<td>{formatDateCell(sketch.updatedAt, mobile)}</td> <td>{mobile && 'Updated: '}{formatDateCell(sketch.updatedAt, mobile)}</td>
{this.renderDropdown()} {this.renderDropdown()}
</tr> </tr>
</React.Fragment>); </React.Fragment>);

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

@ -50,10 +50,13 @@ const ContentWrapper = styled(Content)`
color: ${prop('primaryTextColor')} color: ${prop('primaryTextColor')}
} }
tbody td { justify-self: center; padding-left: ${remSize(12)}}
thead th svg { margin-left: ${remSize(8)} } thead th svg { margin-left: ${remSize(8)} }
tbody td:nth-child(2) { grid-column-start: 2 }
tbody td:last-child { justify-self: end; text-align: end; } tbody td:last-child { justify-self: end; text-align: end; };
.sketches-table .sketch-list__dropdown-column { min-width: unset };
tbody { height: ${remSize(48)}; } tbody { height: ${remSize(48)}; }
@ -68,8 +71,8 @@ const ContentWrapper = styled(Content)`
tr { tr {
align-self: start; align-self: start;
display: grid; display: grid;
grid-template-columns: repeat(3,5fr) 1fr; grid-template-columns: 5fr 5fr 2fr;
grid-template-areas: "name name name name" "none content content content"; grid-template-areas: "name name name" "content content content";
border-radius: ${remSize(4)}; padding: ${remSize(8)}; border-radius: ${remSize(4)}; padding: ${remSize(8)};
box-shadow: 0 0 18px 0 ${prop('shadowColor')}; box-shadow: 0 0 18px 0 ${prop('shadowColor')};