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> : "" }
{ 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 || !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.Row>
{ 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.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('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.Header className="d-flex align-items-center justify-content-between">
<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> : "" }
{ 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 || !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.Row>
{ 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) => (
<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>
)}
</Popup>
@ -161,6 +159,7 @@ export default function System(props) {
{privacyView ? (
""
) : (
<>
<BS.Col className="mb-lg-3" xs={12} lg={3}>
<b>Privacy:</b>{" "}
<BS.Button
@ -171,7 +170,33 @@ export default function System(props) {
View
</BS.Button>
</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>
{privacyEdit ? (
<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>
{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>
)}
</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>Tag:</b> {tag}</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>
<p><b>Description:</b></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 [ birthday, setBirthday ] = useState("");
const [ pronouns, setPronouns ] = useState("");
const [ banner, setBanner ] = useState("");
const [ color, setColor ] = useState("");
const [ desc, setDesc ] = useState("");
const proxyTags = member.proxy_tags;
@ -60,10 +61,14 @@ export default function MemberCard(props) {
setColor(member.color);
} else setColor('');
if (member.banner) {
setBanner(member.banner);
} else setBanner("");
if (member.description) {
setDesc(toHTML(member.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() {
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> : "" }
{ 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 || !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>
{ proxyView ? <><hr/>

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

@ -85,9 +85,9 @@ export default function ProfilePage(props) {
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('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.Card className="mb-5">
<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> : "" }
{ 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 || !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>
{ proxyView ? <><hr/>

8
src/Custom.scss
View File

@ -65,6 +65,7 @@ body {
.navbar {
background-color: $gray-100;
flex: 0 0 auto;
z-index: 5;
}
.dark-mode .navbar {
@ -334,8 +335,7 @@ textarea {
background-size: cover;
background-position: center;
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) {
@ -343,3 +343,7 @@ textarea {
height: 50vh;
}
}
.banner-content {
max-height: 650px !important;
}