🎨 General visuals improvements

ProjetProgWeb/app.js

@@ -5,6 +5,8 @@ const EXTRA_LARGE = 1200
 
 const RESULTS_NUMBER = 10
 
+const urlParams = new URLSearchParams(window.location.search);
+
 let navbarForm = document.querySelector('.navbar-form')
 let searchBar = document.querySelector('#searchbar')
 let searchBarButton = document.querySelector('#search-button')
@@ -99,6 +101,19 @@ function updateUnderline(number) {
     })
 }
 
+function focusResults(result) {
+    resultsDiv.childNodes.forEach(elem => {
+        let elemContent = elem.querySelector('.element-content')
+        if (result !== elem) {
+            elemContent.style.display = 'none'
+        } else {
+            let display = elemContent.style.display
+            elemContent.style.display = display === 'none' || display === '' ? 'block' : 'none'
+        }
+    })
+    fadeIn()
+}
+
 let resultsArray = []
 let count = 0
 let nbPages = 0
@@ -121,6 +136,8 @@ function displayResults(results) {
             result.classList.add('result-element')
             let i = 0
 
+            let header = document.createElement('div')
+
             let qAuthor = elem[0]
             let author = document.createElement('h3')
             let pre_replacement = new RegExp( authorName, 'gi').exec(qAuthor)
@@ -130,18 +147,41 @@ function displayResults(results) {
             let title = document.createElement('p')
             title.innerText = qTitle
 
-            result.appendChild(author)
+            let firstElement = document.createElement('div')
-            result.appendChild(title)
+            firstElement.classList.add('result-element-header')
 
-            // elem.forEach(e => {
+            let onlineButton = document.createElement('button')
-            //     let child = document.createElement(i === 0 ? 'h2' : 'p')
+            onlineButton.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 16.057v-3.057h2.994c-.059 1.143-.212 2.24-.456 3.279-.823-.12-1.674-.188-2.538-.222zm1.957 2.162c-.499 1.33-1.159 2.497-1.957 3.456v-3.62c.666.028 1.319.081 1.957.164zm-1.957-7.219v-3.015c.868-.034 1.721-.103 2.548-.224.238 1.027.389 2.111.446 3.239h-2.994zm0-5.014v-3.661c.806.969 1.471 2.15 1.971 3.496-.642.084-1.3.137-1.971.165zm2.703-3.267c1.237.496 2.354 1.228 3.29 2.146-.642.234-1.311.442-2.019.607-.344-.992-.775-1.91-1.271-2.753zm-7.241 13.56c-.244-1.039-.398-2.136-.456-3.279h2.994v3.057c-.865.034-1.714.102-2.538.222zm2.538 1.776v3.62c-.798-.959-1.458-2.126-1.957-3.456.638-.083 1.291-.136 1.957-.164zm-2.994-7.055c.057-1.128.207-2.212.446-3.239.827.121 1.68.19 2.548.224v3.015h-2.994zm1.024-5.179c.5-1.346 1.165-2.527 1.97-3.496v3.661c-.671-.028-1.329-.081-1.97-.165zm-2.005-.35c-.708-.165-1.377-.373-2.018-.607.937-.918 2.053-1.65 3.29-2.146-.496.844-.927 1.762-1.272 2.753zm-.549 1.918c-.264 1.151-.434 2.36-.492 3.611h-3.933c.165-1.658.739-3.197 1.617-4.518.88.361 1.816.67 2.808.907zm.009 9.262c-.988.236-1.92.542-2.797.9-.89-1.328-1.471-2.879-1.637-4.551h3.934c.058 1.265.231 2.488.5 3.651zm.553 1.917c.342.976.768 1.881 1.257 2.712-1.223-.49-2.326-1.211-3.256-2.115.636-.229 1.299-.435 1.999-.597zm9.924 0c.7.163 1.362.367 1.999.597-.931.903-2.034 1.625-3.257 2.116.489-.832.915-1.737 1.258-2.713zm.553-1.917c.27-1.163.442-2.386.501-3.651h3.934c-.167 1.672-.748 3.223-1.638 4.551-.877-.358-1.81-.664-2.797-.9zm.501-5.651c-.058-1.251-.229-2.46-.492-3.611.992-.237 1.929-.546 2.809-.907.877 1.321 1.451 2.86 1.616 4.518h-3.933z\"/></svg>"
-            //     let pre_replacement = new RegExp( authorName, 'gi').exec(e)
+            if (elem[14] === 'no') {
-            //     child.innerHTML = e.replace(pre_replacement, `<mark>${pre_replacement}</mark>`)
+                onlineButton.disabled = true
-            //     result.appendChild(child)
+            } else {
-            //     i += 1
+                onlineButton.onclick = function() {
-            // })
+                    window.open('https://www.theses.fr/' + elem[13] + '/document', ',_blank')
+                }
+            }
+
+            firstElement.append(author, onlineButton)
+            header.append(firstElement, title)
+
+            let content = document.createElement('div')
+            content.classList.add('element-content')
+
+            elem.forEach(e => {
+                if (i > 3 && i !== 14) {
+                    let child = document.createElement('p')
+                    let pre_replacement = new RegExp(authorName, 'gi').exec(e)
+                    child.innerHTML = e.replace(pre_replacement, `<mark>${pre_replacement}</mark>`)
+                    content.appendChild(child)
+                } i += 1
+            })
             count += 1
 
+            header.addEventListener('click', (e) => {
+                focusResults(result)
+            })
+
+            result.append(header, content)
+
             resultsArray.push(result)
         })
 
@@ -166,6 +206,10 @@ function displayResults(results) {
             pagesNumbers.appendChild(number)
         }
 
+        if (count < 1) {
+            pagesNumbersContainer.style.display = 'none'
+        }
+
         browseResults(1)
         fadeIn()
     }
@@ -191,7 +235,7 @@ let lastSuggestion = new Date().getTime()
 let suggestionsDisplayed = false
 
 function realTimeDisplay() {
-    let search = document.querySelector('input[name=\'author\']').value
+    let search = document.querySelector('input[name=\'search\']').value
     search = sanitize(search)
     if (search.length > 3 && (search !== lastSearch && (new Date().getTime() - lastSuggestion) > 500)) {
         lastSearch = search
@@ -280,9 +324,16 @@ searchBar.addEventListener('focus', () => {
     switchNavTitle(false)
 })
 
-navbarForm.addEventListener('submit', e => {
+// navbarForm.addEventListener('submit', e => {
-    e.preventDefault()
+//     e.preventDefault()
-    let data = new FormData(navbarForm)
+//     let data = new FormData(navbarForm)
-    searchBar.blur()
+//     searchBar.blur()
-    apiRequestThese(data.get('author'))
+//     apiRequestThese(data.get('author'))
-})
+// })
+
+let urlSearch = urlParams.get('search')
+
+if (urlSearch) {
+    searchBar.value = urlSearch
+    apiRequestThese(urlSearch)
+}

ProjetProgWeb/class/dump.php

@@ -24,7 +24,7 @@ class dump {
 
         $author = '%' . $author . '%';
 
-        $stmt = $pdo->prepare("SELECT * FROM theses WHERE author LIKE :author;");
+        $stmt = $pdo->prepare("SELECT * FROM theses WHERE author LIKE :author ORDER BY author;");
         $stmt->bindParam(':author', $author, PDO::PARAM_STR, 100);
         $stmt->execute();
 

ProjetProgWeb/index.php

@@ -39,6 +39,8 @@
             <h1 style="color:#CFCFCF;text-align: center">Bienvenue sur theses.fr</h1>
         </div>
 
+        <!-- TODO Bouton pour remonter en haut de la page -->
+
         <div id="error">
             <div id="error-message"></div>
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="error-button">

ProjetProgWeb/navbar.php

@@ -10,8 +10,8 @@
         <h1 id="title">theses.fr</h1>
 
         <div class="research-section">
-            <form class="navbar-form">
+            <form class="navbar-form" method="GET" action="index.php">
-                <input type="text" name="author" placeholder="recherche" onkeyup="realTimeDisplay()" id="searchbar">
+                <input type="text" name="search" placeholder="recherche" onkeyup="realTimeDisplay()" id="searchbar">
                 <button id="form-button">
                     <img src="assets/search.svg" alt="search" id="search-button" class="animation-in">
                 </button>

ProjetProgWeb/stylesheet.css

@@ -279,15 +279,58 @@ header {
     margin: 0 15px 0 15px;
 }
 
-/*TODO : Faire des beaux panneaux expansibles*/
 .result-element {
-    box-shadow: rgba(0, 0, 0, 0.10) 2px 2px 15px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 15px;
     border-radius: 3px;
     margin: 0 5px 0 5px;
     padding: 0 10px 0 10px;
     transform: translateX(100px);
 }
 
+.result-element:hover {
+    box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 15px;
+}
+
+.result-element-header {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.result-element h3 {
+    overflow-wrap: break-word;
+}
+
+.result-element-header {
+    display: flex;
+    align-items: center;
+}
+
+.result-element-header button {
+    background: none;
+    border: none;
+    margin-left: auto;
+    cursor: pointer;
+}
+
+.result-element-header button svg {
+    background: linear-gradient(245deg, rgba(57, 179, 231, 0.15) -15%, rgba(0, 149, 219, 0.15) 110%);
+    border-radius: 3px;
+    fill: #39B4E7;
+    padding: 4px;
+    transform: scale(1.5);
+}
+
+.result-element-header button:disabled {
+    filter: grayscale(100);
+}
+
+.element-content {
+    display: none;
+}
+
 .fade-in {
     animation: fade-in 250ms linear;
     transition: 250ms;
@@ -421,6 +464,11 @@ header {
     gap: 5px;
     max-width: 170px;
     overflow-x: hidden;
+    cursor: pointer;
+}
+
+.page-nav p {
+    cursor: pointer;
 }
 
 /* Small  */
@@ -430,7 +478,10 @@ header {
 
 /* Medium */
 @media (min-width: 768px) {
-
+    .result-element {
+        width: 768px;
+        margin: auto;
+    }
 }
 
 /* Large */