forked from Kieran/snort
feat: display banner in profile
This commit is contained in:
Alejandro Gomez
parent
b43f01ff4a
commit
7c6483b991
@ -8,7 +8,7 @@ export default function FollowButton(props) {
|
||||
const publiser = useEventPublisher();
|
||||
const follows = useSelector(s => s.login.follows);
|
||||
let isFollowing = follows?.includes(pubkey) ?? false;
|
||||
const baseClassName = isFollowing ? `btn btn-warn` : `btn btn-success`
|
||||
const baseClassName = isFollowing ? `btn btn-warn follow-button` : `btn btn-success follow-button`
|
||||
const className = props.className ? `${baseClassName} ${props.className}` : `${baseClassName}`;
|
||||
|
||||
async function follow(pubkey) {
|
||||
|
||||
@ -1,9 +1,24 @@
|
||||
.profile {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.profile > div:last-child {
|
||||
margin-left: 10px;
|
||||
.profile .banner {
|
||||
width: 100%;
|
||||
height: 210px;
|
||||
margin-bottom: -110px;
|
||||
object-fit: cover;
|
||||
mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
|
||||
-webkit-mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.profile .banner {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
height: 300px;
|
||||
margin-bottom: -120px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile p {
|
||||
@ -14,14 +29,17 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.profile .avatar-wrapper {
|
||||
margin: auto 10px;
|
||||
align-self: flex-start;
|
||||
z-index: 1;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.profile .avatar {
|
||||
border-radius: 50%;
|
||||
height: 256px;
|
||||
width: 256px;
|
||||
height: 210px;
|
||||
width: 210px;
|
||||
background-image: var(--img-url), var(--gray-gradient);
|
||||
border: 4px solid transparent;
|
||||
background-origin: border-box;
|
||||
@ -38,25 +56,42 @@
|
||||
background-image: var(--img-url), var(--nostrplebs-gradient);
|
||||
}
|
||||
|
||||
.profile .name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.profile .name h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.profile .details {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
overflow: hidden;
|
||||
max-width: 680px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profile .details p {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.profile .details a {
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
.profile .website {
|
||||
padding-left: 0;
|
||||
color: var(--highlight);
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.profile .lnurl {
|
||||
padding-left: 0;
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
.profile .btn-icon {
|
||||
padding: 6px;
|
||||
margin-left: 4px;
|
||||
color: var(--font-color);
|
||||
padding: 6px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.profile .website::before {
|
||||
@ -64,8 +99,9 @@
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.profile a {
|
||||
color: var(--highlight);
|
||||
.profile .lnurl {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.profile .lnurl::before {
|
||||
@ -73,29 +109,38 @@
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@media(max-width: 720px) {
|
||||
.profile {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.profile > div:last-child {
|
||||
margin: 5px 0;
|
||||
width: 100%;
|
||||
}
|
||||
.profile .details-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@media(max-width: 360px) {
|
||||
.profile .name { flex-direction: column; }
|
||||
.profile .name .btn {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.profile .copy .body { font-size: 12px }
|
||||
|
||||
@media (min-width: 360px) {
|
||||
.profile .copy .body { font-size: 14px }
|
||||
.profile .details-wrapper, .profile .avatar-wrapper { margin-left: 21px; }
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
.profile .details-wrapper, .profile .avatar-wrapper { margin-left: 30px; }
|
||||
}
|
||||
|
||||
.profile .follow-button {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.tabs > div {
|
||||
|
||||
@ -45,35 +45,20 @@ export default function ProfilePage() {
|
||||
setTab(ProfileTab.Notes);
|
||||
}, [params]);
|
||||
|
||||
function username() {
|
||||
return (
|
||||
<div className="name">
|
||||
<h2>{user?.display_name || user?.name}</h2>
|
||||
<Copy text={params.id} />
|
||||
{user?.nip05 && <Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function details() {
|
||||
const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
|
||||
return (
|
||||
<>
|
||||
<div className="flex name">
|
||||
<div className="f-grow f-ellipsis">
|
||||
<h2>{user?.display_name || user?.name}</h2></div>
|
||||
<div className="flex">
|
||||
{isMe ? (
|
||||
<div className="btn btn-icon" 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} />
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="f-grow">
|
||||
|
||||
<Copy text={params.id} />
|
||||
{user?.nip05 && <Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="details">
|
||||
<p>{about}</p>
|
||||
|
||||
{user?.website && (
|
||||
@ -89,7 +74,7 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
</div> : null}
|
||||
<LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -118,11 +103,24 @@ export default function ProfilePage() {
|
||||
return (
|
||||
<>
|
||||
<div className="profile flex">
|
||||
<img 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="f-grow details">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user