Added better layout suppport in MetaplexNFTHeader for mobile devices (#20705)
This commit is contained in:
parent
05569caade
commit
d363ec98a9
|
@ -16,22 +16,21 @@ export function NFTHeader({
|
||||||
}) {
|
}) {
|
||||||
const metadata = nftData.metadata;
|
const metadata = nftData.metadata;
|
||||||
return (
|
return (
|
||||||
<div className="row align-items-begin">
|
<div className="row">
|
||||||
<div className="col-auto ml-2 d-flex align-items-center">
|
<div className="col-auto ml-2 d-flex align-items-center">
|
||||||
<ArtContent metadata={metadata} pubkey={address} />
|
<ArtContent metadata={metadata} pubkey={address} />
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col mb-3 ml-0.5 mt-3">
|
||||||
<div className="col mb-3 ml-n3 ml-md-n2 mt-3">
|
|
||||||
{<h6 className="header-pretitle ml-1">Metaplex NFT</h6>}
|
{<h6 className="header-pretitle ml-1">Metaplex NFT</h6>}
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
<h2 className="header-title ml-1 align-items-center">
|
<h2 className="header-title ml-1 align-items-center no-overflow-with-ellipsis">
|
||||||
{metadata.data.name !== ""
|
{metadata.data.name !== ""
|
||||||
? metadata.data.name
|
? metadata.data.name
|
||||||
: "No NFT name was found"}
|
: "No NFT name was found"}
|
||||||
</h2>
|
</h2>
|
||||||
{getEditionPill(nftData.editionInfo)}
|
{getEditionPill(nftData.editionInfo)}
|
||||||
</div>
|
</div>
|
||||||
<h4 className="header-pretitle ml-1 mt-1">
|
<h4 className="header-pretitle ml-1 mt-1 no-overflow-with-ellipsis">
|
||||||
{metadata.data.symbol !== ""
|
{metadata.data.symbol !== ""
|
||||||
? metadata.data.symbol
|
? metadata.data.symbol
|
||||||
: "No Symbol was found"}
|
: "No Symbol was found"}
|
||||||
|
|
|
@ -428,3 +428,9 @@ p.updated-time {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-overflow-with-ellipsis {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue