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

🎨 Visuals improvements and introduced filters

Browse Source
This commit is contained in:
Florian SYLVAIN
2022-01-02 17:12:47 +01:00
parent 84edef43dd
commit f55f866476
3 changed files with 52 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ProjetProgWeb/app.js
-4
View File
@@ -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')
}
}
ProjetProgWeb/navbar.php
+19 -6
View File
@@ -23,12 +23,25 @@
<div id="hamburger-menu">
<div class="chart-button">
<svg id="chart-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M13.012 5.007v-1.668l2.802-2.771c.409.136.809.293 1.197.471l-3.999 3.968zm7.089-1.93l-7.089 7.058v.853h.877l7.044-7.076c-.263-.292-.541-.57-.832-.835zm-7.089-1.468l1.437-1.406c-.46-.094-.96-.163-1.437-.203v1.609zm10.789 7.962l-1.386 1.417h1.585c-.04-.47-.106-.964-.199-1.417zm-.363-1.366c-.135-.41-.292-.81-.469-1.199l-3.951 3.982h1.668l2.752-2.783zm-1.063-2.337c-.205-.346-.426-.682-.664-1.004l-6.093 6.124h1.668l5.089-5.12zm-3.225-3.57c-.322-.238-.657-.459-1.003-.665l-5.135 5.104v1.668l6.138-6.107zm-8.15 10.702v-13c-6.161.519-11 5.683-11 11.978 0 6.639 5.382 12.022 12.021 12.022 6.296 0 11.46-4.839 11.979-11h-13z"/>
</svg>
<div class="toggle-switch">
<div class="slider untoggle"></div>
<div>
<h3>Filtres : </h3>
<div class="filters">
<p>Auto</p>
<p>Auteur</p>
<p>Titre</p>
<p>Date</p>
</div>
</div>
<div>
<h3>Options : </h3>
<div class="chart-button">
<svg id="chart-svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M13.012 5.007v-1.668l2.802-2.771c.409.136.809.293 1.197.471l-3.999 3.968zm7.089-1.93l-7.089 7.058v.853h.877l7.044-7.076c-.263-.292-.541-.57-.832-.835zm-7.089-1.468l1.437-1.406c-.46-.094-.96-.163-1.437-.203v1.609zm10.789 7.962l-1.386 1.417h1.585c-.04-.47-.106-.964-.199-1.417zm-.363-1.366c-.135-.41-.292-.81-.469-1.199l-3.951 3.982h1.668l2.752-2.783zm-1.063-2.337c-.205-.346-.426-.682-.664-1.004l-6.093 6.124h1.668l5.089-5.12zm-3.225-3.57c-.322-.238-.657-.459-1.003-.665l-5.135 5.104v1.668l6.138-6.107zm-8.15 10.702v-13c-6.161.519-11 5.683-11 11.978 0 6.639 5.382 12.022 12.021 12.022 6.296 0 11.46-4.839 11.979-11h-13z"/>
</svg>
<div class="toggle-switch">
<div class="slider untoggle"></div>
</div>
</div>
</div>
ProjetProgWeb/stylesheet.css
+33 -23
View File
@@ -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 */