OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

hide compare column for now

Browse source
This commit is contained in:
Emi Matchu 2020-11-24 14:49:20 -08:00
parent c23243fcb7
commit c8af209012
1 changed files with 55 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/app/ItemTradesPage.js
View file

@ -132,6 +132,17 @@ function ItemTradesTable({
return <Box color="red.400">{error.message}</Box>; return <Box color="red.400">{error.message}</Box>;
} }
// HACK: I'm pretty much hiding this for now, because it's not ready. But
/// it's visible at #show-compare-column!
const shouldShowCompareColumn = window.location.href.includes(
"show-compare-column"
);
const minorColumnWidth = {
base: shouldShowCompareColumn ? "23%" : "30%",
md: "18ex",
};
return ( return (
<Box <Box
as="table" as="table"
@ -146,20 +157,20 @@ function ItemTradesTable({
> >
<Box as="thead" fontSize={{ base: "xs", sm: "sm" }}> <Box as="thead" fontSize={{ base: "xs", sm: "sm" }}>
<Box as="tr"> <Box as="tr">
<ItemTradesTableCell as="th" width={{ base: "30%", md: "auto" }}> <ItemTradesTableCell as="th">List</ItemTradesTableCell>
List <ItemTradesTableCell as="th" width={minorColumnWidth}>
</ItemTradesTableCell>
<ItemTradesTableCell as="th" width={{ base: "23%", md: "18ex" }}>
{userHeading} {userHeading}
</ItemTradesTableCell> </ItemTradesTableCell>
<ItemTradesTableCell as="th" width={{ base: "23%", md: "18ex" }}> <ItemTradesTableCell as="th" width={minorColumnWidth}>
{/* A small wording tweak to fit better on the xsmall screens! */} {/* A small wording tweak to fit better on the xsmall screens! */}
<Box display={{ base: "none", sm: "block" }}>Last active</Box> <Box display={{ base: "none", sm: "block" }}>Last active</Box>
<Box display={{ base: "block", sm: "none" }}>Active at</Box> <Box display={{ base: "block", sm: "none" }}>Active at</Box>
</ItemTradesTableCell> </ItemTradesTableCell>
<ItemTradesTableCell as="th" width={{ base: "23%", md: "18ex" }}> {shouldShowCompareColumn && (
<ItemTradesTableCell as="th" width={minorColumnWidth}>
Compare Compare
</ItemTradesTableCell> </ItemTradesTableCell>
)}
</Box> </Box>
</Box> </Box>
<Box as="tbody"> <Box as="tbody">
@ -182,6 +193,7 @@ function ItemTradesTable({
username={trade.user.username} username={trade.user.username}
listName={trade.closetList.name} listName={trade.closetList.name}
lastTradeActivity={trade.user.lastTradeActivity} lastTradeActivity={trade.user.lastTradeActivity}
shouldShowCompareColumn={shouldShowCompareColumn}
/> />
))} ))}
{!loading && data.item.trades.length === 0 && ( {!loading && data.item.trades.length === 0 && (
@ -206,6 +218,7 @@ function ItemTradesTableRow({
username, username,
listName, listName,
lastTradeActivity, lastTradeActivity,
shouldShowCompareColumn,
}) { }) {
const history = useHistory(); const history = useHistory();
const onClick = React.useCallback(() => history.push(href), [history, href]); const onClick = React.useCallback(() => history.push(href), [history, href]);
@ -244,6 +257,7 @@ function ItemTradesTableRow({
year: "numeric", year: "numeric",
}).format(new Date(lastTradeActivity))} }).format(new Date(lastTradeActivity))}
</ItemTradesTableCell> </ItemTradesTableCell>
{shouldShowCompareColumn && (
<ItemTradesTableCell fontSize="xs"> <ItemTradesTableCell fontSize="xs">
<Tooltip <Tooltip
placement="bottom" placement="bottom"
@ -279,6 +293,7 @@ function ItemTradesTableRow({
</Box> </Box>
</Tooltip> </Tooltip>
</ItemTradesTableCell> </ItemTradesTableCell>
)}
</Box> </Box>
); );
} }