From bbfb63f0c1c58f2dd0a24f424d5bcfd1869a6f59 Mon Sep 17 00:00:00 2001
From: Kevin XU <kevin-xu@hotmail.fr>
Date: Sun, 4 Nov 2018 17:58:20 +0100
Subject: [PATCH] =?UTF-8?q?Suggestions=20directement=20cliquable=20pour=20?=
=?UTF-8?q?acc=C3=A9der=20aux=20profils=20et=20Ajouts=20de=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
page_profile/profil.php | 3 ++
page_welcome/css/style.css | 61 ++++++++++++++++++++++++++++++++++++++
page_welcome/index.php | 37 +++++++++++++----------
3 files changed, 86 insertions(+), 15 deletions(-)
diff --git a/page_profile/profil.php b/page_profile/profil.php
index dceb2ec..96afe0c 100644
--- a/page_profile/profil.php
+++ b/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');
}
diff --git a/page_welcome/css/style.css b/page_welcome/css/style.css
index 90f38f6..6844051 100644
--- a/page_welcome/css/style.css
+++ b/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
diff --git a/page_welcome/index.php b/page_welcome/index.php
index c4495c6..278fe57 100644
--- a/page_welcome/index.php
+++ b/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>
- <div class="clearfix"> </div>
- </form>
- </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">
- <div id="suggestionButtons" style="text-align: left; width: 200px; margin-left: 310px">
-
+
+ </datalist>
+ <div class="clearfix"> </div>
</div>
+ </div>
+
</div>
+
+ <div id="suggestionButtons">
+ </div>
</div>
</div>
</li>
-
</ul>
</div>
<!-- //banner -->
--
GitLab