Grosse maj encore avec ajout de fonctionnalités dans l'admin principalement et grosse remise en page / rennomage et preparation pour retravailler le CSS

4 files changed, 172 insertions, 104 deletions

diff --git a/Statics/Css/main.css b/Statics/Css/main.css
index 12e84e0..cd3ab65 100644
--- a/Statics/Css/main.css
+++ b/Statics/Css/main.css
@@ -12,8 +12,9 @@ sur mon instance SearX https://searx.debulois.fr
 :root {
     /* GLOBAL */
     --mainSiteColor:      #c0392b;
+    --bodyBg:             #fafafa;  
     /* SEPARATOR */
-    --separatorBg:        white;
+    --separatorBg:        #fafafa;
     /* NAVBAR */
     --navbarText:         black;
     --navbarBg:           white;
@@ -28,7 +29,7 @@ sur mon instance SearX https://searx.debulois.fr
     --btnHoverBg:         #e74c3c;
     /* TABLES */
     --tableText:          black;
-    --tableBg:            #f1f1f1;
+    --tableBg:            #fafafa;
     --tableBorder:        rgba(0, 0, 0, 0.2);
     --tableStarUnchecked: darkgray;
     --tableStarChecked:   orange;
@@ -105,12 +106,18 @@ sur mon instance SearX https://searx.debulois.fr
     transform: scale(1.3);
 }
 
-.show_slide {
+.show_block {
     /* Opacité de l'élément 0=transparent 1=opaque */
     display: block !important;
 }
 /* FIN SLIDER */
 
+.show_flex {
+    /* Opacité de l'élément 0=transparent 1=opaque */
+    display: flex !important;
+    flex-direction: column;
+}
+
 /* MESSAGE */
 .success {
     color:         green;
@@ -192,24 +199,26 @@ html {
 
 body {
     /* Choix du font */
-    font-family:     SourceSansPro !important;
+    font-family:     SourceSansPro;
     margin:          0px;
     /* taille en vh (view height) pourcentage de hauteur de fenêtre*/
     min-height:      100vh;
     display:         flex;
     flex-direction:  column;
     justify-content: space-between;
+    background-color: var(--bodyBg);
 }
 
 pre {
     /* Permet d'aller à la ligne */
+    font-family: SourceSansPro;
     white-space: pre-wrap;
     margin:      0.3em 0em;
 }
 
 /* Déclaration par ID */
 /* NAVBAR */
-#navbar {
+nav {
     /* Index de profondeur */
     z-index:          1;
     height:           10vh;
@@ -218,12 +227,12 @@ pre {
     justify-content:  space-around;
     text-align:       center;
     background-color: var(--navbarBg);
-    border-top:       var(--mainSiteColor) solid 1.5vh;
-    border-bottom:    var(--mainSiteColor) solid 0.5vh;
+    border-top:       var(--mainSiteColor) solid 6px;
+    border-bottom:    var(--mainSiteColor) solid 3px;
     color:            var(--navbarText);
 }
 
-#navbar ul {
+nav ul {
     display:              flex;
     justify-content:      space-around;
     column-gap:           15px;
@@ -235,17 +244,17 @@ pre {
     padding-inline-start: 0px;
 }
 
-#navbar i {
+nav i {
     margin-right: 0.4em;
 }
 
-#navbar a {
+nav a {
     color:           var(--navbarText);
     text-decoration: none;
-    transition:      0.15s;
+    transition:      all 0.15s ease-in-out;
 }
 
-#navbar a:hover {
+nav a:hover {
     color:     var(--mainSiteColor);
     transform: scale(1.1);
     z-index:   2;
@@ -325,14 +334,7 @@ pre {
 /* FIN SLIDER */
 
 /* GLOBAL */
-#login,
-#register,
-#userInfo,
-#message,
-#admin,
-#mission,
-#myMission,
-#search {
+main {
     width:             80%;
     min-height:        70vh;
     /* margin left & right en auto = centré */
@@ -342,22 +344,16 @@ pre {
     flex-direction:    column;
     justify-content:   center;
     text-align:        center;
-    border-top:        1.5vh solid var(--mainSiteColor);
-    border-right:      0.5vh solid var(--mainSiteColor);
-    border-bottom:     0.5vh solid var(--mainSiteColor);
-    border-left:       0.5vh solid var(--mainSiteColor);
+    border-top:        6px solid var(--mainSiteColor);
+    border-right:      3px solid var(--mainSiteColor);
+    border-bottom:     3px solid var(--mainSiteColor);
+    border-left:       3px solid var(--mainSiteColor);
+    border-radius:     5px;
     background-color:  var(--bg);
     color:             var(--text);
 }
 
-#login      h2,
-#register   h2,
-#userInfo   h2,
-#message    h2,
-#admin      h2,
-#search     h2,
-#mission    h2,
-#myMission  h2 {
+main h2 {
     display:       inline-block;
     margin-left:   auto;
     margin-right:  auto;
@@ -365,12 +361,16 @@ pre {
     border-bottom: var(--mainSiteColor) 0.5vh solid;
 }
 
-#login    form,
-#userInfo form,
-#register form,
-#mission  form,
-#admin    form,
-#search   form {
+#mainAdmin section {
+    display: none;
+}
+
+#mainLogin    form,
+#mainUserInfo form,
+#mainRegister form,
+#mainMission  form,
+#mainAdmin    form,
+#mainSearch   form {
     display:         flex;
     flex-direction:  column;
     justify-content: space-around;
@@ -379,38 +379,39 @@ pre {
     align-items:     center;
 }
 
-#search form,
-#admin  form {
+#mainSearch form,
+#mainAdmin  form {
     flex-direction: row;
 }
 
-#login    label,
-#userInfo label,
-#register label,
-#mission  label,
-#admin    label,
-#search   label {
+#mainLogin    label,
+#mainUserInfo label,
+#mainRegister label,
+#mainMission  label,
+#mainAdmin    label,
+#mainSearch   label {
     width:   80%;
     display: flex;
 }
 
-#login    i,
-#userInfo i,
-#register i,
-#mission  i,
-#admin    i,
-#search   i {
+#mainLogin    i,
+#mainUserInfo i,
+#mainRegister i,
+#mainMission  i,
+#mainAdmin    i,
+#mainSearch   i {
     width:            90px;
     height:           2em;
     line-height:      2em;
     font-size:        28px;
     color:            var(--iconColor);
     background-color: var(--mainSiteColor);
+    border-radius: 5px 0px 0px 5px;
 }
 
-#myMission table,
-#admin     table,
-#search    table {
+#mainMyMission table,
+#mainAdmin     table,
+#mainSearch    table {
     color:           var(--text);
     padding:         5%;
     border-collapse: collapse;
@@ -418,39 +419,104 @@ pre {
     margin:          1em auto;
 }
 
-#myMission table {
+#mainMyMission table {
     display: none;
 }
 
-#myMission th,
-#admin     th,
-#search    th {
+#mainMyMission th,
+#mainAdmin     th,
+#mainSearch    th {
     font-size:        15px;
     border:           2px solid var(--mainSiteColor);
     background-color: var(--tableBg);
 }
 
-#myMission td,
-#admin     td,
-#search    td {
+#mainMyMission td,
+#mainAdmin     td,
+#mainSearch    td {
 
     border:           2px solid var(--tableBorder);
     background-color: var(--tableBg);
 }
 
-#userInfo input[type="text"],
-#mission  input[type="text"],
-#login    input[type="email"],
-#login    input[type="password"],
-#register input[type="email"],
-#search   input[type="search"],
-#register input[type="password"] {
+#mainUserInfo input[type="text"],
+#mainMission  input[type="text"],
+#mainLogin    input[type="email"],
+#mainLogin    input[type="password"],
+#mainRegister input[type="email"],
+#mainSearch   input[type="search"],
+#mainRegister input[type="password"] {
     width:   inherit;
-    border:  0.5vh solid var(--mainSiteColor);
-    padding: 1em;
+    border:  3px solid var(--mainSiteColor);
+    border-radius: 0px 5px 5px 0px;
+    padding: 0.5em;
+}
+
+#userJob {
+    justify-content: space-between;
+}
+
+#userJobs i {
+    border-radius: 5px;
+}
+
+#userJob select {
+    height:        2.5em;
+    line-height:   2.5em;
+    margin-top:    auto;
+    margin-bottom: auto;
+}
+
+#userJob  button[type="button"] {
+    margin-top:    auto;
+    margin-bottom: auto;
+    margin-right: 3em;
+    font-size:        16px;
+    height:           2em;
+    border:           2px solid var(--mainSiteColor);
+    background-color: var(--bg);
+    border-radius:    5px;
+    padding:          0em 1em;
+    transition:       all 0.1s ease-in-out;
+}
+
+#userJob  button[type="button"]:hover {
+    cursor:             pointer;
+    color:              var(--bg);
+    background-color:   var(--btnHoverBg);
+}
+
+#jobsList {
+    border: 3px solid var(--mainSiteColor);
+    border-radius: 5px;
+    padding: 2em 5em;
+    list-style: circle;
+}
+
+#jobsList > li > button {
+    border: none;
+    background-color: inherit;
+}
+
+#jobsList > li > button > i {
+    background-color: inherit;
+    color: var(--mainSiteColor);
+    border: 2px solid grey;
+    border-radius: 4px;
+    font-size:   22px;
+    width:       1.3em;
+    height:      1.3em;
+    line-height: 1.3em;
+    transition:       all 0.15s ease-in-out;
+}
+
+#jobsList > li > button > i:hover {
+    background-color: var(--btnHoverBg);
+    color: whitesmoke;
+    cursor:  pointer;
 }
 
-#mission select {
+#mainMission select {
     height:        2.5em;
     line-height:   2.5em;
     margin-top:    auto;
@@ -458,46 +524,48 @@ pre {
     margin-left:   1em;
 }
 
-#userInfo textarea,
-#mission  textarea {
+#mainUserInfo textarea,
+#mainMission  textarea {
     width:  83%;
     height: 3.4em;
     border: 0.5vh solid var(--mainSiteColor);
+    border-radius: 0px 5px 5px 0px;
 }
 
-#login    input[type="submit"],
-#userInfo input[type="submit"],
-#mission  input[type="submit"],
-#search   input[type="submit"],
-#admin    input[type="submit"],
-#register input[type="submit"] {
+#mainLogin    input[type="submit"],
+#mainUserInfo input[type="submit"],
+#mainMission  input[type="submit"],
+#mainSearch   input[type="submit"],
+#mainAdmin    input[type="submit"],
+#mainRegister input[type="submit"] {
     font-size:        17px;
     font-weight:      bold;
     height:           2.5em;
     border:           0.15em solid var(--mainSiteColor);
     background-color: var(--bg);
-    border-radius:    3px;
+    border-radius:    5px;
     padding:          0% 0.7em;
+    transition:       all 0.1s ease-in-out;
 }
 
-#login    input[type="submit"]:hover,
-#userInfo input[type="submit"]:hover,
-#mission  input[type="submit"]:hover,
-#search   input[type="submit"]:hover,
-#admin    input[type="submit"]:hover,
-#register input[type="submit"]:hover {
+#mainLogin    input[type="submit"]:hover,
+#mainUserInfo input[type="submit"]:hover,
+#mainMission  input[type="submit"]:hover,
+#mainSearch   input[type="submit"]:hover,
+#mainAdmin    input[type="submit"]:hover,
+#mainRegister input[type="submit"]:hover {
     cursor:             pointer;
     color:              var(--bg);
     background-color:   var(--btnHoverBg);
 }
 
-#message p {
+#mainMessage p {
     font-size: 20px;
 }
 /* FIN GLOBAL */
 
 /* FOOTER */
-#footer {
+footer {
     min-height:         10vh;
     display:            flex;
     flex-direction:     column;
diff --git a/Statics/Js/index.js b/Statics/Js/index.js
index 805b53e..b468417 100644
--- a/Statics/Js/index.js
+++ b/Statics/Js/index.js
@@ -17,10 +17,10 @@ function slideshow_start(slideNumber = 1) {
         document.getElementById("slides").style.backgroundImage = `url("${images[slideNumber]}")`;
         // Untoggle les précedents
         // Utilisation de ternary, utilisation: condition ? Sivrai : Sifaux
-        document.getElementById(`slide_${slideNumber !== 0 ? slideNumber - 1 : images.length - 1}`).classList.toggle("show_slide");
+        document.getElementById(`slide_${slideNumber !== 0 ? slideNumber - 1 : images.length - 1}`).classList.toggle("show_block");
         document.getElementById(`slideDot_${slideNumber !== 0 ? slideNumber - 1 : images.length - 1}`).classList.toggle("slideSelected");
         // Toggle le nouveau texte & selecteur
-        document.getElementById(`slide_${slideNumber}`).classList.toggle("show_slide");
+        document.getElementById(`slide_${slideNumber}`).classList.toggle("show_block");
         document.getElementById(`slideDot_${slideNumber}`).classList.toggle("slideSelected")
         // +1 sauf si fin
         if (slideNumber < images.length - 1) {
diff --git a/Statics/Js/main.js b/Statics/Js/main.js
index b4d0894..6fe6dec 100644
--- a/Statics/Js/main.js
+++ b/Statics/Js/main.js
@@ -7,6 +7,17 @@
 // https://stackoverflow.com/ 
 
 // Changement de langue
-document.getElementById("langSel").addEventListener("change", () => {
-    document.getElementById("langForm").submit();
+document.getElementById("navSelLang").addEventListener("change", () => {
+    document.getElementById("navFormLang").submit();
 });
+
+// TODO: A commenter
+function show(parentId, element, id, className) {
+    let elements = document.getElementById(parentId).getElementsByTagName(element);
+    elements[id].classList.add(className);
+    for (i = 0; i < elements.length; i++) {
+        if (elements[i].id !== id) {
+            elements[i].classList.remove(className);
+        }
+    }
+}
\ No newline at end of file
diff --git a/Statics/Js/myMission.js b/Statics/Js/myMission.js
deleted file mode 100644
index 36c2648..0000000
--- a/Statics/Js/myMission.js
+++ /dev/null
@@ -1,11 +0,0 @@
-
-//table id pendingTable, ongoingTable, completedTable
-function show(tableId) {
-    let tables = document.getElementById("myMission").getElementsByTagName("table");
-    tables[tableId].classList.add("show_table");
-    for (i = 0; i < tables.length; i++) {
-        if (tables[i].id !== tableId) {
-            tables[i].classList.remove("show_table");
-        }
-    }
-}
\ No newline at end of file