Merge pull request #370 from mission-apprentissage/ui/feedback-iframe…

…-formations [UI] Retours Iframe formation
mission-apprentissage · Nov 21, 2024 · aa651ed · aa651ed
2 parents d25d68d + 0a8c8d5
commit aa651ed
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/ui/src/iframes/Components/ExperienceEnEntrepriseRating.js b/ui/src/iframes/Components/ExperienceEnEntrepriseRating.js
@@ -93,6 +93,7 @@ const chartOptions = (data, isMobile) => {
     yAxis: {
       type: "category",
       data: labels,
+      inverse: true,
       triggerEvent: true,
       axisLabel: {
         margin: isMobile ? 10 : 20,
@@ -118,7 +119,7 @@ const chartOptions = (data, isMobile) => {
         label: {
           show: true,
           position: "inside",
-          formatter: (params) => (params.value === 8 ? "" : params.value + "%"),
+          formatter: (params) => (params.value < 8 ? "" : params.value + "%"),
           fontFamily: "Marianne",
           fontSize: 12,
           color: "#161616",
@@ -135,7 +136,7 @@ const chartOptions = (data, isMobile) => {
         label: {
           show: true,
           position: "inside",
-          formatter: (params) => (params.value === 8 ? "" : params.value + "%"),
+          formatter: (params) => (params.value < 8 ? "" : params.value + "%"),
           fontFamily: "Marianne",
           fontSize: 12,
           color: "#161616",

diff --git a/ui/src/iframes/Components/VerbatimsCarousel.js b/ui/src/iframes/Components/VerbatimsCarousel.js
@@ -33,7 +33,7 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => {
     const savedFeedback = localStorage.getItem("usefullFeedback");
     return savedFeedback ? JSON.parse(savedFeedback) : [];
   });
-  const { isMobile, isDesktop } = useBreakpoints();
+  const { isMobile } = useBreakpoints();
   const trackEvent = useMatomoEvent();
 
   const MAX_CHAR = isMobile ? 150 : 300;
@@ -63,8 +63,8 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => {
   return (
     <Swiper
       rewind={true}
-      spaceBetween={isMobile ? 20 : 15}
-      slidesPerView={isMobile ? 1.3 : 1.3}
+      spaceBetween={isMobile ? 30 : 20}
+      slidesPerView="1.5"
       centeredSlides={true}
       modules={[Controller, Keyboard]}
       controller={{ control: swiperControl }}
@@ -94,7 +94,7 @@ export const VerbatimsCarousel = ({ verbatims, setVerbatimsStep }) => {
                 : null
             }
           >
-            <VerbatimContainer isDesktop={isDesktop}>
+            <VerbatimContainer>
               <img src={Quote} aria-hidden={true} />
               <VerbatimContent>
                 {expandedIndex === index

diff --git a/ui/src/iframes/Components/shared.style.js b/ui/src/iframes/Components/shared.style.js
@@ -21,7 +21,7 @@ export const VerbatimContainer = styled.div`
   align-items: flex-start;
   justify-content: flex-start;
   gap: 1rem;
-  width: ${(props) => (props.isDesktop ? "70%" : "100%")};
+  width: 100%;
   margin: 16px auto 0px auto;
   padding: 0 16px;
 

diff --git a/ui/src/iframes/IframeFormation.style.js b/ui/src/iframes/IframeFormation.style.js
@@ -2,12 +2,12 @@ import { fr } from "@codegouvfr/react-dsfr";
 import styled from "@emotion/styled";
 
 export const IframeContainer = styled.main`
-  width: 100%;
-  padding: 0 5px;
+  max-width: 800px;
+  padding: 0;
 
   & > p {
     font-size: 16px;
-    line-heihgt: 24px;
+    line-height: 24px;
     margin-bottom: 16px;
   }
 `;
@@ -230,6 +230,13 @@ export const TitleContainer = styled.div`
   justify-content: flex-start;
   gap: 1rem;
   padding: 16px 0;
+  width: 100%;
+
+  ${fr.breakpoints.down("sm")} {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    gap: 1rem;
+  }
 
   & h3 {
     margin: 0;
@@ -239,13 +246,14 @@ export const TitleContainer = styled.div`
 export const ConstructionNotice = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   justify-content: flex-start;
   background-color: var(--background-action-low-blue-france);
   padding: 12px;
   gap: 8px;
   border-radius: 4px;
   margin-bottom: 16px;
+  width: 100%;
 
   & span {
     color: var(--background-flat-blue-france);