Skip to content

I
interface
Commit 46563ee5 authored by Charles Bachmeier's avatar Charles Bachmeier Committed by GitHub
Browse files
Options

fix: align items on collection page (#5355) 

align items on collection page
Co-authored-by: default avatarCharles Bachmeier <charlie@genie.xyz>
parent c68624e0
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 66 deletions
src/nft/components/collection/CollectionNfts.tsx
View file @ 46563ee5
...@@ -183,20 +183,22 @@ export const CollectionNftsLoading = () => ( ...@@ -183,20 +183,22 @@ export const CollectionNftsLoading = () => (
) )
export const CollectionNftsAndMenuLoading = () => ( export const CollectionNftsAndMenuLoading = () => (
<Column alignItems="flex-start" position="relative" width="full"> <InfiniteScrollWrapper>
<Row marginY="12" gap="12"> <Column alignItems="flex-start" position="relative" width="full">
<Box className={loadingAsset} borderRadius="12" width={{ sm: '44', md: '100' }} height="44" /> <Row marginY="12" gap="12">
<Box <Box className={loadingAsset} borderRadius="12" width={{ sm: '44', md: '100' }} height="44" />
className={loadingAsset} <Box
borderRadius="12" className={loadingAsset}
height="44" borderRadius="12"
display={{ sm: 'none', md: 'flex' }} height="44"
style={{ width: '220px' }} display={{ sm: 'none', md: 'flex' }}
/> style={{ width: '220px' }}
<Box className={loadingAsset} borderRadius="12" height="44" width={{ sm: '276', md: '332' }} /> />
</Row> <Box className={loadingAsset} borderRadius="12" height="44" width={{ sm: '276', md: '332' }} />
<CollectionNftsLoading /> </Row>
</Column> <CollectionNftsLoading />
</Column>
</InfiniteScrollWrapper>
) )
export const getSortDropdownOptions = (setSortBy: (sortBy: SortBy) => void, hasRarity: boolean): DropDownOption[] => { export const getSortDropdownOptions = (setSortBy: (sortBy: SortBy) => void, hasRarity: boolean): DropDownOption[] => {
...@@ -532,58 +534,60 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie ...@@ -532,58 +534,60 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
</SweepButton> </SweepButton>
)} )}
</ActionsContainer> </ActionsContainer>
{sweepIsOpen && ( <InfiniteScrollWrapper>
<Sweep contractAddress={contractAddress} minPrice={debouncedMinPrice} maxPrice={debouncedMaxPrice} /> {sweepIsOpen && (
)} <Sweep contractAddress={contractAddress} minPrice={debouncedMinPrice} maxPrice={debouncedMaxPrice} />
<Row
paddingTop={!!markets.length || !!traits.length || minMaxPriceChipText ? '12' : '0'}
gap="8"
flexWrap="wrap"
>
{markets.map((market) => (
<TraitChip
key={market}
value={
<MarketNameWrapper>
<MarketplaceLogo src={`/nft/svgs/marketplaces/${market.toLowerCase()}.svg`} />
{MARKETPLACE_ITEMS[market as keyof typeof MARKETPLACE_ITEMS]}
</MarketNameWrapper>
}
onClick={() => {
scrollToTop()
removeMarket(market)
}}
/>
))}
{traits.map((trait) => (
<TraitChip
key={trait.trait_value}
value={
trait.trait_type === 'Number of traits'
? `${trait.trait_value} trait${pluralize(Number(trait.trait_value))}`
: `${trait.trait_type}: ${trait.trait_value}`
}
onClick={() => {
scrollToTop()
removeTrait(trait)
}}
/>
))}
{minMaxPriceChipText && (
<TraitChip
value={minMaxPriceChipText}
onClick={() => {
scrollToTop()
setMin('')
setMax('')
setPrevMinMax([0, 100])
}}
/>
)}
{Boolean(traits.length || markets.length || minMaxPriceChipText) && (
<ClearAllButton onClick={handleClearAllClick}>Clear All</ClearAllButton>
)} )}
</Row> <Row
paddingTop={!!markets.length || !!traits.length || minMaxPriceChipText ? '12' : '0'}
gap="8"
flexWrap="wrap"
>
{markets.map((market) => (
<TraitChip
key={market}
value={
<MarketNameWrapper>
<MarketplaceLogo src={`/nft/svgs/marketplaces/${market.toLowerCase()}.svg`} />
{MARKETPLACE_ITEMS[market as keyof typeof MARKETPLACE_ITEMS]}
</MarketNameWrapper>
}
onClick={() => {
scrollToTop()
removeMarket(market)
}}
/>
))}
{traits.map((trait) => (
<TraitChip
key={trait.trait_value}
value={
trait.trait_type === 'Number of traits'
? `${trait.trait_value} trait${pluralize(Number(trait.trait_value))}`
: `${trait.trait_type}: ${trait.trait_value}`
}
onClick={() => {
scrollToTop()
removeTrait(trait)
}}
/>
))}
{minMaxPriceChipText && (
<TraitChip
value={minMaxPriceChipText}
onClick={() => {
scrollToTop()
setMin('')
setMax('')
setPrevMinMax([0, 100])
}}
/>
)}
{Boolean(traits.length || markets.length || minMaxPriceChipText) && (
<ClearAllButton onClick={handleClearAllClick}>Clear All</ClearAllButton>
)}
</Row>
</InfiniteScrollWrapper>
</AnimatedBox> </AnimatedBox>
<InfiniteScrollWrapper> <InfiniteScrollWrapper>
<InfiniteScroll <InfiniteScroll
......
src/nft/pages/collection/index.tsx
View file @ 46563ee5
...@@ -152,7 +152,7 @@ const Collection = () => { ...@@ -152,7 +152,7 @@ const Collection = () => {
<CollectionDisplaySection> <CollectionDisplaySection>
<Box <Box
position={isMobile ? 'fixed' : 'sticky'} position={isMobile ? 'fixed' : 'sticky'}
top="0" top={{ sm: '0', md: '72' }}
left="0" left="0"
width={isMobile ? 'full' : '0'} width={isMobile ? 'full' : '0'}
height={isMobile && isFiltersExpanded ? 'full' : undefined} height={isMobile && isFiltersExpanded ? 'full' : undefined}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment