fix: adding fixed header (#5712)

*  adding fixed header
This commit is contained in:
aballerr 2022-12-19 14:26:07 -05:00 committed by GitHub
parent 6282298d13
commit 804692b114
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 3 deletions

@ -34,7 +34,7 @@ const ListingHeader = styled(Row)`
margin-top: 18px; margin-top: 18px;
@media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) { @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
margin-top: 40px; margin-top: 16px;
} }
` `

@ -10,9 +10,21 @@ import { LOOKS_RARE_CREATOR_BASIS_POINTS } from 'nft/utils'
import { formatEth, formatUsdPrice } from 'nft/utils/currency' import { formatEth, formatUsdPrice } from 'nft/utils/currency'
import { fetchPrice } from 'nft/utils/fetchPrice' import { fetchPrice } from 'nft/utils/fetchPrice'
import { Dispatch, FormEvent, useEffect, useMemo, useRef, useState } from 'react' import { Dispatch, FormEvent, useEffect, useMemo, useRef, useState } from 'react'
import styled from 'styled-components/macro'
import * as styles from './ListPage.css' import * as styles from './ListPage.css'
const TableHeader = styled.div`
display: flex;
position: sticky;
align-items: center;
top: 72px;
padding-top: 24px;
padding-bottom: 24px;
z-index: 1;
background-color: ${({ theme }) => theme.backgroundBackdrop};
`
enum SetPriceMethod { enum SetPriceMethod {
SAME_PRICE, SAME_PRICE,
FLOOR_PRICE, FLOOR_PRICE,
@ -44,7 +56,7 @@ export const NFTListingsGrid = ({ selectedMarkets }: { selectedMarkets: ListingM
return ( return (
<Column> <Column>
<Row marginTop="20"> <TableHeader>
<Column <Column
marginLeft={selectedMarkets.length > 1 ? '36' : '0'} marginLeft={selectedMarkets.length > 1 ? '36' : '0'}
transition="500" transition="500"
@ -86,7 +98,7 @@ export const NFTListingsGrid = ({ selectedMarkets }: { selectedMarkets: ListingM
You receive You receive
</Column> </Column>
</Row> </Row>
</Row> </TableHeader>
{sellAssets.map((asset) => { {sellAssets.map((asset) => {
return ( return (
<> <>