From 0fe115d371fffa2f77e90c91cebf7acc2fc817d8 Mon Sep 17 00:00:00 2001 From: Florian SYLVAIN Date: Tue, 7 Dec 2021 18:10:46 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Visuels=20W.I.P.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ProjetProgWeb/api.php | 2 +- ProjetProgWeb/app.js | 40 ++++++++++++++++++++++++++++-------- ProjetProgWeb/index.php | 7 ++++--- ProjetProgWeb/stylesheet.css | 22 ++++++++++++-------- 4 files changed, 49 insertions(+), 22 deletions(-) diff --git a/ProjetProgWeb/api.php b/ProjetProgWeb/api.php index dcd42f1..e5d9e8d 100644 --- a/ProjetProgWeb/api.php +++ b/ProjetProgWeb/api.php @@ -13,7 +13,7 @@ $q = $_GET['q']; if (strlen($author_name) < 3) { print_r(json_encode(array( "status" => 400, - "message" => "Le nom de l'auteur doit comporter un minimum de 3 caractères." + "message" => "La recherche doit comporter un minimum de 3 caractères." ))); exit(); } diff --git a/ProjetProgWeb/app.js b/ProjetProgWeb/app.js index b6d9c27..8081042 100644 --- a/ProjetProgWeb/app.js +++ b/ProjetProgWeb/app.js @@ -18,12 +18,13 @@ let header = document.querySelector('header') let title = document.querySelector('#title') let ham = document.querySelector('#hamburgerSvg') let cross = document.querySelector('#crossSvg') +let pagesNumbersContainer = document.querySelector('.page-nav') let pagesNumbers = document.querySelector('.page-nav div') let resultsDiv = document.querySelector('#results') let resultsCount = document.querySelector('#results-count') function sanitize(chain) { - return chain.replace(/[^a-zA-Z0-9 ]/g,'') + return chain.replace(/[^a-zA-Z0-9\- ]/g,'') } function showSuggestions() { @@ -89,6 +90,9 @@ function updateUnderline(number) { pagesNumbers.childNodes.forEach(elem => { if (elem.innerHTML == number) { elem.style.textDecoration = "underline" + pagesNumbers.scrollLeft += elem.getBoundingClientRect().left - + pagesNumbers.getBoundingClientRect().left - + (pagesNumbers.offsetWidth / 2) + (elem.offsetWidth / 2) } else { elem.style.textDecoration = 'none' } @@ -106,27 +110,44 @@ function displayResults(results) { error.classList.remove("fade-out"); error.classList.add("fade-in"); errorMessage.innerHTML = results.message + pagesNumbersContainer.style.display = 'none' return; } else if (results.status === 200) { count = 0 resultsArray = [] + pagesNumbersContainer.style.display = 'flex' results.data.forEach(elem => { let result = document.createElement('div') result.classList.add('result-element') let i = 0 - elem.forEach(e => { - let child = document.createElement(i === 0 ? 'h2' : 'p') - child.innerText = e - result.appendChild(child) - i += 1 - }) + + let qAuthor = elem[0] + let author = document.createElement('h3') + let pre_replacement = new RegExp( authorName, 'gi').exec(qAuthor) + author.innerHTML = qAuthor.replace(pre_replacement, `${pre_replacement}`) + + let qTitle = elem[2] + let title = document.createElement('p') + title.innerText = qTitle + + result.appendChild(author) + result.appendChild(title) + + // elem.forEach(e => { + // let child = document.createElement(i === 0 ? 'h2' : 'p') + // let pre_replacement = new RegExp( authorName, 'gi').exec(e) + // child.innerHTML = e.replace(pre_replacement, `${pre_replacement}`) + // result.appendChild(child) + // i += 1 + // }) count += 1 resultsArray.push(result) }) let nb = document.createElement("p") - nb.innerHTML = `Nombre de résultats pour "${authorName}": ${count}.` + nb.innerHTML = `Nombre de résultats pour "${authorName}": + ${new Intl.NumberFormat('fr-FR', { maximumSignificantDigits: 3 }).format(count)}.` resultsCount.appendChild(nb) loader.style.display = "none" @@ -153,7 +174,7 @@ function displayResults(results) { let currentPage = 1 function browseResults(wantedPage) { - if (wantedPage > 0 && wantedPage < nbPages+1) { + if ((wantedPage > 0 && wantedPage < nbPages + 1)) { emptyResults() updateUnderline(wantedPage) currentPage = wantedPage @@ -161,6 +182,7 @@ function browseResults(wantedPage) { resultsArray.slice(wantedPage - RESULTS_NUMBER, wantedPage).forEach(result => { resultsDiv.appendChild(result) }) + fadeIn() } } diff --git a/ProjetProgWeb/index.php b/ProjetProgWeb/index.php index 745093a..f97bbda 100644 --- a/ProjetProgWeb/index.php +++ b/ProjetProgWeb/index.php @@ -31,12 +31,13 @@

<-

-
-
+

->

-
+
+

Bienvenue sur theses.fr

+
diff --git a/ProjetProgWeb/stylesheet.css b/ProjetProgWeb/stylesheet.css index ed53c58..5d13e36 100644 --- a/ProjetProgWeb/stylesheet.css +++ b/ProjetProgWeb/stylesheet.css @@ -20,6 +20,7 @@ body { margin: 0; padding: 0; width: 100%; + background-color: #FDFDFD; } header { @@ -266,7 +267,7 @@ header { } #results { - margin: 10px; + padding: 10px; display: flex; flex-direction: column; gap: 15px; @@ -280,11 +281,10 @@ header { /*TODO : Faire des beaux panneaux expansibles*/ .result-element { - box-shadow: rgba(0, 0, 0, 0.10) 2px 2px 8px; - background-color: rgba(250, 250, 250, 0.5); + box-shadow: rgba(0, 0, 0, 0.10) 2px 2px 15px; border-radius: 3px; - margin: 0 5px 5px 5px; - padding: 5px 10px 10px 10px; + margin: 0 5px 0 5px; + padding: 0 10px 0 10px; transform: translateX(100px); } @@ -401,11 +401,15 @@ header { } .page-nav { - display: flex; + -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; + display: none; gap: 10px; font-size: 18px; line-height: 0; - margin: 15px auto 15px auto; + margin: 0 auto 0 auto; padding: 0 15px 0 15px; border-radius: 20px; color: #1a5f7d; @@ -415,8 +419,8 @@ header { .page-nav div { display: flex; gap: 5px; - max-width: 155px; - overflow-x: scroll; + max-width: 170px; + overflow-x: hidden; } /* Small */