mirror of https://github.com/certusone/oyster.git
feat: masonary
This commit is contained in:
parent
e1ae17a384
commit
f017bc7c4a
|
@ -1,7 +1,6 @@
|
|||
|
||||
.art-card {
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
margin-top: 30px;
|
||||
filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1));
|
||||
border-radius: 8px;
|
||||
|
@ -29,4 +28,11 @@
|
|||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.small {
|
||||
max-width: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
|
|
@ -14,6 +14,7 @@ export const ArtCard = ({
|
|||
description,
|
||||
artist,
|
||||
preview,
|
||||
small,
|
||||
}: {
|
||||
image?: string;
|
||||
category?: MetadataCategory
|
||||
|
@ -22,11 +23,12 @@ export const ArtCard = ({
|
|||
description?: string;
|
||||
artist?: string;
|
||||
preview?: boolean;
|
||||
small?: boolean
|
||||
}) => {
|
||||
return (
|
||||
<Card
|
||||
hoverable={true}
|
||||
className="art-card"
|
||||
className={`art-card ${small ? 'small' : ''}`}
|
||||
cover={<ArtContent category={category} content={image} />}
|
||||
>
|
||||
<Meta
|
||||
|
|
|
@ -278,6 +278,7 @@ const InfoStep = (props: {
|
|||
category={props.attributes.category}
|
||||
name={props.attributes.name}
|
||||
symbol={props.attributes.symbol}
|
||||
small={true}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
|
@ -368,6 +369,7 @@ const RoyaltiesStep = (props: {
|
|||
category={props.attributes.category}
|
||||
name={props.attributes.name}
|
||||
symbol={props.attributes.symbol}
|
||||
small={true}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
|
@ -465,6 +467,7 @@ const LaunchStep = (props: {
|
|||
category={props.attributes.category}
|
||||
name={props.attributes.name}
|
||||
symbol={props.attributes.symbol}
|
||||
small={true}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
|
|
|
@ -42,7 +42,11 @@ a:active {
|
|||
display: -ms-flexbox; /* Not needed if autoprefixing */
|
||||
display: flex;
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.my-masonry-grid_column {
|
||||
padding-left: 30px; /* gutter size */
|
||||
background-clip: padding-box;
|
||||
|
|
|
@ -31,7 +31,7 @@ export const HomeView = () => {
|
|||
<Layout>
|
||||
<Content style={{ display: 'flex', flexWrap: 'wrap' }}>
|
||||
<Col style={{ width: '100%' }}>
|
||||
<Row style={{ marginBottom: 30, marginTop: 20, fontSize: 20, fontWeight: 600 }}>Featured</Row>
|
||||
<Row style={{ marginTop: 20, fontSize: 20, fontWeight: 600 }}>Featured</Row>
|
||||
<Row>
|
||||
<Masonry
|
||||
breakpointCols={breakpointColumnsObj}
|
||||
|
|
Loading…
Reference in New Issue