From 134e3ffbb3c966db0f8f21779b60fb16afc931f3 Mon Sep 17 00:00:00 2001
From: "Henrique V. Ehrenfried" <hvehrenfried@inf.ufpr.br>
Date: Tue, 26 Jan 2021 11:50:44 -0300
Subject: [PATCH] Improve Carrousel
Signed-off-by: Henrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>
---
src/Components/AreasSubPages.js | 114 ++++++++++++++------------------
1 file changed, 48 insertions(+), 66 deletions(-)
diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index fb6fde62..7283ffe8 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -56,76 +56,58 @@ class ReqResources extends Component {
this.setState({ resources: res.data });
});
}
+
+ resourcesPerPage(){
+ var pageWidth = window.innerWidth
+ if (pageWidth >= 1200){
+ return 3
+ }
+ else{
+ if (pageWidth > 752) {
+ return 2
+ }
+ else{
+ return 1
+ }
+ }
+ }
+
+
+
render() {
- var row1 = this.state.resources.slice(0, 4);
- var row2 = this.state.resources.slice(4, 8);
- var row3 = this.state.resources.slice(8, 13);
+ var rows = []
+ var resources_per_page = this.resourcesPerPage()
+ for(let i = 0; i < 12/resources_per_page; i++){
+ rows.push(this.state.resources.slice(i*resources_per_page, resources_per_page*(i+1)))
+ }
return (
+
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- <Row style={{ paddingBottom: "5px" }}>
- {row1.map((card) => (
- <Col md={3} sm={6} key={card.id}>
- <ResourceCardFunction
- avatar={card.publisher.avatar}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- // author={card.author}
- author={card.publisher.name}
- tags={card.educational_stages}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </Col>
+ {
+ rows.map((row) => (
+ <Row style={{ paddingBottom: "5px", margin:'0 auto', width:"80%"}}>
+ {row.map((card) => (
+ <div style={{marginLeft:10, display: 'flex' }}>
+ <ResourceCardFunction
+ avatar={card.publisher.avatar}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ // author={card.author}
+ author={card.publisher.name}
+ tags={card.educational_stages}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </div>
+ ))}
+ </Row>
))}
- </Row>
- <Row>
- {row2.map((card) => (
- <Col md={3} sm={6} key={card.id}>
- <ResourceCardFunction
- avatar={card.publisher.avatar}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.publisher.name}
- tags={card.educational_stages}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </Col>
- ))}
- </Row>
- <Row>
- {row3.map((card) => (
- <Col md={3} sm={6} key={card.id}>
- <ResourceCardFunction
- avatar={card.publisher.avatar}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.publisher.name}
- tags={card.educational_stages}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
- </Col>
- ))}
- </Row>
</Carousel>
);
}
--
GitLab