From 11e18f89b3860278e900eac717e05b3b49b1f44e Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 3 Feb 2021 12:44:57 -0300
Subject: [PATCH] Trying to fix the position of the tags
---
src/Components/ResourceCardFunction.js | 140 ++++++++++++++-----------
1 file changed, 76 insertions(+), 64 deletions(-)
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index ede74c3f..52699418 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -16,10 +16,10 @@ 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, useEffect } from 'react';
import Card from '@material-ui/core/Card';
import axios from 'axios'
-import {apiDomain, apiUrl} from '../env';
+import { apiDomain, apiUrl } from '../env';
import ResourceCardOptions from './ResourceCardOptions'
import noAvatar from "../img/default_profile.png";
// import { makeStyles } from '@material-ui/core/styles';
@@ -48,27 +48,28 @@ import FavoriteIcon from '@material-ui/icons/Favorite';
import ButtonGuardarColecao from './ButtonGuardarColecao.js'
import Slide from '@material-ui/core/Slide';
import Grid from '@material-ui/core/Grid';
-import {Link} from 'react-router-dom';
-import {getDefaultThumbnail} from './HelperFunctions/getDefaultThumbnail'
+import { Link } from 'react-router-dom';
+import { getDefaultThumbnail } from './HelperFunctions/getDefaultThumbnail'
import GetIconByName from './UploadPageComponents/GetIconByName'
-import {getAxiosConfig} from './HelperFunctions/getAxiosConfig'
-
+import { getAxiosConfig } from './HelperFunctions/getAxiosConfig'
+// import DefaultAvatar from '../../public/img/logo_parceiros/ic_default.png'
import "./ResourceCard.css";
// const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao},
// {label: "Aplicativo" , thumb: aplicativo}, {label: "Ãudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label:"Livro digital", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software Educacional", thumb:software}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "VÃdeo", thumb:video}]
-export default function ResourceCardFunction (props) {
+export default function ResourceCardFunction(props) {
+ console.log(props);
const [thumbnail, setThumbnail] = useState(null)
// eslint-disable-next-line
const [label, setLabel] = useState(props.type)
const [userAvatar, setUserAvatar] = useState(noAvatar)
const [slideIn, setSlide] = useState(false)
- const controlSlide = () => {setSlide(!slideIn)}
+ const controlSlide = () => { setSlide(!slideIn) }
const [liked, toggleLiked] = useState(props.liked)
const [likesCount, setLikesCount] = useState(props.likeCount)
- useEffect( () => {
+ useEffect(() => {
//decide which thumbnail to use
if (props.thumbnail) {
setThumbnail(`${apiDomain}` + props.thumbnail)
@@ -80,6 +81,9 @@ export default function ResourceCardFunction (props) {
if (props.avatar) {
setUserAvatar(`${apiDomain}` + props.avatar)
}
+ else {
+ setUserAvatar(require('../img/logo_parceiros/ic_default.png'))
+ }
}, [])
@@ -87,44 +91,41 @@ export default function ResourceCardFunction (props) {
let payload = {}
let config = getAxiosConfig()
- axios.put( (`${apiUrl}/learning_objects/` + props.id + '/like'),payload, config
+ axios.put((`${apiUrl}/learning_objects/` + props.id + '/like'), payload, config
).then(
(response) => {
console.log(response.data)
- if ( response.headers['access-token'] ) {
+ if (response.headers['access-token']) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
toggleLiked(!liked)
setLikesCount(response.data.count)
},
- (error) => {console.log(error)}
+ (error) => { console.log(error) }
)
}
const SlideAnimationContent = () => {
return (
<SlideContentDiv>
- <div style={{display:"flex", flex:"1"}}>{/*marginBottom:10px*/}
+ <HeaderContainer>{/*marginBottom:10px*/}
<AvatarDiv>
- <img className="img" src={userAvatar} alt="user avatar"/>
+ <img className="img" src={userAvatar} alt="user avatar" />
</AvatarDiv>
<EnviadoPor>
Enviado por:
- <br/>
+ <br />
<p>{props.author}</p>
</EnviadoPor>
- </div>
+ </HeaderContainer>
<TagContainer>
- <Grid container spacing={0} justify='flex-start' style={{height : "inherit"}}>
{
- props.tags.map( (tag) =>
- <Grid item key={tag.id}>
- <span key={tag.id}>{tag.name}</span>
- </Grid>
+ props.tags.map((tag) =>
+ <span key={tag.id}>{tag.name}</span>
+
)
}
- </Grid>
</TagContainer>
</SlideContentDiv>
)
@@ -137,38 +138,38 @@ export default function ResourceCardFunction (props) {
<Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
{
props.published &&
- <Slide direction="left" in={slideIn} timeout={500}>
- <div className={`slideContentLinkAfterActive${slideIn}`} style={{}}>
+ <Slide direction="left" in={slideIn} timeout={1000}>
+ <div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '100%' }}>
<Link to={props.href} className="text" >
{SlideAnimationContent()}
</Link>
-
</div>
</Slide >
}
- <div className={`slideContentLinkBeforeActive${slideIn}`} style={{}}>
+ <div className={`slideContentLinkBeforeActive${slideIn}`} style={{width: '100%', height : '100%'}}>
<Link to={props.href}>
- <img className="img-cover" src={thumbnail} alt="learning object thumbnail"/>
+ <img className="img-cover" src={thumbnail} alt="learning object thumbnail" />
</Link>
</div>
</Header>
<Description>
- <Link to={props.href} className="text"> {/*add link to learningObject*/}
- <span>
+ <Link to={props.href} className="text" style={{height : '45px'}}> {/*add link to learningObject*/}
+ <Title>
{props.title}
- </span>
+ </Title>
</Link>
{
props.published &&
<Rating
- name="customized-empty"
- value={props.rating}
- precision={0.5}
- style={{color:"#666"}}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ name="customized-empty"
+ value={props.rating}
+ precision={0.5}
+ readOnly
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
}
@@ -183,7 +184,7 @@ export default function ResourceCardFunction (props) {
<LikeCounter>
<span>{likesCount}</span>
<ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon style={{color : liked ? "red" : "#666" }}/>
+ <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
</ButtonNoWidth>
</LikeCounter>
}
@@ -194,16 +195,16 @@ export default function ResourceCardFunction (props) {
{
props.published &&
<CardReaFooter>
- <div style={{display : "flex", height : "100%"}}>
+ <div style={{ display: "flex", height: "100%" }}>
<ButtonGuardarColecao thumb={props.thumbnail} title={props.title} recursoId={props.id}
- />
+ />
</div>
<ResourceCardOptions
learningObjectId={props.id}
- downloadableLink = {props.downloadableLink}
+ downloadableLink={props.downloadableLink}
thumb={props.thumbnail}
title={props.title}
- />
+ />
</CardReaFooter>
}
</CardDiv>
@@ -211,20 +212,35 @@ export default function ResourceCardFunction (props) {
)
}
/*---------- USED IN SLIDE DIV ONLY -----------*/
+const HeaderContainer = styled.div`
+ display: flex;
+ flex : 1;
+`
+
export const TagContainer = styled.div`
+ margin-top: 0.5em;
display : flex;
- flex-direction : row;
- width : 100%;
- overflow : hidden;
- flex : 2;
+ width : 90%;
+ overflow : auto;
+ ${'' /* flex : 2; */}
height : 120px;
-
+ max-height : 120px;
+ flex-wrap: wrap;
+ -webkit-box-direction: normal;
+ flex-direction: row;
+ ${'' /* border : 5px solid red; */}
span {
+ word-wrap: break-word;
background-color : #fff;
- height : 20px;
+ display : flex;
+ justify-content : center;
+ align-items : center;
+ height : 22px;
+ tet-align : center;
+ margin: 3px;
+ -webkit-box-direction: normal;
overflow : hidden;
- margin : 2px;
- padding : 3px 8px;
+ padding : 1px 8px;
border-radius : 10px;
color : #666;
font-size : 11px;
@@ -239,10 +255,11 @@ export const EnviadoPor = styled.div`
padding-right : 1em;
p {
- text-overflow : ellipsis;
- overflow : hidden;
- white-space : nowrap;
margin : 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
}
`
const AvatarDiv = styled.div`
@@ -264,9 +281,6 @@ const SlideContentDiv = styled.div`
padding : 10px;
width : 100%;
height : 100%;
- // position : absolute;
- // display : flex;
- // flex-direction : column;
`
/*--------------------------------------------*/
@@ -341,6 +355,7 @@ export const Footer = styled.div`
display : flex;
flex-direction : row;
justify-content : space-between;
+ margin-top : 5px;
`
const Description = styled.div`
@@ -355,16 +370,13 @@ const Description = styled.div`
text-decoration : none !important;
color : inherit;
}
-
- .title {
- text-overflow : ellipsis;
- overflow : hidden;
- margin-bottom : 10px;
- font-size : 1.2em;
- line-height : 1.1;
- max-height : 46px;
- color : #666;
- }
+`
+const Title = styled.span`
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ color : #666;
`
export const Header = styled.div`
--
GitLab