Skip to content
Snippets Groups Projects
Commit 35a4ab7c authored by lfr20's avatar lfr20
Browse files

tryed to improve the style to appear as the angular portal

parent 0062ee2c
No related branches found
No related tags found
4 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!32Homologa
Hide whitespace changes
Inline Side-by-side
src/Components/CollectionAuthor.js
+ 3
− 3
View file @ 35a4ab7c
......@@ -52,8 +52,8 @@ export default function CollectionAuthor(props) {
}
const UserAvatar = styled.img`
border-radius: 100px;
width: 100px;
border-radius: 75px;
width: 75px;
height: auto;
`
const InfoText = styled.p`
......@@ -61,7 +61,7 @@ const InfoText = styled.p`
padding-bottom: 0;
color: #666;
`
const UserName = styled.h1`
const UserName = styled.h2`
margin-top: 10px;
color: #673ab7;
`
......
src/Components/CollectionDescription.js
+ 16
− 9
View file @ 35a4ab7c
......@@ -47,19 +47,26 @@ export default function CollectionDescription(props) {
});}, [props.collection_id]);
return (
<Grid container direction="column" justify="center" alignItems="center">
<Grid item>
<Grid container direction="column" justify="center" alignItems="center" spacing={5}>
<Grid
item
justify="center"
alignItems="center"
>
<Title>{props.title}</Title>
</Grid>
<Grid item container
direction="row" justify="space-between" alignItems="center"
<Grid
item
direction="row"
justify="center"
alignItems="center"
>
<Grid item sm={4}>
<Grid item>
<CollectionReview
scrollToComment={props.scrollToComments}
id={props.collection_id}/>
</Grid>
<Grid item container sm={8}
{/* <Grid item container sm={8}
direction="column" justify="center" alignItems="flex-end"
>
<Grid item style={{marginBottom: 10}}>
......@@ -77,7 +84,7 @@ export default function CollectionDescription(props) {
<Grid item>
<FollowCollectionButton user_id={state.currentUser.id} collection_id={props.collection_id}/>
</Grid>
</Grid>
</Grid> */}
</Grid>
</Grid>
......@@ -85,9 +92,9 @@ export default function CollectionDescription(props) {
}
const Title=styled.h1`
font-size: 3em;
font-size: 2.5em;
color: rgb(102, 102, 102);
float: left;
text-align: center
`
const ButtonText=styled.span`
font-weight: bolder;
......
src/Components/CollectionReview.js
+ 60
− 24
View file @ 35a4ab7c
......@@ -41,7 +41,7 @@ export default function CollectionReview(props) {
const { state } = useContext(Store);
useEffect(() => {
axios.get(apiUrl+'/collections/'+props.id)
axios.get(apiUrl + '/collections/' + props.id)
.then(res => {
setLikes(Number(res.data.likes_count));
setLiked(res.data.liked);
......@@ -51,15 +51,50 @@ export default function CollectionReview(props) {
const handleClickReport = () => {
setReportOpen(true);
}
const SaveNewHeaders = (response) => {
if (
(response.headers['access-token'] === undefined || response.headers['access-token'] === null) &&
(response.headers.client === undefined || response.headers.client === null)
) {
} else {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
sessionStorage.setItem('@portalmec/clientToken', response.headers.client)
console.log('saved')
}
}
const handleLikeClick = () => {
if (state.currentUser.id) {
const url = apiUrl+'/collections/'+props.id+'/like';
const url = apiUrl + '/collections/' + props.id + '/like';
if (!liked)
axios.put(url);
axios({
method: 'put',
url: url,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json; charset=utf-8',
'access-token': sessionStorage.getItem('@portalmec/accessToken'),
'client': sessionStorage.getItem('@portalmec/clientToken'),
'uid': sessionStorage.getItem('@portalmec/uid'),
'If-None-Match': null
},
}).then(response => {
if(response.status === 201)
{
setLiked(true)
setLikes(response.data.count);
}
else
{
setLiked(false);
setLikes(response.data.count);
}
SaveNewHeaders(response)
})
else
axios.delete(url);
setLiked(!liked);
setLiked(!liked);
} else
setSignUpOpen(true);
}
......@@ -74,26 +109,28 @@ export default function CollectionReview(props) {
}
return (
<Grid container direction="row" justify="center" alignItems="center">
<Grid item sm={8}>
<Rating
name="customized-empty"
value={stars}
onChange={(e, value) => handleSetStars(value)}
precision={0.5}
style={{color:"#666"}}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
</Grid>
<Grid item sm={4}>
<IconButton aria-label="like" onClick={handleLikeClick}>
{likes + (liked ? 1 : 0)}<FavoriteIcon />
</IconButton>
<Grid container direction="column">
<Grid sm={12} container direction="row" alignItems="center">
<Grid item>
<Rating
name="customized-empty"
value={stars}
onChange={(e, value) => handleSetStars(value)}
precision={0.5}
style={{ color: "#666" }}
emptyIcon={<StarBorderIcon fontSize="inherit" />}
/>
</Grid>
<Grid item justify="center" alignItems="center">
<IconButton aria-label="like" onClick={handleLikeClick}>
{likes}<FavoriteIcon style={{fill : liked ? "red" : null}} />
</IconButton>
</Grid>
</Grid>
<Grid item sm={12}>
<IconButton
aria-label="report"
style={{fontSize: 'small'}}
<IconButton
aria-label="report"
style={{ fontSize: 'small' }}
onClick={handleClickReport}>
<InfoIcon />Reportar erro ou abuso
</IconButton>
......@@ -114,7 +151,6 @@ export default function CollectionReview(props) {
open={log_in_open}
handleClose={() => setLoginOpen(false)}
/>
</Grid>
);
}
src/Pages/CollectionPage.js
+ 151
− 37
View file @ 35a4ab7c
......@@ -15,7 +15,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, { useRef, useState, useEffect } from 'react';
import React, { useRef, useState, useEffect, useContext } from 'react';
import axios from 'axios';
import { Grid } from '@material-ui/core';
import CollectionAuthor from '../Components/CollectionAuthor.js';
......@@ -25,17 +25,26 @@ import ResourceList from '../Components/ResourceList.js';
import CollectionCommentSection from '../Components/CollectionCommentSection.js';
import { apiUrl, apiDomain } from '../env';
import CircularProgress from '@material-ui/core/CircularProgress';
import GetAppIcon from '@material-ui/icons/GetApp';
import styled from 'styled-components';
import DowloadButton from '../Components/CollectionDowloadButton.js';
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import { Link } from 'react-router-dom';
import FollowCollectionButton from '../Components/FollowCollectionButton';
import { Store } from '../Store.js'
export default function CollectionPage(props) {
const { state } = useContext(Store);
const [collection, setCollection] = useState({
name: '',
id: 0,
});
name: '',
id: 0,
});
const collection_id = props.match.params.id;
const comment_ref = useRef(null);
useEffect(()=>{
axios.get(apiUrl+'/collections/'+collection_id)
useEffect(() => {
axios.get(apiUrl + '/collections/' + collection_id)
.then(res => {
setCollection(Object.assign({}, res.data));
});
......@@ -46,32 +55,61 @@ export default function CollectionPage(props) {
}
return (
<Grid container
direction="row"
justify="space-around"
alignItems="center"
style={mainContainerStyle}>
<Grid item xs={10} md={3}>
<CollectionAuthor
author_id={collection.owner ? collection.owner.id : 0}
name={collection.owner ? collection.owner.name : ""}
imgsrc={collection.owner ? apiDomain+collection.owner.avatar : ''}/>
</Grid>
<VerticalRuler width={1} height={300} color="rgb(238, 238, 238)"/>
<Grid item xs={10} md={6}>
<CollectionDescription
scrollToComments={handleScrollToComments}
title={collection.name ? collection.name : ""}
collection_id={collection.id ? collection.id : 0}/>
</Grid>
<Grid container item xs={12} direction="row" justify="center" alignItems="center" style={{backgroundColor: '#f4f4f4'}}>
<Grid item xs={10}>
<>
<BreadCrumbsDiv>
<StyledBreadCrumbs>
<Link to="/">Página Inicial</Link>
<span>Coleções</span>
</StyledBreadCrumbs>
</BreadCrumbsDiv>
<Grid
container
direction="row"
justify="space-around"
alignItems="center"
spacing={4}
>
<Grid
item
md={3}
>
<CollectionAuthor
author_id={collection.owner ? collection.owner.id : 0}
name={collection.owner ? collection.owner.name : ""}
imgsrc={collection.owner ? apiDomain + collection.owner.avatar : ''} />
</Grid>
<Grid
item
md={5}
>
<CollectionDescription
scrollToComments={handleScrollToComments}
title={collection.name ? collection.name : ""}
collection_id={collection.id ? collection.id : 0} />
</Grid>
<Grid
item
md={3}
>
<DowloadButton
id={collection.id ? collection.id : 0}
/>
<div style={{height : 12}}></div>
<FollowCollectionButton
user_id={state.currentUser.id}
collection_id={collection_id} />
</Grid>
</Grid>
<VerticalRuler width={1} height={100} color="rgb(238, 238, 238)" />
<Grid container item xs={12} direction="row" justify="center" alignItems="center" style={{ backgroundColor: '#f4f4f4' }}>
<Grid item xs={10} alignItems="center" justify="center">
<ResourceList resources={
collection.collection_items ?
collection.collection_items ?
collection.collection_items.map(i => {
return {
type: i.collectionable.object_type,
......@@ -83,22 +121,98 @@ export default function CollectionPage(props) {
liked: i.collectionable.liked,
avatar: i.collectionable.publisher.avatar,
thumbnail: i.collectionable.thumbnail,
tags: i.collectionable.tags.map(t => t.name),
tags: i.collectionable.tags.map(t => t),
id: i.collectionable.id,
}
})
: []
}/>
} />
</Grid>
<Grid container item xs={12} style={{marginTop: 40}} ref={comment_ref}>
<CollectionCommentSection id={collection_id}/>
<Grid container item xs={12} style={{ marginTop: 40 }} ref={comment_ref}>
<CollectionCommentSection id={collection_id} />
</Grid>
</Grid>
</Grid>
</>
// <Grid container
// direction="row"
// justify="space-around"
// alignItems="center"
// style={mainContainerStyle}>
// <Grid item xs={10} md={3}>
// <CollectionAuthor
// author_id={collection.owner ? collection.owner.id : 0}
// name={collection.owner ? collection.owner.name : ""}
// imgsrc={collection.owner ? apiDomain+collection.owner.avatar : ''}/>
// </Grid>
// <VerticalRuler width={1} height={300} color="rgb(238, 238, 238)"/>
// <Grid item xs={10} md={6}>
// <CollectionDescription
// scrollToComments={handleScrollToComments}
// title={collection.name ? collection.name : ""}
// collection_id={collection.id ? collection.id : 0}/>
// </Grid>
// <Grid container item xs={12} direction="row" justify="center" alignItems="center" style={{backgroundColor: '#f4f4f4'}}>
// <Grid item xs={10}>
// <ResourceList resources={
// collection.collection_items ?
// collection.collection_items.map(i => {
// return {
// type: i.collectionable.object_type,
// author: i.collectionable.author,
// published: i.collectionable.published_at,
// title: i.collectionable.name,
// rating: i.collectionable.review_average,
// likeCount: i.collectionable.likes_count,
// liked: i.collectionable.liked,
// avatar: i.collectionable.publisher.avatar,
// thumbnail: i.collectionable.thumbnail,
// tags: i.collectionable.tags.map(t => t.name),
// id: i.collectionable.id,
// }
// })
// : []
// }/>
// </Grid>
// <Grid container item xs={12} style={{marginTop: 40}} ref={comment_ref}>
// <CollectionCommentSection id={collection_id}/>
// </Grid>
// </Grid>
// </Grid>
);
}
const mainContainerStyle = {
marginTop: '5%',
}
const StyledBreadCrumbs = styled(Breadcrumbs)`
display: flex;
justify-content: flex-start;
max-width: 1170px;
span {
color: #a5a5a5;
}
a {
color: #00bcd4;
text-decoration: none;
}
`;
const BreadCrumbsDiv = styled.div`
padding: 10px;
display: flex;
`;
const TopInfos = styled(Grid)`
marginTop: 0;
marginLeft: 20;
`
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