Improve Carrousel

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

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>
     );
   }