From f55f86647637c46dbd1aedccdc3fc8503433bc02 Mon Sep 17 00:00:00 2001 From: Florian SYLVAIN Date: Sun, 2 Jan 2022 17:12:47 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Visuals=20improvements=20and=20i?= =?UTF-8?q?ntroduced=20filters?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ProjetProgWeb/app.js | 4 --- ProjetProgWeb/navbar.php | 25 ++++++++++++---- ProjetProgWeb/stylesheet.css | 56 +++++++++++++++++++++--------------- 3 files changed, 52 insertions(+), 33 deletions(-) diff --git a/ProjetProgWeb/app.js b/ProjetProgWeb/app.js index 5b21078..3edff4c 100644 --- a/ProjetProgWeb/app.js +++ b/ProjetProgWeb/app.js @@ -16,7 +16,6 @@ let error = document.querySelector('#error') let errorMessage = document.querySelector('#error-message') let errorButton = document.querySelector('#error-button') let hamMenu = document.querySelector('#hamburger-menu') -let header = document.querySelector('header') let title = document.querySelector('#title') let ham = document.querySelector('#hamburgerSvg') let cross = document.querySelector('#crossSvg') @@ -266,14 +265,11 @@ function switchHam(q) { if (q) { ham.classList.add('spin-fade') cross.classList.remove('spin-fade') - header.classList.remove('slide-out-header') - header.classList.add('slide-in-header') hamMenu.classList.remove('slide-out') hamMenu.classList.add('slide-in') } else { cross.classList.add('spin-fade') ham.classList.remove('spin-fade') - header.classList.replace('slide-in-header', 'slide-out-header') hamMenu.classList.replace('slide-in', 'slide-out') } } diff --git a/ProjetProgWeb/navbar.php b/ProjetProgWeb/navbar.php index 06395dd..0ec4f8c 100644 --- a/ProjetProgWeb/navbar.php +++ b/ProjetProgWeb/navbar.php @@ -23,12 +23,25 @@
-
- - - -
-
+
+

Filtres :

+
+

Auto

+

Auteur

+

Titre

+

Date

+
+
+ +
+

Options :

+
+ + + +
+
+
diff --git a/ProjetProgWeb/stylesheet.css b/ProjetProgWeb/stylesheet.css index a64d853..4217c53 100644 --- a/ProjetProgWeb/stylesheet.css +++ b/ProjetProgWeb/stylesheet.css @@ -27,23 +27,6 @@ header { height: 75px; } -.slide-in-header { - animation: slide-in-header 200ms; - animation-fill-mode: forwards; -} -.slide-out-header { - animation: slide-out-header 200ms; - animation-fill-mode: forwards; -} -@keyframes slide-in-header { - from { margin-bottom: 0 } - to { margin-bottom: 100px } -} -@keyframes slide-out-header { - from { margin-bottom: 100px } - to { margin-bottom: 0 } -} - .navbar { position: relative; z-index: 50; @@ -177,16 +160,40 @@ header { position: relative; z-index: 10; width: 100%; - height: 100px; background: linear-gradient(245deg, #39B4E7 -15%, #1779A3 110%); box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 5px; top: 0; - transform: translateY(-110px); + transform: translateY(-105%); display: flex; flex-direction: column; padding: 10px; gap: 10px; } + +#hamburger-menu h3 { + color: white; + padding: 0; + margin: 0; +} + +.filters { + display: flex; + gap: 5px; + color: white; + font-family: sans-serif; +} + +.filters p { + padding: 3px 10px 3px 10px; + border-radius: 10px; + background-color: #39B4E7; + cursor: pointer; +} + +.filters p:hover { + background-color: #6dc1e3; +} + .slide-in { animation: slide-in 200ms; animation-fill-mode: forwards; @@ -196,12 +203,12 @@ header { animation-fill-mode: forwards; } @keyframes slide-in { - from { transform: translateY(-100px) } + from { transform: translateY(-105%) } to { transform: translateY(0) } } @keyframes slide-out { from { transform: translateY(0) } - to { transform: translateY(-100px) } + to { transform: translateY(-105%) } } .toggle-switch { @@ -283,9 +290,9 @@ header { display: flex; flex-direction: column; box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 15px; - border-radius: 3px; + border-radius: 25px; margin: 0 5px 0 5px; - padding: 0 10px 0 10px; + padding: 5px 15px 5px 15px; transform: translateX(100px); } @@ -482,6 +489,9 @@ header { width: 768px; margin: auto; } + #hamburger-menu { + flex-direction: row; + } } /* Large */