Improve Layout of Collection page

Signed-off-by: Henrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>

src/Components/ResourceList.js

@@ -70,7 +70,7 @@ export default function ResourceList(props) {
 					resources.push({ "type": "LearningObject", "id": props.resources[i].id });
 				i++;
 			}
-			const body = {
+			var body = {
 				"package": {
 					"object": resources
 				}
@@ -85,7 +85,6 @@ export default function ResourceList(props) {
 					});
 		}
 	}, [selected, selectable]);
-	console.log("CARD >>", props.resources)
 	return (
 		<ResourceListContainer>
 			<Grid container direction="row" justify="space-around" alignItems="center">
@@ -116,7 +115,7 @@ export default function ResourceList(props) {
 					</UnstyledAnchor>
 				</Grid>
 			</Grid>
-			<Grid container direction="row" justify="flex-start" alignItems="center">
+			<Grid container direction="row" justify="center" alignItems="center">
 				{props.resources.map((card) => {
 					return (
 						<ResourceGrid item key={card.title}>

src/Pages/CollectionPage.js

@@ -50,7 +50,6 @@ export default function CollectionPage(props) {
 	const handleScrollToComments = () => {
 		window.scrollTo(0, comment_ref.current.offsetTop);
 	}
-	console.log("COLLECTION >> ", collection)
 	return (
 		<>
 			<BreadCrumbsDiv>
@@ -59,17 +58,8 @@ export default function CollectionPage(props) {
 					<span>Coleções</span>
 				</StyledBreadCrumbs>
 			</BreadCrumbsDiv>
-			<Grid
-				container
-				direction="row"
-				justify="space-around"
-				alignItems="center"
-				spacing={4}
-			>
-				<Grid
-					item
-					md={3}
-				>
+			<Grid container direction="row" justify="center" alignItems="center">
+				<Grid item md={3}>
 					<CollectionAuthor
 						author_id={collection.owner ? collection.owner.id : 0}
 						name={collection.owner ? collection.owner.name : ""}
@@ -77,20 +67,14 @@ export default function CollectionPage(props) {
 				</Grid>
 
 
-				<Grid
-					item
-					md={5}
-				>
+				<Grid item md={5}>
 					<CollectionDescription
 						scrollToComments={handleScrollToComments}
 						title={collection.name ? collection.name : ""}
 						collection_id={collection.id ? collection.id : 0} />
 				</Grid>
 
-				<Grid
-					item
-					md={3}
-				>
+				<Grid item md={3}>
 					<DowloadButton
 						id={collection.id ? collection.id : 0}
 					/>
@@ -103,8 +87,9 @@ export default function CollectionPage(props) {
 
 			<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">
+			<Grid container justify="center" style={{ backgroundColor: '#f4f4f4'}}>
+				{/* <Grid item xs={1}/> */}
+				<Grid item xs={10}>
 					<ResourceList resources={
 						collection.collection_items ?
 							collection.collection_items.map(i => {
@@ -128,7 +113,7 @@ export default function CollectionPage(props) {
 					} />
 
 				</Grid>
-				<Grid container item xs={12} style={{ marginTop: 40 }} ref={comment_ref}>
+				<Grid container item xs={12} style={{ marginTop: 40, paddingBottom:40 }} ref={comment_ref}>
 					<CollectionCommentSection id={collection_id} />
 				</Grid>
 			</Grid>