fsylvain/projet_programmation_web
1
0
Fork 0
mirror of https://github.com/Floriansylvain/projet_programmation_web.git synced 2026-08-19 19:53:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

✨ Added reactive title to navbar

Browse Source
This commit is contained in:
Florian Sylvain
2021-11-03 00:24:40 +01:00
parent 286c3cad96
commit 06457a79a5
3 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ProjetProgWeb/app.js
+9
View File
@@ -8,6 +8,7 @@ let errorMessage = document.querySelector('#error-message')
let errorButton = document.querySelector('#error-button') let errorButton = document.querySelector('#error-button')
let hamMenu = document.querySelector('#hamburger-menu') let hamMenu = document.querySelector('#hamburger-menu')
let header = document.querySelector('header') let header = document.querySelector('header')
let title = document.querySelector('#title')
function sanitize(chain) { function sanitize(chain) {
return chain.replace(/[^a-zA-Z0-9 ]/g,'') return chain.replace(/[^a-zA-Z0-9 ]/g,'')
@@ -132,7 +133,11 @@ function realTimeDisplay() {
document.addEventListener('click', e => { document.addEventListener('click', e => {
if (e.target.id !== 'suggestions' && e.target !== searchBar && e.target !== searchBarButton) { if (e.target.id !== 'suggestions' && e.target !== searchBar && e.target !== searchBarButton) {
hideSuggestions() hideSuggestions()
title.style.display = 'block'
if (e.target.id === 'hamburger' || e.target.id === 'hamburgerSvg' || e.target.id === 'crossSvg') { if (e.target.id === 'hamburger' || e.target.id === 'hamburgerSvg' || e.target.id === 'crossSvg') {
let ham = document.querySelector('#hamburgerSvg') let ham = document.querySelector('#hamburgerSvg')
let cross = document.querySelector('#crossSvg') let cross = document.querySelector('#crossSvg')
@@ -173,6 +178,10 @@ document.addEventListener('click', e => {
} }
}) })
searchBar.addEventListener('focus', () => {
title.style.display = 'none'
})
navbarForm.addEventListener('submit', e => { navbarForm.addEventListener('submit', e => {
e.preventDefault() e.preventDefault()
let data = new FormData(navbarForm) let data = new FormData(navbarForm)
ProjetProgWeb/navbar.php
+2 -1
View File
@@ -1,13 +1,14 @@
<header> <header>
<nav class="navbar"> <nav class="navbar">
<h1>theses.fr</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="hamburger"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="hamburger">
<path id="hamburgerSvg" d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/> <path id="hamburgerSvg" d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"/>
<path id="crossSvg" class="spin-fade" d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/> <path id="crossSvg" class="spin-fade" d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/>
</svg> </svg>
<h1 id="title">theses.fr</h1>
<div class="research-section"> <div class="research-section">
<form class="navbar-form"> <form class="navbar-form">
<input type="text" name="author" placeholder="nom auteur" onkeyup="realTimeDisplay()" id="searchbar"> <input type="text" name="author" placeholder="nom auteur" onkeyup="realTimeDisplay()" id="searchbar">
ProjetProgWeb/stylesheet.css
+7 -9
View File
@@ -113,7 +113,9 @@ header {
} }
.navbar h1 { .navbar h1 {
display: none; color: white;
font-size: xxx-large;
font-family: Cookie, 'sans-serif';
} }
#suggestions { #suggestions {
@@ -142,8 +144,8 @@ header {
#hamburger { #hamburger {
fill: white; fill: white;
width: 45px; min-width: 30px;
height: 45px; min-height: 30px;
} }
#hamburgerSvg, #crossSvg { #hamburgerSvg, #crossSvg {
@@ -377,12 +379,8 @@ header {
} }
} }
@keyframes load { @keyframes load {
0% { 0% { stroke-dashoffset: 570 }
stroke-dashoffset: 570; 50% { stroke-dashoffset: 530 }
}
50% {
stroke-dashoffset: 530;
}
100% { 100% {
stroke-dashoffset: 570; stroke-dashoffset: 570;
transform: rotate(360deg); transform: rotate(360deg);