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

95
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 && (
Compare <ItemTradesTableCell as="th" width={minorColumnWidth}>
</ItemTradesTableCell> Compare
</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,41 +257,43 @@ function ItemTradesTableRow({
year: "numeric", year: "numeric",
}).format(new Date(lastTradeActivity))} }).format(new Date(lastTradeActivity))}
</ItemTradesTableCell> </ItemTradesTableCell>
<ItemTradesTableCell fontSize="xs"> {shouldShowCompareColumn && (
<Tooltip <ItemTradesTableCell fontSize="xs">
placement="bottom" <Tooltip
label={ placement="bottom"
<Box> label={
{compareListHeading}: <Box>
<Box as="ul" listStyle="disc"> {compareListHeading}:
<Box as="li" marginLeft="1em"> <Box as="ul" listStyle="disc">
Adorable Freckles <Box as="li" marginLeft="1em">
</Box> Adorable Freckles
<Box as="li" marginLeft="1em"> </Box>
Constellation Dress <Box as="li" marginLeft="1em">
Constellation Dress
</Box>
</Box> </Box>
<Box>(WIP: This is placeholder data!)</Box>
</Box> </Box>
<Box>(WIP: This is placeholder data!)</Box> }
</Box>
}
>
<Box
tabIndex="0"
width="100%"
className={css`
&:hover,
&:focus,
tr:hover &,
tr:focus-within & {
text-decoration: underline dashed;
}
`}
> >
<Box display={{ base: "block", md: "none" }}>2 match</Box> <Box
<Box display={{ base: "none", md: "block" }}>2 matches</Box> tabIndex="0"
</Box> width="100%"
</Tooltip> className={css`
</ItemTradesTableCell> &:hover,
&:focus,
tr:hover &,
tr:focus-within & {
text-decoration: underline dashed;
}
`}
>
<Box display={{ base: "block", md: "none" }}>2 match</Box>
<Box display={{ base: "none", md: "block" }}>2 matches</Box>
</Box>
</Tooltip>
</ItemTradesTableCell>
)}
</Box> </Box>
); );
} }