From da67054a66db20135001f187c204031d27023973 Mon Sep 17 00:00:00 2001 From: cherif Date: Wed, 23 Oct 2024 14:19:32 +0200 Subject: [PATCH] qsd --- src/App.js | 2 +- src/components/Abonnement.js | 2 +- src/components/Article.js | 58 +- src/components/ComponentProduitsServices.js | 2 +- src/components/DisplayDetailArticle.js | 2 +- src/components/DisplayDetailArticle_new_v2.js | 1161 ++++++++++++ src/components/Fotter.js | 2 +- src/components/Fotter_test.js | 131 ++ src/components/Fotter_v2.js | 2 +- src/components/Partner_Product_Service.js | 4 +- src/components/ProduitsServices.js | 4 +- src/components/RechercheArticles.js | 24 +- src/components/RechercheArticles_new_v2.js | 694 ++++++++ src/components/UpgradeToPro.js | 2 +- src/components/sidebar.js | 6 +- src/pages/displaydetailarticle.js | 18 +- src/pages/recherchearticles.js | 5 +- src/styles/components/_article.scss | 130 +- .../components/_displaydetailarticle.scss | 1417 +++++---------- .../_displaydetailarticle_new_v2.scss | 1556 +++++++++++++++++ src/styles/components/_produitsservices.scss | 443 ++++- src/styles/components/_recherchearticles.scss | 2 +- .../_recherchearticles_new_v2_style.scss | 1046 +++++++++++ src/styles/index.scss | 4 +- 24 files changed, 5611 insertions(+), 1106 deletions(-) create mode 100644 src/components/DisplayDetailArticle_new_v2.js create mode 100644 src/components/Fotter_test.js create mode 100644 src/components/RechercheArticles_new_v2.js create mode 100644 src/styles/components/_displaydetailarticle_new_v2.scss create mode 100644 src/styles/components/_recherchearticles_new_v2_style.scss diff --git a/src/App.js b/src/App.js index 406cc12..63fe89f 100644 --- a/src/App.js +++ b/src/App.js @@ -147,7 +147,7 @@ function App() { - + diff --git a/src/components/Abonnement.js b/src/components/Abonnement.js index 9117bce..5aa93a5 100644 --- a/src/components/Abonnement.js +++ b/src/components/Abonnement.js @@ -1763,7 +1763,7 @@ function Abonnement(props) {
 
- Produits & Services + Prix & Services
Moteur de Recherche diff --git a/src/components/Article.js b/src/components/Article.js index d3a8529..d9c5b8f 100644 --- a/src/components/Article.js +++ b/src/components/Article.js @@ -27,43 +27,57 @@ const Article = (props) => {
-
{ - e.preventDefault(); - window.location.href = "/Display-Detail-Article/" + props.article.internal_url - }}> -
+
+
Formation gestion projets
-

{(String(props.article.title_formation)).substring(0, 50)}

+
{(String(props.article.title_formation)).substring(0, 50)}
+ +
-

-

- Avis : -
- - {parse( String(props.article.avis).replace(/(<([^>]+)>)/ig, '') )} - + + {parse(String(props.article.avis).replace(/(<([^>]+)>)/ig, ''))} +
+
{(String(props.article.date_avis)).substring(0, 10)}
-

+
-

+ +

{ + e.preventDefault(); + window.location.href = "/Display-Detail-Article/" + props.article.internal_url + }}> Lire plus
+ + + {/*

-  
+  
-   +  
- {(String(props.article.date_avis)).substring(0, 10)} + {(String(props.article.date_avis)).substring(0, 10)} -
+
+
+
Lire plus
+
-

+

*/}
@@ -73,7 +87,7 @@ const Article = (props) => { - {/*
{ + {/*
{ e.preventDefault(); window.location.href = "/Display-Detail-Article/" + props.article.internal_url }}> @@ -114,7 +128,7 @@ const Article = (props) => {
*/}
- + {/*
{ e.preventDefault(); diff --git a/src/components/ComponentProduitsServices.js b/src/components/ComponentProduitsServices.js index 84c01eb..833c7bc 100644 --- a/src/components/ComponentProduitsServices.js +++ b/src/components/ComponentProduitsServices.js @@ -142,7 +142,7 @@ function ProduitsServices() {
 
- Produits & Services + Prix & Services
Moteur de Recherche diff --git a/src/components/DisplayDetailArticle.js b/src/components/DisplayDetailArticle.js index 92f01ac..28b4056 100644 --- a/src/components/DisplayDetailArticle.js +++ b/src/components/DisplayDetailArticle.js @@ -33,7 +33,7 @@ import ListeArticle from "./ListeArticles"; import slidearticle1 from "../mysy_img/Image_article2.jpg"; import slidearticle2 from "../mysy_img/Image_article1.png"; - + const DisplayDetailArticle = (props) => { const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']); const { articleId } = useParams(); diff --git a/src/components/DisplayDetailArticle_new_v2.js b/src/components/DisplayDetailArticle_new_v2.js new file mode 100644 index 0000000..33b7011 --- /dev/null +++ b/src/components/DisplayDetailArticle_new_v2.js @@ -0,0 +1,1161 @@ +import React, { useRef, useState, useEffect } from "react"; +import axios from "axios"; +import bannerimg2 from "../mysy_img/MYSY-LOGO-BLUE.png"; +import { useParams } from 'react-router-dom' +import { Button, } from "reactstrap"; +import { Helmet } from "react-helmet"; +import { useCookies } from "react-cookie"; +import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share"; +import { SocialIcon } from 'react-social-icons'; +import ReactStars from "react-rating-stars-component"; +import { confirmAlert } from 'react-confirm-alert'; +//mport slideimg4 from "../mysy_img/mysy_img.png"; +import 'react-slideshow-image/dist/styles.css' +import slideimg1 from "../mysy_img/Image_article2.jpg"; +//import slideimg4 from "../mysy_img/Image_article1.png"; +import Articles from "../components/Article"; +import { Fade } from 'react-slideshow-image'; +import { CommentSection } from 'react-comments-section' +import DiscussionBoard from 'react-discussion-board' +import 'react-discussion-board/dist/index.css' +import ArticleComment from "./ArticleComment" +import { useForm } from 'react-hook-form'; +import { Editor } from "react-draft-wysiwyg"; +import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"; +import parse from 'html-react-parser' +import { RichTextEditor } from '@mantine/rte'; +import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined'; +import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png"; +import Footer from "./Fotter"; +import Fotter_test from "./Fotter_test"; +import Header from "./Header"; +import ListeArticle from "./ListeArticles"; +import moment from "moment"; +import slidearticle1 from "../mysy_img/Image_article2.jpg"; +import slidearticle2 from "../mysy_img/Image_article1.png"; +import img_met_digital from "../mysy_img/met_digital.jpg"; +import connect_white from "../mysy_img/connect_white_v2.png"; +import connect_green from "../mysy_img/connect_green.png"; +import { useHistory } from "react-router-dom"; +import { getCookie, removeCookie } from 'react-use-cookie'; + +import MenuItem from "@material-ui/core/MenuItem"; +import Menu from "@material-ui/core/Menu"; + +const DisplayDetailArticle_new_v2 = (props) => { + const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']); + const { articleId } = useParams(); + const [result, setResult] = useState(""); + const [commentresult, setcommentresult] = useState(); + const [myApicommentResponse, setmyApicommentResponse] = useState(); + + const [myApiResponse, setmyApiResponse] = useState("false"); + const [DetailArticleAvis, setDetailArticleAvis] = useState([]); + const [closepopup, setclosepopup] = useState(0); + const [country_code, setcountry_code] = useState(""); + const [country_name, setcountry_name] = useState(""); + const [city, setcity] = useState(""); + const [postal, setpostal] = useState(""); + const [latitude, setlatitude] = useState(""); + const [longitude, setlongitude] = useState(""); + const [IPv4, setIPv4] = useState(""); + const [state, setstate] = useState(""); + const [userIp, setuserIp] = useState(""); + const [action, setaction] = useState(""); + const [userconnected, setuserconnected] = useState(""); + const [mynote, setmynote] = useState(0); + const stored_user = cookie.tokenmysych; + const [qualityrating, setqualityrating] = useState(""); + const [avisrating, setavisrating] = useState(""); + const [noterating, setnoterating] = useState(""); + const [makecomment, setmakecomment] = useState("1"); + + const random1 = Math.floor(Math.random() * 10); + const random2 = Math.floor(Math.random() * 10); + const [editorState, setEditorState] = useState(null); + + const [windowWidth, setwindowWidth] = useState(null); + const [windowheight, setwindowheight] = useState(null); + + const [text_value, settext_value] = useState(""); + + const history = useHistory(); + + + const { + register, + handleSubmit, + reset, + formState: { errors } + } = useForm(); + + + const onSubmit = async (data) => { + const { name, email, subject, message } = data; + + var total = "??"; + if (document.getElementsByName("sommerandom")[0].value) { + total = document.getElementsByName("sommerandom")[0].value; + } + + + var calcaul_total = parseInt(random1) + parseInt(random2); + + + //alert(" le total saisi = " + total + " la val cacule est " + calcaul_total); + + if (parseInt(total) != parseInt(calcaul_total)) { + alert(" Le total dans la zone 'je ne suis pas un robot' est incohérent. Recommencez svp :) !!!"); + return; + } + + confirmPostCommment(); + + }; + + + function confirmPostCommment() { + confirmAlert({ + title: 'Confirmer le commentaire?', + message: '', + buttons: [ + { + label: 'Oui', + onClick: () => SendMessage() + }, + { + label: 'Non', + onClick: () => { return } + + } + ], + closeOnEscape: false, + closeOnClickOutside: false, + keyCodeForClose: [8, 32], + willUnmount: () => { }, + afterClose: () => { }, + onClickOutside: () => { }, + onKeypress: () => { }, + onKeypressEscape: () => { }, + }); + } + + + function clearComment(e) { + ////console.log("contacter " + sender_mail + " - " + sender_tel + " - ") + document.getElementsByName("message")[0].value = ""; + document.getElementsByName("name")[0].value = ""; + document.getElementsByName("email")[0].value = ""; + } + + function SendMessage(e) { + + var sender_mail = ""; + var sender_tel = ""; + var token = ""; + + + + ////console.log("contacter " + sender_mail + " - " + sender_tel + " - ") + var mymessage = document.getElementsByName("message")[0].value; + var mysender_name = document.getElementsByName("name")[0].value; + var mysender_email = document.getElementsByName("email")[0].value; + + + //alert("contacter "+mysender_email+" - "+mymessage+" - url = " + //+process.env.REACT_APP_API_URL+" - user_ip ="+IPv4+" - "+latitude); + + var re = /\S+@\S+\.\S+/; + if (re.test(mysender_email) == false) { + alert("l'email est incorrecte"); + return; + } + + + + + var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_user_message/"; + var form = new FormData(); + form.append("type", "comment_article"); + form.append("recever_mail", "contact@mysy-training.com"); + form.append("recever_tel", "+33769203945"); + form.append("sender_mail", mysender_email); + form.append("sender_tel", sender_tel); + form.append("object", ""); + form.append("message", mymessage); + form.append("sender_name", mysender_name); + form.append("token", ""); + form.append("user_ip", IPv4); + form.append("user_country_code", country_code); + form.append("user_country_name", country_name); + form.append("user_city", city); + form.append("user_postal", postal); + form.append("user_latitude", latitude); + form.append("user_longitude", longitude); + form.append("user_state", state); + form.append("article_avis_url", articleId); + + + axios.post(myurl, form).then(res => { + + if (String(res.data.status) === String("false")) { + //console.log(" In test res.data.status = " + res.data.status); + //console.log(" In test res.data.message = " + res.data.message); + setmyApiResponse("false"); + } + + else if (String(res.data.status) === String("true")) { + //console.log(" In test res.data.status (true) = " + res.data.status); + //console.log(" In test res.data.message = " + res.data.message); + document.getElementsByName("message")[0].value = ""; + document.getElementsByName("name")[0].value = ""; + document.getElementsByName("email")[0].value = ""; + setmakecomment(""); + } + else { + //console.log(" contact-nous statut = " + res.data.status); + //console.log(" contact-nous res.data.message = " + res.data.message); + setmyApiResponse("false"); + } + }).catch((error) => { + console.warn('contact-nous Not good man :( mysearchtext = '); + setmyApiResponse("false"); + + }) + + + } + + + + const avisratingChanged = (newRating) => { + setavisrating(String(newRating)); + var humeur = "" + if (newRating < 2) { + humeur = ":(" + } else if (newRating < 4) { + humeur = ":)" + } else if (newRating >= 4) { + humeur = ":) :)" + } + var text = "Une note de " + String(newRating) + ", merci. Dites nous en plus " + humeur + " ?" + + document.getElementsByName("avis")[0].value = text; + }; + + const noteratingChanged = (newRating) => { + var text = String(newRating) + document.getElementsByName("note")[0].value = text; + setnoterating(String(newRating)); + }; + + + + + + useEffect(() => { + async function fetchData() { + const result = await axios('https://geolocation-db.com/json/',); + setuserIp(result.data.IPv4); + setcountry_code(result.data.country_code); + setcountry_name(result.data.country_name); + setcity(result.data.city); + setpostal(result.data.postal); + setlatitude(result.data.latitude); + setlongitude(result.data.longitude); + setIPv4(result.data.IPv4); + setstate(result.data.state); + setuserIp(result.data.IPv4); + + } + fetchData(); + Display(); + // Display_article_comment(); + Get_3_Articles(); + + + //alert("stored_user = "+stored_user); + if (typeof (articleId) === "undefined") { + setaction("creation"); + } else { + setaction("affichage"); + desablefield(); + } + + if (typeof (stored_user) === "undefined" || String(stored_user) === '') { + setuserconnected("0"); + } else { + setuserconnected("1"); + } + setwindowWidth(window.innerWidth); + setwindowheight(window.innerHeight); + + + //console.log(" articleId = " + articleId); + }, [makecomment]); + + + function Display(e) { + var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_articles_avis/"; + var form = new FormData(); + form.append("internal_url", articleId); + form.append("token", ""); + // Ajout des info IP user + form.append("user_ip", IPv4); + form.append("user_country_code", country_code); + form.append("user_country_name", country_name); + form.append("user_city", city); + form.append("user_postal", postal); + form.append("user_latitude", latitude); + form.append("user_longitude", longitude); + form.append("user_state", state); + + + //alert("myurl = "+myurl); + + axios.post(myurl, form).then(res => { + if (res.data.status != "False") { + //console.log(" In test res.data.status = " + res.data.status); + //console.log(" In test res.data.message = " + res.data.message); + if (res.data.message.length > 0) { + setmyApiResponse("True"); + } + else { + setmyApiResponse("False"); + } + setResult(res.data.message); + setDetailArticleAvis(JSON.parse(res.data.message)); + } + else { + //console.log(" In Erreur res.data.status = " + res.data.status); + //console.log(" In Erreur res.data.message = " + res.data.message); + setmyApiResponse("False"); + } + }).catch((error) => { + console.warn('Not good man :( mysearchtext = '); + setmyApiResponse("False"); + }) + } + + const [Get_3_Articles_api, setGet_3_Articles_api] = useState(); + const [Get_3_Articles_message, setGet_3_Articles_message] = useState(); + const [Get_3_Articles_result, setGet_3_Articles_result] = useState([]); + function Get_3_Articles(e) { + var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_last_3_articles/"; + var form = new FormData(); + form.append("internal_url", articleId); + form.append("token", ""); + // Ajout des info IP user + form.append("user_ip", IPv4); + form.append("user_country_code", country_code); + form.append("user_country_name", country_name); + form.append("user_city", city); + form.append("user_postal", postal); + form.append("user_latitude", latitude); + form.append("user_longitude", longitude); + form.append("user_state", state); + + + // console.log("#### form = ", form); + + axios.post(myurl, form).then(res => { + //console.log(" In Get_3_Articles res.data.status = " + res.data.status); + //console.log(" In Get_3_Articles res.data.message = " + res.data.message); + + if (String(res.data.status) === "true") { + + setGet_3_Articles_result(res.data.message); + + } + else { + //console.log(" In Erreur res.data.status = " + res.data.status); + //console.log(" In Erreur res.data.message = " + res.data.message); + setGet_3_Articles_result([]); + setGet_3_Articles_api("False"); + + } + }).catch((error) => { + console.warn('Not good man :( mysearchtext = '); + setGet_3_Articles_api("False"); + }) + } + + + + function Display_article_comment(e) { + var myurl = process.env.REACT_APP_API_URL + "myclass/api/get_user_message/"; + var form = new FormData(); + form.append("article_avis_url", articleId); + form.append("type", "comment_article"); + + + //alert("myurl = "+myurl); + + axios.post(myurl, form).then(res => { + if (res.data.status != "False") { + //console.log(" In test res.data.status = " + res.data.status); + //console.log(" In test res.data.message = " + res.data.message); + if (res.data.message.length > 0) { + setmyApicommentResponse("True"); + } + else { + setmyApicommentResponse("False"); + } + setcommentresult(res.data.message); + + } + else { + //console.log(" In Erreur res.data.status = " + res.data.status); + //console.log(" In Erreur res.data.message = " + res.data.message); + setmyApicommentResponse("False"); + } + }).catch((error) => { + console.warn('Not good man :( mysearchtext = '); + setmyApicommentResponse("False"); + }) + } + + + + function RecordArticle(e) { + + var myurl = process.env.REACT_APP_API_URL + "myclass/api/add_articles_avis/"; + var form = new FormData(); + var title = document.getElementsByName("mytitle")[0].value; + var url = document.getElementsByName("url")[0].value; + //var quality = document.getElementsByName("quality")[0].value; + var avis = text_value; + var note = document.getElementsByName("note")[0].value; + var postedby = "" + var token = "" + + if (typeof (stored_user) === "undefined" || String(stored_user) === '') { + postedby = document.getElementsByName("postedby")[0].value; + } else { + token = stored_user; + } + + if (postedby.length > 0) { + var re = /\S+@\S+\.\S+/; + if (re.test(postedby) == false) { + alert("le champs 'Posté par' n'est pas une adresse email valide"); + return; + } + + } + + form.append("token", token); + form.append("title_formation", title); + form.append("qualite", "none"); + form.append("avis", avis); + form.append("note", note); + form.append("postedby", postedby); + form.append("qualityrating", qualityrating); + form.append("avisrating", avisrating); + + + form.append("url_formation", url); + form.append("user_ip", IPv4); + form.append("user_country_code", country_code); + form.append("user_country_name", country_name); + form.append("user_city", city); + form.append("user_postal", postal); + form.append("user_latitude", latitude); + form.append("user_longitude", longitude); + form.append("user_state", state); + + axios.post(myurl, form).then(res => { + setResult(String(res.data.status)); + + if (String(res.data.status) == String("true")) { + //console.log(" contact-nous statut = " + res.data.status); + //console.log(" contact-nous res.data.message = " + res.data.message); + setmyApiResponse(String(res.data.message)) + clearForm(); + } + else { + //console.log(" In test res.data.status = " + res.data.status); + //console.log(" In test res.data.message = " + res.data.message); + setmyApiResponse(String(res.data.message)) + + } + + }).catch((error) => { + console.warn('contact-nous Not good man :( mysearchtext = '); + + }) + } + + function clearForm(e) { + + document.getElementsByName("mytitle")[0].value = ""; + document.getElementsByName("url")[0].value = ""; + //document.getElementsByName("quality")[0].value = ""; + settext_value(""); + document.getElementsByName("note")[0].value = ""; + document.getElementsByName("postedby")[0].value = ""; + } + + + function desablefield(e) { + + + if (document.getElementsByName("mytitle")[0]) { + document.getElementsByName("mytitle")[0].disabled = true; + document.getElementsByName("mytitle")[0].style.backgroundColor = "#ECEFF1"; + } + + if (document.getElementsByName("url")[0]) { + document.getElementsByName("url")[0].disabled = true; + document.getElementsByName("url")[0].style.backgroundColor = "#ECEFF1"; + } + + + if (document.getElementsByName("avis")[0]) { + document.getElementsByName("avis")[0].disabled = true; + document.getElementsByName("avis")[0].style.backgroundColor = "#ECEFF1"; + } + + + if (document.getElementsByName("note")[0]) { + document.getElementsByName("note")[0].disabled = true; + document.getElementsByName("note")[0].style.backgroundColor = "#ECEFF1"; + } + + } + + + function makecommentary(e) { + setmakecomment("1"); + alert(" commentaire "); + } + + function CheckNote(e) { + const val = e.target.value; + + if (isNaN(val)) { + //alert(val + " is not a number
mynote = "+mynote); + document.getElementById("note").value = mynote; + } else { + if (val > 5) { + alert(" Valeur Maxi doit etre 5"); + document.getElementById("note").value = mynote; + } else { + setmynote(val); + } + } + + } + + function confirmpostarticle(e) { + + + + var mytitle = document.getElementsByName("mytitle")[0].value; + var url = document.getElementsByName("url")[0].value; + //var quality = document.getElementsByName("quality")[0].value; + var avis = text_value + var note = document.getElementsByName("note")[0].value; + var postedby = "" + var token = "" + + //alert("title = "+mytitle+" url = "+url+" document.getElementsByName(title)[0].value; ="+document.getElementsByName('title')[0].value); + + if (mytitle.length < 5) { + alert("le champs 'Titre' n'est pas correcte"); + return; + } + + if (url.length < 5) { + alert("le champs 'lien de la formation' n'est pas correcte"); + return; + } + + if (avis.length <= 0) { + alert("le champs 'avis' n'est pas correcte"); + return; + } + + if (note.length <= 0) { + alert("le champs 'note' n'est pas correcte"); + return; + } + + if (typeof (stored_user) === "undefined" || String(stored_user) === '') { + postedby = document.getElementsByName("postedby")[0].value; + + if (postedby.length <= 0) { + alert("le champs 'Posté par' n'est pas correcte"); + return; + } + + + if (postedby.length > 0) { + var re = /\S+@\S+\.\S+/; + if (re.test(postedby) === false) { + alert("le champs 'Posté par' n'est pas une adresse email valide"); + return; + } + } + } + + + confirmAlert({ + title: 'Confirmer la note', + message: " ", + buttons: [ + { + label: 'Oui', + onClick: () => { RecordArticle() } + }, + { + label: 'Non', + onClick: () => { return } + + }, + + ], + closeOnEscape: false, + closeOnClickOutside: false, + keyCodeForClose: [8, 32], + willUnmount: () => { }, + afterClose: () => { }, + onClickOutside: () => { }, + onKeypress: () => { }, + onKeypressEscape: () => { }, + }); + + } + + const fadeImages = [ + { + url: slideimg1, + }, + + { + url: slideimg1, + }, + ]; + + const data = [ + { + userId: '02b', + comId: '017', + fullName: 'Lily', + userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/', + text: 'I think you have a point🤔', + avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random', + replies: [] + } + ] + + const allPosts = [ + { + profileImage: + 'https://www.rd.com/wp-content/uploads/2017/09/01-shutterstock_476340928-Irina-Bg.jpg', + name: 'Jane Doe', + content: '

Hello everyone!

How are you all doing?

-Jane', + date: new Date('01 Jan 2020 01:12:00 GMT') + }, + { + profileImage: + 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', + name: 'John Doe', + content: + '

Raising say express had chiefly detract demands she. Quiet led own cause three him. Front no party young abode state up. Saved he do fruit woody of to. Met defective are allowance two perceived listening consulted contained. It chicken oh colonel pressed excited suppose to shortly. He improve started no we manners however effects. Prospect humoured mistress to by proposal marianne attended. Simplicity the far admiration preference everything. Up help home head spot an he room in Barton waited twenty always repair in within we do. An delighted offending curiosity my is dashwoods at. Boy prosperous increasing surrounded companions her nor advantages sufficient put. John on time down give meet help as of. Him waiting and correct believe now cottage she another. Vexed six shy yet along learn maids her tiled. Through studied shyness evening bed him winding present. Become excuse hardly on my thirty it wanted.

', + date: new Date('01 Jan 2020 09:12:00 GMT') + } + ] + + const [posts, setPosts] = useState(allPosts) + + const submitPost = (text) => { + const curDate = new Date() + + setPosts([ + ...posts, + { + profileImage: + 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', + name: 'Jane Doe', + content: text, + date: curDate + } + ]) + } + + const [PartnerMenu, setPartnerMenu] = React.useState(null); + const [AccountMenu, setAccountMenu] = React.useState(null); + + const [someoneconnected, setsomeoneconnected] = useState("0"); + const [partnerconnected, setpartnerconnected] = useState("0"); + + const stored_part = getCookie('tokenmysypart'); + + function whosisconnected() { + var local_user_connect = 0; + var local_part_connect = 0; + + if (typeof (stored_user) === "undefined" || String(stored_user) === '') { + setuserconnected("0"); + local_user_connect = 0; + } else { + setuserconnected("1"); + setsomeoneconnected("1"); + local_user_connect = 1; + //alert(" user connected OK"); + } + + if (typeof (stored_part) === "undefined" || String(stored_part) === '') { + setpartnerconnected("0"); + local_part_connect = 0; + } else { + setpartnerconnected("1"); + setsomeoneconnected("1"); + local_part_connect = 1; + // alert(" partner connected OK"); + } + } + + function handleAccountLogout() { + + if (String(userconnected) === String("1")) { + user_logout(); + } + else if (String(partnerconnected) === String("1")) { + part_logout(); + } + } + + function user_logout_confirmation() { + /* si c'est une connexion partner qui est active */ + if (typeof (stored_user) != "undefined") { + setCookie("tokenmysych", ""); + } + history.push("/recherche-formation"); + } + + function user_logout() { + confirmAlert({ + title: '', + message: 'Confirmez la deconnexion (user)', + buttons: [ + { + label: 'Oui', + onClick: () => user_logout_confirmation() + }, + { + label: 'Non', + onClick: () => { return } + } + ] + }); + } + + + const PartnerMenu_Close = () => { + setPartnerMenu(null); + }; + + const AccountMenu_Close = () => { + setAccountMenu(null); + }; + + const handlePartnerMenu = (event) => { + setPartnerMenu(event.currentTarget); + }; + + const handleAccountMenu = (event) => { + setAccountMenu(event.currentTarget); + }; + + const handleClose_Account = () => { + alert(" my account"); + setAccountMenu(null); + }; + + const handleAccountConnexion = () => { + setAccountMenu(null); + history.push("/Connexion") + }; + + const handleMyAccount = () => { + setAccountMenu(null); + history.push("/mysy-user-account") + }; + + const handleAccountCreation = () => { + setAccountMenu(null); + history.push("/create_account") + }; + + const handlePartnerConnexion = () => { + setAccountMenu(null); + history.push("/PartnerLogin") + }; + + function user_logout_confirmation() { + /* si c'est une connexion partner qui est active */ + if (typeof (stored_user) != "undefined") { + setCookie("tokenmysych", ""); + } + history.push("/recherche-formation"); + } + + function user_logout() { + confirmAlert({ + title: '', + message: 'Confirmez la deconnexion (user)', + buttons: [ + { + label: 'Oui', + onClick: () => user_logout_confirmation() + }, + { + label: 'Non', + onClick: () => { return } + } + ] + }); + } + + + const handleMyPartnerAccount = () => { + setAccountMenu(null); + history.push("/Partner") + }; + + const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']); + function handleAccountConnexion_v2() { + + if (String(userconnected) === String("1")) { + handleMyAccount(); + } + else if (String(partnerconnected) === String("1")) { + handleMyPartnerAccount(); + } + } + + + function part_logout_confirmation() { + /* si c'est une connexion partner qui est active */ + if (typeof (stored_part) != "undefined") { + + const stored_cookie = getCookie('tokenmysypart'); + var acces_right_token_name = stored_cookie + "_uar"; + + setpartCookie("tokenmysypart", "", { path: '/' }); + + setpartCookie(acces_right_token_name, "", { path: '/' }); + removeCookie(acces_right_token_name, { path: '/' }); + } + history.push("/recherche-formation"); + } + + function part_logout() { + confirmAlert({ + title: '', + message: 'Confirmez la deconnexion (pro)', + buttons: [ + { + label: 'Oui', + onClick: () => part_logout_confirmation() + }, + { + label: 'Non', + onClick: () => { return } + } + ] + }); + } + const [ProduitMenu, setproduitMenu] = React.useState(null); + const [AvisMenu, setavisMenu] = React.useState(null); + + + const handleProduitMenu = (event) => { + setproduitMenu(event.currentTarget); + }; + + const handleProduitService = () => { + setproduitMenu(null); + history.push("/Produits-Services/") + }; + + const handleQuisommesNousMenu = () => { + setproduitMenu(null); + history.push("/QuiSommesNous/") + }; + + const ProduitMenu_Close = () => { + setproduitMenu(null); + }; + + function publiecatalogue() { + history.push("/Partner", { mysy_arg: 'partner' }); + } + + const handleFtionMenu = (event) => { + history.push("/") + }; + + + return ( +
+
+ + Recherche articles formation + + + + + Mon Compte + Deconnexion + + + + Mon Compte + Connexion + Creation + Deconnexion + + + + + + + + + + + +
+ +
+
+
+ +
+ +
+

Recherche Formations Tutoriels

+ +
+
+ {String(someoneconnected) !== String("1") && } + {String(someoneconnected) === String("1") && } +
+
+ + + {String(someoneconnected) === String("1") &&
+ Mon Compte +
} + + {String(someoneconnected) !== String("1") &&
+ S'inscrire +
} + +
+ Qui Sommes nous ? +
+ +
+ Prix & Services +
+ +
+ Les formations +
+ + +
{ + e.preventDefault(); + var date2 = new Date(); + const format2 = "YYYY-MM"; + var dateTime2 = moment(date2).format(format2); + window.open( + "https://calendly.com/mysytraining/demo-mysy-training-solution?month=" + String(dateTime2), + '_blank' + ); + }} + style={{ "background": "red", "borderRadius": "5px", "paddingLeft": "3px", "paddingRight": "3px" }}> + Reserver une Demo +
+
+ +
+ + +
+
+ Recherche de Formations & Tutoriels +
+ +
+
+
+ +
+
+ +
+ +
SUPPORT +
+ +
+ Besoin d’aide ? +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. +
+
+ + {/*
+
+
+ + + + + + + +
+
+
*/} + +
+ + +
+ + + +
+
+
+ +
+ +
+ {(!DetailArticleAvis.type || String(DetailArticleAvis.type) !== "blog") && +
+ +
+ + {DetailArticleAvis.title_formation} +
+ Publié le {(String(DetailArticleAvis.date_avis)).substring(0, 16)} +
+
+ +
+ Formation gestion projets +
+ +
+ + + {(!DetailArticleAvis.type || String(DetailArticleAvis.type) !== "blog") && DetailArticleAvis.avis &&
+ + {parse(DetailArticleAvis.avis)} + + +
} +
+ +
+ } +
+ + +
+ + + + +
+
+ + + +
+   +
+ +
+ +
+
Cela pourrait aussi vous intéresser
+ {Get_3_Articles_result && Get_3_Articles_result.map((formation) => ( +
+ +
+ + ))} + + + +
+
+ +
+ +
+   +
+ +
+
+ +
+ + + + +
+ + ) +} + +export default DisplayDetailArticle_new_v2; \ No newline at end of file diff --git a/src/components/Fotter.js b/src/components/Fotter.js index 9ef4871..59458ce 100644 --- a/src/components/Fotter.js +++ b/src/components/Fotter.js @@ -47,7 +47,7 @@ const Footer = () => {
-
Produits & Services
+
Prix & Services
Nos packs Publier votre catalogue diff --git a/src/components/Fotter_test.js b/src/components/Fotter_test.js new file mode 100644 index 0000000..2aa9b6d --- /dev/null +++ b/src/components/Fotter_test.js @@ -0,0 +1,131 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid'; +import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from "react-share"; +import { SocialIcon } from 'react-social-icons'; +import { + Box, + Container, + Row, + Column, + FooterLink, + Heading, +} from "./FooterStyles"; + +const Fotter_test = () => { + + // Integration du gestionnaire de cookie : axeptio + + window.axeptioSettings = { + clientId: "6273ecd99c50de9cfb190555", + cookiesVersion: "mysy training technology-fr", + }; + + (function (d, s) { + var t = d.getElementsByTagName(s)[0], e = d.createElement(s); + + e.async = true; e.src = "//static.axept.io/sdk-slim.js"; + t.parentNode.insertBefore(e, t); + })(document, "script"); + + + return ( +
+
+   +
+ +
+
+
+ + +
+
Prix & Services
+ Nos packs + Publier votre catalogue + +
+ + + +
+
Social Media
+
+
+ + + +   + + + + + +   + + + + + +
+ +
+ {/* + + + + Facebook + + + + + + + LinkedIn + + + + + + + Twitter + + + */} + +
+
+
+
+
+ + Copyright © 2024 MySy. Tous droits réservés.   + | Confidentialité | Cookies | données personnelles   + | Conditions d’utilisation   + | Mentions légales + | CGV + +
+ +
+ + ); +}; +export default Fotter_test; diff --git a/src/components/Fotter_v2.js b/src/components/Fotter_v2.js index 6edcb31..523852f 100644 --- a/src/components/Fotter_v2.js +++ b/src/components/Fotter_v2.js @@ -61,7 +61,7 @@ const Footer_v2 = () => {
-
Produits & Services
+
Prix & Services
Nos offres
Publier votre catalogue
M’inscrire
diff --git a/src/components/Partner_Product_Service.js b/src/components/Partner_Product_Service.js index c747455..377842c 100644 --- a/src/components/Partner_Product_Service.js +++ b/src/components/Partner_Product_Service.js @@ -437,7 +437,7 @@ const Partner_Product_Service = (props) => { Dans le cas précis des produits et service, "props.class_external_code" est utilisé comme l'_id du produit*/ - //console.log(" ### Vos Produits & Services props.class_external_code = ", props.class_external_code); + //console.log(" ### Vos Prix & Services props.class_external_code = ", props.class_external_code); setselected_id(props.class_external_code); Display_Detail_Product_Data(props.class_external_code); @@ -1163,7 +1163,7 @@ const Partner_Product_Service = (props) => { -

Vos Produits & Services

+

Vos Prix & Services

Utilisez les filtres !
diff --git a/src/components/ProduitsServices.js b/src/components/ProduitsServices.js index 95291a2..61fd438 100644 --- a/src/components/ProduitsServices.js +++ b/src/components/ProduitsServices.js @@ -123,7 +123,7 @@ function ProduitsServices() { return (
- Produits & Services + Prix & Services @@ -288,7 +288,7 @@ function ProduitsServices() {
-
Produits & Services
+
Prix & Services

diff --git a/src/components/RechercheArticles.js b/src/components/RechercheArticles.js index b5e74b6..7b560e7 100644 --- a/src/components/RechercheArticles.js +++ b/src/components/RechercheArticles.js @@ -21,7 +21,7 @@ import { confirmAlert } from 'react-confirm-alert'; // Import import { useCookies } from "react-cookie"; import connect_white from "../mysy_img/connect_white_v2.png"; import connect_green from "../mysy_img/connect_green.png"; - +import { BsFillXCircleFill } from "react-icons/bs"; let PageSize = 5; const RechercheArticles = (props) => { const [userconnected, setuserconnected] = useState(""); @@ -524,7 +524,7 @@ const RechercheArticles = (props) => {
- Prix & Services + Prix & Services
@@ -533,15 +533,15 @@ const RechercheArticles = (props) => {
{ - e.preventDefault(); - var date2 = new Date(); - const format2 = "YYYY-MM"; - var dateTime2 = moment(date2).format(format2); - window.open( - "https://calendly.com/mysytraining/demo-mysy-training-solution?month=" + String(dateTime2), - '_blank' - ); - }} + e.preventDefault(); + var date2 = new Date(); + const format2 = "YYYY-MM"; + var dateTime2 = moment(date2).format(format2); + window.open( + "https://calendly.com/mysytraining/demo-mysy-training-solution?month=" + String(dateTime2), + '_blank' + ); + }} style={{ "background": "red", "borderRadius": "5px", "paddingLeft": "3px", "paddingRight": "3px" }}> Reserver une Demo
@@ -642,7 +642,7 @@ const RechercheArticles = (props) => { {result &&
{ + const [userconnected, setuserconnected] = useState(""); + const [SearchText, setSearchText] = useState(""); + const [result, setResult] = useState(""); + const [myApiResponse, setmyApiResponse] = useState("false"); + const [displayAllClasses, setdisplayAllClasses] = useState(true); + const [showelement, setshowelement] = useState("init"); + const [country_code, setcountry_code] = useState(""); + const [country_name, setcountry_name] = useState(""); + const [city, setcity] = useState(""); + const [postal, setpostal] = useState(""); + const [latitude, setlatitude] = useState(""); + const [longitude, setlongitude] = useState(""); + const [IPv4, setIPv4] = useState(""); + const [state, setstate] = useState(""); + const [userIp, setuserIp] = useState(""); + const [currentPage, setCurrentPage] = useState(1); + const [currentPage2, setCurrentPage2] = useState(1); + const [fin, setfin] = useState(0); + const [ismobilephone, setismobilephone] = useState(); + const [TrainingDistanciel, setTrainingDistanciel] = useState(); + + + const stored_user = getCookie('tokenmysych'); + const history = useHistory(); + + + const url = process.env.REACT_APP_API_URL + "myclass/api/add_user_account/"; + const { + register, + formState: { errors }, + handleSubmit, + watch, + } = useForm(); + const pwd = useRef({}); + pwd.current = watch("pwd", ""); + + const onSubmit = async (data) => { + const formData = new FormData(); + //await sleep(20); + formData.append('search_text', data.name); + formData.append('name', data.name); + formData.append('surname', data.surname); + formData.append('email', data.email); + formData.append('pwd', data.pwd); + const res = await fetch( + url, + { + method: "POST", + mode: 'cors', + cache: 'no-cache', + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/json' + // 'Content-Type': 'application/x-www-form-urlencoded', + }, + redirect: 'follow', + referrerPolicy: 'no-referrer', + body: formData, + } + ); + const results = await res.json(); + //console.log(results); + }; + + const [Trainingdistance, setTrainingdistance] = useState(0); + const handleInput = (e) => { + setTrainingdistance(e.target.value); + } + + const [Trainingduration, setTrainingduration] = useState(0); + const handleInputDuration = (e) => { + setTrainingduration(e.target.value); + } + + + function showdisplayfilter(event) { + + if (showelement == "true") { + setshowelement("false"); + } + else if (showelement == "false") { + setshowelement("true"); + } + + + } + + function clearsearchtext(event) { + setSearchText(""); + document.getElementById("SearchText").value = ""; + } + + + function SearchTextHandle(event) { + setSearchText(event.target.value); + } + + + + function displayAllClassesHandle(event) { + + setdisplayAllClasses(event.target.checked); + if (event.target.checked == true) + document.getElementById("SearchText").disabled = true; + else + document.getElementById("SearchText").disabled = false; + } + + + const [searchFunction_api, setsearchFunction_api] = useState(); + const [searchFunction_message, setsearchFunction_message] = useState(); + const [searchFunction_result, setsearchFunction_result] = useState([]); + function searchFunction(e) { + + var token = ""; + if (typeof (stored_user) != "undefined") { + token = stored_user + } + + + var form = new FormData(); + form.append("search_text", SearchText); + form.append("token", token); + // Ajout des info IP user + form.append("user_ip", IPv4); + form.append("user_country_code", country_code); + form.append("user_country_name", country_name); + form.append("user_city", city); + form.append("user_postal", postal); + form.append("user_latitude", latitude); + form.append("user_longitude", longitude); + form.append("user_state", state); + + + var myurl = "" + /* if (document.getElementById("allelement").checked !== true && + document.getElementById("SearchText").disabled !== true) { + //alert(" recherche classique laaa "); + myurl = process.env.REACT_APP_API_URL + "myclass/api/recherche_articles_avis/"; + } + else if (document.getElementById("allelement").checked === true && + document.getElementById("SearchText").disabled === true) { + myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_articles_avis/"; + }*/ + myurl = process.env.REACT_APP_API_URL + "myclass/api/get_all_articles_avis/"; + + axios.post(myurl, form).then(res => { + if (String(res.data.status) != String("false")) { + //console.log(" In test res.data.status = " + res.data.status); + //console.log(" In test res.data.message = " + res.data.message); + setsearchFunction_api(res.data.status); + setsearchFunction_result(res.data.message); + setmyApiResponse("True"); + setResult(res.data.message) + + } + else { + //console.log(" In test res.data.status = " + res.data.status); + //console.log(" In test res.data.message = " + res.data.message); + setmyApiResponse("False"); + setsearchFunction_api(res.data.status); + setsearchFunction_message(res.data.message); + //setmyApimyApiMessage("") + } + + + }).catch((error) => { + console.warn('Not good man :( mysearchtext = '); + setmyApiResponse("False"); + setsearchFunction_api("False"); + //setmyApimyApiMessage("") + }) + } + + + const currentTableData2 = useMemo(() => { + if (result) { + const firstPageIndex = (currentPage2 - 1) * PageSize; + const lastPageIndex = firstPageIndex + PageSize; + setfin(1); + return result.slice(firstPageIndex, lastPageIndex); + } + else { + return []; + setfin(0); + } + }, [currentPage2]); + + useEffect(() => { + setdisplayAllClasses("true"); + async function chloadfunction() { + if (document.getElementById('allelement')) { + document.getElementById("allelement").checked = true; + } + // document.getElementById("SearchText").disabled = true; + + } + chloadfunction(); + searchFunction(); + + whosisconnected(); + + }, []); + + const [PartnerMenu, setPartnerMenu] = React.useState(null); + const [AccountMenu, setAccountMenu] = React.useState(null); + + const [someoneconnected, setsomeoneconnected] = useState("0"); + const [partnerconnected, setpartnerconnected] = useState("0"); + const [cookie, setCookie, removeCookie] = useCookies(['tokenmysych']); + + const stored_part = getCookie('tokenmysypart'); + + function whosisconnected() { + var local_user_connect = 0; + var local_part_connect = 0; + + if (typeof (stored_user) === "undefined" || String(stored_user) === '') { + setuserconnected("0"); + local_user_connect = 0; + } else { + setuserconnected("1"); + setsomeoneconnected("1"); + local_user_connect = 1; + //alert(" user connected OK"); + } + + if (typeof (stored_part) === "undefined" || String(stored_part) === '') { + setpartnerconnected("0"); + local_part_connect = 0; + } else { + setpartnerconnected("1"); + setsomeoneconnected("1"); + local_part_connect = 1; + // alert(" partner connected OK"); + } + } + + function handleAccountLogout() { + + if (String(userconnected) === String("1")) { + user_logout(); + } + else if (String(partnerconnected) === String("1")) { + part_logout(); + } + } + + function user_logout_confirmation() { + /* si c'est une connexion partner qui est active */ + if (typeof (stored_user) != "undefined") { + setCookie("tokenmysych", ""); + } + history.push("/recherche-formation"); + } + + function user_logout() { + confirmAlert({ + title: '', + message: 'Confirmez la deconnexion (user)', + buttons: [ + { + label: 'Oui', + onClick: () => user_logout_confirmation() + }, + { + label: 'Non', + onClick: () => { return } + } + ] + }); + } + + + const PartnerMenu_Close = () => { + setPartnerMenu(null); + }; + + const AccountMenu_Close = () => { + setAccountMenu(null); + }; + + const handlePartnerMenu = (event) => { + setPartnerMenu(event.currentTarget); + }; + + const handleAccountMenu = (event) => { + setAccountMenu(event.currentTarget); + }; + + const handleClose_Account = () => { + alert(" my account"); + setAccountMenu(null); + }; + + const handleAccountConnexion = () => { + setAccountMenu(null); + history.push("/Connexion") + }; + + const handleMyAccount = () => { + setAccountMenu(null); + history.push("/mysy-user-account") + }; + + const handleAccountCreation = () => { + setAccountMenu(null); + history.push("/create_account") + }; + + const handlePartnerConnexion = () => { + setAccountMenu(null); + history.push("/PartnerLogin") + }; + + function user_logout_confirmation() { + /* si c'est une connexion partner qui est active */ + if (typeof (stored_user) != "undefined") { + setCookie("tokenmysych", ""); + } + history.push("/recherche-formation"); + } + + function user_logout() { + confirmAlert({ + title: '', + message: 'Confirmez la deconnexion (user)', + buttons: [ + { + label: 'Oui', + onClick: () => user_logout_confirmation() + }, + { + label: 'Non', + onClick: () => { return } + } + ] + }); + } + + + const handleMyPartnerAccount = () => { + setAccountMenu(null); + history.push("/Partner") + }; + + const [partcookie, setpartCookie, removepartCookie] = useCookies(['tokenmysypart']); + function handleAccountConnexion_v2() { + + if (String(userconnected) === String("1")) { + handleMyAccount(); + } + else if (String(partnerconnected) === String("1")) { + handleMyPartnerAccount(); + } + } + + + function part_logout_confirmation() { + /* si c'est une connexion partner qui est active */ + if (typeof (stored_part) != "undefined") { + + const stored_cookie = getCookie('tokenmysypart'); + var acces_right_token_name = stored_cookie + "_uar"; + + setpartCookie("tokenmysypart", "", { path: '/' }); + + setpartCookie(acces_right_token_name, "", { path: '/' }); + removeCookie(acces_right_token_name, { path: '/' }); + } + history.push("/recherche-formation"); + } + + function part_logout() { + confirmAlert({ + title: '', + message: 'Confirmez la deconnexion (pro)', + buttons: [ + { + label: 'Oui', + onClick: () => part_logout_confirmation() + }, + { + label: 'Non', + onClick: () => { return } + } + ] + }); + } + const [ProduitMenu, setproduitMenu] = React.useState(null); + const [AvisMenu, setavisMenu] = React.useState(null); + + + const handleProduitMenu = (event) => { + setproduitMenu(event.currentTarget); + }; + + const handleProduitService = () => { + setproduitMenu(null); + history.push("/Produits-Services/") + }; + + const handleQuisommesNousMenu = () => { + setproduitMenu(null); + history.push("/QuiSommesNous/") + }; + + const ProduitMenu_Close = () => { + setproduitMenu(null); + }; + + function publiecatalogue() { + history.push("/Partner", { mysy_arg: 'partner' }); + } + + const handleFtionMenu = (event) => { + history.push("/") + }; + + return ( +
+ + Recherche articles formation + + + + + Mon Compte + Deconnexion + + + + Mon Compte + Connexion + Creation + Deconnexion + + + + + + + + + + + +
+ +
+
+
+ +
+ +
+

Recherche Formations Tutoriels

+ +
+
+ {String(someoneconnected) !== String("1") && } + {String(someoneconnected) === String("1") && } +
+
+ + + {String(someoneconnected) === String("1") &&
+ Mon Compte +
} + + {String(someoneconnected) !== String("1") &&
+ S'inscrire +
} + +
+ Qui Sommes nous ? +
+ +
+ Prix & Services +
+ +
+ Les formations +
+ + +
{ + e.preventDefault(); + var date2 = new Date(); + const format2 = "YYYY-MM"; + var dateTime2 = moment(date2).format(format2); + window.open( + "https://calendly.com/mysytraining/demo-mysy-training-solution?month=" + String(dateTime2), + '_blank' + ); + }} + style={{ "background": "red", "borderRadius": "5px", "paddingLeft": "3px", "paddingRight": "3px" }}> + Reserver une Demo +
+
+ +
+ + +
+
+ Recherche de Formations & Tutoriels +
+ {/*
+
+ + + + + {SearchText.length > 2 && } +   + + +
+
*/} +
+
+
+ +
+
+ +
+ +
SUPPORT +
+ +
+ Besoin d’aide ? +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. +
+
+ +
+
+
+ + + + + + + +
+
+
+ +
+ + +
+ + + +
+
+ {/*
+
+ imgg +
+ +
+ destail aricle +
+ + +
*/} + + +
+ + {/*result && myApiResponse === "True" &&
+ setCurrentPage2(page)} + /> + + +
*/} + + {searchFunction_result && searchFunction_result.length > 0 && currentTableData2 && searchFunction_result.map((formation) => ( +
+ +
+ + ))} + + + {/*result &&
+ setCurrentPage2(page)} + /> + +
+ */} +
+ +
+
+ + +
+ ) +} + +export default RechercheArticles_new_v2; \ No newline at end of file diff --git a/src/components/UpgradeToPro.js b/src/components/UpgradeToPro.js index d2431d5..c8bdd0c 100644 --- a/src/components/UpgradeToPro.js +++ b/src/components/UpgradeToPro.js @@ -456,7 +456,7 @@ function UpgradeToPro() {
 
- Produits & Services + Prix & Services
Publication des formations diff --git a/src/components/sidebar.js b/src/components/sidebar.js index 75a2128..838ec94 100644 --- a/src/components/sidebar.js +++ b/src/components/sidebar.js @@ -136,7 +136,7 @@ const SideBar = () => { - Produits & Services + Prix & Services @@ -194,7 +194,7 @@ const SideBar = () => { - Produits & Services + Prix & Services @@ -263,7 +263,7 @@ const SideBar = () => { - Produits & Services + Prix & Services diff --git a/src/pages/displaydetailarticle.js b/src/pages/displaydetailarticle.js index 233fb1d..dae4fde 100644 --- a/src/pages/displaydetailarticle.js +++ b/src/pages/displaydetailarticle.js @@ -1,16 +1,20 @@ import DisplayDetailArticle from "../components/DisplayDetailArticle"; +import DisplayDetailArticle_new_v2 from "../components/DisplayDetailArticle_new_v2"; + + + import Navigation from "../components/Navigation"; -export default function displaydetailclass() { +export default function displaydetailarticle() { return (
-
- +
+
- - - - + + + +
); } \ No newline at end of file diff --git a/src/pages/recherchearticles.js b/src/pages/recherchearticles.js index e2726ef..f2e277e 100644 --- a/src/pages/recherchearticles.js +++ b/src/pages/recherchearticles.js @@ -1,14 +1,15 @@ import RechercheArticle from "../components/RechercheArticles"; +import RechercheArticle_new_v2 from "../components/RechercheArticles_new_v2"; import Navigation from "../components/Navigation"; -export default function displaydetailclass() { +export default function displaydetailarticle() { return (
- +
diff --git a/src/styles/components/_article.scss b/src/styles/components/_article.scss index 4966e86..1cb1d43 100644 --- a/src/styles/components/_article.scss +++ b/src/styles/components/_article.scss @@ -34,6 +34,7 @@ border-radius: 30px; margin-right: 0.5%; } + .div_row { //border: 0px solid black; border-width: 0.01rem; @@ -90,6 +91,7 @@ border-radius: 12px; padding: 5px; } + .met_container { text-align: center; padding: 1px 2px; @@ -137,6 +139,9 @@ float: left; text-align: left; margin-bottom: 0.5rem; + text-align: justify; + font-family: Verdana, Georgia, Arial; + line-height: 26px; } .art_criteres_value_left { @@ -160,6 +165,8 @@ .droite_txt { width: 100%; float: right; + padding: 5px; + height: 20rem; } } @@ -256,6 +263,7 @@ border-radius: 12px; padding: 5px; } + .met_container { text-align: center; padding: 1px 2px; @@ -266,12 +274,19 @@ .met_text { margin-bottom: 0.1rem; - font-size: medium; - font-weight: normal; - //white-space: nowrap; - //overflow: hidden; letter-spacing: 1px; - text-align: center; + + height: 60px; + font-family: Verdana, Georgia, Arial; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 22px; + text-align: justify; + color: #0A043C; + margin-top: 2rem; + line-height: 30px; + font-weight: 600; } .met_text_detail { @@ -303,6 +318,9 @@ float: left; text-align: left; margin-bottom: 0.5rem; + text-align: justify; + font-family: Verdana, Georgia, Arial; + line-height: 26px; } .art_criteres_value_left { @@ -320,13 +338,15 @@ } .gauche_img { - width: 20%; + width: 100%; float: left; } .droite_txt { - width: 80%; + width: 100%; float: right; + padding: 5px; + height: 20rem; } } @@ -342,6 +362,7 @@ //width: 40%!important; padding: 0.2rem !important; } + .media_sociaux { svg { margin-top: 0 !important; @@ -375,6 +396,21 @@ margin-right: auto; } + .div_row_border { + float: left; + border: 0px solid black; + border-width: 0.01rem; + width: 100%; + border-radius: 5px; + text-align: left; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + margin-bottom: 5px; + padding: 5px; + margin-right: 5px; + // cursor: pointer; + } + .div_row_gauche { float: left; border: 0px solid black; @@ -421,6 +457,7 @@ border-radius: 12px; padding: 5px; } + .met_container { text-align: center; padding: 1px 2px; @@ -431,12 +468,19 @@ .met_text { margin-bottom: 0.1rem; - font-size: medium; - font-weight: normal; - //white-space: nowrap; - //overflow: hidden; letter-spacing: 1px; - text-align: center; + + height: 60px; + font-family: Verdana, Georgia, Arial; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 22px; + text-align: justify; + color: #0A043C; + margin-top: 2rem; + line-height: 30px; + font-weight: 600; } .met_text_detail { @@ -468,6 +512,9 @@ float: left; text-align: left; margin-bottom: 0.5rem; + text-align: justify; + font-family: Verdana, Georgia, Arial; + line-height: 26px; } .art_criteres_value_left { @@ -485,13 +532,15 @@ } .gauche_img { - width: 30%; + width: 100%; float: left; } .droite_txt { - width: 70%; + width: 100%; float: right; + padding: 5px; + height: 20rem; } } @@ -541,6 +590,22 @@ margin-right: auto; } + .div_row_border { + float: left; + border: 0px solid black; + border-width: 0.01rem; + width: 100%; + border-radius: 5px; + text-align: left; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + margin-bottom: 5px; + padding: 5px; + margin-right: 5px; + //cursor: pointer; + } + + .div_row_gauche { float: left; border: 0px solid black; @@ -586,7 +651,9 @@ border-top-right-radius: 12px; border-radius: 12px; padding: 5px; + height: 15rem; } + .met_container { text-align: center; padding: 1px 2px; @@ -597,12 +664,21 @@ .met_text { margin-bottom: 0.1rem; - font-size: medium; - font-weight: normal; - //white-space: nowrap; - //overflow: hidden; letter-spacing: 1px; - text-align: center; + + height: 60px; + font-family: Verdana, Georgia, Arial; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 22px; + text-align: justify; + color: #0A043C; + margin-top: 2rem; + line-height: 30px; + font-weight: 600; + width: 100%; + float: left; } .met_text_detail { @@ -615,6 +691,9 @@ text-align: left; margin-top: 1rem; margin-bottom: 1rem; + width: 100%; + float: left; + height: 12rem; } .art_criteres { @@ -630,10 +709,13 @@ } .art_criteres_value { - width: 88%; + width: 100%; float: left; text-align: left; margin-bottom: 0.5rem; + text-align: justify; + font-family: Verdana, Georgia, Arial; + line-height: 26px; } .art_criteres_value_left { @@ -651,13 +733,15 @@ } .gauche_img { - width: 30%; + width: 100%; float: left; } .droite_txt { - width: 70%; + width: 100%; float: right; + padding: 5px; + height: 25rem; } } -} +} \ No newline at end of file diff --git a/src/styles/components/_displaydetailarticle.scss b/src/styles/components/_displaydetailarticle.scss index 6128bfc..8fb928c 100644 --- a/src/styles/components/_displaydetailarticle.scss +++ b/src/styles/components/_displaydetailarticle.scss @@ -1,127 +1,35 @@ .DisplayDetailArticle { + width: 100%; + float: left; + .h1_transparent { color: transparent; //color: red; font-size: 0.1rem; } - .default-nav { - display: none !important; - } - - .slide_img { - width: 100% !important; - height: 30rem !important; - max-height: 30rem !important; - display: block !important; - box-shadow: 3px 5px 0px #ccc; - } @media only screen and (max-width: 600px) { - - .media_sociaux { - svg { - margin-top: 0 !important; - text-align: left !important; - } - - .SocialIcon { - height: 25px !important; - width: 25px !important; - } - } - - .okUpdateData { - font-size: small; - color: green; - font-style: italic; - } - - .koUpdateData { - font-size: small; - color: red; - font-style: italic; + .rech_middlebox { + float: left; + border-width: 2px; + width: 100%; + height: 100%; + margin: auto; + padding: 0.1rem; + border-radius: 30px; + margin-right: 0.5%; + overflow-y: hidden !important; } .detail_container { - width: 100%; + width: 80%; height: 200px; - padding: 0.2rem; + + margin: auto; + padding: 10px; border-radius: 30px; } - .titre_article { - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - color: #619e31; - font-size: small; - font-weight: bold; - text-align: center; - } - .titre_date_publication { - font-family: "verdana", "Quicksand", "Signika", sans-serif; - color: #3b3e40; - font-size: xx-small; - font-weight: bold; - text-align: center; - } - - .tous_nos_article { - width: 100%; - text-align: center; - font-size: 0.7rem; - font-style: italic; - margin-left: auto; - margin-right: auto; - margin-bottom: 0.5rem; - } - - a:link { - text-decoration: none; - } - - a:visited { - text-decoration: none; - } - - a:hover { - text-decoration: underline; - } - - a:active { - text-decoration: underline; - } - - .detail_container_affichage { - width: 100%; - text-align: left; - margin: auto; - padding: 0.8rem; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - font-weight: var(--bs-body-font-weight); - line-height: var(--bs-body-line-height); - color: #3b3e40; - text-align: justify; - padding-bottom: 1rem; - background-color: white; - word-break: break-word; - line-height: 1.4rem; - font-size: small; - } - - .detail_container_affichage_blog { - width: 100%; - text-align: left; - margin: auto; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - font-weight: var(--bs-body-font-weight); - line-height: var(--bs-body-line-height); - color: #3b3e40; - text-align: justify; - padding-bottom: 1rem; - background-color: white; - word-break: break-word; - line-height: 1.4rem; - font-size: small; - } .containerBox { position: relative; display: inline-block; @@ -144,7 +52,7 @@ text-align: left; color: rgb(10, 42, 77); background-color: white; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-family: "verdana", "Quicksand", "Signika", sans-serif; font-size: small; margin-bottom: 0.1rem; overflow: hidden; @@ -154,108 +62,17 @@ } textarea { - padding: 0.2rem; + padding: 10px; max-width: 100%; width: 100%; + line-height: 1.5; border-radius: 5px; border: 1px solid #ccc; box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - font-size: 0.7rem; - } - - input { - padding: 0.2rem; - max-width: 100%; - width: 100%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - font-size: 0.75rem; - } - - .div_left { - display: none; - } - - .div_right { - width: 100%; - float: left; - border-radius: 5px; - text-align: right; - } - - .avis { - height: 55%; - margin-bottom: 1.5rem; - overflow: hidden; - overflow-wrap: break-word; - } - - .commentarticleavis { - background-color: #eaecee; - padding: 1.2rem; - margin-top: 0.8rem; - margin-bottom: 0.8rem; - z-index: 55; - } - - .inputcommentarticle { - padding: 1px; - max-width: 90%; - width: 90%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1rem; - font-size: 0.75rem; - } - - .inputcommentarticle_d { - padding: 1px; - max-width: 90%; - width: 90%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1rem; - font-size: 0.75rem; - float: right; - } - - .inputcommentarticlemessage { - padding: 1px; - max-width: 100%; - width: 100%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1rem; - font-size: 0.75rem; - margin-top: 1rem; - } - - .btonPosterComment { - border-radius: 10rem; - background: #104277; - font-size: 0.75rem; - } - - .quill { - height: 10rem !important; - } - .mantine-gi9dos { - margin: 0px !important; - } - - .ql-editor { - padding: 0.2rem !important; + font-family: "verdana", "Quicksand", "Signika", sans-serif; font-size: small; } + .div_row2 { float: left; //border:0px solid black; @@ -263,7 +80,7 @@ width: 100%; margin-bottom: 0.1rem; //border-radius: 1rem; - //position: fixed; + z-index: 10; top: 0px; } @@ -290,14 +107,14 @@ } .div_mobile { - position: relative; + // position: relative; //border:1px solid black; //border-width: 0.01rem; //background-color: #e6ebe2; - top: 5rem; + //top: 6rem; z-index: 1; width: 98%; - + height: 100%; margin: 0.3rem; margin-left: auto; margin-right: auto; @@ -307,7 +124,6 @@ z-index: 50; width: 100%; float: left; - margin-top: 5rem; } .menuPrincipal { @@ -375,108 +191,47 @@ margin-left: auto; margin-right: auto; } + + .forma_rightbox { + float: right; + border-width: 2px; + width: 100%; + padding: 0.3rem; + font-size: 11px; + text-align: left; + color: rgb(10, 42, 77); + margin-top: 1px; + cursor: pointer; + overflow-wrap: break-word; + border-bottom: #3b3e40; + border-bottom-width: 1px; + border-bottom-style: solid; + padding: 1rem; + } } @media only screen and (min-width: 601px) and (max-width: 991px) { - .media_sociaux { - svg { - margin-top: 0 !important; - text-align: left !important; - } - - .SocialIcon { - height: 25px !important; - width: 25px !important; - } + .rech_middlebox { + float: left; + border-width: 2px; + width: 100%; + height: 100%; + margin: auto; + padding: 0.1rem; + border-radius: 30px; + margin-right: 0.5%; + overflow-y: hidden !important; } + .detail_container { + width: 80%; height: 200px; - padding: 0.3rem; + + margin: auto; + padding: 10px; border-radius: 30px; } - .titre_article { - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - color: #619e31; - font-size: 1.2rem; - font-weight: bold; - text-align: center; - } - .titre_date_publication { - font-family: "verdana", "Quicksand", "Signika", sans-serif; - color: #3b3e40; - font-size: xx-small; - font-weight: bold; - text-align: center; - } - - .tous_nos_article { - width: 100%; - text-align: center; - font-size: 0.9rem; - font-style: italic; - margin-left: auto; - margin-right: auto; - margin-bottom: 0.5rem; - } - - a:link { - text-decoration: none; - } - - a:visited { - text-decoration: none; - } - - a:hover { - text-decoration: underline; - } - - a:active { - text-decoration: underline; - } - - .detail_container_affichage { - border: 1px solid; - box-shadow: 3px 5px 0px #ccc; - padding: 0.8rem; - text-align: left; - padding: 10px; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-size: small; - font-weight: var(--bs-body-font-weight); - line-height: var(--bs-body-line-height); - color: #3b3e40; - padding-bottom: 0rem; - text-align: justify; - background-color: white; - word-break: break-word; - height: 25rem; - max-height: 25rem; - line-height: 1.2rem; - font-size: 0.85rem; - } - - .detail_container_affichage_blog { - //border: 1px solid; - box-shadow: 3px 5px 0px #ccc; - padding: 0.8rem; - text-align: left; - padding: 10px; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-size: small; - font-weight: var(--bs-body-font-weight); - line-height: var(--bs-body-line-height); - color: #3b3e40; - padding-bottom: 0rem; - text-align: justify; - background-color: white; - word-break: break-word; - //height: 25rem; - //max-height: 25rem; - line-height: 1.2rem; - font-size: 0.85rem; - } .containerBox { position: relative; display: inline-block; @@ -490,17 +245,6 @@ max-width: 30%; } - .koUpdateData { - font-size: small; - color: red; - font-style: italic; - } - /*border: 0.1rem solid black; - height: 50%; - width: 50%; - margin-left: auto; - margin-right: auto;*/ - .detail_row { float: left; border-width: 2px; @@ -511,7 +255,7 @@ color: rgb(10, 42, 77); background-color: white; font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-size: 0.75rem; + font-size: small; margin-bottom: 0.1rem; overflow: hidden; white-space: nowrap; @@ -520,129 +264,68 @@ } textarea { - padding: 0.1rem; + padding: 10px; max-width: 100%; width: 100%; + line-height: 1.5; border-radius: 5px; border: 1px solid #ccc; box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - font-size: 0.75rem; - } - input { - padding: 0.2rem; - max-width: 100%; - width: 100%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - font-size: 0.75rem; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; } - .div_left { - width: 20%; + .parter_div_gauche { float: left; - border-radius: 5px; - text-align: left; - height: 25rem; - } - - .div_right { - width: 80%; - float: left; - border-radius: 5px; - text-align: right; - //height: 25rem; - } - .pub { - float: left; - border-width: 2px; - width: 100%; - //height: 25rem; + border: 1px solid black; + border-width: 0.01rem; + width: 25%; + height: 30rem; margin: auto; - border-radius: 20px; - } - .slide_img { - width: 100% !important; - height: 25rem !important; - max-height: 25rem !important; - display: block !important; - box-shadow: 3px 5px 0px #ccc; + padding: 10px; + border-radius: 1rem; + margin-right: 0.5%; + background-color: #104277; + text-align: left; + color: white; } - .avis { - height: 55%; - margin-bottom: 1.5rem; - overflow: hidden; - overflow-wrap: break-word; - font-size: 0.9rem ; + .parter_div_droite { + float: left; + border: 1px solid black; + border-width: 0.01rem; + width: 74%; + height: auto; + margin: auto; + padding: 10px; + border-radius: 1rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; } - .commentarticleavis { - background-color: #eaecee; - padding: 1.2rem; - margin-top: 0.8rem; - margin-bottom: 0.8rem; - z-index: 55; - } - - .inputcommentarticle { - padding: 1px; - max-width: 90%; - width: 90%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1rem; - font-size: 0.75rem; - } - - .inputcommentarticle_d { - padding: 1px; - max-width: 90%; - width: 90%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1rem; - font-size: 0.75rem; - float: right; - } - - .inputcommentarticlemessage { - padding: 1px; - max-width: 100%; + .parter_div_droite_haut { + float: left; + border: 1px solid black; + border-width: 0.01rem; width: 100%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1rem; - font-size: 0.75rem; - margin-top: 1rem; + height: auto; + margin: auto; + padding: 10px; + border-radius: 1rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; + margin-bottom: 2rem; } - .btonPosterComment { - border-radius: 10rem; - background: #104277; - font-size: 0.75rem; + .left-pan { + padding-left: 7px; } - .quill { - height: 4rem !important; + .left-pan i { + padding-left: 10px; } - .mantine-gi9dos { - margin: 0px !important; - } - - .ql-editor { - padding: 0.2rem !important; - font-size: 0.75rem; - } - .div_row2 { float: left; @@ -651,7 +334,7 @@ width: 100%; margin-bottom: 0.1rem; //border-radius: 1rem; - //position: fixed; + z-index: 10; } @@ -667,45 +350,59 @@ .div_row_bas { float: right; + //border:1px solid black; + //border-width: 0.01rem; width: 100%; - height: 10rem; + //border-radius: 1rem; + height: 9rem; background-color: #e7f3fb; z-index: 10; - background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; + background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); } .div_mobile { - - - //position: absolute; - top: 8rem; - z-index: 1; - width: 95%; - margin-left: auto; - margin-right: auto; - + // position: absolute; + // top: 9rem; + z-index: 1; + width: 100%; + height: 100%; + padding-right: 2rem; + padding-left: 2rem; } .pieddepage { - z-index: 50; + z-index: 0; width: 100%; float: left; - margin-top: 25rem; + //margin-top: calc(100vh - 20%); + margin-top: 2rem; + } + + .menuPrincipal_bton { + margin-left: 0.9rem; + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + float: right; + cursor: pointer; + text-align: right; + font-size: small; + border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; } .menuPrincipal { + margin-left: 0.7rem; font-family: "Quicksand", "Signika", "sans-serif"; color: white; - width: 23%; float: right; cursor: pointer; - text-align: center; - font-size: 1rem; + text-align: right; + font-size: small; border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; + padding-top: 0.2rem; } .menuPrincipal:hover { @@ -728,17 +425,15 @@ .div_002 { float: left; - width: 50%; + width: 40%; text-align: left; - margin-top: 1rem; } .div_003 { float: left; - width: 50%; + width: 60%; text-align: right; color: white; - margin-top: 1.2rem; } .div_004 { @@ -749,6 +444,7 @@ margin-left: auto; margin-right: auto; float: left; + margin: 0.2rem; } .div_005 { @@ -756,14 +452,6 @@ float: left; } - .hilightsoustitre { - background: #113459; - color: #fff; - display: block; - font-size: 1rem; - margin-bottom: 0.5rem; - } - .text_head { color: white; font-family: "verdana", "Quicksand", "Signika", "sans-serif"; @@ -772,106 +460,46 @@ margin-left: auto; margin-right: auto; } + + .forma_rightbox { + float: right; + border-width: 2px; + width: 100%; + margin: auto; + padding: 0.3rem; + font-size: small; + text-align: left; + color: rgb(10, 42, 77); + cursor: pointer; + overflow-wrap: break-word; + border-bottom: #3b3e40; + border-bottom-width: 1px; + border-bottom-style: solid; + padding: 1rem; + } } @media only screen and (min-width: 992px) and (max-width: 1199px) { - .media_sociaux { - svg { - margin-top: 0 !important; - text-align: left !important; - } - - .SocialIcon { - height: 30px !important; - width: 30px !important; - } - } - .detail_container { - height: 200px; - padding: 0.3rem; - border-radius: 30px; - } - - .detail_container_affichage { - border: 1px solid; - box-shadow: 3px 5px 0px #ccc; - padding: 0.8rem; - text-align: left; - margin: auto; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-weight: var(--bs-body-font-weight); - line-height: var(--bs-body-line-height); - color: #3b3e40; - padding-bottom: 0rem; - text-align: justify; - background-color: white; - word-break: break-word; - height: 30rem; - max-height: 30rem; - line-height: 1.4rem; - font-size: 0.9rem; - } - - .detail_container_affichage_blog { - //border: 1px solid; - box-shadow: 3px 5px 0px #ccc; - padding: 0.8rem; - text-align: left; - margin: auto; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-weight: var(--bs-body-font-weight); - line-height: var(--bs-body-line-height); - color: #3b3e40; - padding-bottom: 0rem; - text-align: justify; - background-color: white; - word-break: break-word; - //height: 30rem; - //max-height: 30rem; - line-height: 1.4rem; - font-size: 0.9rem; - } - - .titre_article { - font-family: "verdana", "Quicksand", "Signika", sans-serif; - color: #619e31; - font-size: 1.2rem; - font-weight: bold; - text-align: center; - } - - .titre_date_publication { - font-family: "verdana", "Quicksand", "Signika", sans-serif; - color: #3b3e40; - font-size: xx-small; - font-weight: bold; - text-align: center; - } - - .tous_nos_article { + .rech_middlebox { + float: left; + border-width: 2px; width: 100%; - text-align: center; - font-size: 0.9rem; - font-style: italic; - margin-left: auto; - margin-right: auto; - margin-bottom: 0.5rem; + height: 100%; + margin: auto; + padding: 0.1rem; + background: white; + margin-right: 0.5%; + overflow-y: hidden !important; + border-radius: 0px; } - a:link { - text-decoration: none; - } + .detail_container { + width: 80%; + height: 200px; - a:visited { - text-decoration: none; - } - - a:hover { - text-decoration: underline; - } - - a:active { - text-decoration: underline; + margin: auto; + padding: 10px; + border-radius: 30px; } .containerBox { @@ -885,6 +513,7 @@ margin-left: 0px; margin-right: auto; max-width: 20%; + max-height: 3rem; } .detail_row { @@ -896,8 +525,8 @@ text-align: left; color: rgb(10, 42, 77); background-color: white; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - font-size: 0.9rem; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; margin-bottom: 0.1rem; overflow: hidden; white-space: nowrap; @@ -914,120 +543,7 @@ border: 1px solid #ccc; box-shadow: 1px 1px 1px #999; font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-size: medium; - } - input { - padding: 10px; - max-width: 100%; - width: 100%; - line-height: 1.5; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - font-size: 0.9rem; - } - .okUpdateData { - font-size: medium; - color: green; - font-style: italic; - } - - .koUpdateData { - font-size: medium; - color: red; - font-style: italic; - } - - .div_left { - width: 20%; - float: left; - border-radius: 5px; - text-align: left; - } - - .div_right { - width: 80%; - float: left; - border-radius: 5px; - text-align: right; - } - .pub { - float: left; - border-width: 2px; - width: 100%; - height: 30rem; - margin: auto; - border-radius: 30px; - } - - .avis { - height: 55%; - margin-bottom: 0.5rem; - overflow: hidden; - overflow-wrap: break-word; - font-size: 0.9rem ; - } - - .commentarticleavis { - background-color: #eaecee; - padding: 1.2rem; - margin-top: 0.8rem; - margin-bottom: 0.8rem; - z-index: 55; - } - - .inputcommentarticle { - padding: 1px; - max-width: 90%; - width: 90%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1.2rem; - font-size: 0.9rem; - } - - .inputcommentarticle_d { - padding: 1px; - max-width: 90%; - width: 90%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1.2rem; - font-size: 0.9rem; - float: right; - } - - .inputcommentarticlemessage { - padding: 1px; - max-width: 100%; - width: 100%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1.2rem; - font-size: 0.9rem; - margin-top: 1rem; - } - - .btonPosterComment { - border-radius: 10rem; - background: #104277; - font-size: 0.9rem; - } - - .quill { - height: 5rem !important; - } - - .ql-editor { - padding: 0.2rem !important; - font-size: 0.9rem; + font-size: small; } .div_row2 { @@ -1037,7 +553,7 @@ width: 100%; margin-bottom: 0.1rem; //border-radius: 1rem; - //position: fixed; + z-index: 10; } @@ -1053,42 +569,58 @@ .div_row_bas { float: right; + //border:1px solid black; + //border-width: 0.01rem; width: 100%; - height: 10rem; + //border-radius: 1rem; + height: 9rem; background-color: #e7f3fb; z-index: 10; - background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; + background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); } .div_mobile { - //position: absolute; - top: 8rem; - z-index: 1; - width: 90%; - margin-left: auto; - margin-right: auto; + // position: absolute; + // top: 9rem; + z-index: 1; + width: 100%; + height: 100%; + padding-right: 2rem; + padding-left: 2rem; } .pieddepage { - z-index: 50; + z-index: -1; width: 100%; float: left; - margin-top: 10rem; + margin-top: 2rem; + } + + .menuPrincipal_bton { + margin-left: 0.9rem; + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + float: right; + cursor: pointer; + text-align: right; + font-size: small; + border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; } .menuPrincipal { + margin-left: 0.8rem; font-family: "Quicksand", "Signika", "sans-serif"; color: white; - width: 20%; float: right; cursor: pointer; - text-align: center; - font-size: 1.1rem; + text-align: right; + font-size: small; border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; + padding-top: 0.2rem; } .menuPrincipal:hover { @@ -1113,7 +645,6 @@ float: left; width: 50%; text-align: left; - margin-top: 1rem; } .div_003 { @@ -1121,7 +652,6 @@ width: 50%; text-align: right; color: white; - margin-top: 1.2rem; } .div_004 { @@ -1132,6 +662,7 @@ margin-left: auto; margin-right: auto; float: left; + margin: 0.2rem; } .div_005 { @@ -1139,14 +670,6 @@ float: left; } - .hilightsoustitre { - background: #113459; - color: #fff; - display: block; - font-size: 1rem; - margin-bottom: 0.5rem; - } - .text_head { color: white; font-family: "verdana", "Quicksand", "Signika", "sans-serif"; @@ -1155,51 +678,50 @@ margin-left: auto; margin-right: auto; } + + .forma_rightbox { + float: right; + border-width: 2px; + width: 100%; + margin: auto; + padding: 0.3rem; + font-size: small; + text-align: left; + color: rgb(10, 42, 77); + cursor: pointer; + overflow-wrap: break-word; + border-bottom: #3b3e40; + border-bottom-width: 1px; + border-bottom-style: solid; + padding: 1rem; + } } @media only screen and (min-width: 1200px) { - .btonPosterComment { - border-radius: 10rem; - background: #104277; - font-size: 1rem; - } - - .media_sociaux { - margin-top: 0.3rem; - margin-right: 0.2rem; - svg { - margin-top: 0 !important; - text-align: left !important; - } - - .SocialIcon { - height: 35px !important; - width: 35px !important; - } - } - - .okUpdateData { - font-size: large; - color: green; - font-style: italic; - } - - .koUpdateData { - font-size: large; - color: red; - font-style: italic; + .rech_middlebox { + float: left; + border-width: 2px; + width: 100%; + height: 100%; + margin: auto; + padding: 0.1rem; + border-radius: 30px; + margin-right: 0.5%; + overflow-y: hidden !important; } .detail_container { + width: 80%; height: 200px; - padding: 0.3rem; + + margin: auto; + padding: 10px; border-radius: 30px; } .containerBox { position: relative; display: inline-block; - margin-top: 1rem; } .img_logo { @@ -1208,7 +730,7 @@ margin-left: 0px; margin-right: auto; max-width: 18%; - max-height: 5rem; + max-height: 3rem; } .detail_row { @@ -1221,7 +743,7 @@ color: rgb(10, 42, 77); background-color: white; font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-size: 0.9rem; + font-size: small; margin-bottom: 0.1rem; overflow: hidden; white-space: nowrap; @@ -1238,191 +760,7 @@ border: 1px solid #ccc; box-shadow: 1px 1px 1px #999; font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-size: medium; - } - - input { - padding: 10px; - max-width: 100%; - width: 100%; - line-height: 1.5; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - font-size: 0.9rem; - } - - .titre_article { - font-family: "verdana", "Quicksand", "Signika", sans-serif; - color: #619e31; - font-size: 1.4rem; - font-weight: bold; - text-align: center; - margin-top: 1rem; - } - - .titre_date_publication { - font-family: "verdana", "Quicksand", "Signika", sans-serif; - color: #3b3e40; - font-size: xx-small; - font-weight: bold; - text-align: center; - } - - .detail_container_affichage { - border: 1px solid; - box-shadow: 3px 5px 0px #ccc; - padding: 0.8rem; - text-align: left; - margin: auto; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-weight: var(--bs-body-font-weight); - line-height: var(--bs-body-line-height); - color: #3b3e40; - padding-bottom: 0rem; - text-align: justify; - background-color: white; - word-break: break-word; - height: 30rem; - max-height: 30rem; - line-height: 1.5rem; - font-size: 1rem; - } - - .detail_container_affichage_blog { - //border: 1px solid; - box-shadow: 3px 5px 0px #ccc; - padding: 0.8rem; - text-align: left; - margin: auto; - font-family: "verdana", "Quicksand", "Signika", sans-serif; - font-weight: var(--bs-body-font-weight); - line-height: var(--bs-body-line-height); - color: #3b3e40; - padding-bottom: 0rem; - text-align: justify; - background-color: white; - word-break: break-word; - //height: 30rem; - //max-height: 30rem; - line-height: 1.5rem; - font-size: 1rem; - } - - .tous_nos_article { - width: 100%; - text-align: center; - font-size: 1rem; - font-style: italic; - margin-left: auto; - margin-right: auto; - margin-bottom: 0.5rem; - } - - a:link { - text-decoration: none; - } - - a:visited { - text-decoration: none; - } - - a:hover { - text-decoration: underline; - } - - a:active { - text-decoration: underline; - } - - - .div_left { - width: 20%; - float: left; - border-radius: 5px; - text-align: left; - } - - .div_right { - width: 80%; - float: left; - border-radius: 5px; - } - .pub { - float: left; - border-width: 2px; - width: 100%; - height: 30rem; - margin: auto; - border-radius: 30px; - } - - .avis { - height: 50%; - margin-bottom: 0.5rem; - overflow: hidden; - overflow-wrap: break-word; - font-size: 0.9rem ; - } - - .commentarticleavis { - background-color: #eaecee; - padding: 1.5rem; - margin-top: 1rem; - margin-bottom: 1rem; - z-index: 55; - } - - .inputcommentarticle { - padding: 1px; - max-width: 90%; - width: 90%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1.5rem; - font-size: 1rem; - } - - .inputcommentarticle_d { - padding: 1px; - max-width: 90%; - width: 90%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1.5rem; - font-size: 1rem; - float: right; - } - - .inputcommentarticlemessage { - padding: 1px; - max-width: 100%; - width: 100%; - border-radius: 5px; - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #999; - font-family: "verdana", "Quicksand", "Signika", "sans-serif"; - line-height: 1.5rem; - font-size: 1rem; - margin-top: 1rem; - } - - .quill { - height: 10rem !important; - } - - .mantine-gi9dos { - margin: 0px !important; - } - - .ql-editor { - padding: 0.2rem !important; - font-size: 1rem; + font-size: small; } .div_row2 { @@ -1432,7 +770,7 @@ width: 100%; margin-bottom: 0.1rem; //border-radius: 1rem; - //position: fixed; + // position: fixed; z-index: 10; } @@ -1449,10 +787,11 @@ .div_row_bas { float: right; width: 100%; - height: 10rem; + height: 9rem; background-color: #e7f3fb; z-index: 10; - background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat; + background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); + -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; @@ -1460,30 +799,47 @@ } .div_mobile { - //position: absolute; - top: 8rem; + // position: absolute; + // top: 9rem; z-index: 1; - width: 90%; - margin-left: auto; - margin-right: auto; + width: 100%; + height: 100%; + padding-right: 2rem; + padding-left: 2rem; } .pieddepage { - z-index: 50; + z-index: 0; width: 100%; float: left; - margin-top: 10rem; + margin-top: 2rem; + } + + .menuPrincipal_bton { + margin-left: 0.9rem; + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + float: right; + cursor: pointer; + text-align: right; + font-size: small; + border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; } .menuPrincipal { + margin-left: 1rem; font-family: "Quicksand", "Signika", "sans-serif"; color: white; - width: 20%; float: right; cursor: pointer; - text-align: center; - font-size: 1.1rem; + text-align: right; + font-size: small; border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; + padding-top: 0.2rem; } .menuPrincipal:hover { @@ -1508,7 +864,6 @@ float: left; width: 50%; text-align: left; - margin-top: 1rem; } .div_003 { @@ -1516,19 +871,17 @@ width: 50%; text-align: right; color: white; - margin-top: 1.2rem; - margin-bottom: 2rem; } .div_004 { color: white; width: 100%; - height: 0.1rem; + height: 0.25rem; opacity: 100%; margin-left: auto; margin-right: auto; float: left; - margin: 0.5rem + margin: 0.2rem; } .div_005 { @@ -1536,14 +889,6 @@ float: left; } - .hilightsoustitre { - background: #113459; - color: #fff; - display: block; - font-size: 1rem; - margin-bottom: 0.5rem; - } - .text_head { color: white; font-family: "verdana", "Quicksand", "Signika", "sans-serif"; @@ -1552,5 +897,207 @@ margin-left: auto; margin-right: auto; } + + } -} + + .div_row { + width: 100%; + float: left; + } + + // end media + + .Background-header { + position: absolute; + width: 100%; + height: 280px; + left: 0px; + + background: #FFFAED; + } + + /* Title */ + + .Title { + padding: 0px; + height: 80px; + left: 549px; + margin-top: 20px; + width: 50%; + margin-left: 25%; + } + + + /* Support */ + + .Support { + height: 20px; + font-family: "Albert Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 20px; + text-align: center; + text-transform: uppercase; + color: #0A043C; + } + + + .besoin_aide { + width: 100%; + + font-family: "Albert Sans"; + font-style: normal; + font-weight: 700; + font-size: 50px; + line-height: 60px; + text-align: center; + letter-spacing: -1px; + color: #20BFA9; + } + + .detail_text_aide { + height: 44px; + font-family: Verdana, Georgia, Arial; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 22px; + text-align: center; + color: #0A043C; + } + + .barre_recherche { + height: 44px; + font-family: Verdana, Georgia, Arial; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 22px; + text-align: center; + color: #0A043C; + margin-top: 2rem; + } + + .aricles_a_la_une { + width: 100%; + float: left; + margin-top: 1rem; + font-size: small; + letter-spacing: 1px; + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 30px; + color: #4B4B4B; + text-align: justify; + + } + + .titre_date_publication { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + color: #3b3e40; + font-size: xx-small; + font-weight: bold; + text-align: center; + } + + .liste_articles { + margin: auto; + width: 70%; + padding: 10px; + + } + + .img_article { + width: 40%; + float: left; + padding: 5px; + } + + .desc_article { + width: 100%; + float: left; + padding: 5px; + margin-bottom: 7rem; + } + + + + .buton_ch22 { + border: 2px solid white; + background-color: transparent; + color: white; + padding: 0px; + font-size: 16px; + cursor: pointer; + font-size: small; + border-radius: 4rem; + width: 6rem; + min-width: 6rem; + height: 1.7rem; + text-align: left; + } + + .forma_rightbox { + float: right; + border-width: 2px; + width: 100%; + margin: auto; + padding: 0.5rem; + font-size: small; + text-align: left; + color: rgb(10, 42, 77); + cursor: pointer; + overflow-wrap: break-word; + border-bottom: #3b3e40; + border-bottom-width: 1px; + border-bottom-style: solid; + padding: 1rem; + } + + .titre_article { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + color: #619e31; + font-size: 1.4rem; + font-weight: bold; + text-align: center; + margin-top: 1rem; + height: 5rem; + } + + .avis { + margin-bottom: 0.5rem; + overflow: hidden; + overflow-wrap: break-word; + + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 20px; + /* or 167% */ + + /* Bold Grey */ + color: #4B4B4B; + + + /* Inside auto layout */ + flex: none; + order: 1; + flex-grow: 0; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + + + } + + .block_centrer { + margin: auto; + width: 70%; + border: 3px solid #73AD21; + padding: 10px; + } + + +} \ No newline at end of file diff --git a/src/styles/components/_displaydetailarticle_new_v2.scss b/src/styles/components/_displaydetailarticle_new_v2.scss new file mode 100644 index 0000000..144ae76 --- /dev/null +++ b/src/styles/components/_displaydetailarticle_new_v2.scss @@ -0,0 +1,1556 @@ +.displaydetailarticle_new_v2 { + .h1_transparent { + color: transparent; + //color: red; + font-size: 0.1rem; + } + .default-nav { + display: none !important; + } + + .slide_img { + width: 100% !important; + height: 30rem !important; + max-height: 30rem !important; + display: block !important; + box-shadow: 3px 5px 0px #ccc; + } + + @media only screen and (max-width: 600px) { + + .media_sociaux { + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 25px !important; + width: 25px !important; + } + } + + .okUpdateData { + font-size: small; + color: green; + font-style: italic; + } + + .koUpdateData { + font-size: small; + color: red; + font-style: italic; + } + + .detail_container { + width: 100%; + height: 200px; + padding: 0.2rem; + border-radius: 30px; + } + .titre_article { + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + color: #619e31; + font-size: small; + font-weight: bold; + text-align: center; + } + + .titre_date_publication { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + color: #3b3e40; + font-size: xx-small; + font-weight: bold; + text-align: center; + } + + .tous_nos_article { + width: 100%; + text-align: center; + font-size: 0.7rem; + font-style: italic; + margin-left: auto; + margin-right: auto; + margin-bottom: 0.5rem; + } + + a:link { + text-decoration: none; + } + + a:visited { + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + + a:active { + text-decoration: underline; + } + + .detail_container_affichage { + width: 100%; + text-align: left; + margin: auto; + padding: 0.8rem; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-weight: var(--bs-body-font-weight); + line-height: var(--bs-body-line-height); + color: #3b3e40; + text-align: justify; + padding-bottom: 1rem; + background-color: white; + word-break: break-word; + line-height: 1.4rem; + font-size: small; + } + + .detail_container_affichage_blog { + width: 100%; + text-align: left; + margin: auto; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-weight: var(--bs-body-font-weight); + line-height: var(--bs-body-line-height); + color: #3b3e40; + text-align: justify; + padding-bottom: 1rem; + background-color: white; + word-break: break-word; + line-height: 1.4rem; + font-size: small; + } + .containerBox { + position: relative; + display: inline-block; + } + + .img_logo { + display: block; + height: auto; + margin-left: auto; + margin-right: auto; + max-width: 50%; + } + + .detail_row { + float: left; + border-width: 2px; + margin: auto; + padding: 0.2rem; + border-radius: 0.5rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: small; + margin-bottom: 0.1rem; + overflow: hidden; + white-space: nowrap; + width: 100%; + margin: 0 auto; + } + + textarea { + padding: 0.2rem; + max-width: 100%; + width: 100%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 0.7rem; + } + + input { + padding: 0.2rem; + max-width: 100%; + width: 100%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 0.75rem; + } + + .div_left { + display: none; + } + + .div_right { + width: 100%; + float: left; + border-radius: 5px; + text-align: right; + } + + .avis { + height: 55%; + margin-bottom: 1.5rem; + overflow: hidden; + overflow-wrap: break-word; + } + + .commentarticleavis { + background-color: #eaecee; + padding: 1.2rem; + margin-top: 0.8rem; + margin-bottom: 0.8rem; + z-index: 55; + } + + .inputcommentarticle { + padding: 1px; + max-width: 90%; + width: 90%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1rem; + font-size: 0.75rem; + } + + .inputcommentarticle_d { + padding: 1px; + max-width: 90%; + width: 90%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1rem; + font-size: 0.75rem; + float: right; + } + + .inputcommentarticlemessage { + padding: 1px; + max-width: 100%; + width: 100%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1rem; + font-size: 0.75rem; + margin-top: 1rem; + } + + .btonPosterComment { + border-radius: 10rem; + background: #104277; + font-size: 0.75rem; + } + + .quill { + height: 10rem !important; + } + .mantine-gi9dos { + margin: 0px !important; + } + + .ql-editor { + padding: 0.2rem !important; + font-size: small; + } + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + //position: fixed; + z-index: 10; + top: 0px; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + z-index: 10; + background-color: #e7f3fb; + background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); + } + + .div_mobile { + position: relative; + //border:1px solid black; + //border-width: 0.01rem; + //background-color: #e6ebe2; + top: 5rem; + z-index: 1; + width: 98%; + + margin: 0.3rem; + margin-left: auto; + margin-right: auto; + } + + .pieddepage { + z-index: 50; + width: 100%; + float: left; + margin-top: 5rem; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 20%; + float: right; + font-weight: 500; + cursor: pointer; + } + + .menuPrincipal:hover { + color: #81bc3a; + font-weight: bold; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.2rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + width: 50%; + text-align: center; + margin-left: auto; + margin-right: auto; + } + + .div_003 { + display: none; + } + + .div_004 { + color: white; + width: 100%; + height: 0.1rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + margin-bottom: 0.2rem; + margin-top: 0.2rem; + } + + .div_005 { + width: 95%; + margin-left: auto; + margin-right: auto; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: small; + width: 90%; + margin-left: auto; + margin-right: auto; + } + } + + @media only screen and (min-width: 601px) and (max-width: 991px) { + .media_sociaux { + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 25px !important; + width: 25px !important; + } + } + .detail_container { + height: 200px; + padding: 0.3rem; + border-radius: 30px; + } + .titre_article { + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + color: #619e31; + font-size: 1.2rem; + font-weight: bold; + text-align: center; + } + + .titre_date_publication { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + color: #3b3e40; + font-size: xx-small; + font-weight: bold; + text-align: center; + } + + .tous_nos_article { + width: 100%; + text-align: center; + font-size: 0.9rem; + font-style: italic; + margin-left: auto; + margin-right: auto; + margin-bottom: 0.5rem; + } + + a:link { + text-decoration: none; + } + + a:visited { + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + + a:active { + text-decoration: underline; + } + + .detail_container_affichage { + border: 1px solid; + box-shadow: 3px 5px 0px #ccc; + padding: 0.8rem; + text-align: left; + padding: 10px; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + font-weight: var(--bs-body-font-weight); + line-height: var(--bs-body-line-height); + color: #3b3e40; + padding-bottom: 0rem; + text-align: justify; + background-color: white; + word-break: break-word; + height: 25rem; + max-height: 25rem; + line-height: 1.2rem; + font-size: 0.85rem; + } + + .detail_container_affichage_blog { + //border: 1px solid; + box-shadow: 3px 5px 0px #ccc; + padding: 0.8rem; + text-align: left; + padding: 10px; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + font-weight: var(--bs-body-font-weight); + line-height: var(--bs-body-line-height); + color: #3b3e40; + padding-bottom: 0rem; + text-align: justify; + background-color: white; + word-break: break-word; + //height: 25rem; + //max-height: 25rem; + line-height: 1.2rem; + font-size: 0.85rem; + } + .containerBox { + position: relative; + display: inline-block; + } + + .img_logo { + display: block; + height: auto; + margin-left: 0px; + margin-right: auto; + max-width: 30%; + } + + .koUpdateData { + font-size: small; + color: red; + font-style: italic; + } + /*border: 0.1rem solid black; + height: 50%; + width: 50%; + margin-left: auto; + margin-right: auto;*/ + + .detail_row { + float: left; + border-width: 2px; + margin: auto; + padding: 0.2rem; + border-radius: 0.5rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: 0.75rem; + margin-bottom: 0.1rem; + overflow: hidden; + white-space: nowrap; + width: 100%; + margin: 0 auto; + } + + textarea { + padding: 0.1rem; + max-width: 100%; + width: 100%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 0.75rem; + } + input { + padding: 0.2rem; + max-width: 100%; + width: 100%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 0.75rem; + } + + .div_left { + width: 20%; + float: left; + border-radius: 5px; + text-align: left; + height: 25rem; + } + + .div_right { + width: 80%; + float: left; + border-radius: 5px; + text-align: right; + //height: 25rem; + } + .pub { + float: left; + border-width: 2px; + width: 100%; + //height: 25rem; + margin: auto; + border-radius: 20px; + } + .slide_img { + width: 100% !important; + height: 25rem !important; + max-height: 25rem !important; + display: block !important; + box-shadow: 3px 5px 0px #ccc; + } + + .avis { + height: 55%; + margin-bottom: 1.5rem; + overflow: hidden; + overflow-wrap: break-word; + font-size: 0.9rem ; + } + + .commentarticleavis { + background-color: #eaecee; + padding: 1.2rem; + margin-top: 0.8rem; + margin-bottom: 0.8rem; + z-index: 55; + } + + .inputcommentarticle { + padding: 1px; + max-width: 90%; + width: 90%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1rem; + font-size: 0.75rem; + } + + .inputcommentarticle_d { + padding: 1px; + max-width: 90%; + width: 90%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1rem; + font-size: 0.75rem; + float: right; + } + + .inputcommentarticlemessage { + padding: 1px; + max-width: 100%; + width: 100%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1rem; + font-size: 0.75rem; + margin-top: 1rem; + } + + .btonPosterComment { + border-radius: 10rem; + background: #104277; + font-size: 0.75rem; + } + + .quill { + height: 4rem !important; + } + .mantine-gi9dos { + margin: 0px !important; + } + + .ql-editor { + padding: 0.2rem !important; + font-size: 0.75rem; + } + + + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + //position: fixed; + z-index: 10; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + width: 100%; + height: 10rem; + background-color: #e7f3fb; + z-index: 10; + background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + } + + .div_mobile { + + + //position: absolute; + top: 8rem; + z-index: 1; + width: 95%; + margin-left: auto; + margin-right: auto; + + } + + .pieddepage { + z-index: 50; + width: 100%; + float: left; + margin-top: 25rem; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 23%; + float: right; + cursor: pointer; + text-align: center; + font-size: 1rem; + border: 2px solid transparent; + } + + .menuPrincipal:hover { + color: #81bc3a; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.1rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + float: left; + width: 50%; + text-align: left; + margin-top: 1rem; + } + + .div_003 { + float: left; + width: 50%; + text-align: right; + color: white; + margin-top: 1.2rem; + } + + .div_004 { + color: white; + width: 100%; + height: 0.1rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + } + + .div_005 { + width: 100%; + float: left; + } + + .hilightsoustitre { + background: #113459; + color: #fff; + display: block; + font-size: 1rem; + margin-bottom: 0.5rem; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 1.1rem; + width: 90%; + margin-left: auto; + margin-right: auto; + } + } + + @media only screen and (min-width: 992px) and (max-width: 1199px) { + .media_sociaux { + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 30px !important; + width: 30px !important; + } + } + .detail_container { + height: 200px; + padding: 0.3rem; + border-radius: 30px; + } + + .detail_container_affichage { + border: 1px solid; + box-shadow: 3px 5px 0px #ccc; + padding: 0.8rem; + text-align: left; + margin: auto; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-weight: var(--bs-body-font-weight); + line-height: var(--bs-body-line-height); + color: #3b3e40; + padding-bottom: 0rem; + text-align: justify; + background-color: white; + word-break: break-word; + height: 30rem; + max-height: 30rem; + line-height: 1.4rem; + font-size: 0.9rem; + } + + .detail_container_affichage_blog { + //border: 1px solid; + box-shadow: 3px 5px 0px #ccc; + padding: 0.8rem; + text-align: left; + margin: auto; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-weight: var(--bs-body-font-weight); + line-height: var(--bs-body-line-height); + color: #3b3e40; + padding-bottom: 0rem; + text-align: justify; + background-color: white; + word-break: break-word; + //height: 30rem; + //max-height: 30rem; + line-height: 1.4rem; + font-size: 0.9rem; + } + + .titre_article { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + color: #619e31; + font-size: 1.2rem; + font-weight: bold; + text-align: center; + } + + .titre_date_publication { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + color: #3b3e40; + font-size: xx-small; + font-weight: bold; + text-align: center; + } + + .tous_nos_article { + width: 100%; + text-align: center; + font-size: 0.9rem; + font-style: italic; + margin-left: auto; + margin-right: auto; + margin-bottom: 0.5rem; + } + + a:link { + text-decoration: none; + } + + a:visited { + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + + a:active { + text-decoration: underline; + } + + .containerBox { + position: relative; + display: inline-block; + } + + .img_logo { + display: block; + height: auto; + margin-left: 0px; + margin-right: auto; + max-width: 20%; + } + + .detail_row { + float: left; + border-width: 2px; + margin: auto; + padding: 0.2rem; + border-radius: 0.5rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 0.9rem; + margin-bottom: 0.1rem; + overflow: hidden; + white-space: nowrap; + width: 100%; + margin: 0 auto; + } + + textarea { + padding: 10px; + max-width: 100%; + width: 100%; + line-height: 1.5; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: medium; + } + input { + padding: 10px; + max-width: 100%; + width: 100%; + line-height: 1.5; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 0.9rem; + } + .okUpdateData { + font-size: medium; + color: green; + font-style: italic; + } + + .koUpdateData { + font-size: medium; + color: red; + font-style: italic; + } + + .div_left { + width: 20%; + float: left; + border-radius: 5px; + text-align: left; + } + + .div_right { + width: 80%; + float: left; + border-radius: 5px; + text-align: right; + } + .pub { + float: left; + border-width: 2px; + width: 100%; + height: 30rem; + margin: auto; + border-radius: 30px; + } + + .avis { + height: 55%; + margin-bottom: 0.5rem; + overflow: hidden; + overflow-wrap: break-word; + font-size: 0.9rem ; + } + + .commentarticleavis { + background-color: #eaecee; + padding: 1.2rem; + margin-top: 0.8rem; + margin-bottom: 0.8rem; + z-index: 55; + } + + .inputcommentarticle { + padding: 1px; + max-width: 90%; + width: 90%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1.2rem; + font-size: 0.9rem; + } + + .inputcommentarticle_d { + padding: 1px; + max-width: 90%; + width: 90%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1.2rem; + font-size: 0.9rem; + float: right; + } + + .inputcommentarticlemessage { + padding: 1px; + max-width: 100%; + width: 100%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1.2rem; + font-size: 0.9rem; + margin-top: 1rem; + } + + .btonPosterComment { + border-radius: 10rem; + background: #104277; + font-size: 0.9rem; + } + + .quill { + height: 5rem !important; + } + + .ql-editor { + padding: 0.2rem !important; + font-size: 0.9rem; + } + + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + //position: fixed; + z-index: 10; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + width: 100%; + height: 10rem; + background-color: #e7f3fb; + z-index: 10; + background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + } + + .div_mobile { + //position: absolute; + top: 8rem; + z-index: 1; + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .pieddepage { + z-index: 50; + width: 100%; + float: left; + margin-top: 10rem; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 20%; + float: right; + cursor: pointer; + text-align: center; + font-size: 1.1rem; + border: 2px solid transparent; + } + + .menuPrincipal:hover { + color: #81bc3a; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.1rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + float: left; + width: 50%; + text-align: left; + margin-top: 1rem; + } + + .div_003 { + float: left; + width: 50%; + text-align: right; + color: white; + margin-top: 1.2rem; + } + + .div_004 { + color: white; + width: 100%; + height: 0.1rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + } + + .div_005 { + width: 100%; + float: left; + } + + .hilightsoustitre { + background: #113459; + color: #fff; + display: block; + font-size: 1rem; + margin-bottom: 0.5rem; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 1.1rem; + width: 90%; + margin-left: auto; + margin-right: auto; + } + } + + @media only screen and (min-width: 1200px) { + .btonPosterComment { + border-radius: 10rem; + background: #104277; + font-size: 1rem; + } + + .media_sociaux { + margin-top: 0.3rem; + margin-right: 0.2rem; + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 35px !important; + width: 35px !important; + } + } + + .okUpdateData { + font-size: large; + color: green; + font-style: italic; + } + + .koUpdateData { + font-size: large; + color: red; + font-style: italic; + } + + .detail_container { + height: 200px; + padding: 0.3rem; + border-radius: 30px; + } + + .containerBox { + position: relative; + display: inline-block; + margin-top: 1rem; + } + + .img_logo { + display: block; + height: auto; + margin-left: 0px; + margin-right: auto; + max-width: 18%; + max-height: 5rem; + } + + .detail_row { + float: left; + border-width: 2px; + margin: auto; + padding: 0.2rem; + border-radius: 0.5rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: 0.9rem; + margin-bottom: 0.1rem; + overflow: hidden; + white-space: nowrap; + width: 100%; + margin: 0 auto; + } + + textarea { + padding: 10px; + max-width: 100%; + width: 100%; + line-height: 1.5; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: medium; + } + + input { + padding: 10px; + max-width: 100%; + width: 100%; + line-height: 1.5; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 0.9rem; + } + + .titre_article { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + color: #619e31; + font-size: 1.4rem; + font-weight: bold; + text-align: center; + margin-top: 1rem; + } + + .titre_date_publication { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + color: #3b3e40; + font-size: xx-small; + font-weight: bold; + text-align: center; + } + + .detail_container_affichage { + border: 1px solid; + box-shadow: 3px 5px 0px #ccc; + padding: 0.8rem; + text-align: left; + margin: auto; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-weight: var(--bs-body-font-weight); + line-height: var(--bs-body-line-height); + color: #3b3e40; + padding-bottom: 0rem; + text-align: justify; + background-color: white; + word-break: break-word; + height: 30rem; + max-height: 30rem; + line-height: 1.5rem; + font-size: 1rem; + } + + .detail_container_affichage_blog { + //border: 1px solid; + box-shadow: 3px 5px 0px #ccc; + padding: 0.8rem; + text-align: left; + margin: auto; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-weight: var(--bs-body-font-weight); + line-height: var(--bs-body-line-height); + color: #3b3e40; + padding-bottom: 0rem; + text-align: justify; + background-color: white; + word-break: break-word; + //height: 30rem; + //max-height: 30rem; + line-height: 1.5rem; + font-size: 1rem; + } + + .tous_nos_article { + width: 100%; + text-align: center; + font-size: 1rem; + font-style: italic; + margin-left: auto; + margin-right: auto; + margin-bottom: 0.5rem; + } + + a:link { + text-decoration: none; + } + + a:visited { + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + + a:active { + text-decoration: underline; + } + + + .div_left { + width: 20%; + float: left; + border-radius: 5px; + text-align: left; + } + + .div_right { + width: 80%; + float: left; + border-radius: 5px; + } + .pub { + float: left; + border-width: 2px; + width: 100%; + height: 30rem; + margin: auto; + border-radius: 30px; + } + + .avis { + height: 50%; + margin-bottom: 0.5rem; + overflow: hidden; + overflow-wrap: break-word; + font-size: 0.9rem ; + } + + .commentarticleavis { + background-color: #eaecee; + padding: 1.5rem; + margin-top: 1rem; + margin-bottom: 1rem; + z-index: 55; + } + + .inputcommentarticle { + padding: 1px; + max-width: 90%; + width: 90%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1.5rem; + font-size: 1rem; + } + + .inputcommentarticle_d { + padding: 1px; + max-width: 90%; + width: 90%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1.5rem; + font-size: 1rem; + float: right; + } + + .inputcommentarticlemessage { + padding: 1px; + max-width: 100%; + width: 100%; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + line-height: 1.5rem; + font-size: 1rem; + margin-top: 1rem; + } + + .quill { + height: 10rem !important; + } + + .mantine-gi9dos { + margin: 0px !important; + } + + .ql-editor { + padding: 0.2rem !important; + font-size: 1rem; + } + + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + //position: fixed; + z-index: 10; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + width: 100%; + height: 10rem; + background-color: #e7f3fb; + z-index: 10; + background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + } + + .div_mobile { + //position: absolute; + top: 8rem; + z-index: 1; + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .pieddepage { + z-index: 50; + width: 100%; + float: left; + margin-top: 10rem; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 20%; + float: right; + cursor: pointer; + text-align: center; + font-size: 1.1rem; + border: 2px solid transparent; + } + + .menuPrincipal:hover { + color: #81bc3a; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.1rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + float: left; + width: 50%; + text-align: left; + margin-top: 1rem; + } + + .div_003 { + float: left; + width: 50%; + text-align: right; + color: white; + margin-top: 1.2rem; + margin-bottom: 2rem; + } + + .div_004 { + color: white; + width: 100%; + height: 0.1rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + margin: 0.5rem + } + + .div_005 { + width: 100%; + float: left; + } + + .hilightsoustitre { + background: #113459; + color: #fff; + display: block; + font-size: 1rem; + margin-bottom: 0.5rem; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 1.2rem; + width: 90%; + margin-left: auto; + margin-right: auto; + } + } +} diff --git a/src/styles/components/_produitsservices.scss b/src/styles/components/_produitsservices.scss index 7c4c03e..cf1e006 100644 --- a/src/styles/components/_produitsservices.scss +++ b/src/styles/components/_produitsservices.scss @@ -553,7 +553,95 @@ height: 0.5rem; } - + .btn_abonnement_v2 { + white-space: nowrap; + padding-left: 0px; + padding-right: 0px; + color: white; + border: "solid 1px"; + height: 4rem; + width: 80%; + font-size: 18px; + font-family: Verdana, Georgia, Arial; + background: #81BC3A; + } + + + .div_ul_detail_pack { + color: #424f61; + line-height: 2; + font-size: 14px; + font-family: Verdana, Georgia, Arial; + } + + .div_block_header { + font-family: Verdana, Georgia, Arial; + color: #424f61; + text-align: center; + font-size: 1.5rem; + justify-content: center; + } + + .div_block_prix { + font-family: Verdana, Georgia, Arial; + color: #424f61; + text-align: center; + font-size: 1.4rem; + justify-content: center; + } + + .div_block_fonction { + width: 100%; + float: left; + } + + .div_block_fonction_detail { + width: 100%; + float: left; + + + // -webkit-box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0); + // box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0); + background: #FFF; + min-height: 25rem; + // padding: 15px; + border-radius: 8px; + border: 2px solid #708f8f; + margin-bottom: 5px; + } + + .div_block_fonction_detail_titre { + font-family: Verdana, Georgia, Arial; + color: #073462; + line-Height: 29px; + font-size: 20px; + margin-bottom: 5px; + width: 100%; + font-weight: 400; + text-align: center; + letter-spacing: 1px; + height: 5rem; + //padding-left: 2rem; + } + + .div_block_fonction_detail_img { + width: 100%; + float: left; + } + + .div_block_fonction_detail_img_inside { + width: 4rem; + } + + + .div_block_fonction_detail_desc { + width: 100%; + float: left; + text-align: left; + line-height: 1.8em; + font-size: small; + color: #464646 + } } @media only screen and (min-width: 601px) and (max-width: 991px) { @@ -1143,7 +1231,94 @@ .block_vide_produit_service { height: 7rem; } - + .btn_abonnement_v2 { + white-space: nowrap; + padding-left: 0px; + padding-right: 0px; + color: white; + border: "solid 1px"; + height: 4rem; + width: 80%; + font-size: 18px; + font-family: Verdana, Georgia, Arial; + background: #81BC3A; + } + + + .div_ul_detail_pack { + color: #424f61; + line-height: 2; + font-size: 14px; + font-family: Verdana, Georgia, Arial; + } + + .div_block_header { + font-family: Verdana, Georgia, Arial; + color: #424f61; + text-align: center; + font-size: 1.8rem; + justify-content: center; + } + + .div_block_prix { + font-family: Verdana, Georgia, Arial; + color: #424f61; + text-align: center; + font-size: 1.24rem; + justify-content: center; + } + + .div_block_fonction { + width: 100%; + float: left; + } + + .div_block_fonction_detail { + width: 30%; + float: left; + + margin: 10px; + // -webkit-box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0); + // box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0); + background: #FFF; + min-height: 25rem; + // padding: 15px; + border-radius: 8px; + border: 2px solid #708f8f; + } + + .div_block_fonction_detail_titre { + font-family: Verdana, Georgia, Arial; + color: #073462; + line-Height: 29px; + font-size: 20px; + margin-bottom: 5px; + width: 100%; + font-weight: 400; + text-align: center; + letter-spacing: 1px; + height: 5rem; + //padding-left: 2rem; + } + + .div_block_fonction_detail_img { + width: 100%; + float: left; + } + + .div_block_fonction_detail_img_inside { + width: 4rem; + } + + + .div_block_fonction_detail_desc { + width: 100%; + float: left; + text-align: left; + line-height: 1.8em; + font-size: small; + color: #464646 + } } @media only screen and (min-width: 992px) and (max-width: 1199px) { @@ -1737,7 +1912,94 @@ .block_vide_produit_service { height: 8rem; } - + .btn_abonnement_v2 { + white-space: nowrap; + padding-left: 0px; + padding-right: 0px; + color: white; + border: "solid 1px"; + height: 4rem; + width: 80%; + font-size: 18px; + font-family: Verdana, Georgia, Arial; + background: #81BC3A; + } + + + .div_ul_detail_pack { + color: #424f61; + line-height: 2; + font-size: 14px; + font-family: Verdana, Georgia, Arial; + } + + .div_block_header { + font-family: Verdana, Georgia, Arial; + color: #424f61; + text-align: center; + font-size: 2.3125rem; + justify-content: center; + } + + .div_block_prix { + font-family: Verdana, Georgia, Arial; + color: #424f61; + text-align: center; + font-size: 1.8rem; + justify-content: center; + } + + .div_block_fonction { + width: 100%; + float: left; + } + + .div_block_fonction_detail { + width: 30%; + float: left; + + margin: 10px; + // -webkit-box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0); + // box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0); + background: #FFF; + min-height: 25rem; + // padding: 15px; + border-radius: 8px; + border: 2px solid #708f8f; + } + + .div_block_fonction_detail_titre { + font-family: Verdana, Georgia, Arial; + color: #073462; + line-Height: 29px; + font-size: 20px; + margin-bottom: 5px; + width: 100%; + font-weight: 400; + text-align: center; + letter-spacing: 1px; + height: 5rem; + //padding-left: 2rem; + } + + .div_block_fonction_detail_img { + width: 100%; + float: left; + } + + .div_block_fonction_detail_img_inside { + width: 4rem; + } + + + .div_block_fonction_detail_desc { + width: 100%; + float: left; + text-align: left; + line-height: 1.8em; + font-size: small; + color: #464646 + } } @media only screen and (min-width: 1200px) { @@ -2325,98 +2587,101 @@ cursor: pointer; } - .block_vide_produit_service {} + .btn_abonnement_v2 { + white-space: nowrap; + padding-left: 0px; + padding-right: 0px; + color: white; + border: "solid 1px"; + height: 4rem; + width: 80%; + font-size: 18px; + font-family: Verdana, Georgia, Arial; + background: #81BC3A; + } + + + .div_ul_detail_pack { + color: #424f61; + line-height: 2; + font-size: 14px; + font-family: Verdana, Georgia, Arial; + } + + .div_block_header { + font-family: Verdana, Georgia, Arial; + color: #424f61; + text-align: center; + font-size: 2.3125rem; + justify-content: center; + } + + .div_block_prix { + font-family: Verdana, Georgia, Arial; + color: #424f61; + text-align: center; + font-size: 1.8rem; + justify-content: center; + } + + .div_block_fonction { + width: 100%; + float: left; + } + + .div_block_fonction_detail { + width: 30%; + float: left; + + margin: 10px; + // -webkit-box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0); + // box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0); + background: #FFF; + min-height: 25rem; + // padding: 15px; + border-radius: 8px; + border: 2px solid #708f8f; + } + + .div_block_fonction_detail_titre { + font-family: Verdana, Georgia, Arial; + color: #073462; + line-Height: 29px; + font-size: 20px; + margin-bottom: 5px; + width: 100%; + font-weight: 400; + text-align: center; + letter-spacing: 1px; + height: 5rem; + //padding-left: 2rem; + } + + .div_block_fonction_detail_img { + width: 100%; + float: left; + } + + .div_block_fonction_detail_img_inside { + width: 4rem; + } + + + .div_block_fonction_detail_desc { + width: 100%; + float: left; + text-align: left; + line-height: 1.8em; + font-size: small; + color: #464646 + } } // end media - .btn_abonnement_v2 { - width: 100%; - white-space: nowrap; - padding-left: 0px; - padding-right: 0px; - color: white; - border: "solid 1px"; - height: 3rem; - } - - - .div_ul_detail_pack { - color: #424f61; - line-height: 2; - font-size: 14px; - font-family: Verdana, Georgia, Arial; - } - - .div_block_header { - font-family: Verdana, Georgia, Arial; - color: #424f61; - text-align: center; - font-size: 2.3125rem; - justify-content: center; - } - - .div_block_prix { - font-family: Verdana, Georgia, Arial; - color: #424f61; - text-align: center; - font-size: 1.8rem; - justify-content: center; - } - - .div_block_fonction { - width: 100%; - float: left; - } - - .div_block_fonction_detail { - width: 30%; - float: left; - - margin: 10px; - // -webkit-box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0); - // box-shadow: 2px 5px 16px 0px, inset -50px 45px 50px -30px rgba(0, 0, 0, 0); - background: #FFF; - min-height: 20rem; - // padding: 15px; - border-radius: 8px; - border: 2px solid #708f8f; - } - - .div_block_fonction_detail_titre { - font-family: Verdana, Georgia, Arial; - color: #3E6EE3; - line-Height: 29px; - font-size: 20px; - margin-bottom: 5px; - width: 100%; - font-weight: 400; - text-align: center; - letter-spacing: 1px; - height: 5rem; - //padding-left: 2rem; - } - - .div_block_fonction_detail_img { - width: 100%; - float: left; - } - - .div_block_fonction_detail_img_inside { - width: 4rem; - } - - - .div_block_fonction_detail_desc { - width: 100%; - float: left; - text-align: left; - line-height: 1.8em; - font-size: small; - color: #464646 - } + .hr_break { border: 5px solid grey; diff --git a/src/styles/components/_recherchearticles.scss b/src/styles/components/_recherchearticles.scss index 9614d75..922408e 100644 --- a/src/styles/components/_recherchearticles.scss +++ b/src/styles/components/_recherchearticles.scss @@ -892,7 +892,7 @@ padding-left: 2rem; margin-right: auto; } } - + .buton_ch22 { border: 2px solid white; background-color: transparent; diff --git a/src/styles/components/_recherchearticles_new_v2_style.scss b/src/styles/components/_recherchearticles_new_v2_style.scss new file mode 100644 index 0000000..8f57546 --- /dev/null +++ b/src/styles/components/_recherchearticles_new_v2_style.scss @@ -0,0 +1,1046 @@ +.recherchearticles_new_v2_style { + .h1_transparent { + color: transparent; + //color: red; + font-size: 0.1rem; + } + + @media only screen and (max-width: 600px) { + .rech_middlebox { + float: left; + border-width: 2px; + width: 100%; + height: 100%; + margin: auto; + padding: 0.1rem; + border-radius: 30px; + margin-right: 0.5%; + overflow-y: hidden !important; + } + + .detail_container { + width: 80%; + height: 200px; + + margin: auto; + padding: 10px; + border-radius: 30px; + } + + .containerBox { + position: relative; + display: inline-block; + } + + .img_logo { + display: block; + height: auto; + margin-left: auto; + margin-right: auto; + max-width: 50%; + } + + .detail_row { + float: left; + border-width: 2px; + margin: auto; + padding: 0.2rem; + border-radius: 0.5rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + margin-bottom: 0.1rem; + overflow: hidden; + white-space: nowrap; + width: 100%; + margin: 0 auto; + } + + textarea { + padding: 10px; + max-width: 100%; + width: 100%; + line-height: 1.5; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + } + + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + position: fixed; + z-index: 10; + top: 0px; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + z-index: 10; + background-color: #e7f3fb; + background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); + } + + .div_mobile { + position: relative; + //border:1px solid black; + //border-width: 0.01rem; + //background-color: #e6ebe2; + top: 6rem; + z-index: 1; + width: 98%; + height: 100%; + margin: 0.3rem; + margin-left: auto; + margin-right: auto; + } + + .pieddepage { + z-index: 50; + width: 100%; + float: left; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 20%; + float: right; + font-weight: 500; + cursor: pointer; + } + + .menuPrincipal:hover { + color: #81bc3a; + font-weight: bold; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.2rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + width: 50%; + text-align: center; + margin-left: auto; + margin-right: auto; + } + + .div_003 { + display: none; + } + + .div_004 { + color: white; + width: 100%; + height: 0.1rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + margin-bottom: 0.2rem; + margin-top: 0.2rem; + } + + .div_005 { + width: 95%; + margin-left: auto; + margin-right: auto; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: small; + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .forma_rightbox { + float: right; + border-width: 2px; + width: 100%; + padding: 0.3rem; + font-size: 11px; + text-align: left; + color: rgb(10, 42, 77); + margin-top: 1px; + cursor: pointer; + overflow-wrap: break-word; + border-bottom: #3b3e40; + border-bottom-width: 1px; + border-bottom-style: solid; + padding: 1rem; + } + } + + @media only screen and (min-width: 601px) and (max-width: 991px) { + .rech_middlebox { + float: left; + border-width: 2px; + width: 100%; + height: 100%; + margin: auto; + padding: 0.1rem; + border-radius: 30px; + margin-right: 0.5%; + overflow-y: hidden !important; + } + + .detail_container { + width: 80%; + height: 200px; + + margin: auto; + padding: 10px; + border-radius: 30px; + } + + .containerBox { + position: relative; + display: inline-block; + } + + .img_logo { + display: block; + height: auto; + margin-left: 0px; + margin-right: auto; + max-width: 30%; + } + + .detail_row { + float: left; + border-width: 2px; + margin: auto; + padding: 0.2rem; + border-radius: 0.5rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + margin-bottom: 0.1rem; + overflow: hidden; + white-space: nowrap; + width: 100%; + margin: 0 auto; + } + + textarea { + padding: 10px; + max-width: 100%; + width: 100%; + line-height: 1.5; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + } + + .parter_div_gauche { + float: left; + border: 1px solid black; + border-width: 0.01rem; + width: 25%; + height: 30rem; + margin: auto; + padding: 10px; + border-radius: 1rem; + margin-right: 0.5%; + background-color: #104277; + text-align: left; + color: white; + } + + .parter_div_droite { + float: left; + border: 1px solid black; + border-width: 0.01rem; + width: 74%; + height: auto; + margin: auto; + padding: 10px; + border-radius: 1rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; + } + + .parter_div_droite_haut { + float: left; + border: 1px solid black; + border-width: 0.01rem; + width: 100%; + height: auto; + margin: auto; + padding: 10px; + border-radius: 1rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; + margin-bottom: 2rem; + } + + .left-pan { + padding-left: 7px; + } + + .left-pan i { + padding-left: 10px; + } + + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + position: fixed; + z-index: 10; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + height: 9rem; + background-color: #e7f3fb; + z-index: 10; + background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); + } + + .div_mobile { + position: absolute; + top: 9rem; + z-index: 1; + width: 100%; + height: 100%; + padding-right: 2rem; + padding-left: 2rem; + } + + .pieddepage { + z-index: 0; + width: 100%; + float: left; + //margin-top: calc(100vh - 20%); + margin-top: 2rem; + } + + .menuPrincipal_bton { + margin-left: 0.9rem; + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + float: right; + cursor: pointer; + text-align: right; + font-size: small; + border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; + } + + .menuPrincipal { + margin-left: 0.7rem; + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + float: right; + cursor: pointer; + text-align: right; + font-size: small; + border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; + padding-top: 0.2rem; + } + + .menuPrincipal:hover { + color: #81bc3a; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.1rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + float: left; + width: 40%; + text-align: left; + } + + .div_003 { + float: left; + width: 60%; + text-align: right; + color: white; + } + + .div_004 { + color: white; + width: 100%; + height: 0.1rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + margin: 0.2rem; + } + + .div_005 { + width: 100%; + float: left; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 1.1rem; + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .forma_rightbox { + float: right; + border-width: 2px; + width: 100%; + margin: auto; + padding: 0.3rem; + font-size: small; + text-align: left; + color: rgb(10, 42, 77); + cursor: pointer; + overflow-wrap: break-word; + border-bottom: #3b3e40; + border-bottom-width: 1px; + border-bottom-style: solid; + padding: 1rem; + } + } + + @media only screen and (min-width: 992px) and (max-width: 1199px) { + .rech_middlebox { + float: left; + border-width: 2px; + width: 100%; + height: 100%; + margin: auto; + padding: 0.1rem; + background: white; + margin-right: 0.5%; + overflow-y: hidden !important; + border-radius: 0px; + } + + .detail_container { + width: 80%; + height: 200px; + + margin: auto; + padding: 10px; + border-radius: 30px; + } + + .containerBox { + position: relative; + display: inline-block; + } + + .img_logo { + display: block; + height: auto; + margin-left: 0px; + margin-right: auto; + max-width: 20%; + max-height: 3rem; + } + + .detail_row { + float: left; + border-width: 2px; + margin: auto; + padding: 0.2rem; + border-radius: 0.5rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + margin-bottom: 0.1rem; + overflow: hidden; + white-space: nowrap; + width: 100%; + margin: 0 auto; + } + + textarea { + padding: 10px; + max-width: 100%; + width: 100%; + line-height: 1.5; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + } + + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + position: fixed; + z-index: 10; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + height: 9rem; + background-color: #e7f3fb; + z-index: 10; + background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); + } + + .div_mobile { + position: absolute; + top: 9rem; + z-index: 1; + width: 100%; + height: 100%; + padding-right: 2rem; + padding-left: 2rem; + } + + .pieddepage { + z-index: -1; + width: 100%; + float: left; + margin-top: 2rem; + } + + .menuPrincipal_bton { + margin-left: 0.9rem; + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + float: right; + cursor: pointer; + text-align: right; + font-size: small; + border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; + } + + .menuPrincipal { + margin-left: 0.8rem; + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + float: right; + cursor: pointer; + text-align: right; + font-size: small; + border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; + padding-top: 0.2rem; + } + + .menuPrincipal:hover { + color: #81bc3a; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.1rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + float: left; + width: 50%; + text-align: left; + } + + .div_003 { + float: left; + width: 50%; + text-align: right; + color: white; + } + + .div_004 { + color: white; + width: 100%; + height: 0.1rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + margin: 0.2rem; + } + + .div_005 { + width: 100%; + float: left; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 1.1rem; + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .forma_rightbox { + float: right; + border-width: 2px; + width: 100%; + margin: auto; + padding: 0.3rem; + font-size: small; + text-align: left; + color: rgb(10, 42, 77); + cursor: pointer; + overflow-wrap: break-word; + border-bottom: #3b3e40; + border-bottom-width: 1px; + border-bottom-style: solid; + padding: 1rem; + } + } + + @media only screen and (min-width: 1200px) { + .rech_middlebox { + float: left; + border-width: 2px; + width: 100%; + height: 100%; + margin: auto; + padding: 0.1rem; + border-radius: 30px; + margin-right: 0.5%; + overflow-y: hidden !important; + } + + .detail_container { + width: 80%; + height: 200px; + + margin: auto; + padding: 10px; + border-radius: 30px; + } + + .containerBox { + position: relative; + display: inline-block; + } + + .img_logo { + display: block; + height: auto; + margin-left: 0px; + margin-right: auto; + max-width: 18%; + max-height: 3rem; + } + + .detail_row { + float: left; + border-width: 2px; + margin: auto; + padding: 0.2rem; + border-radius: 0.5rem; + text-align: left; + color: rgb(10, 42, 77); + background-color: white; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + margin-bottom: 0.1rem; + overflow: hidden; + white-space: nowrap; + width: 100%; + margin: 0 auto; + } + + textarea { + padding: 10px; + max-width: 100%; + width: 100%; + line-height: 1.5; + border-radius: 5px; + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #999; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + } + + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + // position: fixed; + z-index: 10; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + width: 100%; + height: 9rem; + background-color: #e7f3fb; + z-index: 10; + background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); + + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + } + + .div_mobile { + position: absolute; + top: 9rem; + z-index: 1; + width: 100%; + height: 100%; + padding-right: 2rem; + padding-left: 2rem; + } + + .pieddepage { + z-index: 0; + width: 100%; + float: left; + margin-top: 2rem; + } + + .menuPrincipal_bton { + margin-left: 0.9rem; + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + float: right; + cursor: pointer; + text-align: right; + font-size: small; + border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; + } + + .menuPrincipal { + margin-left: 1rem; + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + float: right; + cursor: pointer; + text-align: right; + font-size: small; + border: 2px solid transparent; + white-space: nowrap; + text-transform: uppercase; + padding-top: 0.2rem; + } + + .menuPrincipal:hover { + color: #81bc3a; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.1rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + float: left; + width: 50%; + text-align: left; + } + + .div_003 { + float: left; + width: 50%; + text-align: right; + color: white; + } + + .div_004 { + color: white; + width: 100%; + height: 0.25rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + margin: 0.2rem; + } + + .div_005 { + width: 100%; + float: left; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 1.2rem; + width: 90%; + margin-left: auto; + margin-right: auto; + } + + + } + + .div_row { + width: 100%; + float: left; + } + + // end media + + .Background-header { + position: absolute; + width: 100%; + height: 280px; + left: 0px; + + background: #FFFAED; + } + + /* Title */ + + .Title { + padding: 0px; + height: 80px; + left: 549px; + margin-top: 20px; + width: 50%; + margin-left: 25%; + } + + + /* Support */ + + .Support { + height: 20px; + font-family: "Albert Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 20px; + text-align: center; + text-transform: uppercase; + color: #0A043C; + } + + + .besoin_aide { + width: 100%; + + font-family: "Albert Sans"; + font-style: normal; + font-weight: 700; + font-size: 50px; + line-height: 60px; + text-align: center; + letter-spacing: -1px; + color: #20BFA9; + } + + .detail_text_aide { + height: 44px; + font-family: Verdana, Georgia, Arial; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 22px; + text-align: center; + color: #0A043C; + } + + .barre_recherche { + height: 44px; + font-family: Verdana, Georgia, Arial; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 22px; + text-align: center; + color: #0A043C; + margin-top: 2rem; + } + + .aricles_a_la_une { + width: 95%; + margin-left: 5%; + float: left; + border: solid 1px; + padding: 10px; + min-height: 20rem; + } + + .liste_articles { + width: 95%; + margin-left: 5%; + float: left; + //border: solid 1px; + padding: 10px; + } + + .hr_break { + border: 5px solid grey; + } + + .img_article { + width: 40%; + float: left; + padding: 5px; + } + + .desc_article { + width: 58%; + float: left; + padding: 5px; + } + + + + .buton_ch22 { + border: 2px solid white; + background-color: transparent; + color: white; + padding: 0px; + font-size: 16px; + cursor: pointer; + font-size: small; + border-radius: 4rem; + width: 6rem; + min-width: 6rem; + height: 1.7rem; + text-align: left; + } + + .forma_rightbox { + float: right; + border-width: 2px; + width: 100%; + margin: auto; + padding: 0.5rem; + font-size: small; + text-align: left; + color: rgb(10, 42, 77); + cursor: pointer; + overflow-wrap: break-word; + border-bottom: #3b3e40; + border-bottom-width: 1px; + border-bottom-style: solid; + padding: 1rem; + } +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 3e8ca08..57346f8 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -127,4 +127,6 @@ @import "./components/reherche_new_v3"; @import "./components/displaydetailclass_new_v3"; @import "./components/reherche_new_v4"; -@import "./components/footer_catalog_pub"; \ No newline at end of file +@import "./components/footer_catalog_pub"; +@import "./components/displaydetailarticle_new_v2"; +@import "./components/recherchearticles_new_v2_style"; \ No newline at end of file