liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add banner button

Browse Source
This commit is contained in:
Spectralitree 2021-08-06 18:45:59 +02:00
parent a33b595d86
commit d5ed5f98e0
7 changed files with 173 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/Components/Private/MemberCard.js
View File

@ -305,6 +305,31 @@ export default function MemberCard(props) {
{ member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" } { member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> } { privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> }
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> } { privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
{ privacyView || proxyView || !member.banner ? "" :
<BS.Col className="mb-lg-3" xs={12} lg={3}>
<b>Banner:</b>{" "}
<Popup
trigger={
<BS.Button
variant="light"
size="sm"
>
View
</BS.Button>
}
className="banner"
modal
>
{(close) => (
<div className="text-center w-100" onClick={() => close()}>
<div className="m-auto" style={{maxWidth: '100%'}}>
<BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
</div>
</div>
)}
</Popup>
</BS.Col>
}
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Created:</b> {created}</BS.Col> <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Created:</b> {created}</BS.Col>
</BS.Row> </BS.Row>
{ privacyEdit ? <BS.Form id='Privacy' onSubmit={handleSubmitPrivacy(submitPrivacy)}> { privacyEdit ? <BS.Form id='Privacy' onSubmit={handleSubmitPrivacy(submitPrivacy)}>

27
src/Components/Private/MemberPage.js
View File

@ -237,9 +237,9 @@ export default function MemberPage(props) {
<BS.Button variant="primary" className="float-right" onClick={() => history.push("/dash/reload")}>Back</BS.Button> <BS.Button variant="primary" className="float-right" onClick={() => history.push("/dash/reload")}>Back</BS.Button>
</BS.Card.Body></BS.Card> : </BS.Card.Body></BS.Card> :
<> <>
{ member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
{ localStorage.getItem('colorbg') && member.color ? "" : <><div className="backdrop" style={{backgroundColor: `#${color}`}}/> { localStorage.getItem('colorbg') && member.color ? "" : <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
{ !localStorage.getItem('fullbg') ? <div className="backdrop-overlay"/> : "" }</> } { !localStorage.getItem('fullbg') ? <div className="backdrop-overlay"/> : "" }</> }
{ member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
<BS.Card className="mb-5"> <BS.Card className="mb-5">
<BS.Card.Header className="d-flex align-items-center justify-content-between"> <BS.Card.Header className="d-flex align-items-center justify-content-between">
<div> { member.visibility === 'public' ? <BS.OverlayTrigger placement="left" overlay={ <div> { member.visibility === 'public' ? <BS.OverlayTrigger placement="left" overlay={
@ -332,6 +332,31 @@ export default function MemberPage(props) {
{ member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" } { member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> } { privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> }
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> } { privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
{ privacyView || proxyView || !member.banner ? "" :
<BS.Col className="mb-lg-3" xs={12} lg={3}>
<b>Banner:</b>{" "}
<Popup
trigger={
<BS.Button
variant="light"
size="sm"
>
View
</BS.Button>
}
className="banner"
modal
>
{(close) => (
<div className="text-center w-100" onClick={() => close()}>
<div className="m-auto" style={{maxWidth: '100%'}}>
<BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
</div>
</div>
)}
</Popup>
</BS.Col>
}
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Created:</b> {created}</BS.Col> <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Created:</b> {created}</BS.Col>
</BS.Row> </BS.Row>
{ privacyMode ? <BS.Form id='Privacy' onSubmit={handleSubmitPrivacy(submitPrivacy)}> { privacyMode ? <BS.Form id='Privacy' onSubmit={handleSubmitPrivacy(submitPrivacy)}>

37
src/Components/Private/System.js
View File

@ -108,11 +108,9 @@ export default function System(props) {
> >
{(close) => ( {(close) => (
<div className="text-center w-100 m-0" onClick={() => close()}> <div className="text-center w-100 m-0" onClick={() => close()}>
<BS.Image <div className="m-auto" style={{maxWidth: '640px'}}>
src={`${avatar}`} <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
style={{ "max-width": 640, height: "auto" }} </div>
thumbnail
/>
</div> </div>
)} )}
</Popup> </Popup>
@ -161,6 +159,7 @@ export default function System(props) {
{privacyView ? ( {privacyView ? (
"" ""
) : ( ) : (
<>
<BS.Col className="mb-lg-3" xs={12} lg={3}> <BS.Col className="mb-lg-3" xs={12} lg={3}>
<b>Privacy:</b>{" "} <b>Privacy:</b>{" "}
<BS.Button <BS.Button
@ -171,7 +170,33 @@ export default function System(props) {
View View
</BS.Button> </BS.Button>
</BS.Col> </BS.Col>
)} {user.banner ?
<BS.Col className="mb-lg-3" xs={12} lg={3}>
<b>Banner:</b>{" "}
<Popup
trigger={
<BS.Button
variant="light"
size="sm"
>
View
</BS.Button>
}
className="banner"
modal
>
{(close) => (
<div className="text-center w-100" onClick={() => close()}>
<div className="m-auto" style={{maxWidth: '100%'}}>
<BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
</div>
</div>
)}
</Popup>
</BS.Col>
: "" }
</>
)}
</BS.Row> </BS.Row>
{privacyEdit ? ( {privacyEdit ? (
<EditSystemPrivacy <EditSystemPrivacy

29
src/Components/Public/Profile.js
View File

@ -81,7 +81,9 @@ export default function Profile () {
{ system.avatar_url ? <Popup trigger={<BS.Image src={`${system.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal> { system.avatar_url ? <Popup trigger={<BS.Image src={`${system.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
{close => ( {close => (
<div className="text-center w-100 m-0" onClick={() => close()}> <div className="text-center w-100 m-0" onClick={() => close()}>
<BS.Image src={`${avatar}`} style={{'max-width': 640, height: 'auto'}} thumbnail /> <div className="m-auto" style={{maxWidth: '640px'}}>
<BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
</div>
</div> </div>
)} )}
</Popup> : </Popup> :
@ -92,6 +94,31 @@ export default function Profile () {
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {system.id}</BS.Col> <BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {system.id}</BS.Col>
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Tag:</b> {tag}</BS.Col> <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Tag:</b> {tag}</BS.Col>
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Timezone:</b> {timezone}</BS.Col> <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Timezone:</b> {timezone}</BS.Col>
{system.banner ?
<BS.Col className="mb-lg-3" xs={12} lg={3}>
<b>Banner:</b>{" "}
<Popup
trigger={
<BS.Button
variant="light"
size="sm"
>
View
</BS.Button>
}
className="banner"
modal
>
{(close) => (
<div className="text-center w-100" onClick={() => close()}>
<div className="m-auto" style={{maxWidth: '100%'}}>
<BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
</div>
</div>
)}
</Popup>
</BS.Col>
: "" }
</BS.Row> </BS.Row>
<p><b>Description:</b></p> <p><b>Description:</b></p>
{ localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>} { localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}

32
src/Components/Public/ProfileCard.js
View File

@ -19,6 +19,7 @@ export default function MemberCard(props) {
const [ displayName, setDisplayName ] = useState(""); const [ displayName, setDisplayName ] = useState("");
const [ birthday, setBirthday ] = useState(""); const [ birthday, setBirthday ] = useState("");
const [ pronouns, setPronouns ] = useState(""); const [ pronouns, setPronouns ] = useState("");
const [ banner, setBanner ] = useState("");
const [ color, setColor ] = useState(""); const [ color, setColor ] = useState("");
const [ desc, setDesc ] = useState(""); const [ desc, setDesc ] = useState("");
const proxyTags = member.proxy_tags; const proxyTags = member.proxy_tags;
@ -60,10 +61,14 @@ export default function MemberCard(props) {
setColor(member.color); setColor(member.color);
} else setColor(''); } else setColor('');
if (member.banner) {
setBanner(member.banner);
} else setBanner("");
if (member.description) { if (member.description) {
setDesc(toHTML(member.description)); setDesc(toHTML(member.description));
} else setDesc("(no description)"); } else setDesc("(no description)");
}, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags]); }, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.banner]);
function copyLink() { function copyLink() {
var link = `https://pk-webs.spectralitree.com/profile/${sysID}/${member.id}` var link = `https://pk-webs.spectralitree.com/profile/${sysID}/${member.id}`
@ -90,6 +95,31 @@ export default function MemberCard(props) {
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" } <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
{ member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" } { member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
{ proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> } { proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
{ proxyView || !member.banner ? "" :
<BS.Col className="mb-lg-3" xs={12} lg={3}>
<b>Banner:</b>{" "}
<Popup
trigger={
<BS.Button
variant="light"
size="sm"
>
View
</BS.Button>
}
className="banner"
modal
>
{(close) => (
<div className="text-center w-100" onClick={() => close()}>
<div className="m-auto" style={{maxWidth: '100%'}}>
<BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
</div>
</div>
)}
</Popup>
</BS.Col>
}
</BS.Row> </BS.Row>
{ proxyView ? <><hr/> { proxyView ? <><hr/>

27
src/Components/Public/ProfilePage.js
View File

@ -85,9 +85,9 @@ export default function ProfilePage(props) {
return ( return (
<> <>
{ member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
{ localStorage.getItem('colorbg') && member.color ? "" : <><div className="backdrop" style={{backgroundColor: `#${color}`}}/> { localStorage.getItem('colorbg') && member.color ? "" : <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
{ !localStorage.getItem('fullbg') ? <div className="backdrop-overlay"/> : "" }</> } { !localStorage.getItem('fullbg') ? <div className="backdrop-overlay"/> : "" }</> }
{ member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
<BS.Alert variant="primary" >You are currently <b>viewing</b> a member.</BS.Alert> <BS.Alert variant="primary" >You are currently <b>viewing</b> a member.</BS.Alert>
<BS.Card className="mb-5"> <BS.Card className="mb-5">
<BS.Card.Header className="d-flex align-items-center justify-content-between"> <BS.Card.Header className="d-flex align-items-center justify-content-between">
@ -118,6 +118,31 @@ export default function ProfilePage(props) {
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" } <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
{ member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" } { member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
{ proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> } { proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
{ proxyView || !member.banner ? "" :
<BS.Col className="mb-lg-3" xs={12} lg={3}>
<b>Banner:</b>{" "}
<Popup
trigger={
<BS.Button
variant="light"
size="sm"
>
View
</BS.Button>
}
className="banner"
modal
>
{(close) => (
<div className="text-center w-100" onClick={() => close()}>
<div className="m-auto" style={{maxWidth: '100%'}}>
<BS.Image src={`${banner}`} style={{maxWidth: 'auto', maxHeight: '640px'}} thumbnail />
</div>
</div>
)}
</Popup>
</BS.Col>
}
</BS.Row> </BS.Row>
{ proxyView ? <><hr/> { proxyView ? <><hr/>

8
src/Custom.scss
View File

@ -65,6 +65,7 @@ body {
.navbar { .navbar {
background-color: $gray-100; background-color: $gray-100;
flex: 0 0 auto; flex: 0 0 auto;
z-index: 5;
} }
.dark-mode .navbar { .dark-mode .navbar {
@ -334,8 +335,7 @@ textarea {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
z-index: -1; z-index: -1;
box-shadow: inset 0 -3px 10px -10px #000000, inset 0 10px 10px -10px #000000;; box-shadow: inset 0 -3px 10px -10px #000000, inset 0 10px 10px -10px #000000;
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
@ -343,3 +343,7 @@ textarea {
height: 50vh; height: 50vh;
} }
} }
.banner-content {
max-height: 650px !important;
}