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

21
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,6 +80,7 @@ function ItemPageHeader({ itemId, isEmbedded }) {
const item = data?.item; const item = data?.item;
return ( return (
<>
<Box <Box
display="flex" display="flex"
alignItems="center" alignItems="center"
@ -98,6 +104,21 @@ function ItemPageHeader({ itemId, isEmbedded }) {
<ItemPageBadges item={item} isEmbedded={isEmbedded} /> <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>
</>
); );
} }