diff --git a/app/view/Includes/header.include.html b/app/view/Includes/header.include.html
index a41b02f5d15872df02367e30d28a5c354622473d..a619f16578209ca92ae22eb0edf873013356bd5f 100644
--- a/app/view/Includes/header.include.html
+++ b/app/view/Includes/header.include.html
@@ -10,6 +10,8 @@ if(!isset($_SESSION)) { // si
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $page_title; ?></title>
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/css/style.css">
+ <link rel="stylesheet" href="<?php echo BASE_URL; ?>/css/jquery.auto-complete.css">
+ <link rel="stylesheet" href="<?php echo BASE_URL; ?>/css/pure.min.css">
<link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
@@ -23,14 +25,10 @@ if(!isset($_SESSION)) { // si
</div>
<div class="search-bar-conteneur col-3 col-m-3">
- <!-- <form method="post" name="truc" class="search-bar-form">
- <div class="search-bar-input-conteneur">
- <input class="search-bar" type="text" name="machin" title="machin" />
- </div>
-
- <button type="submit" class="glass"><img src="<?php echo BASE_URL; ?>/images/find.png" alt="icône de recherche" height="30px"/> </button>
+ <form method="post" name="nomJeu" class="pure-form">
+ <input type="text" class="search-bar" name="machin" placeholder="Rechercher un jeu..." /><input type="submit" class="search-button" value=""/>
</form>
- -->
+
</div>
<div class="col-4 space col-m-1">
diff --git a/www/css/jquery.auto-complete.css b/www/css/jquery.auto-complete.css
new file mode 100644
index 0000000000000000000000000000000000000000..4261b1d033e28b55dfc43df39f5410a11823a15c
--- /dev/null
+++ b/www/css/jquery.auto-complete.css
@@ -0,0 +1,9 @@
+.autocomplete-suggestions {
+ text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);
+
+ /* core styles should not be changed */
+ position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
+}
+.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
+.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
+.autocomplete-suggestion.selected { background: #f0f0f0; }
diff --git a/www/css/pure.min.css b/www/css/pure.min.css
new file mode 100644
index 0000000000000000000000000000000000000000..29eae96a708643cd327d7f96700d6802d9cfc53d
--- /dev/null
+++ b/www/css/pure.min.css
@@ -0,0 +1,75 @@
+.pure-form input[type="text"],
+.pure-form textarea {
+ padding:.5em .6em;
+ display:inline-block;
+ border:1px solid #ccc;
+ box-shadow:inset 0 1px 3px #ddd;
+ border-radius:4px 0 0 4px;
+ -webkit-box-sizing:border-box;
+ -moz-box-sizing:border-box;
+ box-sizing:border-box;
+ border-right:0;
+ margin:0;
+}
+
+.pure-form input[type="submit"] {
+ display:inline-block;
+ border:1px solid #ccc;
+ box-shadow:inset 0 1px 3px #ddd;
+ border-radius:0 4px 4px 0;
+ -webkit-box-sizing:border-box;
+ -moz-box-sizing:border-box;
+ box-sizing:border-box;
+ border-left:0;
+ margin:0;
+}
+
+.pure-form input:focus,
+.pure-form textarea:focus {
+ outline:0;
+}
+
+.pure-form input[disabled],
+.pure-form textarea[disabled] {
+ cursor:not-allowed;
+ background-color:#eaeded;
+ color:#cad2d3;
+}
+
+.pure-form input[readonly],
+.pure-form textarea[readonly] {
+ background-color:#eee;
+ color:#777;
+ border-color:#ccc;
+}
+
+.pure-form input:focus:invalid,
+.pure-form select:focus:invalid {
+ color:#b94a48;
+ border-color:#e9322d;
+}
+
+.pure-form select {
+ height:2.25em;
+ border:1px solid #ccc;
+ background-color:#fff;
+}
+
+.pure-form select[multiple] {
+ height:auto;
+}
+
+.pure-form label {
+ margin:.5em 0 .2em;
+}
+
+@media only screen and (max-width :480px) {
+ .pure-form button[type=submit] {
+ margin:.7em 0 0;
+ }
+
+ .pure-form label {
+ margin-bottom:.3em;
+ display:block;
+ }
+}
\ No newline at end of file
diff --git a/www/css/style.css b/www/css/style.css
index 291123bca06912f0cc06791c0e8b44418c416bce..e44fa76bd8e5e127ed83648f72a2c47665bc4c70 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -64,12 +64,12 @@ article{
-header a, footer a{
+header a, footer a {
color:navajowhite;
text-decoration: none;
}
-header a:hover, footer a:hover{
+header a:hover, footer a:hover {
color:cadetblue;
text-decoration: none;
}
@@ -87,18 +87,28 @@ header a:hover, footer a:hover{
margin-left:20px;
}
-.search-bar-conteneur{
+.search-bar-conteneur {
vertical-align: middle;
margin-top:5px;
- background-color:white;
height: 32px;
border-radius: 2px;
position: static;
+}
+.search-bar {
+ margin-right:32px;
+ width: calc(100% - 32px);
}
-.connexion
-{
+.search-button {
+ width:32px;
+ height: 32px;
+ float:right;
+ background-image:url(../images/find.png);
+ background-size: 31px;
+}
+
+.connexion {
text-align: center;
border-radius: 2px;
background: #02071E;
@@ -109,7 +119,7 @@ header a:hover, footer a:hover{
}
-.signin{
+.signin {
width:48%;
text-align: center;
padding: 2px;
@@ -122,12 +132,12 @@ header a:hover, footer a:hover{
margin-right:-4px;
}
-.signin:hover{
+.signin:hover {
background: red linear-gradient(to bottom, #02071E, #02071E, rgba(255, 255, 255, 0));
}
-.login{
+.login {
width:48%;
text-align: center;
padding: 2px;