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

use the same ItemCardList in items + modeling

Browse source 
and make the grid items take the full two-column width
This commit is contained in:
Emi Matchu 2020-09-11 21:53:57 -07:00
parent 8e091b14c6
commit 5546b21c27
3 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/app/ItemsPage.js
View file

@ -8,6 +8,7 @@ import HangerSpinner from "./components/HangerSpinner";
import { Heading1 } from "./util"; import { Heading1 } from "./util";
import ItemCard, { import ItemCard, {
ItemBadgeList, ItemBadgeList,
ItemCardList,
NcBadge, NcBadge,
NpBadge, NpBadge,
YouOwnThisBadge, YouOwnThisBadge,
@ -78,7 +79,7 @@ function ItemsPage() {
<Heading1 marginBottom="8"> <Heading1 marginBottom="8">
{isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`} {isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
</Heading1> </Heading1>
<Wrap justify="center"> <ItemCardList>
{data.user.itemsTheyOwn.map((item) => ( {data.user.itemsTheyOwn.map((item) => (
<ItemCard <ItemCard
key={item.id} key={item.id}
@ -96,12 +97,12 @@ function ItemsPage() {
} }
/> />
))} ))}
</Wrap> </ItemCardList>
<Heading1 marginBottom="8" marginTop="8"> <Heading1 marginBottom="8" marginTop="8">
{isCurrentUser ? "Items you want" : `Items ${data.user.username} wants`} {isCurrentUser ? "Items you want" : `Items ${data.user.username} wants`}
</Heading1> </Heading1>
<Wrap justify="center"> <ItemCardList>
{data.user.itemsTheyWant.map((item) => ( {data.user.itemsTheyWant.map((item) => (
<ItemCard <ItemCard
key={item.id} key={item.id}
@ -119,7 +120,7 @@ function ItemsPage() {
} }
/> />
))} ))}
</Wrap> </ItemCardList>
</Box> </Box>
); );
} }

7
src/app/ModelingPage.js
View file

@ -8,6 +8,7 @@ import HangerSpinner from "./components/HangerSpinner";
import { Heading1, Heading2 } from "./util"; import { Heading1, Heading2 } from "./util";
import ItemCard, { import ItemCard, {
ItemBadgeList, ItemBadgeList,
ItemCardList,
YouOwnThisBadge, YouOwnThisBadge,
} from "./components/ItemCard"; } from "./components/ItemCard";
@ -72,7 +73,7 @@ function ItemModelsList() {
); );
return ( return (
<SimpleGrid columns={{ sm: 1, lg: 2 }} spacing="6"> <ItemCardList>
{items.map((item) => ( {items.map((item) => (
<ItemModelCard <ItemModelCard
key={item.id} key={item.id}
@ -80,7 +81,7 @@ function ItemModelsList() {
currentUserOwnsItem={ownedItemIds.has(item.id)} currentUserOwnsItem={ownedItemIds.has(item.id)}
/> />
))} ))}
</SimpleGrid> </ItemCardList>
); );
} }
@ -89,7 +90,7 @@ function ItemModelCard({ item, currentUserOwnsItem, ...props }) {
<ItemModelBadges item={item} currentUserOwnsItem={currentUserOwnsItem} /> <ItemModelBadges item={item} currentUserOwnsItem={currentUserOwnsItem} />
); );
return <ItemCard item={item} badges={badges} />; return <ItemCard item={item} badges={badges} {...props} />;
} }
function ItemModelBadges({ item, currentUserOwnsItem }) { function ItemModelBadges({ item, currentUserOwnsItem }) {

10
src/app/components/ItemCard.js
View file

@ -4,6 +4,7 @@ import {
Badge, Badge,
Box, Box,
Image, Image,
SimpleGrid,
Tooltip, Tooltip,
Wrap, Wrap,
useColorModeValue, useColorModeValue,
@ -27,6 +28,7 @@ function ItemCard({ item, badges, ...props }) {
border="1px" border="1px"
borderColor={borderColor} borderColor={borderColor}
className="item-card" className="item-card"
width="100%"
{...props} {...props}
> >
<ItemCardContent <ItemCardContent
@ -174,6 +176,14 @@ function ItemName({ children, isDisabled, focusSelector, ...props }) {
); );
} }
export function ItemCardList({ children }) {
return (
<SimpleGrid columns={{ sm: 1, lg: 2 }} spacing="6">
{children}
</SimpleGrid>
);
}
export function ItemBadgeList({ children }) { export function ItemBadgeList({ children }) {
return ( return (
<Wrap spacing="2" marginTop="1" opacity="0.7"> <Wrap spacing="2" marginTop="1" opacity="0.7">