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
......@@ -52,13 +52,14 @@ import {Link} from 'react-router-dom';
import { getDefaultThumbnail } from './HelperFunctions/getDefaultThumbnail'
import GetIconByName from './UploadPageComponents/GetIconByName'
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) {
console.log(props);
const [thumbnail, setThumbnail] = useState(null)
// eslint-disable-next-line
const [label, setLabel] = useState(props.type)
......@@ -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'))
}
}, [])
......@@ -105,7 +109,7 @@ export default function ResourceCardFunction (props) {
const SlideAnimationContent = () => {
return (
<SlideContentDiv>
<div style={{display:"flex", flex:"1"}}>{/*marginBottom:10px*/}
<HeaderContainer>{/*marginBottom:10px*/}
<AvatarDiv>
<img className="img" src={userAvatar} alt="user avatar" />
</AvatarDiv>
......@@ -114,17 +118,14 @@ export default function ResourceCardFunction (props) {
<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>
)
}
</Grid>
</TagContainer>
</SlideContentDiv>
)
......@@ -137,16 +138,15 @@ 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" />
......@@ -155,10 +155,10 @@ export default function ResourceCardFunction (props) {
</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>
{
......@@ -167,6 +167,7 @@ export default function ResourceCardFunction (props) {
name="customized-empty"
value={props.rating}
precision={0.5}
readOnly
style={{ color: "#666" }}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
......@@ -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;
`
const Title = styled.span`
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom : 10px;
font-size : 1.2em;
line-height : 1.1;
max-height : 46px;
color : #666;
}
`
export const Header = styled.div`
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment