🚧 Visuels W.I.P.

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();
 }

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, `<mark>${pre_replacement}</mark>`)
+
+            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, `<mark>${pre_replacement}</mark>`)
+            //     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()
     }
 }
 

ProjetProgWeb/index.php

@@ -31,12 +31,13 @@
 
         <div class="page-nav">
             <p onclick="browseResults(currentPage-1)">&#60;-</p>
-            <div>
-            </div>
+            <div></div>
             <p onclick="browseResults(currentPage+1)">-&#62;</p>
         </div>
 
-        <div id="results"></div>
+        <div id="results">
+            <h1 style="color:#CFCFCF;text-align: center">Bienvenue sur theses.fr</h1>
+        </div>
 
         <div id="error">
             <div id="error-message"></div>

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  */