granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use the user's stored profile picture in content

Browse source 
Also adds styles!
This commit is contained in:
Justin Edmund 2022-03-04 05:17:23 -08:00
parent 6b999106b5
commit 7e5b90a6c7
3 changed files with 58 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/GridRep/index.tsx
View file

@ -83,11 +83,12 @@ const GridRep = (props: Props) => {
if (props.user)
return (
<img
alt="Gran"
className="gran"
srcSet="/profile/gran.png,
/profile/gran@2x.png 2x"
src="/profile/gran.png" />
alt={props.user.picture.picture}
className={`profile ${props.user.picture.element}`}
srcSet={`/profile/${props.user.picture.picture}.png,
/profile/${props.user.picture.picture}@2x.png 2x`}
src={`/profile/${props.user.picture.picture}.png`}
/>
)
else
return (<div className="no-user" />)

22
pages/[username].tsx
View file

@ -22,7 +22,12 @@ const ProfileRoute: React.FC = () => {
const [user, setUser] = useState<User>({
id: '',
username: '',
granblueId: 0
granblueId: 0,
picture: {
picture: '',
element: ''
},
private: false
})
// Filter states
@ -63,7 +68,9 @@ const ProfileRoute: React.FC = () => {
setUser({
id: response.data.user.id,
username: response.data.user.username,
granblueId: response.data.user.granblue_id
granblueId: response.data.user.granblue_id,
picture: response.data.user.picture,
private: response.data.user.private
})
const parties: Party[] = response.data.user.parties
@ -113,11 +120,12 @@ const ProfileRoute: React.FC = () => {
<FilterBar onFilter={receiveFilters} scrolled={scrolled}>
<div className="UserInfo">
<img
alt="Gran"
className="gran"
srcSet="/profile/gran.png,
/profile/gran@2x.png 2x"
src="/profile/gran.png" />
alt={user.picture.picture}
className={`profile ${user.picture.element}`}
srcSet={`/profile/${user.picture.picture}.png,
/profile/${user.picture.picture}@2x.png 2x`}
src={`/profile/${user.picture.picture}.png`}
/>
<h1>{user.username}</h1>
</div>
</FilterBar>

37
styles/globals.scss
View file

@ -290,6 +290,43 @@ select {
}
}
.profile {
background: $grey-90;
&.fire {
background: $fire-bg-light;
}
&.water {
background: $water-bg-light;
}
&.wind {
background: $wind-bg-light;
}
&.earth {
background: $earth-bg-light;
}
&.dark {
background: $dark-bg-light;
}
&.light {
background: $light-bg-light;
}
}
i.tag {
background: $grey-90;
border-radius: $unit / 2;
font-size: 10px;
font-weight: $bold;
padding: 4px 6px;
text-transform: uppercase;
}
@keyframes openModal {
0% {
opacity: 0;