Suggestions directement cliquable pour accéder aux profils et Ajouts de CSS

page_profile/profil.php

@@ -7,6 +7,9 @@ if (isset($_POST['username'])) {
 elseif (isset($_POST['id'])) {
  	$id = $_POST['id'];
 }
+elseif (isset($_GET['username'])) {
+	$id = getUserId($_GET['username']);
+}
 else {
 	echo('ERREUR');
 }

page_welcome/css/style.css

@@ -268,6 +268,7 @@ button.submit:hover {
 .bg1,
 .bg2 {
     min-height: 50vw;
+    height: 700px;
 }
 
 /*-- text Slider --*/
@@ -1434,4 +1435,64 @@ input.img:checked + label {
 }
 
 
+
+/* AJOUT DE KEVIN : PAGE ACCUEIL */
+#suggestionButtons {
+    width: 400px; 
+    margin:auto; 
+    display: flex; 
+    align-items: center; 
+    justify-content: flex-start; 
+    flex-direction: column;
+}
+
+.suggestionButton {
+    width: 400px; text-align: left; height: 60px;
+
+
+    position: relative;
+    background-color: white;
+    border: none;
+    font-size: 20px;
+    color: black;
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+    text-decoration: none;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.suggestionButton:after {
+    content: "";
+    background: grey;
+    display: block;
+    position: absolute;
+    padding-top: 300%;
+    padding-left: 350%;
+    margin-left: -20px!important;
+    margin-top: -120%;
+    opacity: 0;
+    transition: all 0.8s
+}
+
+.suggestionButton:active:after {
+    padding: 0;
+    margin: 0;
+    opacity: 1;
+    transition: 0s
+}
+
+.suggestionButton:hover {background-color: #DCDCDC}
+
+
+
+
+
+
+
+
+
+
+
+
 /* -- //Responsive code -- */
\ No newline at end of file

page_welcome/index.php

@@ -4,6 +4,7 @@ session_start();
 ?>
 
 <script>
+	// function for suggestions of the research
     function showSuggestions(){
         var field = document.getElementById("searchField");
         var keyword = field.value;
@@ -29,7 +30,11 @@ session_start();
                 //console.log(tab[0].username);
 
                 for(var i = 0; i < tab.length; i++) {
-                    options += '<button id="monBtn" style="width: 266px; text-align: left;"><img src="'+ tab[i].profile_image + '" alt="icone" style="vertical-align:middle; position:relative;  width:50px; height: 50px;" /><span style="margin-left:10px;">'+tab[i].username+'</span></button><br/>';
+                    options += '<button id="userSuggesBtn" class="suggestionButton" onclick="window.location.href=\'../page_profile/profil.php?username='+tab[i].username+'\'"><img src="'+ 
+                    	tab[i].profile_image + 
+                    	'" alt="icone" style="vertical-align:middle; position:relative;  width:50px; height: 50px;" /><span style="margin-left:10px;">'+
+                    	tab[i].username +
+                    	'</span></button>';
                 }
 
                 document.getElementById('suggestionButtons').innerHTML = options;
@@ -242,14 +247,7 @@ session_start();
 								<span>FIND YOUR INFLUENCER</span>
 							</h3>
 							<div class="search-agile">
-								<form action="../page_profile/profil.php" method="post">
-
-									<input id="searchField" list="usernames" name="username" type="text" size="40" maxlength="100" autocomplete="off" placeholder="Search here..." onkeyup="showSuggestions()">
-						            <datalist id="usernames">
-
-						            	
-
-						            </datalist>
+								<div>
 
 									<!-- <input type="submit" value="Search"> -->
 									<div style="display: inline-flex;">
@@ -265,20 +263,29 @@ session_start();
 									    <input class="img" type="radio" id="radio_4" name="radio[]" value="4" />
 									    <label for="radio_4"><img src="images/facebook.png" width="50" height="50"/></label>
 									</div>
+									<input id="searchField" style="height: 50px; font-size: 20px;" list="usernames" name="username" type="text" size="40" maxlength="100" autocomplete="off" placeholder="Search here..." onkeyup="
+										if (this.value === '') {
+											document.getElementById('suggestionButtons').innerHTML = '';
+										} else {
+											showSuggestions();
+										}">
+						            <datalist id="usernames">
+
+						            	
+
+						            </datalist>
 									<div class="clearfix"> </div>
-								</form>
 								</div>
-
-								<div id="suggestionButtons" style="text-align: left; width: 200px; margin-left: 310px">
+							</div>
 
 
 						</div>
 
+								<div id="suggestionButtons">
 								</div>
 					</div>
 				</div>
 			</li>
-
 		</ul>
 	</div>
 	<!-- //banner -->