Ajout de fichiers et modifications des existants pour le design de la barre de...

Ajout de fichiers et modifications des existants pour le design de la barre de recherche en haut de page

Ajout de fichiers et modifications des existants pour le design de la barre de...
dbaa4226 · vbochet · e9b33ab6 · dbaa4226 · dbaa4226 · dbaa4226
--- 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">

--- a/www/css/jquery.auto-complete.css
+++ b/www/css/jquery.auto-complete.css
+.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; }
--- a/www/css/pure.min.css
+++ b/www/css/pure.min.css
+.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
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -90,15 +90,25 @@ header a:hover, footer a:hover{
 .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;