diff --git a/src/components/DisplayDetailClass_new_v2.js b/src/components/DisplayDetailClass_new_v2.js index 2a55b3f..63cd5b4 100644 --- a/src/components/DisplayDetailClass_new_v2.js +++ b/src/components/DisplayDetailClass_new_v2.js @@ -567,7 +567,7 @@ const DisplayDetailClass_new_v2 = (props) => {
@@ -584,44 +584,44 @@ const DisplayDetailClass_new_v2 = (props) => {
{DetailTraining.img_url && String(DetailTraining.img_url).length > 0 && - } + } {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && - !DetailTraining.metier && autre} + !DetailTraining.metier && autre} {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") && - informatique} + informatique} {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") && - graphisme} + graphisme} {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") && - management} + management} {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") && - digital} + digital} {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") && - office} + office} {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") && - ressources humaines} + ressources humaines} {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") && - vente} + vente} {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") && - developpement personnel} + developpement personnel} @@ -639,23 +639,23 @@ const DisplayDetailClass_new_v2 = (props) => {
{DetailTraining["title"]}
+
-
+
+ {DetailTraining["cpf"] && String(DetailTraining["cpf"]) === "1" && + "Éligible au CPF"} -
+ {!DetailTraining["cpf"] || String(DetailTraining["cpf"]) !== "1" && + "NON Éligible au CPF"} +
-
- {DetailTraining["cpf"] && String(DetailTraining["cpf"]) === "1" && - "Éligible au CPF"} - {!DetailTraining["cpf"] || String(DetailTraining["cpf"]) !== "1" && - "NON Éligible au CPF"}
- -
+ +
{String(DetailTraining["price"])} HT
@@ -696,11 +696,29 @@ const DisplayDetailClass_new_v2 = (props) => {
- Lieu : + A Distance :
- À distance xx ??? + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && " Oui "} + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "0" && " Non "} +
+ + +
+ + + +
  • +
    + +
    + Présentiel : +
    + +
    + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && " Oui "} + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "0" && " Non "}
    @@ -725,13 +743,88 @@ const DisplayDetailClass_new_v2 = (props) => {
  • +
  • + +
    + +
    + Certification : +
    + +
    + {DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && " Non " + } + {DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && " Oui " + } +
    + + +
    + +
  • + +
  • + +
    + +
    + Support : +
    + +
    + {DetailTraining["support"] && } + {!DetailTraining["support"] && "Non précisé"} + +
    + + +
    + +
  • + + +
    +
    +
    + +
    + +
    + +
    + +
    + +
    + + +
    + +
    + + +
    + +
    + Organisme de formation : +
    + +
    + MySyTraining.com +
    + + +
    + + +
    @@ -747,36 +840,39 @@ const DisplayDetailClass_new_v2 = (props) => {
    -
    - -
    - Les Sessions -
    - -
    -
      - {GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => ( -
    • + {GetCurrentClass_result && GetCurrentClass_result.length > 0 && +
      - {(JSON.parse(formation).distantiel) === "1" && } - {(JSON.parse(formation).presentiel) === "1" && } +
      + Les Sessions +
      + +
      +
        - - ))} + {GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => ( +
      • -
      -
      + {(JSON.parse(formation).distantiel) === "1" && } + {(JSON.parse(formation).presentiel) === "1" && } -
      +
    • + ))} + +
    +
    + + +
    }
    @@ -791,6 +887,23 @@ const DisplayDetailClass_new_v2 = (props) => {
    +
    + +
    + Programme +
    + +
    + {parse(String(DetailTraining["programme"]))} +
    + + +
    + + + + +
    @@ -810,30 +923,30 @@ const DisplayDetailClass_new_v2 = (props) => {
    {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") && - informatique} + informatique} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") && - graphisme} + graphisme} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") && - management} + management} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") && - digital} + digital} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") && - office} + office} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") && - ressources humaines} + ressources humaines} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") && - vente} + vente} {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") && - developpement personnel} + developpement personnel} - {!JSON.parse(formation).metier && autre personnel} + {!JSON.parse(formation).metier && autre personnel}
    @@ -875,7 +988,16 @@ const DisplayDetailClass_new_v2 = (props) => {
    -
    +
    { + e.preventDefault(); + //test(props.formation.external_code); + window.open( + "/Display-Detail-formation_v2/" + JSON.parse(formation).internal_url, + '_self' + ); + + + }}>
    Voir les détails
    @@ -897,7 +1019,11 @@ const DisplayDetailClass_new_v2 = (props) => {
    +
    +
    + +
    @@ -1063,33 +1189,35 @@ const DisplayDetailClass_new_v2 = (props) => {
    -
    -
    - Les Sessions + {GetCurrentClass_result && GetCurrentClass_result.length > 0 && +
    +
    + Les Sessions + +
    +
    +
      + + + + {GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => ( +
    • + + {(JSON.parse(formation).distantiel) === "1" && } + {(JSON.parse(formation).presentiel) === "1" && } + + +
    • + + ))} + +
    +
    +
    -
    -
      - - - - {GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => ( -
    • - - {(JSON.parse(formation).distantiel) === "1" && } - {(JSON.parse(formation).presentiel) === "1" && } - - -
    • - - ))} - -
    -
    - -
    - + }
    Objectif @@ -1176,11 +1304,28 @@ const DisplayDetailClass_new_v2 = (props) => {
    - Lieu : + A Distance :
    - À distance xx ??? + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && " Oui "} + {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "0" && " Non "} + +
    + + +
    + +
  • +
    + +
    + Presentiel : +
    + +
    + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && " Oui "} + {DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "0" && " Non "}
    @@ -1272,7 +1417,7 @@ const DisplayDetailClass_new_v2 = (props) => { {DetailTraining["support"]}  
    } - {!DetailTraining["certif"] &&
    + {!DetailTraining["support"] &&
    Non précisé  
    } @@ -1310,7 +1455,7 @@ const DisplayDetailClass_new_v2 = (props) => { -
    + {GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
    Les sessions :
    @@ -1344,7 +1489,7 @@ const DisplayDetailClass_new_v2 = (props) => {
    -
    +
    }
    @@ -1478,7 +1623,7 @@ const DisplayDetailClass_new_v2 = (props) => { //test(props.formation.external_code); window.open( "/Display-Detail-formation_v2/" + JSON.parse(formation).internal_url, - '_blank' + '_self' ); diff --git a/src/styles/components/_displaydetailclass_new_v2.scss b/src/styles/components/_displaydetailclass_new_v2.scss index 9032626..8d7046c 100644 --- a/src/styles/components/_displaydetailclass_new_v2.scss +++ b/src/styles/components/_displaydetailclass_new_v2.scss @@ -421,10 +421,10 @@ .mob_img { position: absolute; - width: 375px; - height: 210px; + width: 100%; + max-height: 120px; left: 0px; - top: 140px; + top: 90px; } @@ -440,8 +440,8 @@ position: absolute; width: 327px; height: 116px; - left: 24px; - top: 374px; + left: 20px; + top: 190px; } .mob_block_content_rating { @@ -466,14 +466,14 @@ } .mob_block_content_title { - width: 327px; + //width: 327px; height: 78px; font-family: 'Albert Sans'; font-style: normal; font-weight: 700; - font-size: 22px; - line-height: 26px; + font-size: 20px; + line-height: 22px; /* Deep Blue */ @@ -491,14 +491,14 @@ position: absolute; width: 277px; - height: 38px; + height: 28px; left: 24px; - top: 559px; + top: 320px; font-family: 'Albert Sans'; font-style: normal; - font-weight: 800; - font-size: 32px; + font-weight: 700; + font-size: 22px; line-height: 38px; display: flex; align-items: center; @@ -523,8 +523,8 @@ position: absolute; //width: 80%; height: 37px; - right: 213px; - top: 506px; + //right: 213px; + top: 80px; /* Beige */ @@ -540,7 +540,7 @@ font-family: 'Albert Sans'; font-style: normal; font-weight: 900; - font-size: 14px; + font-size: 12px; line-height: 17px; /* identical to box height */ @@ -572,21 +572,23 @@ width: 327px; height: 120px; left: 24px; - top: 613px; + top: 360px; } .mob_cats_bton_inscr { /* Auto layout */ - + cursor: pointer; display: flex; flex-direction: row; justify-content: center; align-items: center; - padding: 13px 26px; + padding: 10px; gap: 10px; + width: 80%; + margin-left: 10%; - width: 327px; - height: 56px; + //width: 327px; + height: 36px; /* Green */ @@ -631,16 +633,18 @@ .mob_cats_bton_info { /* Auto layout */ + cursor: pointer; display: flex; flex-direction: row; justify-content: center; align-items: center; - padding: 13px 26px; + padding: 10px; gap: 10px; - - width: 327px; - height: 56px; - + border: solid 1px silver; + //width: 327px; + height: 36px; + width: 80%; + margin-left: 10%; border-radius: 8px; /* Inside auto layout */ @@ -655,7 +659,7 @@ /* Voir les détails */ - width: 202px; + //width: 202px; height: 30px; font-family: 'Albert Sans'; @@ -694,7 +698,7 @@ width: 90%; height: 183px; left: 24px; - top: 749px; + top: 449px; } .mob_caracteristic_title { @@ -731,6 +735,7 @@ .mob_caracteristic_list { /* Auto layout */ + text-align: left; display: flex; flex-direction: column; align-items: flex-start; @@ -751,7 +756,7 @@ .mob_caracteristic_list_title_desc { /* Auto layout */ - + text-align: left; display: flex; flex-direction: row; align-items: flex-start; @@ -817,7 +822,7 @@ .mob_info_page { /* Auto layout */ -text-align: left; + text-align: left; display: flex; flex-direction: column; align-items: flex-start; @@ -828,9 +833,35 @@ text-align: left; width: 96%; height: 1470px; left: 2%; - top: 1095px; + top: 750px; } + + .mob_info_page_title_desc_long_txt { + /* Auto layout */ + + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 10px; + gap: 16px; + + width: 100%; + //height: 285px; + + /* White */ + + background: #FFFFFF; + border-radius: 8px; + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .mob_info_page_title_desc { /* Auto layout */ @@ -841,7 +872,7 @@ text-align: left; gap: 16px; width: 100%; - height: 285px; + //height: 285px; /* White */ @@ -887,13 +918,13 @@ text-align: left; .mob_info_page_title_desc_desc { width: 100%; - height: 192px; + //height: 192px; font-family: 'Albert Sans'; font-style: normal; font-weight: 500; - font-size: 16px; - line-height: 24px; + font-size: 14px; + line-height: 20px; /* or 150% */ font-feature-settings: 'liga' off; @@ -921,10 +952,10 @@ text-align: left; gap: 40px; position: absolute; - width: 327px; + width: 96%; height: 1425px; - left: 24px; - top: 2625px; + left: 2%; + top: 3100px; } .mob_block_sous_cross_sell { @@ -936,7 +967,8 @@ text-align: left; padding: 0px; gap: 16px; - width: 327px; + width: 90%; + margin-left: 5%; height: 1329px; @@ -948,13 +980,13 @@ text-align: left; } .mob_block_sous_cross_sell_title { - width: 327px; + //width: 327px; height: 114px; font-family: 'Albert Sans'; font-style: normal; font-weight: 700; - font-size: 32px; + font-size: 25px; line-height: 38px; /* Black */ @@ -978,7 +1010,7 @@ text-align: left; padding: 0px; gap: 16px; - width: 327px; + width: 100%; height: 1199px; @@ -999,13 +1031,13 @@ text-align: left; display: flex; flex-direction: column; - align-items: center; + //align-items: center; padding: 8px; gap: 16px; isolation: isolate; - width: 327px; - height: 389px; + width: 100%; + //height: 389px; /* White */ @@ -1023,8 +1055,8 @@ text-align: left; } .mob_cross_sell_card_img { - width: 311px; - height: 90px; + //width: 311px; + //height: 90px; //background: url(.jpg); border-radius: 4px; @@ -1049,11 +1081,10 @@ text-align: left; padding: 10px; gap: 10px; - - width: 138px; + + //width: 138px; height: 37px; - right: 8px; - top: 8px; + width: 60%; /* Beige */ @@ -1069,8 +1100,9 @@ text-align: left; } .mob_cross_sell_card_tag_cpf_txt { - width: 118px; + //width: 118px; height: 17px; + width: 100%; font-family: 'Albert Sans'; font-style: normal; @@ -1137,16 +1169,17 @@ text-align: left; } .mob_cross_sell_card_content_title { - width: 310px; - height: 78px; + width: 100%; + text-align: left; + height: 58px; font-family: 'Albert Sans'; font-style: normal; - font-weight: 700; - font-size: 22px; - line-height: 26px; + font-weight: 600; + font-size: 18px; + line-height: 22px; font-feature-settings: 'liga' off; - + text-transform: uppercase; /* Blue */ color: #3E6EE3; @@ -1162,7 +1195,8 @@ text-align: left; .mob_cross_sell_card_content_price { - width: 65px; + width: 100%; + text-align: left; height: 22px; font-family: 'Albert Sans'; @@ -1197,8 +1231,8 @@ text-align: left; padding: 0px; gap: 8px; - width: 310px; - height: 120px; + //width: 310px; + //height: 120px; /* Inside auto layout */ @@ -1217,11 +1251,13 @@ text-align: left; flex-direction: row; justify-content: center; align-items: center; - padding: 13px 26px; + padding: 10px; gap: 10px; + cursor: pointer; - width: 310px; - height: 56px; + width: 80%; + margin-left: 10%; + height: 36px; /* Deep Blue */ @@ -1261,6 +1297,118 @@ text-align: left; order: 1; flex-grow: 0; } + + .mob_block_social_icon { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + padding: 0px; + gap: 16px; + + position: absolute; + width: 80px; + height: 16px; + left: 24px; + top: 620px; + + } + + .mob_block_social_icon_RS { + width: 16px; + height: 16px; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .mob_social_icone_SocialIcon { + height: 20px !important; + width: 20px !important; + } + + .mob_block_organisme_ftion { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 0px; + gap: 4px; + + position: absolute; + width: 190px; + height: 42px; + left: 24px; + top: 660px; + } + + .mob_block_organisme_ftion_orga { + width: 190px; + height: 19px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 19px; + font-feature-settings: 'liga' off; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .mob_block_organisme_ftion_link { + width: 134px; + height: 19px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + text-decoration-line: underline; + font-feature-settings: 'liga' off; + + /* Blue */ + + color: #3E6EE3; + + + /* Inside auto layout */ + + flex: none; + order: 1; + flex-grow: 0; + } + + .mob_training_img { + border-radius: 10px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + max-width: 90%; + } + + .css-ryrseu-MuiRating-root { + font-size: 1.2rem; + } + + .mob_training_img_crossel { + border-radius: 10px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + width: 99%; + } } @media only screen and (min-width: 601px) and (max-width: 991px) { diff --git a/src/styles/components/_test_page.scss b/src/styles/components/_test_page.scss index 02ac0a4..73a1d19 100644 --- a/src/styles/components/_test_page.scss +++ b/src/styles/components/_test_page.scss @@ -85,6 +85,7 @@ .ch_burger_menu { left: 2px !important; top: 3px !important; + } #page-wrap { @@ -172,6 +173,7 @@ margin: 10px; font-size: small; overflow: hidden !important; + border-radius: 10px; } /* Morph shape necessary with bubble or elastic */