diff --git a/src/Components/ContactCard.js b/src/Components/ContactCard.js
index 09e0d35dffddd6e8d5a2468f8d2c3d4b8af3335e..d0ce186fc59af466c7905b49d339f8e632652fa1 100644
--- a/src/Components/ContactCard.js
+++ b/src/Components/ContactCard.js
@@ -16,7 +16,7 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import noAvatar from "../img/default_profile.png";
@@ -29,8 +29,8 @@ import FollowersCountButton from "./ContactButtons/FollowersCountButton.js";
import { Link } from "react-router-dom";
import Badge from "./Badge.js";
import Rubi from '../img/gamification/gem.svg';
-import { Url } from "../Admin/Filters";
import { apiDomain } from "../env";
+import { Avatar } from "@material-ui/core";
export default function ImgMediaCard(props) {
@@ -47,142 +47,168 @@ export default function ImgMediaCard(props) {
return (
<StyledCard>
- <CardDiv>
- <CardAreaDiv>
- {/* Top part of contat card (background image, number of followers and avatar) */}
- <Header>
- <StyledCardMedia image={props.cover}>
- <div
- style={{
- display: "flex",
- backgroundColor: "inherit",
- float: "right",
- }}
- >
- <Link to={props.href}>
- <FollowersCountButton followCount={props.follow_count} />
- </Link>
- <AvatarDiv style={{ backgroundImage: `url(${apiDomain}${props.userAvatarFrame.image})` }}>
- <BadgesDiv>
- {
- props.userBadges.length === 1 &&
- <Badge
- lower
- src={props.userBadges[0].image}
- alt={props.userBadges[0].name}
- />
- }
- {
- props.userBadges.length === 2 &&
- <>
- <Badge
- src={props.userBadges[0].image}
- alt={props.userBadges[0].name}
-
- />
- <Badge
- src={props.userBadges[1].image}
- alt={props.userBadges[1].name}
-
- />
- </>
- }
- {
- props.userBadges.length === 3 &&
- <>
- <Badge
- src={props.userBadges[0].image}
- alt={props.userBadges[0].name}
-
- />
- <Badge
- lower
- src={props.userBadges[1].image}
- alt={props.userBadges[1].name}
-
- />
- <Badge
- src={props.userBadges[2].image}
- alt={props.userBadges[2].name}
- />
- </>
- }
- </BadgesDiv>
- <img
- src={props.avatar ? props.avatar : noAvatar}
- alt="user avatar"
- style={{ height: "90%", width: "90%", borderRadius: "50%", backgroundColor: 'white' }}
- />
- </AvatarDiv>
- </div>
- </StyledCardMedia>
- </Header>
-
- {/* Rest of the card content. Button to be rendered depends on whether the contact is followed by the user */}
- <CardContent>
- <UserInfo>
- <Link to={props.href}>
- <p className="p1">{props.name}</p>
- </Link>
-
- <Link to={props.href}>
- <span style={{ fontSize: "14px", fontWeight: "normal" }}>
- <b>{props.numCollections}</b>{" "}
- {props.numCollections !== 1 ? "Coleções" : "Coleção"} |{" "}
- <b>{props.numLearningObjects}</b>{" "}
- {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
- </span>
- </Link>
-
- {
- !isOnStore() ?
- <div style={{ display: "flex", justifyContent: "center" }}>
- {
- followedBoolean ?
- (
- <React.Fragment>
- <FollowingButton
- followedID={props.followerID ? props.followerID : props.followedID}
- toggleFollowed={toggleFollowed} />
-
- <Options
- followableID={props.followerID ? props.followerID : props.followedID}
- followed={followedBoolean}
- toggleFollowed={toggleFollowed} />
- </React.Fragment>
- )
- :
- (
- <React.Fragment>
- <FollowButton
- followerID={props.followedID ? props.followedID : props.followerID}
- toggleFollowed={toggleFollowed} />
-
- <Options
- followableID={props.followedID ? props.followedID : props.followerID}
- followed={followedBoolean}
- toggleFollowed={toggleFollowed} />
- </React.Fragment>
- )
- }
- </div>
- :
- <StatusInfoDiv>
- <CoinsInfoDiv>
- <GemImg src={Rubi} />
- <CoinsSpan>{props.points} </CoinsSpan>
- </CoinsInfoDiv>
- </StatusInfoDiv>
- }
- </UserInfo>
- </CardContent>
- </CardAreaDiv>
- </CardDiv>
- </StyledCard >
- );
+ <StyledAvatar>
+ <Avatar
+ src={props.avatar ? props.avatar : noAvatar}
+ alt="user avatar"
+ style={{ height: "56%", width: "55%", objectFit: 'cover' }}
+ />
+ </StyledAvatar>
+ </StyledCard>
+ )
+
+ // return (
+ // <StyledCard>
+ // <CardDiv>
+ // <CardAreaDiv>
+ // {/* Top part of contat card (background image, number of followers and avatar) */}
+ // <Header>
+ // <StyledCardMedia image={props.cover}>
+ // <div
+ // style={{
+ // display: "flex",
+ // backgroundColor: "inherit",
+ // float: "right",
+ // }}
+ // >
+ // <Link to={props.href}>
+ // <FollowersCountButton followCount={props.follow_count} />
+ // </Link>
+ // <AvatarDiv>
+ // <BadgesDiv>
+ // {
+ // props.userBadges.length === 1 &&
+ // <Badge
+ // lower
+ // src={props.userBadges[0].image}
+ // alt={props.userBadges[0].name}
+ // />
+ // }
+ // {
+ // props.userBadges.length === 2 &&
+ // <>
+ // <Badge
+ // src={props.userBadges[0].image}
+ // alt={props.userBadges[0].name}
+
+ // />
+ // <Badge
+ // src={props.userBadges[1].image}
+ // alt={props.userBadges[1].name}
+
+ // />
+ // </>
+ // }
+ // {
+ // props.userBadges.length === 3 &&
+ // <>
+ // <Badge
+ // src={props.userBadges[0].image}
+ // alt={props.userBadges[0].name}
+
+ // />
+ // <Badge
+ // lower
+ // src={props.userBadges[1].image}
+ // alt={props.userBadges[1].name}
+
+ // />
+ // <Badge
+ // src={props.userBadges[2].image}
+ // alt={props.userBadges[2].name}
+ // />
+ // </>
+ // }
+ // </BadgesDiv>
+ // <img
+ // src={props.avatar ? props.avatar : noAvatar}
+ // alt="user avatar"
+ // style={{ height: "90%", width: "90%", borderRadius: "50%", backgroundColor: 'white' }}
+ // />
+ // </AvatarDiv>
+ // </div>
+ // </StyledCardMedia>
+ // </Header>
+
+ // {/* Rest of the card content. Button to be rendered depends on whether the contact is followed by the user */}
+ // <CardContent>
+ // <UserInfo>
+ // <Link to={props.href}>
+ // <p className="p1">{props.name}</p>
+ // </Link>
+
+ // <Link to={props.href}>
+ // <span style={{ fontSize: "14px", fontWeight: "normal" }}>
+ // <b>{props.numCollections}</b>{" "}
+ // {props.numCollections !== 1 ? "Coleções" : "Coleção"} |{" "}
+ // <b>{props.numLearningObjects}</b>{" "}
+ // {props.numLearningObjects !== 1 ? "Recursos" : "Recurso"}
+ // </span>
+ // </Link>
+
+ // {
+ // !isOnStore() ?
+ // <div style={{ display: "flex", justifyContent: "center" }}>
+ // {
+ // followedBoolean ?
+ // (
+ // <React.Fragment>
+ // <FollowingButton
+ // followedID={props.followerID ? props.followerID : props.followedID}
+ // toggleFollowed={toggleFollowed} />
+
+ // <Options
+ // followableID={props.followerID ? props.followerID : props.followedID}
+ // followed={followedBoolean}
+ // toggleFollowed={toggleFollowed} />
+ // </React.Fragment>
+ // )
+ // :
+ // (
+ // <React.Fragment>
+ // <FollowButton
+ // followerID={props.followedID ? props.followedID : props.followerID}
+ // toggleFollowed={toggleFollowed} />
+
+ // <Options
+ // followableID={props.followedID ? props.followedID : props.followerID}
+ // followed={followedBoolean}
+ // toggleFollowed={toggleFollowed} />
+ // </React.Fragment>
+ // )
+ // }
+ // </div>
+ // :
+ // <StatusInfoDiv>
+ // <CoinsInfoDiv>
+ // <GemImg src={Rubi} />
+ // <CoinsSpan>{props.points} </CoinsSpan>
+ // </CoinsInfoDiv>
+ // </StatusInfoDiv>
+ // }
+ // </UserInfo>
+ // </CardContent>
+ // </CardAreaDiv>
+ // </CardDiv>
+ // </StyledCard >
+ // );
}
+const StyledAvatar = styled(Avatar)`
+border-radius: 105px 105px 0px 0px;
+ height: 300px;
+ width: 300px;
+ float: right;
+ overflow: hidden;
+ background-image: url("https://rocket-league.com/content/media/items/avatar/220px/4f474ee3bb1535899237.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+`
+
+
+
/*Controls top part of Card*/
@@ -276,6 +302,12 @@ const AvatarDiv = styled.div`
justify-content: space-around;
align-items: center;
background-repeat: no-repeat;
+ border-image:
+ url("https://mdn.mozillademos.org/files/4127/border.png") /* source */
+ 27 / /* slice */
+ 36px 28px 18px 8px / /* width */
+ 18px 14px 9px 4px /* outset */
+ round;
`;
/* gamification aspects */
diff --git a/src/Pages/ItemStore.js b/src/Pages/ItemStore.js
index 336e46658271dab3c2234d679cb4f4968e54c0c4..a57937a9e44d2a20969b4da784dd75b92d9043f8 100644
--- a/src/Pages/ItemStore.js
+++ b/src/Pages/ItemStore.js
@@ -237,9 +237,9 @@ export default function ItemStoreContainer(props) {
numLearningObjects={currUser.learning_objects_count}
follow_count={currUser.follows_count}
points={currUser.points}
- userBadges={userBadges}
- userAvatarFrame={userAvatarFrame}
- userCardFrame={userCardFrame}
+ userBadges={userBadges ? userBadges : null}
+ userAvatarFrame={userAvatarFrame ? userAvatarFrame : null}
+ userCardFrame={userCardFrame ? userCardFrame : null}
// followed={currUser.followed || null}
// followerID={currUser.follower.id}
href={'/usuario-publico/' + currUser.id}