Hotfix: Nom des dossiers + Ajout /functions/slug
This commit is contained in:
Divlo
6
website/components/Footer/Footer.css
Normal file
6
website/components/Footer/Footer.css
Normal file
@ -0,0 +1,6 @@
|
||||
.footer {
|
||||
border-top: var(--border-header-footer);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
9
website/components/Footer/Footer.js
Normal file
9
website/components/Footer/Footer.js
Normal file
@ -0,0 +1,9 @@
|
||||
import './Footer.css';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="footer">
|
||||
<p className="footer-text"><a href="https://divlo.fr/" target="_blank" rel="noopener noreferrer">Divlo</a> | Tous droits réservés</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
65
website/components/FunctionCard/FunctionCard.css
Normal file
65
website/components/FunctionCard/FunctionCard.css
Normal file
@ -0,0 +1,65 @@
|
||||
.FunctionCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, .25);
|
||||
border: 1px solid black;
|
||||
border-radius: 1rem;
|
||||
margin: 0 0 50px 0;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
}
|
||||
.FunctionCard__container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.FunctionCard:hover {
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
/* col-md */
|
||||
@media (min-width: 768px) {
|
||||
.FunctionCard {
|
||||
margin: 0 30px 50px 30px;
|
||||
}
|
||||
}
|
||||
/* col-xl */
|
||||
@media (min-width: 1200px) {
|
||||
.FunctionCard {
|
||||
margin: 0 20px 50px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.FunctionCard__top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.FunctionCard__image {
|
||||
width: 150px;
|
||||
}
|
||||
.FunctionCard__title {
|
||||
font-size: 1.4em;
|
||||
margin: 0;
|
||||
color: var(--important);
|
||||
font-weight: 300;
|
||||
}
|
||||
.FunctionCard__description {
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
.FunctionCard__info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.FunctionCard__category {
|
||||
border-radius: 0.5em;
|
||||
padding: 0.5em;
|
||||
margin-right: 20px;
|
||||
font-size: 16.4px;
|
||||
}
|
||||
40
website/components/FunctionCard/FunctionCard.js
Normal file
40
website/components/FunctionCard/FunctionCard.js
Normal file
@ -0,0 +1,40 @@
|
||||
import Link from 'next/link';
|
||||
import { useState, forwardRef } from 'react';
|
||||
import Loader from '../Loader';
|
||||
import './FunctionCard.css';
|
||||
|
||||
const FunctionCard = forwardRef((props, ref) => {
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const handleLoad = () => {
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={"/functions/[slug]"}
|
||||
as={`/functions/${props.slug}`}
|
||||
>
|
||||
{/* FunctionCard a une hauteur pendant chargement */}
|
||||
<div ref={ref} style={isLoading ? { height: "360px", justifyContent: "center" } : null} className={"FunctionCard col-sm-24 col-md-10 col-xl-7"}>
|
||||
|
||||
{isLoading && <Loader width="125px" height="125px" />}
|
||||
|
||||
<div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}>
|
||||
<div className="FunctionCard__top">
|
||||
<img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={props.image} />
|
||||
<h2 className="FunctionCard__title">{props.title}</h2>
|
||||
<p className="FunctionCard__description">{props.description}</p>
|
||||
</div>
|
||||
<div className="FunctionCard__info">
|
||||
<p className="FunctionCard__category" style={{ backgroundColor: props.category.color }}>{props.category.name}</p>
|
||||
<p className="FunctionCard__publication-date">{props.publicationDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
|
||||
export default FunctionCard;
|
||||
37
website/components/HeadTag.js
Normal file
37
website/components/HeadTag.js
Normal file
@ -0,0 +1,37 @@
|
||||
import Head from 'next/head';
|
||||
|
||||
const HeadTag = ({ title, image, description }) => (
|
||||
<Head>
|
||||
<title>{title || ""}</title>
|
||||
<link rel="icon" type="image/png" href={image} />
|
||||
|
||||
{/* Meta Tag */}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href="function.divlo.fr"/>
|
||||
<meta name="Language" content="fr" />
|
||||
<meta name="theme-color" content="#ffd800" />
|
||||
|
||||
{/* Open Graph Metadata */}
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://function.divlo.fr/" />
|
||||
<meta property="og:image" content={image} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:locale" content="fr_FR" />
|
||||
<meta property="og:site_name" content="FunctionProject" />
|
||||
|
||||
{/* Twitter card Metadata */}
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:description" content={description} />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:site" content="@Divlo_FR" />
|
||||
<meta name="twitter:image:src" content={image} />
|
||||
<meta name="twitter:creator" content="@Divlo_FR" />
|
||||
|
||||
{/* Preloader script */}
|
||||
<script src="/js/preloader.js"></script>
|
||||
</Head>
|
||||
);
|
||||
|
||||
export default HeadTag;
|
||||
161
website/components/Header/Header.css
Normal file
161
website/components/Header/Header.css
Normal file
@ -0,0 +1,161 @@
|
||||
/* HEADER */
|
||||
.Header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: .5rem 1rem;
|
||||
|
||||
border-bottom: var(--border-header-footer);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.Header {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.Header > .container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.Header > .container {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
/* Brand */
|
||||
.Header__brand-link {
|
||||
display: inline-block;
|
||||
padding-top: .3125rem;
|
||||
padding-bottom: .3125rem;
|
||||
margin-right: 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#brand-link__logo-small-screen {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 496px) {
|
||||
#brand-link__logo {
|
||||
display: none;
|
||||
}
|
||||
.Header__brand-link {
|
||||
width: 30%;
|
||||
}
|
||||
#brand-link__logo-small-screen {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.Header .Header__navbar {
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
.Header__navbar {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
}
|
||||
.navbar__list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: auto;
|
||||
}
|
||||
.navbar__list.navbar__list-active {
|
||||
margin: 0 !important;
|
||||
display: flex;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.navbar__list {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
.navbar-link {
|
||||
display: block;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
/* Details Styling */
|
||||
.navbar-link:hover {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, .75);
|
||||
}
|
||||
.navbar-link, .navbar-link-active {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
.navbar-link-active, .navbar-link-active:hover, .Header__brand-link {
|
||||
color: var(--text-color);
|
||||
}
|
||||
.navbar-item {
|
||||
list-style: none;
|
||||
}
|
||||
.navbar-link {
|
||||
font-size: 16px;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
/* Hamburger Icon */
|
||||
.Header__hamburger {
|
||||
display: none;
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
border-radius: .25rem;
|
||||
position: relative;
|
||||
}
|
||||
.Header__hamburger > span, .Header__hamburger > span::before, .Header__hamburger > span::after {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 1.3px;
|
||||
background-color: rgba(255, 255, 255);
|
||||
}
|
||||
.Header__hamburger > span {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: background-color .3s ease-in-out;
|
||||
}
|
||||
.Header__hamburger > span::before, .Header__hamburger > span::after {
|
||||
content: '';
|
||||
transition: transform .3s ease-in-out;
|
||||
}
|
||||
.Header__hamburger > span::before {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
.Header__hamburger > span::after {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
.Header__hamburger-active span {
|
||||
background-color: transparent;
|
||||
}
|
||||
.Header__hamburger-active > span::before {
|
||||
transform: translateY(0px) rotateZ(45deg);
|
||||
}
|
||||
.Header__hamburger-active > span::after {
|
||||
transform: translateY(0px) rotateZ(-45deg);
|
||||
}
|
||||
/* Apparition du hamburger */
|
||||
@media (max-width: 992px) {
|
||||
.Header__hamburger {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
49
website/components/Header/Header.js
Normal file
49
website/components/Header/Header.js
Normal file
@ -0,0 +1,49 @@
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import NavigationLink from './NavigationLink';
|
||||
import './Header.css';
|
||||
|
||||
export default function Header() {
|
||||
|
||||
const [hamburgerIcon, setHamburgerIcon] = useState("");
|
||||
const [navbarList, setNavbarList] = useState("");
|
||||
|
||||
const toggleNavbar = () => {
|
||||
if (hamburgerIcon) {
|
||||
setHamburgerIcon("");
|
||||
setNavbarList("");
|
||||
} else {
|
||||
setHamburgerIcon("Header__hamburger-active");
|
||||
setNavbarList("navbar__list-active");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="Header">
|
||||
<div className="container">
|
||||
|
||||
{/* Brand */}
|
||||
<Link href={"/"}>
|
||||
<a className="Header__brand-link">
|
||||
<img id="brand-link__logo" src="/images/FunctionProject_brand-logo.png" alt="FunctionProject" />
|
||||
<img id="brand-link__logo-small-screen" src="/images/FunctionProject_icon_small.png" alt="FunctionProject" />
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
{/* Hamburger icon on Mobile */}
|
||||
<div onClick={toggleNavbar} className={"Header__hamburger " + hamburgerIcon}>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="Header__navbar">
|
||||
<ul className={"navbar__list " + navbarList}>
|
||||
<NavigationLink name="Accueil" path="/" />
|
||||
<NavigationLink name="Fonctions" path="/functions" />
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
18
website/components/Header/NavigationLink.js
Normal file
18
website/components/Header/NavigationLink.js
Normal file
@ -0,0 +1,18 @@
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import './Header.css';
|
||||
|
||||
export default function NavigationLink(props) {
|
||||
|
||||
const { pathname } = useRouter();
|
||||
|
||||
return (
|
||||
<li className="navbar-item">
|
||||
<Link href={props.path}>
|
||||
<a className={`navbar-link ${pathname === props.path ? "navbar-link-active" : null}`}>
|
||||
{props.name}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
15
website/components/Loader.js
Normal file
15
website/components/Loader.js
Normal file
@ -0,0 +1,15 @@
|
||||
const Loader = ({ width, height, speed }) => (
|
||||
<svg width={width} height={height} viewBox="0 0 100 100">
|
||||
<g transform="translate(50 50) rotate(0) scale(1 1) translate(-50 -50)">
|
||||
<image style={{transformOrigin: "50% 50%", animation: `${speed} linear 0s infinite normal forwards running Loader__spin`}} x="0" y="0" width="100" height="100" href="/images/FunctionProject_icon.png"></image>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
Loader.defaultProps = {
|
||||
width: "100px",
|
||||
height: "100px",
|
||||
speed: ".9s"
|
||||
}
|
||||
|
||||
export default Loader;
|
||||
Reference in New Issue
Block a user