m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
Code

maintain nft image aspect ratios and center images in collection view (#13136)

Browse Source 
* maintain nft image aspect ratios and center images in collection view
This commit is contained in:
Alex Donesky 2021-12-22 15:19:48 -06:00 committed by GitHub
parent c932696e5a
commit 56a0385e94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/components/app/collectible-details/index.scss
View File

@ -43,10 +43,7 @@ $spacer-break-small: 16px;
&__image { &__image {
width: 100%; width: 100%;
object-fit: contain;
@media screen and (min-width: $break-large) {
width: $card-width-break-large;
}
} }
&__address { &__address {

20
ui/components/app/collectibles-items/collectibles-items.js
View File

@ -48,7 +48,7 @@ export default function CollectiblesItems({ collections = {} }) {
const isExpanded = dropdownState[key]; const isExpanded = dropdownState[key];
return ( return (
<div <div
className="collectibles-items__item" className="collectibles-items__collection"
key={`collection-${index}`} key={`collection-${index}`}
onClick={() => { onClick={() => {
setDropdownState((_dropdownState) => ({ setDropdownState((_dropdownState) => ({
@ -62,19 +62,19 @@ export default function CollectiblesItems({ collections = {} }) {
display={DISPLAY.FLEX} display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER} alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN} justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
className="collectibles-items__item__accordion-title" className="collectibles-items__collection-accordion-title"
> >
<Box <Box
alignItems={ALIGN_ITEMS.CENTER} alignItems={ALIGN_ITEMS.CENTER}
className="collectibles-items__item__collection-header" className="collectibles-items__collection-header"
> >
{collectionImage ? ( {collectionImage ? (
<img <img
src={collectionImage} src={collectionImage}
className="collectibles-items__item__collection-image" className="collectibles-items__collection-image"
/> />
) : ( ) : (
<div className="collectibles-items__item__collection-image-alt"> <div className="collectibles-items__collection-image-alt">
{collectionName[0]} {collectionName[0]}
</div> </div>
)} )}
@ -108,9 +108,13 @@ export default function CollectiblesItems({ collections = {} }) {
ipfsGateway, ipfsGateway,
); );
return ( return (
<Box width={width} key={`collectible-${i}`}> <Box
width={width}
key={`collectible-${i}`}
className="collectibles-items__collection-item-wrapper"
>
<div <div
className="collectibles-items__image__wrapper" className="collectibles-items__collection-item"
style={{ style={{
backgroundColor, backgroundColor,
}} }}
@ -121,7 +125,7 @@ export default function CollectiblesItems({ collections = {} }) {
`${ASSET_ROUTE}/${address}/${tokenId}`, `${ASSET_ROUTE}/${address}/${tokenId}`,
) )
} }
className="collectibles-items__image" className="collectibles-items__collection-item-image"
src={collectibleImage} src={collectibleImage}
/> />
</div> </div>

43
ui/components/app/collectibles-items/index.scss
View File

@ -1,33 +1,18 @@
.collectibles-items { .collectibles-items {
&__image__wrapper { &__collection {
border-radius: 4px;
width: 100%;
display: flex;
justify-content: center;
cursor: pointer;
}
&__image {
border-radius: 4px;
width: 100%;
height: 100%;
cursor: pointer;
}
&__item {
margin-bottom: 24px; margin-bottom: 24px;
&__accordion-title { &-accordion-title {
cursor: pointer; cursor: pointer;
} }
&__collection-image { &-image {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
} }
&__collection-image-alt { &-image-alt {
border-radius: 50%; border-radius: 50%;
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -37,5 +22,25 @@
text-align: center; text-align: center;
line-height: 1; line-height: 1;
} }
&-item-wrapper {
align-self: center;
}
&-item {
border-radius: 4px;
width: 100%;
display: flex;
justify-content: center;
cursor: pointer;
align-self: center;
}
&-item-image {
border-radius: 4px;
width: 100%;
height: 100%;
cursor: pointer;
}
} }
} }