Skip to content

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

feat: [DetailsV2] Show data page header when nft scrolled out of view (#6585) 

* show data page header when nft scrolled out of view

* add new snapshot test

* useRef for observer

* add comment

---------
Co-authored-by: default avatarCharles Bachmeier <charlie@genie.xyz>
parent 10b156ff
Hide whitespace changes
Inline Side-by-side
Showing with 698 additions and 114 deletions
src/nft/components/details/detailsV2/DataPage.test.tsx
View file @ ef6d1f20
...@@ -3,7 +3,14 @@ import { render } from 'test-utils/render' ...@@ -3,7 +3,14 @@ import { render } from 'test-utils/render'
import { DataPage } from './DataPage' import { DataPage } from './DataPage'
it('placeholder containers load', () => { it('data page loads with header showing', () => {
const { asFragment } = render(<DataPage asset={TEST_NFT_ASSET} />) const { asFragment } = render(<DataPage asset={TEST_NFT_ASSET} showDataHeader={true} />)
expect(asFragment()).toMatchSnapshot()
})
// The header is hidden via opacity: 0 to maintain its spacing, so it still exists in the DOM
// Therefore we can not check for its non-existence and instead rely on comparing the full generated snapshots
it('data page loads without header showing', () => {
const { asFragment } = render(<DataPage asset={TEST_NFT_ASSET} showDataHeader={false} />)
expect(asFragment()).toMatchSnapshot() expect(asFragment()).toMatchSnapshot()
}) })
src/nft/components/details/detailsV2/DataPage.tsx
View file @ ef6d1f20
...@@ -35,6 +35,20 @@ const DataPageContainer = styled(Column)` ...@@ -35,6 +35,20 @@ const DataPageContainer = styled(Column)`
margin: 0 auto; margin: 0 auto;
` `
const HeaderContainer = styled.div<{ showDataHeader?: boolean }>`
position: sticky;
top: ${({ theme }) => `${theme.navHeight}px`};
padding-top: 16px;
backdrop-filter: blur(12px);
z-index: 1;
transition: ${({ theme }) => `opacity ${theme.transition.duration.fast}`};
opacity: ${({ showDataHeader }) => (showDataHeader ? '1' : '0')};
@media screen and (max-width: ${BREAKPOINTS.md}px) {
display: none;
}
`
const ContentContainer = styled(Row)` const ContentContainer = styled(Row)`
gap: 24px; gap: 24px;
padding-bottom: 45px; padding-bottom: 45px;
...@@ -50,11 +64,13 @@ const LeftColumn = styled(Column)` ...@@ -50,11 +64,13 @@ const LeftColumn = styled(Column)`
align-self: flex-start; align-self: flex-start;
` `
export const DataPage = ({ asset }: { asset: GenieAsset }) => { export const DataPage = ({ asset, showDataHeader }: { asset: GenieAsset; showDataHeader: boolean }) => {
return ( return (
<DataPagePaddingContainer> <DataPagePaddingContainer>
<DataPageContainer> <DataPageContainer>
<DataPageHeader asset={asset} /> <HeaderContainer showDataHeader={showDataHeader}>
<DataPageHeader asset={asset} />
</HeaderContainer>
<ContentContainer> <ContentContainer>
<LeftColumn> <LeftColumn>
{!!asset.traits?.length && <DataPageTraits asset={asset} />} {!!asset.traits?.length && <DataPageTraits asset={asset} />}
......
src/nft/components/details/detailsV2/DataPageHeader.tsx
View file @ ef6d1f20
...@@ -10,9 +10,6 @@ import { BREAKPOINTS, ThemedText } from 'theme' ...@@ -10,9 +10,6 @@ import { BREAKPOINTS, ThemedText } from 'theme'
const HeaderContainer = styled(Row)` const HeaderContainer = styled(Row)`
gap: 24px; gap: 24px;
@media screen and (max-width: ${BREAKPOINTS.md}px) {
display: none;
}
` `
const AssetImage = styled.img` const AssetImage = styled.img`
......
src/nft/components/details/detailsV2/LandingPage.test.tsx
View file @ ef6d1f20
...@@ -3,10 +3,26 @@ import { render } from 'test-utils/render' ...@@ -3,10 +3,26 @@ import { render } from 'test-utils/render'
import { LandingPage } from './LandingPage' import { LandingPage } from './LandingPage'
beforeEach(() => {
// IntersectionObserver isn't available in test environment
const mockIntersectionObserver = jest.fn()
mockIntersectionObserver.mockReturnValue({
observe: () => null,
unobserve: () => null,
disconnect: () => null,
})
window.IntersectionObserver = mockIntersectionObserver
})
describe('LandingPage', () => { describe('LandingPage', () => {
const mockSetShowDataHeader = jest.fn()
it('renders it correctly', () => { it('renders it correctly', () => {
const { asFragment } = render( const { asFragment } = render(
<LandingPage asset={TEST_NFT_ASSET} collection={TEST_NFT_COLLECTION_INFO_FOR_ASSET} /> <LandingPage
asset={TEST_NFT_ASSET}
collection={TEST_NFT_COLLECTION_INFO_FOR_ASSET}
setShowDataHeader={mockSetShowDataHeader}
/>
) )
expect(asFragment()).toMatchSnapshot() expect(asFragment()).toMatchSnapshot()
}) })
......
src/nft/components/details/detailsV2/LandingPage.tsx
View file @ ef6d1f20
...@@ -2,6 +2,7 @@ import Column, { ColumnCenter } from 'components/Column' ...@@ -2,6 +2,7 @@ import Column, { ColumnCenter } from 'components/Column'
import Row from 'components/Row' import Row from 'components/Row'
import { VerifiedIcon } from 'nft/components/icons' import { VerifiedIcon } from 'nft/components/icons'
import { CollectionInfoForAsset, GenieAsset } from 'nft/types' import { CollectionInfoForAsset, GenieAsset } from 'nft/types'
import { useEffect, useRef } from 'react'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { BREAKPOINTS } from 'theme' import { BREAKPOINTS } from 'theme'
...@@ -102,12 +103,36 @@ const MediaContainer = styled.div` ...@@ -102,12 +103,36 @@ const MediaContainer = styled.div`
interface LandingPageProps { interface LandingPageProps {
asset: GenieAsset asset: GenieAsset
collection: CollectionInfoForAsset collection: CollectionInfoForAsset
setShowDataHeader: (showDataHeader: boolean) => void
} }
export const LandingPage = ({ asset, collection }: LandingPageProps) => { export const LandingPage = ({ asset, collection, setShowDataHeader }: LandingPageProps) => {
const intersectionRef = useRef<HTMLDivElement>(null)
const observableRef = useRef(
new IntersectionObserver((entries) => {
if (!entries[0].isIntersecting) {
setShowDataHeader(true)
} else {
setShowDataHeader(false)
}
})
)
// Checks if the intersectionRef is in the viewport
// If it is not in the viewport, the data page header becomes visible
useEffect(() => {
const cachedRef = intersectionRef.current
const observer = observableRef.current
if (cachedRef && observer) {
observer.observe(cachedRef)
return () => observer.unobserve(cachedRef)
}
return
}, [intersectionRef, observableRef, setShowDataHeader])
return ( return (
<LandingPageContainer> <LandingPageContainer>
<MediaContainer> <MediaContainer ref={intersectionRef}>
<MediaRenderer asset={asset} /> <MediaRenderer asset={asset} />
</MediaContainer> </MediaContainer>
<InfoContainer> <InfoContainer>
......
src/nft/components/details/detailsV2/NftDetails.tsx
View file @ ef6d1f20
import { CollectionInfoForAsset, GenieAsset } from 'nft/types' import { CollectionInfoForAsset, GenieAsset } from 'nft/types'
import { useState } from 'react'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { Z_INDEX } from 'theme/zIndex' import { Z_INDEX } from 'theme/zIndex'
...@@ -27,12 +28,13 @@ const DetailsContentContainer = styled.div` ...@@ -27,12 +28,13 @@ const DetailsContentContainer = styled.div`
` `
export const NftDetails = ({ asset, collection }: NftDetailsProps) => { export const NftDetails = ({ asset, collection }: NftDetailsProps) => {
const [showDataHeader, setShowDataHeader] = useState(false)
return ( return (
<> <>
{asset.imageUrl && <DetailsBackground backgroundImage={asset.imageUrl} />} {asset.imageUrl && <DetailsBackground backgroundImage={asset.imageUrl} />}
<DetailsContentContainer> <DetailsContentContainer>
<LandingPage asset={asset} collection={collection} /> <LandingPage asset={asset} collection={collection} setShowDataHeader={setShowDataHeader} />
<DataPage asset={asset} /> <DataPage asset={asset} showDataHeader={showDataHeader} />
</DetailsContentContainer> </DetailsContentContainer>
</> </>
) )
......
src/nft/components/details/detailsV2/__snapshots__/DataPage.test.tsx.snap
View file @ ef6d1f20
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`placeholder containers load 1`] = ` exports[`data page loads with header showing 1`] = `
<DocumentFragment> <DocumentFragment>
.c3 { .c4 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
} }
.c11 { .c12 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -18,7 +18,7 @@ exports[`placeholder containers load 1`] = ` ...@@ -18,7 +18,7 @@ exports[`placeholder containers load 1`] = `
width: min-content; width: min-content;
} }
.c13 { .c14 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -41,7 +41,7 @@ exports[`placeholder containers load 1`] = ` ...@@ -41,7 +41,7 @@ exports[`placeholder containers load 1`] = `
border-radius: 4px; border-radius: 4px;
} }
.c4 { .c5 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -58,7 +58,7 @@ exports[`placeholder containers load 1`] = ` ...@@ -58,7 +58,7 @@ exports[`placeholder containers load 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c8 { .c9 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -76,7 +76,7 @@ exports[`placeholder containers load 1`] = ` ...@@ -76,7 +76,7 @@ exports[`placeholder containers load 1`] = `
gap: 4px; gap: 4px;
} }
.c12 { .c13 {
width: -webkit-min-content; width: -webkit-min-content;
width: -moz-min-content; width: -moz-min-content;
width: min-content; width: min-content;
...@@ -96,7 +96,7 @@ exports[`placeholder containers load 1`] = ` ...@@ -96,7 +96,7 @@ exports[`placeholder containers load 1`] = `
gap: 12px; gap: 12px;
} }
.c22 { .c23 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -114,11 +114,11 @@ exports[`placeholder containers load 1`] = ` ...@@ -114,11 +114,11 @@ exports[`placeholder containers load 1`] = `
gap: 8px; gap: 8px;
} }
.c9 { .c10 {
color: #7780A0; color: #7780A0;
} }
.c10 { .c11 {
color: #0D111C; color: #0D111C;
} }
...@@ -136,11 +136,11 @@ exports[`placeholder containers load 1`] = ` ...@@ -136,11 +136,11 @@ exports[`placeholder containers load 1`] = `
justify-content: flex-start; justify-content: flex-start;
} }
.c26 { .c27 {
height: 568px; height: 568px;
} }
.c19 { .c20 {
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #D2D9EE; border: 1px solid #D2D9EE;
border-radius: 16px; border-radius: 16px;
...@@ -151,33 +151,33 @@ exports[`placeholder containers load 1`] = ` ...@@ -151,33 +151,33 @@ exports[`placeholder containers load 1`] = `
align-self: flex-start; align-self: flex-start;
} }
.c20 { .c21 {
gap: 32px; gap: 32px;
margin-bottom: 12px; margin-bottom: 12px;
width: 100; width: 100;
} }
.c21 { .c22 {
color: #0D111C; color: #0D111C;
line-height: 24px; line-height: 24px;
cursor: pointer; cursor: pointer;
} }
.c21:hover { .c22:hover {
opacity: 0.6; opacity: 0.6;
} }
.c23 { .c24 {
color: #98A1C0; color: #98A1C0;
line-height: 24px; line-height: 24px;
cursor: pointer; cursor: pointer;
} }
.c23:hover { .c24:hover {
opacity: 0.6; opacity: 0.6;
} }
.c25 { .c26 {
background: #D2D9EE; background: #D2D9EE;
border-radius: 4px; border-radius: 4px;
padding: 2px 4px; padding: 2px 4px;
...@@ -185,11 +185,11 @@ exports[`placeholder containers load 1`] = ` ...@@ -185,11 +185,11 @@ exports[`placeholder containers load 1`] = `
line-height: 12px; line-height: 12px;
} }
.c24 { .c25 {
height: 252px; height: 252px;
} }
.c14 { .c15 {
padding: 16px; padding: 16px;
width: 100%; width: 100%;
font-weight: 500; font-weight: 500;
...@@ -227,56 +227,56 @@ exports[`placeholder containers load 1`] = ` ...@@ -227,56 +227,56 @@ exports[`placeholder containers load 1`] = `
transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
} }
.c14:disabled { .c15:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
pointer-events: none; pointer-events: none;
} }
.c14 > * { .c15 > * {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.c14 > a { .c15 > a {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c15 { .c16 {
background-color: #F5F6FC; background-color: #F5F6FC;
color: #7780A0; color: #7780A0;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
.c15:hover { .c16:hover {
background-color: #d2daf7; background-color: #d2daf7;
} }
.c15:active { .c16:active {
background-color: #bdc8f3; background-color: #bdc8f3;
} }
.c5 { .c6 {
gap: 24px; gap: 24px;
} }
.c6 { .c7 {
width: 96px; width: 96px;
height: 96px; height: 96px;
border-radius: 20px; border-radius: 20px;
object-fit: cover; object-fit: cover;
} }
.c7 { .c8 {
gap: 4px; gap: 4px;
margin-right: auto; margin-right: auto;
} }
.c16 { .c17 {
white-space: nowrap; white-space: nowrap;
width: -webkit-min-content; width: -webkit-min-content;
width: -moz-min-content; width: -moz-min-content;
...@@ -301,12 +301,25 @@ exports[`placeholder containers load 1`] = ` ...@@ -301,12 +301,25 @@ exports[`placeholder containers load 1`] = `
margin: 0 auto; margin: 0 auto;
} }
.c17 { .c3 {
position: -webkit-sticky;
position: sticky;
top: 72px;
padding-top: 16px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
z-index: 1;
-webkit-transition: opacity 125ms;
transition: opacity 125ms;
opacity: 1;
}
.c18 {
gap: 24px; gap: 24px;
padding-bottom: 45px; padding-bottom: 45px;
} }
.c18 { .c19 {
gap: 24px; gap: 24px;
width: 100%; width: 100%;
-webkit-align-self: flex-start; -webkit-align-self: flex-start;
...@@ -314,14 +327,524 @@ exports[`placeholder containers load 1`] = ` ...@@ -314,14 +327,524 @@ exports[`placeholder containers load 1`] = `
align-self: flex-start; align-self: flex-start;
} }
@media screen and (max-width:1024px) {
.c7 {
display: none;
}
}
@media screen and (max-width:768px) {
.c0 {
height: 100%;
}
}
@media screen and (max-width:640px) {
.c0 {
padding: 24px 48px;
}
}
@media screen and (max-width:396px) {
.c0 {
padding: 24px 20px;
}
}
@media screen and (max-width:768px) { @media screen and (max-width:768px) {
.c5 { .c3 {
display: none; display: none;
} }
} }
@media screen and (max-width:1024px) { @media screen and (max-width:1024px) {
.c6 { .c18 {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
<div
class="c0"
>
<div
class="c1 c2"
>
<div
class="c3"
>
<div
class="c4 c5 c6"
>
<img
class="c7"
src="https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/3318/50ed67ad647d0aa0cad0b830d136a677efc2fb72a44587bc35f2a5fb334a7fdf.png"
/>
<div
class="c1 c8"
>
<div
class="c4 c9"
>
<div
class="c10 css-1aekuku"
>
Azuki
</div>
<svg
fill="none"
height="16px"
viewBox="0 0 20 20"
width="16px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.52795 13.8056C4.52719 14.4043 4.6712 14.8474 4.95997 15.135C5.24798 15.4233 5.68496 15.5651 6.27091 15.5605H7.57497C7.62945 15.5585 7.68379 15.5676 7.73463 15.5873C7.78547 15.607 7.83176 15.6369 7.87062 15.6752L8.79884 16.5928C9.22054 17.0142 9.63382 17.2237 10.0387 17.2214C10.4436 17.2191 10.8569 17.0096 11.2786 16.5928L12.1954 15.6752C12.2356 15.6365 12.2832 15.6063 12.3354 15.5866C12.3876 15.5669 12.4433 15.558 12.499 15.5605H13.7951C14.3871 15.5613 14.8283 15.4171 15.1186 15.1281C15.4089 14.839 15.5541 14.3959 15.5541 13.7987V12.5014C15.5511 12.389 15.5923 12.2799 15.6687 12.1974L16.5854 11.2798C17.0125 10.86 17.2245 10.4467 17.2214 10.0399C17.2184 9.63305 17.0064 9.21935 16.5854 8.79878L15.6687 7.88115C15.592 7.79886 15.5509 7.68965 15.5541 7.57719V6.2799C15.5533 5.68191 15.4093 5.23878 15.1221 4.95049C14.8348 4.66221 14.3925 4.51806 13.7951 4.51806H12.499C12.4433 4.52036 12.3877 4.51138 12.3355 4.49168C12.2834 4.47197 12.2357 4.44193 12.1954 4.40336L11.2786 3.48574C10.8569 3.06439 10.4436 2.85487 10.0387 2.85717C9.63382 2.85946 9.22054 3.06898 8.79884 3.48574L7.87062 4.40336C7.83164 4.44148 7.78536 4.4713 7.73454 4.49101C7.68373 4.51072 7.62943 4.51993 7.57497 4.51806H6.27091C5.67961 4.51883 5.23995 4.66182 4.95194 4.94705C4.66393 5.23228 4.51992 5.67656 4.51992 6.2799V7.58063C4.52314 7.69309 4.48197 7.80229 4.40533 7.88459L3.48859 8.80222C3.06765 9.22203 2.85718 9.63572 2.85718 10.0433C2.85718 10.4509 3.07033 10.8653 3.49662 11.2867L4.41336 12.2043C4.48979 12.2867 4.53092 12.3958 4.52795 12.5083V13.8056Z"
fill="#FB118E"
/>
<path
d="M9.99737 12.4943C9.86205 12.7005 9.6623 12.8164 9.43032 12.8164C9.19191 12.8164 9.00504 12.7198 8.83106 12.4943L7.31036 10.6385C7.20082 10.5032 7.14282 10.3614 7.14282 10.2068C7.14282 9.88458 7.38768 9.63327 7.70342 9.63327C7.89673 9.63327 8.05138 9.70415 8.20603 9.90391L9.40455 11.4311L11.9498 7.34577C12.0851 7.12669 12.2591 7.02359 12.4524 7.02359C12.7553 7.02359 13.0388 7.23623 13.0388 7.55197C13.0388 7.70017 12.9615 7.85482 12.8777 7.99014L9.99737 12.4943Z"
fill="white"
/>
</svg>
</div>
<div
class="c11 css-1tiu9da"
>
Azuki #3318
</div>
</div>
<div
class="c12 c13"
width="min-content"
>
<button
class="c14 c15 c16 c17"
>
Make an offer
</button>
</div>
</div>
</div>
<div
class="c4 c5 c18"
>
<div
class="c1 c19"
>
<div
class="c20"
>
<div
class="c4 c5 c21"
>
<div
class="c11 c22 css-rjqmed"
>
<div
class="c4 c23"
>
Description
</div>
</div>
<div
class="c11 c24 css-rjqmed"
>
<div
class="c4 c23"
>
Details
</div>
</div>
</div>
<div
class="c25"
>
Description Content
</div>
</div>
</div>
<div
class="c20"
>
<div
class="c4 c5 c21"
>
<div
class="c11 c22 css-rjqmed"
>
<div
class="c4 c23"
>
Activity
</div>
</div>
<div
class="c11 c24 css-rjqmed"
>
<div
class="c4 c23"
>
Offers
<div
class="c26 css-f8aq60"
>
10+
</div>
</div>
</div>
<div
class="c11 c24 css-rjqmed"
>
<div
class="c4 c23"
>
Listings
</div>
</div>
</div>
<div
class="c27"
>
Activity Content
</div>
</div>
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`data page loads without header showing 1`] = `
<DocumentFragment>
.c4 {
box-sizing: border-box;
margin: 0;
min-width: 0;
}
.c12 {
box-sizing: border-box;
margin: 0;
min-width: 0;
justify-self: flex-end;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
.c14 {
box-sizing: border-box;
margin: 0;
min-width: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
text-align: center;
line-height: inherit;
-webkit-text-decoration: none;
text-decoration: none;
font-size: inherit;
padding-left: 16px;
padding-right: 16px;
padding-top: 8px;
padding-bottom: 8px;
color: white;
background-color: primary;
border: 0;
border-radius: 4px;
}
.c5 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c9 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 4px;
}
.c13 {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 12px;
}
.c23 {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 0;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 8px;
}
.c10 {
color: #7780A0;
}
.c11 {
color: #0D111C;
}
.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c27 {
height: 568px;
}
.c20 {
background: #FFFFFF;
border: 1px solid #D2D9EE;
border-radius: 16px;
padding: 16px 20px;
width: 100%;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
.c21 {
gap: 32px;
margin-bottom: 12px;
width: 100;
}
.c22 {
color: #0D111C;
line-height: 24px;
cursor: pointer;
}
.c22:hover {
opacity: 0.6;
}
.c24 {
color: #98A1C0;
line-height: 24px;
cursor: pointer;
}
.c24:hover {
opacity: 0.6;
}
.c26 {
background: #D2D9EE;
border-radius: 4px;
padding: 2px 4px;
color: #7780A0;
line-height: 12px;
}
.c25 {
height: 252px;
}
.c15 {
padding: 16px;
width: 100%;
font-weight: 500;
text-align: center;
border-radius: 20px;
outline: none;
border: 1px solid transparent;
color: #0D111C;
-webkit-text-decoration: none;
text-decoration: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
position: relative;
z-index: 1;
will-change: transform;
-webkit-transition: -webkit-transform 450ms ease;
-webkit-transition: transform 450ms ease;
transition: transform 450ms ease;
-webkit-transform: perspective(1px) translateZ(0);
-ms-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
}
.c15:disabled {
opacity: 50%;
cursor: auto;
pointer-events: none;
}
.c15 > * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c15 > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.c16 {
background-color: #F5F6FC;
color: #7780A0;
font-size: 16px;
font-weight: 500;
}
.c16:hover {
background-color: #d2daf7;
}
.c16:active {
background-color: #bdc8f3;
}
.c6 {
gap: 24px;
}
.c7 {
width: 96px;
height: 96px;
border-radius: 20px;
object-fit: cover;
}
.c8 {
gap: 4px;
margin-right: auto;
}
.c17 {
white-space: nowrap;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
border-radius: 16px;
}
.c0 {
padding: 24px 64px;
height: 100vh;
width: 100%;
}
.c2 {
height: 100%;
width: 100%;
gap: 36px;
max-width: 1200px;
margin: 0 auto;
}
.c3 {
position: -webkit-sticky;
position: sticky;
top: 72px;
padding-top: 16px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
z-index: 1;
-webkit-transition: opacity 125ms;
transition: opacity 125ms;
opacity: 0;
}
.c18 {
gap: 24px;
padding-bottom: 45px;
}
.c19 {
gap: 24px;
width: 100%;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}
@media screen and (max-width:1024px) {
.c7 {
display: none; display: none;
} }
} }
...@@ -344,8 +867,14 @@ exports[`placeholder containers load 1`] = ` ...@@ -344,8 +867,14 @@ exports[`placeholder containers load 1`] = `
} }
} }
@media screen and (max-width:768px) {
.c3 {
display: none;
}
}
@media screen and (max-width:1024px) { @media screen and (max-width:1024px) {
.c17 { .c18 {
-webkit-flex-wrap: wrap; -webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -359,136 +888,140 @@ exports[`placeholder containers load 1`] = ` ...@@ -359,136 +888,140 @@ exports[`placeholder containers load 1`] = `
class="c1 c2" class="c1 c2"
> >
<div <div
class="c3 c4 c5" class="c3"
> >
<img
class="c6"
src="https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/3318/50ed67ad647d0aa0cad0b830d136a677efc2fb72a44587bc35f2a5fb334a7fdf.png"
/>
<div <div
class="c1 c7" class="c4 c5 c6"
> >
<img
class="c7"
src="https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/3318/50ed67ad647d0aa0cad0b830d136a677efc2fb72a44587bc35f2a5fb334a7fdf.png"
/>
<div <div
class="c3 c8" class="c1 c8"
> >
<div <div
class="c9 css-1aekuku" class="c4 c9"
> >
Azuki <div
class="c10 css-1aekuku"
>
Azuki
</div>
<svg
fill="none"
height="16px"
viewBox="0 0 20 20"
width="16px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.52795 13.8056C4.52719 14.4043 4.6712 14.8474 4.95997 15.135C5.24798 15.4233 5.68496 15.5651 6.27091 15.5605H7.57497C7.62945 15.5585 7.68379 15.5676 7.73463 15.5873C7.78547 15.607 7.83176 15.6369 7.87062 15.6752L8.79884 16.5928C9.22054 17.0142 9.63382 17.2237 10.0387 17.2214C10.4436 17.2191 10.8569 17.0096 11.2786 16.5928L12.1954 15.6752C12.2356 15.6365 12.2832 15.6063 12.3354 15.5866C12.3876 15.5669 12.4433 15.558 12.499 15.5605H13.7951C14.3871 15.5613 14.8283 15.4171 15.1186 15.1281C15.4089 14.839 15.5541 14.3959 15.5541 13.7987V12.5014C15.5511 12.389 15.5923 12.2799 15.6687 12.1974L16.5854 11.2798C17.0125 10.86 17.2245 10.4467 17.2214 10.0399C17.2184 9.63305 17.0064 9.21935 16.5854 8.79878L15.6687 7.88115C15.592 7.79886 15.5509 7.68965 15.5541 7.57719V6.2799C15.5533 5.68191 15.4093 5.23878 15.1221 4.95049C14.8348 4.66221 14.3925 4.51806 13.7951 4.51806H12.499C12.4433 4.52036 12.3877 4.51138 12.3355 4.49168C12.2834 4.47197 12.2357 4.44193 12.1954 4.40336L11.2786 3.48574C10.8569 3.06439 10.4436 2.85487 10.0387 2.85717C9.63382 2.85946 9.22054 3.06898 8.79884 3.48574L7.87062 4.40336C7.83164 4.44148 7.78536 4.4713 7.73454 4.49101C7.68373 4.51072 7.62943 4.51993 7.57497 4.51806H6.27091C5.67961 4.51883 5.23995 4.66182 4.95194 4.94705C4.66393 5.23228 4.51992 5.67656 4.51992 6.2799V7.58063C4.52314 7.69309 4.48197 7.80229 4.40533 7.88459L3.48859 8.80222C3.06765 9.22203 2.85718 9.63572 2.85718 10.0433C2.85718 10.4509 3.07033 10.8653 3.49662 11.2867L4.41336 12.2043C4.48979 12.2867 4.53092 12.3958 4.52795 12.5083V13.8056Z"
fill="#FB118E"
/>
<path
d="M9.99737 12.4943C9.86205 12.7005 9.6623 12.8164 9.43032 12.8164C9.19191 12.8164 9.00504 12.7198 8.83106 12.4943L7.31036 10.6385C7.20082 10.5032 7.14282 10.3614 7.14282 10.2068C7.14282 9.88458 7.38768 9.63327 7.70342 9.63327C7.89673 9.63327 8.05138 9.70415 8.20603 9.90391L9.40455 11.4311L11.9498 7.34577C12.0851 7.12669 12.2591 7.02359 12.4524 7.02359C12.7553 7.02359 13.0388 7.23623 13.0388 7.55197C13.0388 7.70017 12.9615 7.85482 12.8777 7.99014L9.99737 12.4943Z"
fill="white"
/>
</svg>
</div> </div>
<svg <div
fill="none" class="c11 css-1tiu9da"
height="16px"
viewBox="0 0 20 20"
width="16px"
xmlns="http://www.w3.org/2000/svg"
> >
<path Azuki #3318
d="M4.52795 13.8056C4.52719 14.4043 4.6712 14.8474 4.95997 15.135C5.24798 15.4233 5.68496 15.5651 6.27091 15.5605H7.57497C7.62945 15.5585 7.68379 15.5676 7.73463 15.5873C7.78547 15.607 7.83176 15.6369 7.87062 15.6752L8.79884 16.5928C9.22054 17.0142 9.63382 17.2237 10.0387 17.2214C10.4436 17.2191 10.8569 17.0096 11.2786 16.5928L12.1954 15.6752C12.2356 15.6365 12.2832 15.6063 12.3354 15.5866C12.3876 15.5669 12.4433 15.558 12.499 15.5605H13.7951C14.3871 15.5613 14.8283 15.4171 15.1186 15.1281C15.4089 14.839 15.5541 14.3959 15.5541 13.7987V12.5014C15.5511 12.389 15.5923 12.2799 15.6687 12.1974L16.5854 11.2798C17.0125 10.86 17.2245 10.4467 17.2214 10.0399C17.2184 9.63305 17.0064 9.21935 16.5854 8.79878L15.6687 7.88115C15.592 7.79886 15.5509 7.68965 15.5541 7.57719V6.2799C15.5533 5.68191 15.4093 5.23878 15.1221 4.95049C14.8348 4.66221 14.3925 4.51806 13.7951 4.51806H12.499C12.4433 4.52036 12.3877 4.51138 12.3355 4.49168C12.2834 4.47197 12.2357 4.44193 12.1954 4.40336L11.2786 3.48574C10.8569 3.06439 10.4436 2.85487 10.0387 2.85717C9.63382 2.85946 9.22054 3.06898 8.79884 3.48574L7.87062 4.40336C7.83164 4.44148 7.78536 4.4713 7.73454 4.49101C7.68373 4.51072 7.62943 4.51993 7.57497 4.51806H6.27091C5.67961 4.51883 5.23995 4.66182 4.95194 4.94705C4.66393 5.23228 4.51992 5.67656 4.51992 6.2799V7.58063C4.52314 7.69309 4.48197 7.80229 4.40533 7.88459L3.48859 8.80222C3.06765 9.22203 2.85718 9.63572 2.85718 10.0433C2.85718 10.4509 3.07033 10.8653 3.49662 11.2867L4.41336 12.2043C4.48979 12.2867 4.53092 12.3958 4.52795 12.5083V13.8056Z" </div>
fill="#FB118E"
/>
<path
d="M9.99737 12.4943C9.86205 12.7005 9.6623 12.8164 9.43032 12.8164C9.19191 12.8164 9.00504 12.7198 8.83106 12.4943L7.31036 10.6385C7.20082 10.5032 7.14282 10.3614 7.14282 10.2068C7.14282 9.88458 7.38768 9.63327 7.70342 9.63327C7.89673 9.63327 8.05138 9.70415 8.20603 9.90391L9.40455 11.4311L11.9498 7.34577C12.0851 7.12669 12.2591 7.02359 12.4524 7.02359C12.7553 7.02359 13.0388 7.23623 13.0388 7.55197C13.0388 7.70017 12.9615 7.85482 12.8777 7.99014L9.99737 12.4943Z"
fill="white"
/>
</svg>
</div> </div>
<div <div
class="c10 css-1tiu9da" class="c12 c13"
width="min-content"
> >
Azuki #3318 <button
class="c14 c15 c16 c17"
>
Make an offer
</button>
</div> </div>
</div> </div>
<div
class="c11 c12"
width="min-content"
>
<button
class="c13 c14 c15 c16"
>
Make an offer
</button>
</div>
</div> </div>
<div <div
class="c3 c4 c17" class="c4 c5 c18"
> >
<div <div
class="c1 c18" class="c1 c19"
> >
<div <div
class="c19" class="c20"
> >
<div <div
class="c3 c4 c20" class="c4 c5 c21"
> >
<div <div
class="c10 c21 css-rjqmed" class="c11 c22 css-rjqmed"
> >
<div <div
class="c3 c22" class="c4 c23"
> >
Description Description
</div> </div>
</div> </div>
<div <div
class="c10 c23 css-rjqmed" class="c11 c24 css-rjqmed"
> >
<div <div
class="c3 c22" class="c4 c23"
> >
Details Details
</div> </div>
</div> </div>
</div> </div>
<div <div
class="c24" class="c25"
> >
Description Content Description Content
</div> </div>
</div> </div>
</div> </div>
<div <div
class="c19" class="c20"
> >
<div <div
class="c3 c4 c20" class="c4 c5 c21"
> >
<div <div
class="c10 c21 css-rjqmed" class="c11 c22 css-rjqmed"
> >
<div <div
class="c3 c22" class="c4 c23"
> >
Activity Activity
</div> </div>
</div> </div>
<div <div
class="c10 c23 css-rjqmed" class="c11 c24 css-rjqmed"
> >
<div <div
class="c3 c22" class="c4 c23"
> >
Offers Offers
<div <div
class="c25 css-f8aq60" class="c26 css-f8aq60"
> >
10+ 10+
</div> </div>
</div> </div>
</div> </div>
<div <div
class="c10 c23 css-rjqmed" class="c11 c24 css-rjqmed"
> >
<div <div
class="c3 c22" class="c4 c23"
> >
Listings Listings
</div> </div>
</div> </div>
</div> </div>
<div <div
class="c26" class="c27"
> >
Activity Content Activity Content
</div> </div>
......
src/nft/components/details/detailsV2/__snapshots__/DataPageHeader.test.tsx.snap
View file @ ef6d1f20
...@@ -257,12 +257,6 @@ exports[`Header loads with asset with a sell order 1`] = ` ...@@ -257,12 +257,6 @@ exports[`Header loads with asset with a sell order 1`] = `
border-radius: 16px; border-radius: 16px;
} }
@media screen and (max-width:768px) {
.c2 {
display: none;
}
}
@media screen and (max-width:1024px) { @media screen and (max-width:1024px) {
.c3 { .c3 {
display: none; display: none;
...@@ -561,12 +555,6 @@ exports[`Header loads with asset with no sell orders 1`] = ` ...@@ -561,12 +555,6 @@ exports[`Header loads with asset with no sell orders 1`] = `
border-radius: 16px; border-radius: 16px;
} }
@media screen and (max-width:768px) {
.c2 {
display: none;
}
}
@media screen and (max-width:1024px) { @media screen and (max-width:1024px) {
.c3 { .c3 {
display: none; display: none;
......
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