{ member.visibility === 'public' ?
Avatar url:
+
+ Banner url:
+
+
Color:
diff --git a/src/Components/Private/Memberlist.js b/src/Components/Private/Memberlist.js
index a630c015..723f0558 100644
--- a/src/Components/Private/Memberlist.js
+++ b/src/Components/Private/Memberlist.js
@@ -323,6 +323,10 @@ export default function Memberlist() {
Avatar url:
+
+ Banner url:
+
+
Color:
diff --git a/src/Components/Private/System.js b/src/Components/Private/System.js
index a5d452f1..0b3eaeee 100644
--- a/src/Components/Private/System.js
+++ b/src/Components/Private/System.js
@@ -24,6 +24,7 @@ export default function System(props) {
const [tag, setTag] = useState("");
const [timezone, setTimezone] = useState("");
const [avatar, setAvatar] = useState("");
+ const [banner, setBanner] = useState("");
const [desc, setDesc] = useState("");
const [editDesc, setEditDesc] = useState("");
@@ -61,6 +62,10 @@ export default function System(props) {
setAvatar(avatarsmall.replace("?width=256&height=256", ""));
} else setAvatar("");
+ if (user.banner) {
+ setBanner(user.banner);
+ } else setBanner("");
+
// same as above, but with descriptions
// two description variables! one is just the plain description, the other is parsed and converted to html
if (user.description) {
@@ -70,7 +75,7 @@ export default function System(props) {
setDesc("(no description)");
setEditDesc("");
}
- }, [user.description, user.tag, user.avatar_url, user.tz, user.name]);
+ }, [user.description, user.tag, user.avatar_url, user.tz, user.name, user.banner]);
// this just resizes the textarea when filled with larger amounts of text
useEffect(() => {
@@ -80,6 +85,8 @@ export default function System(props) {
if (match) return null;
return (
+ <>
+ { user.banner && !localStorage.getItem("hidebanners") ? : ""}
@@ -133,6 +140,7 @@ export default function System(props) {
tag={tag}
timezone={timezone}
avatar={avatar}
+ banner={banner}
setErrorAlert={setErrorAlert}
user={user}
setUser={setUser}
@@ -240,5 +248,6 @@ export default function System(props) {
)}
+
);
}
diff --git a/src/Components/Public/Profile.js b/src/Components/Public/Profile.js
index f689a4c4..c33434b1 100644
--- a/src/Components/Public/Profile.js
+++ b/src/Components/Public/Profile.js
@@ -22,6 +22,7 @@ export default function Profile () {
const [ timezone, setTimezone ] = useState("");
const [ desc, setDesc ] = useState("");
const [ avatar, setAvatar ] = useState('');
+ const [ banner, setBanner ] = useState("");
const [ isLoading, setIsLoading ] = useState(true);
const [ isError, setIsError ] = useState(false);
@@ -53,6 +54,10 @@ export default function Profile () {
setAvatar(avatarsmall.replace('?width=256&height=256', ''))
} else setAvatar('')
+ if (system.banner) {
+ setBanner(system.banner);
+ } else setBanner("");
+
if (system.tag) {
setTag(system.tag);
} else setTag('');
@@ -64,11 +69,12 @@ export default function Profile () {
if (system.description) {
setDesc(toHTML(system.description));
} else setDesc("(no description)");
- }, [system.description, system.tag, system.avatar_url, system.tz, system.name]);
+ }, [system.description, system.tag, system.avatar_url, system.tz, system.name, system.banner]);
return (match ? :
<>{ isLoading ? : isError ? Something went wrong, either the system doesn't exist, or there was an error fetching data. :
- <>You are currently viewing a system.
+ <>{ system.banner && !localStorage.getItem("hidebanners") ? : ""}
+ You are currently viewing a system.
{name} ({system.id})
diff --git a/src/Components/Public/ProfilePage.js b/src/Components/Public/ProfilePage.js
index 37c3ff62..2d4c48f7 100644
--- a/src/Components/Public/ProfilePage.js
+++ b/src/Components/Public/ProfilePage.js
@@ -16,6 +16,7 @@ export default function ProfilePage(props) {
const member = props.member;
const [ avatar, setAvatar ] = useState('')
+ const [ banner, setBanner ] = useState("");
const [ displayName, setDisplayName ] = useState("");
const [ birthday, setBirthday ] = useState("");
const [ pronouns, setPronouns ] = useState("");
@@ -60,10 +61,14 @@ export default function ProfilePage(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://spectralitree.github.io${location.pathname}`
@@ -80,8 +85,9 @@ export default function ProfilePage(props) {
return (
<>
- { localStorage.getItem('colorbg') ? "" : member.color ? <>
- : "" }
+ { member.banner && !localStorage.getItem("hidebanners") ? : ""}
+ { localStorage.getItem('colorbg') && member.color ? "" : <>
+ { !localStorage.getItem('fullbg') ? : "" } }
You are currently viewing a member.
diff --git a/src/Custom.scss b/src/Custom.scss
index c28e21d7..44d3d881 100644
--- a/src/Custom.scss
+++ b/src/Custom.scss
@@ -324,3 +324,22 @@ textarea {
resize: none !important;
}
@import "~bootstrap/scss/bootstrap";
+
+.banner {
+ position: absolute;
+ top: 3.125rem;
+ left: 0;
+ width: 100%;
+ height: 30vh;
+ background-size: cover;
+ background-position: center;
+ z-index: -1;
+ box-shadow: inset 0 -3px 10px -10px #000000, inset 0 10px 10px -10px #000000;;
+
+}
+
+@media only screen and (min-width: 992px) {
+ .banner {
+ height: 50vh;
+ }
+}
diff --git a/src/Pages/Settings.js b/src/Pages/Settings.js
index 7d7fda77..eee2cbf2 100644
--- a/src/Pages/Settings.js
+++ b/src/Pages/Settings.js
@@ -107,6 +107,34 @@ const Settings = ({ forceUpdate }) => {
)}
Use only member pages?
+
+ {localStorage.getItem("fullbg") ? (
+ {
+ localStorage.removeItem("fullbg");
+ forceUpdate();
+ }}
+ />
+ ) : (
+ {
+ localStorage.setItem("fullbg", "true");
+ forceUpdate();
+ }}
+ />
+ )}
+ Remove gradient from background color?
+
{
}}
/>
)}
- Hide colored backgrounds?
+ Hide colored backgrounds altogether?
{
)}
Expand member cards on default?
+
+ {localStorage.getItem("hidebanners") ? (
+ {
+ localStorage.removeItem("hidebanners");
+ forceUpdate();
+ }}
+ />
+ ) : (
+ {
+ localStorage.setItem("hidebanners", "true");
+ forceUpdate();
+ }}
+ />
+ )}
+ Hide system and member banners?
+