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 {
width: 100%;
@media screen and (min-width: $break-large) {
width: $card-width-break-large;
}
object-fit: contain;
}
&__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];
return (
<div
className="collectibles-items__item"
className="collectibles-items__collection"
key={`collection-${index}`}
onClick={() => {
setDropdownState((_dropdownState) => ({
@ -62,19 +62,19 @@ export default function CollectiblesItems({ collections = {} }) {
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
className="collectibles-items__item__accordion-title"
className="collectibles-items__collection-accordion-title"
>
<Box
alignItems={ALIGN_ITEMS.CENTER}
className="collectibles-items__item__collection-header"
className="collectibles-items__collection-header"
>
{collectionImage ? (
<img
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]}
</div>
)}
@ -108,9 +108,13 @@ export default function CollectiblesItems({ collections = {} }) {
ipfsGateway,
);
return (
<Box width={width} key={`collectible-${i}`}>
<Box
width={width}
key={`collectible-${i}`}
className="collectibles-items__collection-item-wrapper"
>
<div
className="collectibles-items__image__wrapper"
className="collectibles-items__collection-item"
style={{
backgroundColor,
}}
@ -121,7 +125,7 @@ export default function CollectiblesItems({ collections = {} }) {
`${ASSET_ROUTE}/${address}/${tokenId}`,
)
}
className="collectibles-items__image"
className="collectibles-items__collection-item-image"
src={collectibleImage}
/>
</div>

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

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