Merge pull request #49 from SocialGouv/feat/ajout-card-epds

feat: ajout de la carte pour l'epds
SocialGouv · Jun 27, 2023 · a5bb8ef · a5bb8ef
2 parents 6bbff0e + e25b296
commit a5bb8ef
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 73 deletions.
diff --git a/config-yml/modules/articles.yml b/config-yml/modules/articles.yml
@@ -25,6 +25,11 @@ articles:
     button_url: /integration-widget
     slug: EPDS-site-partenaire
 
+  - title: Vous êtes parents ou attendez un enfant ?
+    category: Widget
+    description: Testez vous en quelques clics et trouvez une aide adaptée
+    slug: EPDS-landing-page
+
   - title: Vous êtes professionnel de santé
     category: EPDS-pro
     description: Faites passer plus facilement vos tests EPDS à vos patient(e)s directement depuis un téléphone mobile ou un ordinateur portable. Consultez et partagez les résultats en deux clics.

diff --git a/src/assets/sass/components.scss b/src/assets/sass/components.scss
@@ -99,4 +99,24 @@ input:focus {
     color: var(--text-mention-grey);
     font-size: .75rem;
   }
+}
+
+.col-container {
+  display: table;
+  width: 100%;
+  height: 25rem !important;
+}
+
+.col {
+  display: table-cell;
+}
+
+@media only screen and (max-width: 600px) {
+  .col {
+    display: block;
+    width: 100%;
+  }
+  .col-container {
+    height: 20rem !important;
+  }
 }
diff --git a/src/components/ArticleCard.js b/src/components/ArticleCard.js
@@ -1,12 +1,10 @@
 import Link from "next/link";
 import React from "react";
-import { Col, Image } from "react-bootstrap";
 
 export function ArticleCard({ title, image, description, category, slug }) {
   return (
-    <Col className="w-500">
-
-      <div style={{ background: "var(--beige)", padding: "30px" }}>
+    <div className="col-container">
+      <div className="col" style={{ background: "var(--beige)", padding: "30px" }}>
         <div style={{ fontSize: "12px", color: "var(--black)" }}>
           {category}
         </div>
@@ -20,6 +18,6 @@ export function ArticleCard({ title, image, description, category, slug }) {
           </button>
         </Link>
       </div>
-    </Col>
+    </div>
   );
 }
diff --git a/src/pages/actualites/[articleId].js b/src/pages/actualites/[articleId].js
@@ -44,40 +44,51 @@ function Article() {
           <div className="px-4 pb-4">
             <SpecialParagraph content={singleArticle.description} />
           </div>
+          {articleId !== "EPDS-landing-page" ? (
+            <>
           <img
             src={
               singleArticle.image &&
               "../../assets/imgs/articles/" + singleArticle.image
             }
             className="w-100 pb-4"
             alt="article-preview.jpg"
-          />
+            />
           <Col md={{ offset: 2, span: 8 }}>
             <div className="font-weight-bold pb-5" style={{ fontSize: "32px" }}>
               {singleArticle.title_content}
             </div>
             <p className="content-article" style={{ whiteSpace: "pre-wrap" }}>
               {singleArticle.content}
             </p>
-
-            {articleId == "EPDS-site-partenaire" ? (
               <iframe
                 title="Widget EPDS"
                 src={widgetUrl}
                 width="100%"
                 height="700px"
                 style={{ border: "1px solid gray" }}
-              />
-            ) : null}
+                />
             <a
               href={singleArticle.button_url}
               target="_blank"
               rel="noreferrer"
               className="blue-btn mb-5 btn btn-primary"
-            >
+              >
               {singleArticle.button_text}
             </a>
           </Col>
+              </>
+          ) : null}
+          {articleId === "EPDS-landing-page" ? (
+          <iframe
+            title="Widget EPDS"
+            src={widgetUrl}
+            width="100%"
+            height="700px"
+            style={{ border: "1px solid gray" }}
+          />
+        ) : null}
+
         </Col>
       )}
     </Row>

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,6 +1,5 @@
 import React from "react";
-import { Col, Container, Row } from "react-bootstrap";
-import Slider from "react-slick";
+import { Col, Row } from "react-bootstrap";
 
 import header from "../../config-yml/commons/header.yml";
 import articles from "../../config-yml/modules/articles.yml";
@@ -94,8 +93,8 @@ function Partners() {
         className="d-flex justify-content-around w-100 align-items-center flex-wrap"
         style={{ flexDirection: "row" }}
       >
-        {partners.list.map((partner, index) => (
-          <Col key={index} className="col-3">
+        {partners.list.map((partner, idx) => (
+          <Col key={idx} className="col-3">
             <img
               width="100%"
               src={"../assets/imgs/partners/" + partner.image}
@@ -143,59 +142,27 @@ function SamplePrevArrow(props) {
 }
 
 function Articles() {
-  const settings = {
-    infinite: true,
-    nextArrow: <SampleNextArrow />,
-    prevArrow: <SamplePrevArrow />,
-    responsive: [
-      {
-        breakpoint: 1024,
-        settings: {
-          arrows: false,
-          slidesToShow:
-            articles.articles.length < 3 ? articles.articles.length : 3,
-        },
-      },
-      {
-        breakpoint: 600,
-        settings: {
-          arrows: false,
-          initialSlide: 2,
-          slidesToShow: 2,
-        },
-      },
-      {
-        breakpoint: 480,
-        settings: {
-          arrows: false,
-          slidesToShow: 1,
-        },
-      },
-    ],
-    slidesToScroll: 1,
-    slidesToShow: articles.articles.length < 3 ? articles.articles.length : 3,
-    speed: 500,
-  };
   return (
     articles.display && (
       <Row id="actualites" className="d-flex flex-column pb-5 no-gutters">
-        <Col>
-          <h2 className="py-5">{articles.title}</h2>
-        </Col>
-        <Container className="mb-5">
-          <Slider {...settings}>
-            {articles.articles.map((article, index) => (
+      <Col>
+        <h1 className="pb-4">{articles.title}</h1>
+        <div className="description">{articles.description}</div>
+        <Row className="flex-wrap pt-5">
+          {articles.articles.map((article, idx) => (
+            <Col md={4} key={idx} className="pb-4 no-gutters">
               <ArticleCard
                 title={article.title}
                 image={article.image}
                 description={article.description}
                 category={article.category}
                 slug={article.slug}
-                key={index}
+                key={idx}
               />
-            ))}
-          </Slider>
-        </Container>
+            </Col>
+          ))}
+        </Row>
+      </Col>
       </Row>
     )
   );
@@ -221,18 +188,3 @@ function Instagram({ posts }) {
     )
   );
 }
-
-export async function getServerSideProps() {
-  const token = process.env.INSTAGRAM_TOKEN;
-  let getData = {};
-
-  if (token) {
-    const res = await fetch(
-      "https://graph.instagram.com/me/media?fields=id,username,permalink,media_url,thumbnail_url,media_type&access_token=" +
-      token
-    );
-    getData = await res.json();
-  }
-
-  return { props: { posts: getData.data ? getData.data.slice(0, 6) : [] } };
-}