🎨 Style improvement

ProjetProgWeb/app.js

@@ -1,8 +1,8 @@
-let navbarForm = document.getElementsByClassName('navbar-form')[0]
-let searchbar = document.getElementById('searchbar')
-let suggestions = document.getElementById('suggestions')
-let searchBarButton = document.getElementById('search-button')
-let loader = document.getElementsByClassName('loader')[0]
+let navbarForm = document.querySelectorAll('.navbar-form')[0]
+let searchBar = document.querySelectorAll('#searchbar')[0]
+let searchBarButton = document.querySelectorAll('#search-button')[0]
+let suggestions = document.querySelectorAll('#suggestions')[0]
+let loader = document.querySelectorAll('.loader')[0]
 
 let authorName = "";
 
@@ -14,14 +14,25 @@ function requestToApi(author) {
         .then(data => displayResults(data))
 }
 
+let elementsToFade = null
+function fadeIn() {
+    elementsToFade.forEach(elem => {
+        let distInView = elem.getBoundingClientRect().top - window.innerHeight + 20;
+        if (distInView < 0) {
+            elem.classList.add("fade-in");
+        }
+    })
+}
+
 // TODO : Faire un système de page plutôt que de charger 10000 résultats en une fois s'il y en a 10000..
 function displayResults(results) {
     let count = 0
-    results.forEach(function(elem) {
+
+    results.forEach(elem => {
         let result = document.createElement('div')
         result.classList.add('result-element')
         let i = 0
-        elem.forEach(function(e) {
+        elem.forEach(e => {
             let child = document.createElement(i === 0 ? 'h1' : 'p')
             child.innerText = e
             result.appendChild(child)
@@ -30,25 +41,33 @@ function displayResults(results) {
         count += 1
         document.getElementById('results').appendChild(result)
     })
+
     let nb = document.createElement("p")
     nb.innerHTML = `Nombre de résultats pour "${authorName}": ${count}.`
     document.getElementById('results-count').appendChild(nb)
+
     loader.style.display = "none"
+
+    elementsToFade = document.querySelectorAll(".result-element")
+    window.addEventListener('scroll', fadeIn);
+    fadeIn()
 }
 
 let lastSearch = ""
 let last = new Date().getTime()
+let suggestionsDisplayed = false
 
 function realTimeDisplay() {
     let search = document.getElementsByName("author")[0].value
     if (search.length > 3 && (search !== lastSearch || (new Date().getTime() - last) > 500)) {
+        showSuggestions()
         lastSearch = search
         last = new Date().getTime()
         fetch(`api.php?q=authors&author=${search}`)
             .then(response => response.json())
             .then(function(data) {
                 suggestions.innerHTML = ""
-                data.forEach(function(elem) {
+                data.forEach(elem => {
                     let outsideTag = document.createElement('a')
                     outsideTag.href = "index.php?author=" + elem
                     let name = document.createElement('p')
@@ -60,19 +79,25 @@ function realTimeDisplay() {
     }
 }
 
-searchbar.addEventListener('focus', () => {
-    navbarForm.style.borderRadius = '15px 15px 0 0'
-    suggestions.style.display = 'block'
-    searchBarButton.style.boxShadow = 'none'
-    searchBarButton.classList.remove('animation-in')
-    searchBarButton.classList.add('animation-out')
-});
-searchbar.addEventListener('focusout', () => {
-    if (!suggestions === document.activeElement) {
+function showSuggestions() {
+    if (!suggestionsDisplayed) {
+        navbarForm.style.borderRadius = '15px 15px 0 0'
+        suggestions.style.display = 'block'
+        searchBarButton.style.boxShadow = 'none'
+        searchBarButton.classList.remove('animation-in')
+        searchBarButton.classList.add('animation-out')
+        suggestionsDisplayed = true
+    }
+}
+
+document.addEventListener('click', function (e){
+    if (e.target.id !== 'suggestions' && e.target !== searchBar && e.target !== searchBarButton) {
         navbarForm.style.borderRadius = '15px'
         suggestions.style.display = 'none'
         searchBarButton.style.boxShadow = 'rgba(0, 0, 0, 0.15) 4px 2px 5px'
         searchBarButton.classList.remove('animation-out')
         searchBarButton.classList.add('animation-in')
+        suggestionsDisplayed = false
     }
-});
+})
+

ProjetProgWeb/navbar.php

@@ -2,6 +2,11 @@
     <nav class="navbar">
         <h1>theses.fr</h1>
 
+        <!-- svg from iconmonstr -->
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="hamburger">
+            <path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/>
+        </svg>
+
         <div class="research-section">
             <form action="index.php" method="GET" class="navbar-form">
                 <input type="text" name="author" placeholder="nom auteur" onkeyup="realTimeDisplay()" id="searchbar">

ProjetProgWeb/stylesheet.css

@@ -10,14 +10,15 @@ body {
     margin: 0;
     padding: 0;
     width: 100%;
+    overflow-x: hidden;
 }
 
 .navbar {
     display: flex;
     align-items: center;
     justify-content: center;
-    flex-direction: column;
-    background-color: rgba(57, 180, 231, 0.50);
+    gap: 10px;
+    background: linear-gradient(245deg, #39B4E7 -15%, #0096DC 110%);
     box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 5px;
     height: 75px;
     padding: 10px;
@@ -49,6 +50,10 @@ body {
     width: 100%;
 }
 
+/*.navbar input:hover, .navbar input:focus {*/
+/*    box-shadow: rgba(0, 0, 0, 0.15) 0 2px 5px;*/
+/*}*/
+
 .navbar button {
     align-self: center;
     height: 60px;
@@ -120,6 +125,12 @@ body {
     background-color: rgba(0, 0, 0, 0.05);
 }
 
+#hamburger {
+    fill: white;
+    width: 45px;
+    height: 45px;
+}
+
 #results {
     font-family: sans-serif;
     margin: 10px;
@@ -131,17 +142,29 @@ body {
 #results-count {
     font-family: sans-serif;
     opacity: 50%;
-    margin: 0 0 0 15px;
+    margin: 0 15px 0 15px;
 }
 
+/*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);
     border-radius: 3px;
     margin: 0 5px 5px 5px;
     padding: 5px 10px 10px 10px;
+    transform: translateX(100px);
 }
 
+.fade-in {
+    animation: fade-in 250ms linear;
+    transition: 250ms;
+    transform: translateX(0px);
+    animation-fill-mode: forwards;
+}
+@keyframes fade-in {
+    from { opacity: 0 }
+    to { opacity: 100% }
+}
 
 /*TODO : Faire une belle erreur*/
 .error {
@@ -170,16 +193,16 @@ body {
     stroke-width: 20px;
 }
 .load.one {
-    stroke: #554d73;
+    stroke: #034E6E;
     animation: load 1.5s infinite;
 }
 .load.two {
-    stroke: #a496a4;
+    stroke: #1779A3;
     animation: load 1.5s infinite;
     animation-delay: 0.1s;
 }
 .load.three {
-    stroke: #a5a7bb;
+    stroke: #39B4E7;
     animation: load 1.5s infinite;
     animation-delay: 0.2s;
 }
@@ -188,15 +211,15 @@ body {
     animation: bounce 1s infinite ease-in-out;
 }
 .point.one {
-    fill: #a5a7bb;
+    fill: #39B4E7;
     animation-delay: 0s;
 }
 .point.two {
-    fill: #a496a4;
+    fill: #1779A3;
     animation-delay: 0.1s;
 }
 .point.three {
-    fill: #554d73;
+    fill: #034E6E;
     animation-delay: 0.2s;
 }