Skip to content

I
interface
Commit f1990ff0 authored by Jack Short's avatar Jack Short Committed by GitHub
Browse files
Options

style: adding header to top of profile page (#5285)

parent b48af759
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 58 deletions
src/nft/components/profile/view/ProfilePage.tsx
View file @ f1990ff0
...@@ -33,6 +33,21 @@ const ProfilePageColumn = styled(Column)` ...@@ -33,6 +33,21 @@ const ProfilePageColumn = styled(Column)`
${ScreenBreakpointsPaddings} ${ScreenBreakpointsPaddings}
` `
const ProfileHeader = styled.div`
font-size: 28px;
font-weight: 500;
line-height: 38px;
padding-bottom: 16px;
margin-bottom: 8px;
border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
@media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
font-size: 20px;
line-height: 28px;
margin-bottom: 0px;
}
`
export const DEFAULT_WALLET_ASSET_QUERY_AMOUNT = 25 export const DEFAULT_WALLET_ASSET_QUERY_AMOUNT = 25
const FILTER_SIDEBAR_WIDTH = 300 const FILTER_SIDEBAR_WIDTH = 300
const PADDING = 16 const PADDING = 16
...@@ -83,66 +98,69 @@ export const ProfilePage = () => { ...@@ -83,66 +98,69 @@ export const ProfilePage = () => {
{ownerAssets?.length === 0 ? ( {ownerAssets?.length === 0 ? (
<EmptyWalletContent /> <EmptyWalletContent />
) : ( ) : (
<Row alignItems="flex-start" position="relative"> <>
<FilterSidebar /> <ProfileHeader>My NFTs</ProfileHeader>
<Row alignItems="flex-start" position="relative">
<FilterSidebar />
{(!isMobile || !isFiltersExpanded) && ( {(!isMobile || !isFiltersExpanded) && (
<Column width="full"> <Column width="full">
<AnimatedBox <AnimatedBox
flexShrink="0" flexShrink="0"
style={{ style={{
transform: gridX.to( transform: gridX.to(
(x) => (x) =>
`translate(${Number(x) - (!isMobile && isFiltersExpanded ? FILTER_SIDEBAR_WIDTH : -PADDING)}px)` `translate(${Number(x) - (!isMobile && isFiltersExpanded ? FILTER_SIDEBAR_WIDTH : -PADDING)}px)`
), ),
}} }}
paddingY="20" paddingY="20"
>
<Row gap="8" flexWrap="nowrap" justifyContent="space-between">
<FilterButton
isMobile={isMobile}
isFiltersExpanded={isFiltersExpanded}
onClick={() => setFiltersExpanded(!isFiltersExpanded)}
/>
</Row>
<Row>
<CollectionFiltersRow
collections={walletCollections}
collectionFilters={collectionFilters}
setCollectionFilters={setCollectionFilters}
clearCollectionFilters={clearCollectionFilters}
/>
</Row>
<InfiniteScroll
next={() => loadNext(DEFAULT_WALLET_ASSET_QUERY_AMOUNT)}
hasMore={hasNext}
loader={
<Center>
<LoadingSparkle />
</Center>
}
dataLength={ownerAssets?.length ?? 0}
style={{ overflow: 'unset' }}
> >
<div className={assetList}> <Row gap="8" flexWrap="nowrap" justifyContent="space-between">
{ownerAssets?.length <FilterButton
? ownerAssets.map((asset, index) => ( isMobile={isMobile}
<div key={index}> isFiltersExpanded={isFiltersExpanded}
<ViewMyNftsAsset onClick={() => setFiltersExpanded(!isFiltersExpanded)}
asset={asset} />
mediaShouldBePlaying={asset.tokenId === currentTokenPlayingMedia} </Row>
setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia} <Row>
hideDetails={sellAssets.length > 0} <CollectionFiltersRow
/> collections={walletCollections}
</div> collectionFilters={collectionFilters}
)) setCollectionFilters={setCollectionFilters}
: null} clearCollectionFilters={clearCollectionFilters}
</div> />
</InfiniteScroll> </Row>
</AnimatedBox> <InfiniteScroll
</Column> next={() => loadNext(DEFAULT_WALLET_ASSET_QUERY_AMOUNT)}
)} hasMore={hasNext}
</Row> loader={
<Center>
<LoadingSparkle />
</Center>
}
dataLength={ownerAssets?.length ?? 0}
style={{ overflow: 'unset' }}
>
<div className={assetList}>
{ownerAssets?.length
? ownerAssets.map((asset, index) => (
<div key={index}>
<ViewMyNftsAsset
asset={asset}
mediaShouldBePlaying={asset.tokenId === currentTokenPlayingMedia}
setCurrentTokenPlayingMedia={setCurrentTokenPlayingMedia}
hideDetails={sellAssets.length > 0}
/>
</div>
))
: null}
</div>
</InfiniteScroll>
</AnimatedBox>
</Column>
)}
</Row>
</>
)} )}
{sellAssets.length > 0 && ( {sellAssets.length > 0 && (
<Row <Row
......
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