Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive label list table #423

Merged
merged 2 commits into from
Jun 6, 2019
Merged

Responsive label list table #423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d719504
Convert label list to grid
twm Jun 5, 2019
5b1169d
Responsive label list table
twm Jun 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 29 additions & 24 deletions assets/views/InventoryView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,43 +198,48 @@ export class LabelListView extends React.PureComponent {
</Tabs>
</GlobalBar>
<Centered>
{this.renderLabels(labelList, feedList)}
{this.renderLabelHeader(labelList)}
</Centered>
{this.renderLabels(labelList, feedList)}
</React.Fragment>;
}
renderLabelHeader(labelList) {
return <div className="label-header">
<h1>Labels</h1>
<p>{labelList.length} {labelList.length === 1 ? "label" : "labels"}</p>
</div>
}
renderLabels(labelList, feedList) {
if (!labelList.length) {
return <p>No labels.</p>
return <p>No labels.</p>;
}

// TODO sorting
// TODO filtering
return <table className="inventory-table label-table">
return <table className="label-list">
<thead>
<tr>
<th className="col-unread">Unread Articles</th>
<th className="col-label">Label</th>
<th className="col-feeds">Feeds</th>
<th className="col-edit"></th>
<tr className="label-list-item label-list-item-header">
<td></td>
<td></td>
<td>Feeds</td>
<td>Unread</td>
<td>Favorite</td>
<td></td>
</tr>
</thead>
<tbody>
{labelList.map(label => <tr key={label.id}>
<td className="col-unread">
<Count value={label.unreadCount} />
</td>
<td className="col-label">
<LabelLink labelId={label.id} filter={FILTER_UNREAD}>{label.text}</LabelLink>
</td>
<td className="col-feeds">
{feedList.filter(feed => feed.labels.indexOf(label.id) !== -1).length}
</td>
<td className="col-edit">
<InventoryLabelLink className="square" labelId={label.id} title="Edit Label">
<EditIcon aria-label="Edit Label" />
</InventoryLabelLink>
</td>
</tr>)}
{labelList.map(label => <tr className="label-list-item" key={label.id}>
<td><LabelIcon /></td>
<td>{label.text}</td>
<td>{feedList.filter(feed => feed.labels.indexOf(label.id) !== -1).length}</td>
<td><LabelLink labelId={label.id} filter={FILTER_UNREAD}>{label.unreadCount}</LabelLink></td>
<td><LabelLink labelId={label.id} filter={FILTER_FAVE}>{label.faveCount}</LabelLink></td>
<td>
<InventoryLabelLink className="square" labelId={label.id} title="Edit Label">
<EditIcon aria-label="Edit Label" />
</InventoryLabelLink>
</td>
</tr>)}
</tbody>
</table>;
}
Expand Down
126 changes: 124 additions & 2 deletions assets/views/InventoryView.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,130 @@
grid-template-columns: 2rem 2.5rem 2fr 1fr 1fr 1.5rem;
}

.label-table tr {
grid-template-columns: 2rem 1fr 2rem 1.5rem;
.label-list {
white-space: nowrap;

thead, tbody, tfoot {
display: contents;
}
td {
display: block;
}

}

.label-list-item {
// & > :nth-child(1) { background: hsla(160, 60%, 50%, 0.5); }
// & > :nth-child(2) { background: hsla(120, 60%, 50%, 0.5); }
// & > :nth-child(3) { background: hsla(060, 60%, 50%, 0.5); }
// & > :nth-child(4) { background: hsla(190, 60%, 50%, 0.5); }
// & > :nth-child(5) { background: hsla(000, 60%, 50%, 0.5); }
// & > :nth-child(6) { background: hsla(040, 60%, 50%, 0.5); }

// Icon
& > :nth-child(1) {
svg {
width: 2.5rem;
height: 2.5rem;
}
}

// Label name
& > :nth-child(2) {
}

// Feed count
& > :nth-child(3) {
}

// Unread count
& > :nth-child(4) {
}

// Fave count
& > :nth-child(5) {
}
// Edit button
& > :nth-child(6) {
svg {
width: 2rem;
height: 2rem;
}
}
}

// On wide displays, show a table with scannable columns.
@media screen and (min-width: 32rem) {
.label-list {
display: grid;
grid: "icon title feeds unread fave edit" auto /
max-content 5fr minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr);
}

.label-list-item {
display: contents;

td {
display: flex;
align-items: center;
justify-content: stretch;
padding: 0.75rem 0.5rem;
}

& > td:nth-child(3) { justify-content: end; }
& > td:nth-child(4) { justify-content: end; }
& > td:nth-child(5) { justify-content: end; }
& > td:nth-child(6) { justify-content: end; }
}

.label-list-item-header {
text-transform: uppercase;
font-size: smaller;
}

// Zebra stripes. Have to handle the header specially.
.label-list-item-header > td {
background: var(--footer-background-color);
border-bottom: 2px solid var(--quiet-text-color);
}
.label-list-item:nth-child(even) > td {
background: var(--footer-background-color);
}
}

// On narrow displays display a fatter row suitable for touchscreens.
@media screen and (max-width: 32rem) {
.label-list {
display: grid;
grid: auto-flow auto / 1fr;
}

.label-list-item {
display: grid;
grid:
"icon title unread edit" min-content
"icon feeds fave edit" min-content / min-content 1fr min-content min-content;

& > td:nth-child(1) { grid-area: icon; padding: 0.75rem 0.5rem 0.75rem @text_padding; }
& > td:nth-child(2) { grid-area: title; padding: 0.75rem 0 0 0; }
& > td:nth-child(3) { grid-area: feeds; padding: 0 0 0.75rem 0; }
& > td:nth-child(3)::after { content: " feeds"; }
& > td:nth-child(4) { grid-area: unread; padding: 0.5rem 0.5rem 0 0.5rem; text-align: right; }
& > td:nth-child(4) a::after { content: " unread"; }
& > td:nth-child(5) { grid-area: fave; padding: 0 0.5rem 0.5rem 0.5rem; text-align: right; }
& > td:nth-child(5) a::after { content: " favorites"; }
& > td:nth-child(6) { grid-area: edit; padding: 0.75rem @text_padding 0.75rem 0.5rem; }
}

// Hide the header, as we have duplicated its function inline.
.label-list-item-header {
display: none;
}

// Zebra stripes
.label-list-item:nth-child(even) > td {
background: var(--footer-background-color);
}
}

.inventory-tools {
Expand Down