Added better layout suppport in MetaplexNFTHeader for mobile devices (#20705)

This commit is contained in:
Will Roeder 2021-10-16 19:19:08 -07:00 committed by GitHub
parent 05569caade
commit d363ec98a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions

View File

@ -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"}

View File

@ -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;
}