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;
|
||||
return (
|
||||
<div className="row align-items-begin">
|
||||
<div className="row">
|
||||
<div className="col-auto ml-2 d-flex align-items-center">
|
||||
<ArtContent metadata={metadata} pubkey={address} />
|
||||
</div>
|
||||
|
||||
<div className="col mb-3 ml-n3 ml-md-n2 mt-3">
|
||||
<div className="col mb-3 ml-0.5 mt-3">
|
||||
{<h6 className="header-pretitle ml-1">Metaplex NFT</h6>}
|
||||
<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
|
||||
: "No NFT name was found"}
|
||||
</h2>
|
||||
{getEditionPill(nftData.editionInfo)}
|
||||
</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
|
||||
: "No Symbol was found"}
|
||||
|
|
|
@ -428,3 +428,9 @@ p.updated-time {
|
|||
justify-content: center;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.no-overflow-with-ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue