add banners

src/Components/Private/Edit/EditSystem.js

@@ -12,6 +12,7 @@ const EditSystem = ({
   tag,
   timezone,
   avatar,
+  banner,
   editDesc,
   setEditMode,
   setErrorAlert,
@@ -103,11 +104,21 @@ const EditSystem = ({
         <BS.Col className="mb-lg-2" xs={12} lg={3}>
           <BS.Form.Label>Avatar url:</BS.Form.Label>
           <BS.Form.Control
+            type="url"
             name="avatar_url"
             {...registerEdit("avatar_url")}
             defaultValue={avatar}
           />
         </BS.Col>
+        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+          <BS.Form.Label>Banner url:</BS.Form.Label>
+          <BS.Form.Control
+            type="url"
+            name="banner"
+            {...registerEdit("banner")}
+            defaultValue={banner}
+          />
+        </BS.Col>
       </BS.Form.Row>
       <BS.Form.Group className="mt-3">
         <BS.Form.Label>Description:</BS.Form.Label>

src/Components/Private/MemberCard.js

@@ -27,6 +27,7 @@ export default function MemberCard(props) {
     const [ pronouns, setPronouns ] = useState("");
     const [ editPronouns, setEditPronouns ] = useState("");
     const [ avatar, setAvatar ] = useState("");
+    const [ banner, setBanner ] = useState("");
     const [ color, setColor ] = useState("");
     const [ desc, setDesc ] = useState("");
     const [ editDesc, setEditDesc ] = useState("");
@@ -109,13 +110,17 @@ 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));
             setEditDesc(member.description);
         } else { setDesc("(no description)");
         setEditDesc("");
     }
-    }, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.created]);
+    }, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.created, member.banner]);
 
     const submitEdit = data => {
         props.edit(Object.assign(member, data));
@@ -253,6 +258,10 @@ export default function MemberCard(props) {
                     <BS.Form.Label>Avatar url:</BS.Form.Label> 
                   <BS.Form.Control type="url" name="avatar_url" {...registerEdit("avatar_url")}  defaultValue={avatar} />
                 </BS.Col>
+                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Banner url:</BS.Form.Label> 
+                  <BS.Form.Control type="url" name="banner" {...registerEdit("banner")}  defaultValue={banner} />
+                </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Color:</BS.Form.Label> 
                    <BS.Form.Control  pattern="[A-Fa-f0-9]{6}" name="color" {...registerEdit("color")} defaultValue={color} />

src/Components/Private/MemberPage.js

@@ -27,6 +27,7 @@ export default function MemberPage(props) {
     const [ pronouns, setPronouns ] = useState("");
     const [ editPronouns, setEditPronouns ] = useState("");
     const [ avatar, setAvatar ] = useState("");
+    const [ banner, setBanner ] = useState("");
     const [ color, setColor ] = useState("");
     const [ desc, setDesc ] = useState("");
     const [ editDesc, setEditDesc ] = useState("");
@@ -106,6 +107,10 @@ export default function MemberPage(props) {
             setAvatar(avatarsmall.replace('?width=256&height=256', ''))
         } else setAvatar('')
 
+        if (member.banner) {
+            setBanner(member.banner);
+          } else setBanner("");
+        
         if (member.color) {
             setColor(member.color);
         } else setColor('');
@@ -116,7 +121,7 @@ export default function MemberPage(props) {
         } else { setDesc("(no description)");
         setEditDesc("");
     }
-    }, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.created]);
+    }, [member.description, member.color, member.birthday, member.display_name, member.pronouns, member.avatar_url, member.proxy_tags, member.created, member.banner]);
 
     const submitEdit = data => {
         props.edit(Object.assign(member, data));
@@ -232,8 +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> :
         <>
-        { localStorage.getItem('colorbg') ? "" : member.color ? <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
+        { member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
-        <div className="backdrop-overlay"/></> : "" }
+        { localStorage.getItem('colorbg') && member.color ? "" : <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
+        { !localStorage.getItem('fullbg') ? <div className="backdrop-overlay"/> : "" }</> }
         <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={ 
@@ -279,6 +285,10 @@ export default function MemberPage(props) {
                     <BS.Form.Label>Avatar url:</BS.Form.Label> 
                   <BS.Form.Control type="url" name="avatar_url" {...registerEdit("avatar_url")}  defaultValue={avatar} />
                 </BS.Col>
+                <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                    <BS.Form.Label>Banner url:</BS.Form.Label> 
+                  <BS.Form.Control type="url" name="banner" {...registerEdit("banner")}  defaultValue={banner} />
+                </BS.Col>
                 <BS.Col className="mb-lg-2" xs={12} lg={3}>
                     <BS.Form.Label>Color:</BS.Form.Label> 
                    <BS.Form.Control  pattern="[A-Fa-f0-9]{6}" name="color" {...registerEdit("color")} defaultValue={color} />

src/Components/Private/Memberlist.js

@@ -323,6 +323,10 @@ export default function Memberlist() {
                             <BS.Form.Label>Avatar url:</BS.Form.Label> 
                           <BS.Form.Control type="url" name="avatar_url" {...register("avatar_url")}  defaultValue={''} />
                         </BS.Col>
+                        <BS.Col className="mb-lg-2" xs={12} lg={3}>
+                            <BS.Form.Label>Banner url:</BS.Form.Label> 
+                          <BS.Form.Control type="url" name="banner" {...register("banner")}  defaultValue={''} />
+                        </BS.Col>
                         <BS.Col className="mb-lg-2" xs={12} lg={3}>
                             <BS.Form.Label>Color:</BS.Form.Label> 
                           <BS.Form.Control  pattern="[A-Fa-f0-9]{6}" name="color" {...register("color")}  defaultValue={''} />

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") ? <div className="banner" style={{backgroundImage: `url(${user.banner})`}} alt=""/> : ""}
     <BS.Card className="mb-3 mt-3 w-100">
       <BS.Card.Header className="d-flex align-items-center justify-content-between">
         <BS.Card.Title className="float-left">
@@ -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) {
         )}
       </BS.Card.Body>
     </BS.Card>
+    </>
   );
 }

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 ? <ProfileList sysID={sysID} /> :
    <>{ isLoading ? <Loading /> : isError ?  <BS.Alert variant="danger">Something went wrong, either the system doesn't exist, or there was an error fetching data.</BS.Alert> :
-    <><BS.Alert variant="primary" >You are currently <b>viewing</b> a system.</BS.Alert>
+    <>{ system.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
+    <BS.Alert variant="primary" >You are currently <b>viewing</b> a system.</BS.Alert>
         <BS.Card className="mb-3 mt-3 w-100" >
         <BS.Card.Header className="d-flex align-items-center justify-content-between">
            <BS.Card.Title className="float-left"><FaAddressCard className="mr-4 float-left" /> {name} ({system.id})</BS.Card.Title> 

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 ? <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
+       { member.banner && !localStorage.getItem("hidebanners") ? <div className="banner" style={{backgroundImage: `url(${banner})`}} alt=""/> : ""}
-        <div className="backdrop-overlay"/></> : "" }
+       { localStorage.getItem('colorbg') && member.color ? "" : <><div className="backdrop" style={{backgroundColor: `#${color}`}}/>
+        { !localStorage.getItem('fullbg') ? <div className="backdrop-overlay"/> : "" }</> }
         <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">

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;
+  }
+}

src/Pages/Settings.js

@@ -107,6 +107,34 @@ const Settings = ({ forceUpdate }) => {
             )}
             Use only member pages?
           </BS.Col>
+          <BS.Col
+            xs={12}
+            lg={4}
+            className="mx-1 mb-4 d-flex align-items-center row"
+          >
+            {localStorage.getItem("fullbg") ? (
+              <Toggle
+                className="mr-2"
+                defaultChecked={true}
+                icons={false}
+                onChange={() => {
+                  localStorage.removeItem("fullbg");
+                  forceUpdate();
+                }}
+              />
+            ) : (
+              <Toggle
+                className="mr-2"
+                defaultChecked={false}
+                icons={false}
+                onChange={() => {
+                  localStorage.setItem("fullbg", "true");
+                  forceUpdate();
+                }}
+              />
+            )}
+            Remove gradient from background color?
+          </BS.Col>
           <BS.Col
             xs={12}
             lg={4}
@@ -133,7 +161,7 @@ const Settings = ({ forceUpdate }) => {
                 }}
               />
             )}
-            Hide colored backgrounds?
+            Hide colored backgrounds altogether?
           </BS.Col>
           <BS.Col
             xs={12}
@@ -163,6 +191,34 @@ const Settings = ({ forceUpdate }) => {
             )}
             Expand member cards on default?
           </BS.Col>
+          <BS.Col
+            xs={12}
+            lg={4}
+            className="mx-1 mb-4 d-flex align-items-center row"
+          >
+            {localStorage.getItem("hidebanners") ? (
+              <Toggle
+                className="mr-2"
+                defaultChecked={true}
+                icons={false}
+                onChange={() => {
+                  localStorage.removeItem("hidebanners");
+                  forceUpdate();
+                }}
+              />
+            ) : (
+              <Toggle
+                className="mr-2"
+                defaultChecked={false}
+                icons={false}
+                onChange={() => {
+                  localStorage.setItem("hidebanners", "true");
+                  forceUpdate();
+                }}
+              />
+            )}
+            Hide system and member banners?
+          </BS.Col>
         </BS.Row>
       </BS.Card.Body>
     </BS.Card>