Handle more lists, longer list names, on item page

Give the grid a fixed size, have the list name stuff get ellipsis when it's too long, and try to show all list names (which will almost certainly too long for the space) to give a better hint of what's in there.
This commit is contained in:
Emi Matchu 2021-11-26 15:05:07 -08:00
parent ad249d03ab
commit f32de55ed0

View file

@ -173,10 +173,11 @@ function ItemPageOwnWantButtons({ itemId }) {
return (
<Grid
templateRows="auto auto"
templateColumns="auto auto"
templateColumns="160px 160px"
gridAutoFlow="column"
rowGap="0.5"
columnGap="4"
justifyItems="center"
>
<SubtleSkeleton isLoaded={!loading}>
<ItemPageOwnButton
@ -210,9 +211,10 @@ function ItemPageOwnWantListsButton({ closetLists, isVisible }) {
let buttonText;
if (realLists.length === 1) {
buttonText = `In list "${realLists[0].name}"`;
buttonText = `In list: "${realLists[0].name}"`;
} else if (realLists.length > 1) {
buttonText = `In ${realLists.length} lists`;
const listNames = realLists.map((cl) => `"${cl.name}"`).join(", ");
buttonText = `${realLists.length} lists: ${listNames}`;
} else {
buttonText = "Add to list";
}
@ -223,6 +225,7 @@ function ItemPageOwnWantListsButton({ closetLists, isVisible }) {
fontSize="xs"
alignItems="center"
borderRadius="sm"
width="100%"
_hover={{ textDecoration: "underline" }}
_focus={{
textDecoration: "underline",
@ -245,7 +248,9 @@ function ItemPageOwnWantListsButton({ closetLists, isVisible }) {
>
{/* Flex tricks to center the text, ignoring the caret */}
<Box flex="1 0 0" />
<Box>{buttonText}</Box>
<Box textOverflow="ellipsis" overflow="hidden" whiteSpace="nowrap">
{buttonText}
</Box>
<Flex flex="1 0 0">
<ChevronDownIcon marginLeft="1" />
</Flex>