theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

feat: add PWA support

Browse Source
This commit is contained in:
divlo
2020-12-28 13:07:21 +01:00
parent c594577415
commit c285d3b69e
72 changed files with 2892 additions and 1339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
website/components/FunctionCard/FunctionCard.css
View File

@ -1,67 +0,0 @@
.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, 0.25);
border: 1px solid black;
border-radius: 1rem;
margin: 0 0 50px 0;
cursor: pointer;
transition: all 0.3s;
color: var(--text-color);
text-decoration: none !important;
}
.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;
}

175
website/components/FunctionCard/FunctionCard.jsx
View File

@ -3,7 +3,6 @@ import { useState, forwardRef, memo } from 'react'
import date from 'date-and-time'
import Loader from '../Loader'
import { API_URL } from '../../utils/api'
import './FunctionCard.css'
const FunctionCard = memo(
forwardRef((props, ref) => {
@ -13,66 +12,138 @@ const FunctionCard = memo(
setIsLoading(false)
}
const handleError = event => {
const handleError = (event) => {
event.target.src = API_URL + '/images/functions/default.png'
}
const isFormOrArticle = props.type === 'form' || props.type === 'article'
return (
<Link
{...(props.isAdmin
? {
href: '/admin/[slug]',
as: `/admin/${props.slug}`
}
: {
href: isFormOrArticle
? '/functions/[slug]'
: `/functions/${props.slug}`,
as: `/functions/${props.slug}`
})}
>
{/* FunctionCard a une hauteur pendant chargement */}
<a
ref={ref}
style={
isLoading ? { height: '360px', justifyContent: 'center' } : null
}
className='FunctionCard col-sm-24 col-md-10 col-xl-7'
<>
<Link
{...(props.isAdmin
? {
href: '/admin/[slug]',
as: `/admin/${props.slug}`
}
: {
href: isFormOrArticle
? '/functions/[slug]'
: `/functions/${props.slug}`,
as: `/functions/${props.slug}`
})}
>
{isLoading && <Loader width='125px' height='125px' />}
<div
className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}
{/* FunctionCard a une hauteur pendant chargement */}
<a
ref={ref}
style={
isLoading ? { height: '360px', justifyContent: 'center' } : null
}
className="FunctionCard col-sm-24 col-md-10 col-xl-7"
>
<div className='FunctionCard__top'>
<img
onLoad={handleLoad}
onError={handleError}
className='FunctionCard__image'
alt={props.title}
src={API_URL + props.image}
/>
<h2 className='FunctionCard__title'>{props.title}</h2>
<p className='FunctionCard__description text-center'>
{props.description}
</p>
{isLoading && <Loader width="125px" height="125px" />}
<div
className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}
>
<div className="FunctionCard__top">
<img
onLoad={handleLoad}
onError={handleError}
className="FunctionCard__image"
alt={props.title}
src={API_URL + props.image}
/>
<h2 className="FunctionCard__title">{props.title}</h2>
<p className="FunctionCard__description text-center">
{props.description}
</p>
</div>
<div className="FunctionCard__info">
<p
className="FunctionCard__category"
style={{ backgroundColor: props.categorie.color }}
>
{props.categorie.name}
</p>
<p className="FunctionCard__publication-date">
{date.format(new Date(props.createdAt), 'DD/MM/YYYY', false)}
</p>
</div>
</div>
<div className='FunctionCard__info'>
<p
className='FunctionCard__category'
style={{ backgroundColor: props.categorie.color }}
>
{props.categorie.name}
</p>
<p className='FunctionCard__publication-date'>
{date.format(new Date(props.createdAt), 'DD/MM/YYYY', false)}
</p>
</div>
</div>
</a>
</Link>
</a>
</Link>
<style jsx>{`
.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, 0.25);
border: 1px solid black;
border-radius: 1rem;
margin: 0 0 50px 0;
cursor: pointer;
transition: all 0.3s;
color: var(--text-color);
text-decoration: none !important;
}
.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;
}
`}</style>
</>
)
})
)