Skip to content
Snippets Groups Projects
Commit 11e18f89 authored by lfr20's avatar lfr20
Browse files

Trying to fix the position of the tags

parent a790de62
No related branches found
No related tags found
6 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!32Homologa,!31Fix console error,!28Training materials
Hide whitespace changes
Inline Side-by-side
src/Components/ResourceCardFunction.js
+ 76
− 64
View file @ 11e18f89
......@@ -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`
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment