maxence.lanone
/
JTT_CrM_test_ci
forked from CRM_Production/JTT_CrM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finalisation Page Admin

Browse Source
master
Théo DUPIN 3 years ago
parent 4c6676713d
commit 2092568a4b
3 changed files with 114 additions and 72 deletions
Show Stats Download Patch File Download Diff File

6
src/components/NavigationAdmin.js
Unescape View File

@ -7,13 +7,13 @@ const NavigationAdmin = () => {
<div className="nav_bar_verticale"> <div className="nav_bar_verticale">
<img className="logo" srcSet="./LogoApp.svg"></img> <img className="logo" srcSet="./LogoApp.svg"></img>
<NavLink className="create_user" to="/Admin"> <NavLink className="create_user" to="/Admin">
<button id="user" className="bouton" type="button" value="Créer un utilisateur" onClick="Create_user()">Créer un nouvel utilisateur</button> <button id="user" className="bouton" type="button" value="Créer un utilisateur" onClick="Create_user()">Créer utilisateur</button>
</NavLink> </NavLink>
<NavLink className="modify_user" to="/Admin_modif"> <NavLink className="modify_user" to="/Admin_modif">
<button id="user" className="bouton" type="button" value="Modifier un utilisateur" /*onClick="Modify_user()"*/>Modifier un utilisateur</button> <button id="user" className="bouton" type="button" value="Modifier un utilisateur" /*onClick="Modify_user()"*/>Modifier utilisateur</button>
</NavLink> </NavLink>
<NavLink className="delete_user" to="/Admin_supp"> <NavLink className="delete_user" to="/Admin_supp">
<button id="user" className="bouton" type="button" value="Supprimer un utilisateur" /*onClick="Delete_user()"*/>Supprimer un utilisateur</button> <button id="user" className="bouton" type="button" value="Supprimer un utilisateur" /*onClick="Delete_user()"*/>Supprimer utilisateur</button>
</NavLink> </NavLink>
</div> </div>

9
src/pages/Admin.js
Unescape View File

@ -7,7 +7,8 @@ const Admin = () => {
<div className="page_admin"> <div className="page_admin">
<NavigationAdmin /> <NavigationAdmin />
{/* Create a admin page */} {/* Create a admin page */}
<p className="Titre">Admin <div className="Titre_Formulaire">
<p className="Titre">Admin</p>
<div className="Formulaire"> <div className="Formulaire">
<form className="form"> <form className="form">
<table className="Formulaire_de_connexion"> <table className="Formulaire_de_connexion">
@ -33,14 +34,14 @@ const Admin = () => {
</tr> </tr>
<tr> <tr>
<div className='bouton_submit'> <div className='bouton_submit'>
<button className="bouton_val_ann" type="submit">Valider</button> <button className="bouton_val" type="submit">Valider</button>
<button className="bouton_val_ann" type="submit">Annuler</button> <button className="bouton_ann" type="submit">Annuler</button>
</div> </div>
</tr> </tr>
</table> </table>
</form> </form>
</div> </div>
</p> </div>
</div> </div>
); );
}; };

91
src/styles/components/_admin.scss
Unescape View File

@ -1,15 +1,12 @@
.page_admin { .page_admin {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-basis: 100%;
height: 100vh; height: 100vh;
position:fixed;
.nav_bar_verticale { .nav_bar_verticale {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 200px; width: 200px;
height: 100%;
background: rgba(255, 255, 255, 0.143); background: rgba(255, 255, 255, 0.143);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
@ -21,16 +18,19 @@
.create_user { .create_user {
padding: 5px; padding: 5px;
text-decoration: none;
align-self: center; align-self: center;
} }
.modify_user { .modify_user {
padding: 5px; padding: 5px;
text-decoration: none;
align-self: center; align-self: center;
} }
.delete_user { .delete_user {
padding: 5px; padding: 5px;
text-decoration: none;
align-self: center; align-self: center;
} }
@ -46,7 +46,6 @@
font-size: 13.5px; font-size: 13.5px;
font-weight: bold; font-weight: bold;
transition: 1s box-shadow; transition: 1s box-shadow;
cursor: pointer;
border: none; border: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
background-color: rgba(163, 163, 163, 0.371); background-color: rgba(163, 163, 163, 0.371);
@ -73,36 +72,49 @@
font-size: 30px; font-size: 30px;
}*/ }*/
.Titre { .Titre_Formulaire{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-basis: 100%;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
margin: 10px; margin: 10px;
padding: 10px;
.Formulaire { .Titre {
display: flex; display: flex;
flex-direction: column; /*background: rgba(255, 255, 255, 0.3);
align-items: center; border-radius: 15px;
width: 100%; box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin: 10px;
font-size: 70px;
font-weight: bold;
} }
.Formulaire{ .Formulaire{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 30px;
margin: 100px;
padding: 30px;
align-items: center; align-items: center;
/*background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);*/
margin-left: 10px;
margin-right: 10px;
} }
.texte { .texte {
align-self: center; align-self: center;
font-weight: bold; font-weight: bold;
padding: 10px; font-size: 30px;
padding: 10px 10px 10px 0;
} }
.texte_zone { .texte_zone {
@ -111,35 +123,64 @@
background-color: transparent; background-color: transparent;
border-radius: 5px; border-radius: 5px;
border: 0.5px solid; border: 0.5px solid;
padding-left: 10px; //padding-left: 10px;
padding-right: 10px; //padding-right: 10px;
} }
.bouton_val_ann { .bouton_submit {
width: 150px; display: flex;
height: 40px; flex-direction: row;
border-radius: 10px; justify-content: space-between;
border: 0.5px solid; width: 600px;
color: $white; height: 30px;
border: 0; margin: 5px 5px 5px 0;
background-color: black;
.bouton_val{
display: flex;
background-color: grey;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px); backdrop-filter: blur(30px);
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
cursor: pointer; cursor: pointer;
font-size: 15px; font-size: 15px;
border-radius: 15px;
width: 20%;
align-items: center;
justify-content: center;
&:hover { &:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white;
background-color: rgba(114, 114, 114, 0.371); background-color: rgba(114, 114, 114, 0.371);
} }
&:active { &:active {
background-color: rgba(68, 68, 68, 0.972); background-color: rgba(68, 68, 68, 0.972);
} }
}
.bouton_submit{ .bouton_ann{
display: flex; display: flex;
flex-direction: row; background-color: grey;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
color: rgb(255, 255, 255);
cursor: pointer;
font-size: 15px;
border-radius: 15px;
width: 20%;
align-items: center;
justify-content: center;
&:hover {
box-shadow: 0, 5px, 35px, 0 rgba(0, 0, 0, 1);
color: white;
background-color: rgba(114, 114, 114, 0.371);
}
&:active {
background-color: rgba(68, 68, 68, 0.972);
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save