verbiricha/snort
1
0
Fork 0
forked from Kieran/snort
Code Pull Requests Activity

refactor: use old style when no banner present

Browse Source
This commit is contained in:
Alejandro Gomez 2023-01-14 14:28:22 +01:00
parent 11d054f4e3
commit 77442ef408
No known key found for this signature in database
GPG Key ID: 4DF39E566658C817
2 changed files with 90 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/ProfilePage.css
View File

@ -136,6 +136,19 @@
right: 20px;
}
.profile .message-button {
position: absolute;
top: -30px;
right: 80px;
}
.profile .no-banner .follow-button {
right: 0px;
}
.profile .no-banner .message-button {
right: 60px;
}
.tabs {
display: flex;
justify-content: flex-start;
@ -155,3 +168,37 @@
.tab.active {
border-bottom: 3px solid var(--highlight);
}
.profile .no-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.profile .no-banner .avatar {
height: 256px;
width: 256px;
margin-bottom: 30px;
}
.profile .no-banner .avatar-wrapper, .profile .no-banner .details-wrapper {
margin: 0 auto;
}
@media (min-width: 720px) {
.profile .no-banner {
width: 100%;
flex-direction: row;
justify-content: space-around;
margin-top: 21px;
}
.profile .no-banner .avatar-wrapper {
margin: auto 10px;
}
.profile .no-banner .details-wrapper {
margin-left: 10px;
margin-top: 21px;
}
}

65
src/pages/ProfilePage.js
View File

@ -48,14 +48,14 @@ export default function ProfilePage() {
function username() {
return (
<div className="name">
<h2>{user?.display_name || user?.name}</h2>
<h2>{user?.display_name || user?.name || 'Nostrich'}</h2>
<Copy text={params.id} />
{user?.nip05 && <Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />}
</div>
)
}
function details() {
function bio() {
const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
return (
<div className="details">
@ -100,29 +100,50 @@ export default function ProfilePage() {
return null;
}
function avatar() {
return (
<div className="avatar-wrapper">
<div style={{ '--img-url': backgroundImage }} className="avatar" data-domain={isVerified ? domain : ''}>
</div>
</div>
)
}
function userDetails() {
return (
<div className="details-wrapper">
{username()}
{isMe ? (
<div className="btn btn-icon follow-button" onClick={() => navigate("/settings")}>
<FontAwesomeIcon icon={faGear} size="lg" />
</div>
) : <>
<div className="btn message-button" onClick={() => navigate(`/messages/${hexToBech32("npub", id)}`)}>
<FontAwesomeIcon icon={faEnvelope} size="lg" />
</div>
<FollowButton pubkey={id} />
</>
}
{bio()}
</div>
)
}
return (
<>
<div className="profile flex">
<img alt="banner" className="banner" src={user?.banner ? user.banner : avatarUrl} />
<div className="avatar-wrapper">
<div style={{ '--img-url': backgroundImage }} className="avatar" data-domain={isVerified ? domain : ''}>
</div>
</div>
<div className="details-wrapper">
{username()}
{isMe ? (
<div className="btn btn-icon follow-button" onClick={() => navigate("/settings")}>
<FontAwesomeIcon icon={faGear} size="lg" />
</div>
) : <>
<div className="btn mr5" onClick={() => navigate(`/messages/${hexToBech32("npub", id)}`)}>
<FontAwesomeIcon icon={faEnvelope} size="lg" />
</div>
<FollowButton pubkey={id} />
</>
}
{details()}
</div>
{user?.banner && <img alt="banner" className="banner" src={user.banner} /> }
{user?.banner ? (
<>
{avatar()}
{userDetails()}
</>
) : (
<div className="no-banner">
{avatar()}
{userDetails()}
</div>
)}
</div>
<div className="tabs">
{