diff --git a/src/components/HebergementLms.js b/src/components/HebergementLms.js index f174a65..b312ba0 100644 --- a/src/components/HebergementLms.js +++ b/src/components/HebergementLms.js @@ -152,6 +152,7 @@ function HebergementLms(props) { useEffect(() => { GetLms_Themes(); + submenu_design(); }, []) const [isLoading, setLoading] = useState(); @@ -363,9 +364,6 @@ function HebergementLms(props) { } setLoading(false); - - - }; @@ -380,6 +378,24 @@ function HebergementLms(props) { sethandleSubmission_logo_api(); } + const [submenu, setsubmenu] = useState("design"); + function submenu_design() { + clear_message(); + setsubmenu("design"); + } + + function submenu_logo() { + clear_message(); + setsubmenu("logo"); + } + + function submenu_img_bg() { + clear_message(); + setsubmenu("img_bg"); + } + + + return (
@@ -392,166 +408,180 @@ function HebergementLms(props) {
} - - {String(RecordData_api) === "true" &&
la mise à jour a été correctement faite
} - - {String(RecordData_api) === "false" &&
{RecordData_message}
} - -
Choisir un exemple de thème :
- - +
+ + +
-
Le modèle d'attestation : - -
+ {String(submenu) === String("design") &&
+
+ {String(RecordData_api) === "true" &&
la mise à jour a été correctement faite
} -
-
-   -
- {
+ {String(RecordData_api) === "false" &&
{RecordData_message}
} -
- -
+
Choisir un exemple de thème :
-
- +
-
} -
-   +
Le modèle d'attestation : + +
+ +
+
+   +
+ {
+ +
+ +
+ +
+ + + +
+ +
} +
+   +
+ +
+
} -
+ {String(submenu) === String("logo") &&
+
Import du logo
+
+   +
+
+ {logo_file_name && } + -
Import du logo
-
-   -
-
- {logo_file_name && } - + {img_logo_file && } - {String(handleSubmission_logo_api) === "false" && - } +
+
+   +
+ {
-
+
+ +
-
+
+ + + +
+ +
} +
+   +
+ +
+
+
} + + {String(submenu) === String("img_bg") &&
+
Import du background
 
- {
+
+ {bg_file_name && } + -
- -
+ {img_bg_file &&
} -
-   -
- -
-
- -
Import du background
-
-   -
-
- {bg_file_name && } - - - {img_bg_file && }
- } -
+
+
+   +
+ {
-
-
-   -
- {
+
+ +
-
- +
+ + + +
+ +
} +
+  
-
- - - -
- -
} -
-  
-
-
+
}
); diff --git a/src/styles/components/_hebergementlms.scss b/src/styles/components/_hebergementlms.scss index 91aa98f..dffb93c 100644 --- a/src/styles/components/_hebergementlms.scss +++ b/src/styles/components/_hebergementlms.scss @@ -15,14 +15,14 @@ background-color: transparent; } - .mysy_spinner{ + .mysy_spinner { border-radius: 5px; border: 1px solid black; opacity: 100%; } - + .spinner { - width:20rem; + width: 20rem; height: 10rem; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; @@ -149,7 +149,7 @@ float: right; //border:0px solid black; border-width: 0.01rem; - width: 55%; + width: 45%; padding-left: 2%; border-radius: 0px; } @@ -228,7 +228,7 @@ float: right; //border:0px solid black; border-width: 0.01rem; - width: 55%; + width: 45%; padding-left: 2%; border-radius: 0px; } @@ -300,7 +300,7 @@ float: left; //border:0px solid black; border-width: 0.01rem; - width: 50%; + width: 48%; border-radius: 0px; font-family: "verdana", "Quicksand", "Signika", sans-serif; font-size: small; @@ -311,7 +311,7 @@ float: right; //border:0px solid black; border-width: 0rem; - width: 50%; + width: 48%; padding-left: 5px; border-radius: 0px; font-family: "verdana", "Quicksand", "Signika", sans-serif; @@ -334,15 +334,35 @@ .btn_modif { - width: 10rem; background-color: #212121 !important; color: white; + border-radius: 15px; + margin-right: 1rem; + padding: 0.3rem; + margin-bottom: 0.5rem; + width: 15rem; + text-align: center; + border: 1px solid #9cf; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + letter-spacing: 0.1rem; + font-weight: normal; } .btn_enreg { - width: 10rem; background-color: green !important; color: white; + border-radius: 15px; + margin-right: 1rem; + padding: 0.3rem; + margin-bottom: 0.5rem; + width: 15rem; + text-align: center; + border: 1px solid #9cf; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + letter-spacing: 0.1rem; + font-weight: normal; } .preview_certif { @@ -371,7 +391,52 @@ height: 2rem; font-size: small; } - + + + .detail_class_submenu { + background: #d8edfc; + border-radius: 15px; + margin-right: 1rem; + padding: 0.3rem; + margin-bottom: 0.5rem; + width: 11rem; + text-align: center; + border: 1px solid #9cf; + color: #3b3e40; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + letter-spacing: 0.1rem; + font-weight: normal; + } + + .detail_class_submenu:hover:active, + .detail_class_submenu:hover { + background-color: #104277; + color: white; + } + + .detail_class_submenu:focus { + //border: 3px dotted green; + background-color: #104277; + color: white; + } + + .detail_class_submenu_data { + width: 95%; + background-color: #d8edfc; + padding-left: 5px; + text-align: left; + padding: 0; + border: 0px; + color: #3b3e40; + padding-left: 5px; + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + border-radius: 10px; + border: 1px solid; + display: block; + } + } // End media