CSS et JS pour input secu + corrections mineures

This commit is contained in:
xdrm-brackets 2015-12-08 08:15:34 +01:00
parent 8d618fef8a
commit c197cebc86
4 changed files with 82 additions and 35 deletions

View File

@ -14,7 +14,10 @@ if(!Authentification::checkUser(0)){
<meta name='description' value='Site de test'/> <meta name='description' value='Site de test'/>
<meta name='author' value='{xdrm} & SeekDaSky'/> <meta name='author' value='{xdrm} & SeekDaSky'/>
<link rel='stylesheet' href='css/animations.css'/>
<link rel='stylesheet' href='css/global.css'/> <link rel='stylesheet' href='css/global.css'/>
<script type='text/javascript' src='js/adjust.js'></script>
</head> </head>
<body> <body>
@ -23,9 +26,9 @@ if(!Authentification::checkUser(0)){
<!-- MENU DE LA PAGE --> <!-- MENU DE LA PAGE -->
<nav id='MENU'> <nav id='MENU'>
<div id='ICON'></div> <a href='Dashboard.php' id='ICON'></a>
<a id='dashboard'>Tableau de bord</a> <a href='Dashboard.php' id='dashboard' class='active'>Tableau de bord</a>
<a id='consultations'>Nouvelle consultation</a> <a href='Consultations.php' id='consultations'>Consultations</a>
<a>Médecins</a> <a>Médecins</a>
</nav> </nav>
@ -35,21 +38,7 @@ if(!Authentification::checkUser(0)){
<section id='CONTAINER'> <section id='CONTAINER'>
<!-- FIL D'ARIANE --> <!-- FIL D'ARIANE -->
<div id='BREADCRUMB'><a href='Dashboard.php'>Accueil</a> <a href='Test1.php'>Test1</a> <a href='test2.php'>test2</a> </div> <div id='BREADCRUMB'><a href='Dashboard.php'>Accueil</a></div>
<article data-title="Saisir un rendez-vous">
<div>
<select id='newRDVPatient'>
<?php $patients = json_decode( file_get_contents('Docs/PatientExemple.json') );
foreach($patients as $PATIENT)
echo "<option value='".$PATIENT->Id."'>".$PATIENT->Nom." ".$PATIENT->Prenom."</option>";
?>
</select>
</div><div>
</div>
</article>
</section> </section>

0
Docs/MedecinExemple.json Normal file → Executable file
View File

0
Docs/generateMedecin Normal file → Executable file
View File

View File

@ -66,18 +66,6 @@ body{
background-color: #fafafa; background-color: #fafafa;
} }
/* LOGO DANS LE MENU */
#WRAPPER > #MENU > #ICON{
/* position */
position: relative;
width: 100%;
height: 100px;
/* background */
background-color: red;
}
/* LES LIENS DU MENU */ /* LES LIENS DU MENU */
#WRAPPER > #MENU > a{ #WRAPPER > #MENU > a{
/* position */ /* position */
@ -98,7 +86,7 @@ body{
} }
/* :hover / .active */ /* :hover / .active */
#WRAPPER > #MENU > a:hover, #WRAPPER > #MENU > a:hover:not(#ICON),
#WRAPPER > #MENU > a.active{ #WRAPPER > #MENU > a.active{
background-color: #efefef !important; background-color: #efefef !important;
color: #818181; color: #818181;
@ -116,8 +104,13 @@ body{
background-size: auto 1.5em; background-size: auto 1.5em;
} }
#WRAPPER > #MENU > a#doctor{ #WRAPPER > #MENU > a#medecin{
background: url(../src/doctor.svg) left 1em center no-repeat; background: url(../src/medecin.svg) left 1em center no-repeat;
background-size: auto 1.3em;
}
#WRAPPER > #MENU > a#patient{
background: url(../src/patient.svg) left 1em center no-repeat;
background-size: auto 1.5em; background-size: auto 1.5em;
} }
@ -129,6 +122,43 @@ body{
/* LOGO DANS LE MENU */
#WRAPPER > #MENU > #ICON{
/* position */
position: relative;
width: 100%;
height: 100px;
padding: 0;
margin: 0;
/* background */
background: transparent url(../src/icon.svg) center center no-repeat;
background-size: auto 50%;
/* animation */
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
/* z axis */
z-index: 100;
}
#WRAPPER > #MENU > #ICON:hover{
animation: shake .5s infinite alternate;
-moz-animation: shake .5s infinite alternate;
-webkit-animation: shake .5s infinite alternate;
-ms-animation: shake .5s infinite alternate;
-o-animation: shake .5s infinite alternate;
}
/*************/ /*************/
/* CONTAINER */ /* CONTAINER */
/*************/ /*************/
@ -193,8 +223,9 @@ body{
/* position */ /* position */
display: block; display: block;
position: relative; position: relative;
width: calc( 100% - 2*2em ); width: calc( 100% - 2*2em - 2*1px );
margin: 2em; margin: 2em;
margin-bottom: 4em; /* pour séparer les <articles> */
/* border */ /* border */
border: 1px solid #f09108; border: 1px solid #f09108;
@ -238,7 +269,6 @@ body{
/* background */ /* background */
background: #f6f4f2 url(../src/down-arrow.svg) right .5em center no-repeat; background: #f6f4f2 url(../src/down-arrow.svg) right .5em center no-repeat;
background-size: 1em auto; background-size: 1em auto;
/* <select> */ /* <select> */
appearance: none; appearance: none;
@ -250,7 +280,10 @@ body{
/* <SELECT> <OPTION> */ /* <SELECT> <OPTION> */
#CONTAINER > article select > option{ #CONTAINER > article select > option{
/* position */
padding: .5em; padding: .5em;
/* background */
background: #fff; background: #fff;
appearance: none; appearance: none;
@ -258,4 +291,29 @@ body{
-webkit-appearance: none; -webkit-appearance: none;
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
}
/* <INPUT> */
#CONTAINER > article input{
/* position */
display: inline-block;
position: relative;
margin: 1em;
padding: .7em;
/* border */
border: 1px solid #e5e5e5;
/* animation */
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
/* @focus */
#CONTAINER > article input:focus{
border-color: #999;
} }