From a59837435202bd2b54bf01f4ac534efd74584a15 Mon Sep 17 00:00:00 2001 From: Emile Bex Date: Wed, 20 Sep 2023 15:20:53 +0200 Subject: [PATCH] [EN-6414] fix(cv): fix cv bugs and design --- .../CV/PageCvContent/PageCVContent.styles.tsx | 10 ++++++- .../CV/PageCvContent/PageCVContent.tsx | 27 ++++++++--------- src/components/utils/Inputs/Inputs.styles.ts | 9 +++++- .../SelectCreatable/SelectCreatable.tsx | 30 +++++++++++-------- .../utils/Inputs/TextArea/TextArea.tsx | 10 ++----- .../utils/Inputs/TextArea/useLineLimit.ts | 7 +++-- 6 files changed, 54 insertions(+), 39 deletions(-) diff --git a/src/components/partials/CV/PageCvContent/PageCVContent.styles.tsx b/src/components/partials/CV/PageCvContent/PageCVContent.styles.tsx index 1e919eb93..d21fd2288 100644 --- a/src/components/partials/CV/PageCvContent/PageCVContent.styles.tsx +++ b/src/components/partials/CV/PageCvContent/PageCVContent.styles.tsx @@ -252,6 +252,15 @@ export const StyledRightColumn = styled.div` flex: 1; `; +export const StyledTitleAccordion = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + > h2 { + margin-bottom: 0; + } +`; + export const StyledCVPageContentInformations = styled.div` background-color: #ffffffe5; padding: 30px; @@ -427,7 +436,6 @@ export const StyledCVPageContentFooter = styled.div` `; export const StyledChevronIcon = styled(Icon)` - position: absolute; top: 30px; right: 30px; svg { diff --git a/src/components/partials/CV/PageCvContent/PageCVContent.tsx b/src/components/partials/CV/PageCvContent/PageCVContent.tsx index 2066789f0..d5c369a27 100644 --- a/src/components/partials/CV/PageCvContent/PageCVContent.tsx +++ b/src/components/partials/CV/PageCvContent/PageCVContent.tsx @@ -34,6 +34,7 @@ import { StyledCVExperienceDate, StyledCVExperienceDescription, StyledCVExperienceDateMobile, + StyledTitleAccordion, } from 'src/components/partials/CV/PageCvContent/PageCVContent.styles'; import { Button, Icon } from 'src/components/utils'; import { CarouselSwiper } from 'src/components/utils/CarouselSwiper'; @@ -231,11 +232,10 @@ export const PageCVContent = ({ !isDesktop ? 'mobile' : '' }`} > - {!isDesktop && } {isDesktop ? (

) : ( - { setOpenedPanel({ ...openedPanel, @@ -244,7 +244,8 @@ export const PageCVContent = ({ }} >

- + + )}
    {cv.contracts && cv.contracts.length > 0 && ( @@ -338,10 +339,7 @@ export const PageCVContent = ({ !isDesktop ? 'mobile' : '' }`} > - {!isDesktop && } - - {/* {isDesktop ?

    : */} - { setOpenedPanel({ ...openedPanel, @@ -350,7 +348,8 @@ export const PageCVContent = ({ }} >

    - + +
      {cv.experiences?.map((experience) => { return ( @@ -423,8 +422,7 @@ export const PageCVContent = ({ !isDesktop ? 'mobile' : '' }`} > - {!isDesktop && } - { setOpenedPanel({ ...openedPanel, @@ -433,7 +431,8 @@ export const PageCVContent = ({ }} >

      - + +
        {cv.formations.map((formation) => { return ( @@ -507,11 +506,10 @@ export const PageCVContent = ({ !isDesktop ? 'mobile' : '' }`} > - {!isDesktop && } {isDesktop ? (

        ) : ( - { setOpenedPanel({ ...openedPanel, @@ -520,7 +518,8 @@ export const PageCVContent = ({ }} >

        - + + )}
          {cv?.passions?.map(({ name }) => { diff --git a/src/components/utils/Inputs/Inputs.styles.ts b/src/components/utils/Inputs/Inputs.styles.ts index 4450129fd..5eedbd65c 100644 --- a/src/components/utils/Inputs/Inputs.styles.ts +++ b/src/components/utils/Inputs/Inputs.styles.ts @@ -64,9 +64,16 @@ export const StyledAnnotationsErrorMessage = styled(FieldErrorMessage)` bottom: 0 !important; `; +export const StyledLimitContainer = styled.div` + display: flex; + > :first-child { + margin-right: 5px; + } +`; + export const StyledLimit = styled.div` color: ${({ warning }) => { - return warning ? COLORS.noRed : COLORS.darkGray; + return warning ? COLORS.darkOrange : COLORS.darkGray; }}; font-size: 12px; line-height: 12px; diff --git a/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx b/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx index 8aff6656a..0517a5f08 100644 --- a/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx +++ b/src/components/utils/Inputs/Selects/SelectCreatable/SelectCreatable.tsx @@ -5,6 +5,7 @@ import { StyledAnnotationsErrorMessage, StyledInputLabel, StyledLimit, + StyledLimitContainer, } from '../../Inputs.styles'; import { CommonInputProps } from '../../Inputs.types'; import { @@ -109,7 +110,8 @@ export function SelectCreatable({ max={maxItems} maxLength={maxChar} isValidNewOption={(inputValue) => { - return maxChar ? inputValue.length < maxChar : true; + const isEmpty = inputValue.trim().length === 0; + return maxChar ? inputValue.length < maxChar && !isEmpty : !isEmpty; }} /> @@ -117,18 +119,20 @@ export function SelectCreatable({
          - {maxChar && ( - - - Chaque élément ne doit pas dépasser {maxChar} caractères. - - - )} - {maxItems && ( - - {remainingItems} élément(s) restant(s) - - )} + + {maxChar && ( + + + Chaque élément ne doit pas dépasser {maxChar} caractères. + + + )} + {maxItems && ( + + {remainingItems} élément(s) restant(s) + + )} + ); diff --git a/src/components/utils/Inputs/TextArea/TextArea.tsx b/src/components/utils/Inputs/TextArea/TextArea.tsx index aa28618e8..36d058cdc 100644 --- a/src/components/utils/Inputs/TextArea/TextArea.tsx +++ b/src/components/utils/Inputs/TextArea/TextArea.tsx @@ -42,16 +42,12 @@ export function TextArea({ }: TextAreaProps) { const isMobile = useIsMobile(); - const { textAreaRef, remainingLines, textAreaWidth } = useLineLimit( - value, - name, - onChange, - maxLines?.lines - ); + const { textAreaRef, remainingLines, maxLinesReached, textAreaWidth } = + useLineLimit(value, name, onChange, maxLines?.lines); useEffect(() => { if (!maxLines) return null; - if (remainingLines <= 0) { + if (maxLinesReached) { setIsMaxLinesReached(true); } else { setIsMaxLinesReached(false); diff --git a/src/components/utils/Inputs/TextArea/useLineLimit.ts b/src/components/utils/Inputs/TextArea/useLineLimit.ts index df07e5cb5..88ca697b9 100644 --- a/src/components/utils/Inputs/TextArea/useLineLimit.ts +++ b/src/components/utils/Inputs/TextArea/useLineLimit.ts @@ -52,8 +52,9 @@ export function useLineLimit( } }, []); - const remainingLines = - maxLines - numberOfLines < 0 ? 0 : maxLines - numberOfLines; + const maxLinesReached = maxLines - numberOfLines < 0; + + const remainingLines = maxLinesReached ? 0 : maxLines - numberOfLines; useEffect(() => { if (maxLines && ref && ref.current && value !== prevValue) { @@ -118,5 +119,5 @@ export function useLineLimit( } }, [windowWidth]); - return { remainingLines, textAreaRef: ref, textAreaWidth }; + return { remainingLines, maxLinesReached, textAreaRef: ref, textAreaWidth }; }