11/01/230- 13h

recette2
cherif 2023-01-11 13:01:31 +01:00
parent 1ba188e230
commit 25dbe29dd3
3 changed files with 441 additions and 146 deletions

View File

@ -567,7 +567,7 @@ const DisplayDetailClass_new_v2 = (props) => {
<div style={{ "display": "flex", "flexDirection": "column", }}>
<div className="displaydetailclass_new_v2" style={{
"background": "#F7F7F7", "height": "300vh",
"background": "#F7F7F7", "height": "530vh",
"width": "100%", "display": "flex", "flexDirection": "column",
}}>
@ -584,44 +584,44 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="mob_img">
{DetailTraining.img_url && String(DetailTraining.img_url).length > 0 &&
<img src={`${DetailTraining.img_url}`} className="training_img" />}
<img src={`${DetailTraining.img_url}`} className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
!DetailTraining.metier && <img src={img_met_autre} alt="autre" className="training_img" />}
!DetailTraining.metier && <img src={img_met_autre} alt="autre" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img" />}
<img src={img_met_program} alt="informatique" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img" />}
<img src={img_met_graphisme} alt="graphisme" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img" />}
<img src={img_met_management} alt="management" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img" />}
<img src={img_met_digital} alt="digital" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img" />}
<img src={img_met_bureautic} alt="office" className="mob_training_img" />}
{!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img" />}
<img src={img_met_rh} alt="ressources humaines" className="mob_training_img" />}
{!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img" />}
<img src={img_met_vente} alt="vente" className="mob_training_img" />}
{!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img" />}
<img src={img_met_dev_perso} alt="developpement personnel" className="mob_training_img" />}
@ -639,9 +639,6 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="mob_block_content_title">
{DetailTraining["title"]}
</div>
</div>
<div className="mob_tag_cpf">
<div className="mob_tag_cpf_txt">
@ -654,6 +651,9 @@ const DisplayDetailClass_new_v2 = (props) => {
</div>
</div>
<div className="mob_price">
@ -696,11 +696,29 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
Lieu :
A Distance :
</div>
<div className="mob_caracteristic_list_title_desc_desc">
À distance xx ???
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && " Oui "}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "0" && " Non "}
</div>
</div>
</li>
<li>
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
Présentiel :
</div>
<div className="mob_caracteristic_list_title_desc_desc">
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && " Oui "}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "0" && " Non "}
</div>
@ -725,13 +743,88 @@ const DisplayDetailClass_new_v2 = (props) => {
</li>
<li>
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
Certification :
</div>
<div className="mob_caracteristic_list_title_desc_desc">
{DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && " Non "
}
{DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && " Oui "
}
</div>
</div>
</li>
<li>
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
Support :
</div>
<div className="mob_caracteristic_list_title_desc_desc">
{DetailTraining["support"] && <nav> {DetailTraining["support"]} </nav>}
{!DetailTraining["support"] && "Non précisé"}
</div>
</div>
</li>
</ul>
</div>
</div>
<div className="mob_block_social_icon">
<div className="mob_block_social_icon_RS">
<SocialIcon network="facebook" className="mob_social_icone_SocialIcon" />
</div>
<div className="mob_block_social_icon_RS">
<SocialIcon network="linkedin" className="mob_social_icone_SocialIcon" />
</div>
<div className="mob_block_social_icon_RS">
<SocialIcon network="twitter" className="mob_social_icone_SocialIcon" />
</div>
</div>
<div className="mob_block_organisme_ftion">
<div className="mob_block_organisme_ftion_orga">
Organisme de formation :
</div>
<div className="mob_block_organisme_ftion_link">
MySyTraining.com
</div>
</div>
<div className="mob_info_page">
<div className="mob_info_page_title_desc">
@ -747,6 +840,10 @@ const DisplayDetailClass_new_v2 = (props) => {
</div>
{GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
<div className="mob_info_page_title_desc">
<div className="mob_info_page_title_desc_title">
@ -775,8 +872,7 @@ const DisplayDetailClass_new_v2 = (props) => {
</div>
</div>
</div>}
<div className="mob_info_page_title_desc">
@ -791,6 +887,23 @@ const DisplayDetailClass_new_v2 = (props) => {
</div>
<div className="mob_info_page_title_desc_long_txt">
<div className="mob_info_page_title_desc_title">
Programme
</div>
<div className="mob_info_page_title_desc_desc">
{parse(String(DetailTraining["programme"]))}
</div>
</div>
</div>
<div className="mob_block_cross_sell_cat">
@ -810,30 +923,30 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="mob_cross_sell_card_img">
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img_crossel" />}
<img src={img_met_program} alt="informatique" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img_crossel" />}
<img src={img_met_graphisme} alt="graphisme" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img_crossel" />}
<img src={img_met_management} alt="management" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img_crossel" />}
<img src={img_met_digital} alt="digital" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img_crossel" />}
<img src={img_met_bureautic} alt="office" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img_crossel" />}
<img src={img_met_rh} alt="ressources humaines" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img_crossel" />}
<img src={img_met_vente} alt="vente" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img_crossel" />}
<img src={img_met_dev_perso} alt="developpement personnel" className="mob_training_img_crossel" />}
{!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="training_img_crossel" />}
{!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="mob_training_img_crossel" />}
</div>
@ -875,7 +988,16 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="mob_cross_sell_card_content_cat">
<div className="mob_cross_sell_card_content_cat_bton_detail">
<div className="mob_cross_sell_card_content_cat_bton_detail" onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
window.open(
"/Display-Detail-formation_v2/" + JSON.parse(formation).internal_url,
'_self'
);
}}>
<div className="mob_cross_sell_card_content_cat_bton_detail_txt">
Voir les détails
</div>
@ -897,7 +1019,11 @@ const DisplayDetailClass_new_v2 = (props) => {
</div>
<div style={{ "width": "100%", "position": "relative" }} >
<Footer />
</div>
</div>
</div>
@ -1063,9 +1189,11 @@ const DisplayDetailClass_new_v2 = (props) => {
</div>
{GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
<div className="block_info_page_pave_title_desc">
<div className="block_info_page_pave_title_desc_title">
Les Sessions
</div>
<div className="block_info_page_pave_title_desc_desc">
<ul style={{ "width": "100%" }}>
@ -1089,7 +1217,7 @@ const DisplayDetailClass_new_v2 = (props) => {
</div>
</div>
}
<div className="block_info_page_pave_title_desc">
<div className="block_info_page_pave_title_desc_title">
Objectif
@ -1176,11 +1304,28 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="block_sticky_info_caracteristique_list_title_desc">
<div className="block_sticky_info_caracteristique_list_title_desc_title">
Lieu :
A Distance :
</div>
<div className="block_sticky_info_caracteristique_list_title_desc_desc">
À distance xx ???
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && " Oui "}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "0" && " Non "}
</div>
</div>
</li>
<li>
<div className="block_sticky_info_caracteristique_list_title_desc">
<div className="block_sticky_info_caracteristique_list_title_desc_title">
Presentiel :
</div>
<div className="block_sticky_info_caracteristique_list_title_desc_desc">
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && " Oui "}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "0" && " Non "}
</div>
@ -1272,7 +1417,7 @@ const DisplayDetailClass_new_v2 = (props) => {
{DetailTraining["support"]} &nbsp; </div>
}
{!DetailTraining["certif"] && <div>
{!DetailTraining["support"] && <div>
Non précisé &nbsp; </div>
}
@ -1310,7 +1455,7 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="block_sticky_info_Sessions">
{GetCurrentClass_result && GetCurrentClass_result.length > 0 && <div className="block_sticky_info_Sessions">
<div className="block_sticky_info_Sessions_title">
Les sessions :
</div>
@ -1344,7 +1489,7 @@ const DisplayDetailClass_new_v2 = (props) => {
</div>
</div>
</div>}
<div className="sticky_cats">
<div className="sticky_cats_buton_inscrire" onClick={Inscription_bton}>
@ -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'
);

View File

@ -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;
@ -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;
@ -1050,10 +1082,9 @@ text-align: left;
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) {

View File

@ -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 */