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

add item description to item page

Browse source
This commit is contained in:
Emi Matchu 2020-09-12 23:23:46 -07:00
parent 0725a7b1e8
commit fa0ae3fbe1
1 changed files with 42 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/app/ItemPage.js
View file

@ -6,8 +6,10 @@ import {
Button, Button,
Box, Box,
Skeleton, Skeleton,
SkeletonText,
VisuallyHidden, VisuallyHidden,
VStack, VStack,
useBreakpointValue,
useColorModeValue, useColorModeValue,
useTheme, useTheme,
useToast, useToast,
@ -60,6 +62,7 @@ function ItemPageHeader({ itemId, isEmbedded }) {
name name
isNc isNc
thumbnailUrl thumbnailUrl
description
} }
} }
`, `,
@ -68,6 +71,8 @@ function ItemPageHeader({ itemId, isEmbedded }) {
usePageTitle(data?.item?.name, { skip: isEmbedded }); usePageTitle(data?.item?.name, { skip: isEmbedded });
const numDescriptionLines = useBreakpointValue({ base: 2, md: 1 });
if (error) { if (error) {
return <Box color="red.400">{error.message}</Box>; return <Box color="red.400">{error.message}</Box>;
} }
@ -75,29 +80,45 @@ function ItemPageHeader({ itemId, isEmbedded }) {
const item = data?.item; const item = data?.item;
return ( return (
<Box <>
display="flex" <Box
alignItems="center" display="flex"
justifyContent="flex-start" alignItems="center"
width="100%" justifyContent="flex-start"
> width="100%"
<Skeleton isLoaded={item?.thumbnailUrl} marginRight="4"> >
<ItemThumbnail item={item} size="lg" isActive flex="0 0 auto" /> <Skeleton isLoaded={item?.thumbnailUrl} marginRight="4">
</Skeleton> <ItemThumbnail item={item} size="lg" isActive flex="0 0 auto" />
<Box>
<Skeleton isLoaded={item?.name}>
<Heading1
lineHeight="1.1"
// Nudge down the size a bit in the embed case, to better fit the
// tighter layout!
size={isEmbedded ? "xl" : "2xl"}
>
{item?.name || "Item name here"}
</Heading1>
</Skeleton> </Skeleton>
<ItemPageBadges item={item} isEmbedded={isEmbedded} /> <Box>
<Skeleton isLoaded={item?.name}>
<Heading1
lineHeight="1.1"
// Nudge down the size a bit in the embed case, to better fit the
// tighter layout!
size={isEmbedded ? "xl" : "2xl"}
>
{item?.name || "Item name here"}
</Heading1>
</Skeleton>
<ItemPageBadges item={item} isEmbedded={isEmbedded} />
</Box>
</Box> </Box>
</Box> <Box width="100%" alignSelf="flex-start">
{item?.description || (
<Box
maxWidth="40em"
minHeight={numDescriptionLines * 1.5 + "em"}
display="flex"
flexDirection="column"
alignItems="stretch"
justifyContent="center"
>
<SkeletonText noOfLines={numDescriptionLines} spacing="4" />
</Box>
)}
</Box>
</>
); );
} }