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

🎨 standardJS all files

Browse Source
This commit is contained in:
divlo
2020-08-03 14:14:45 +02:00
parent dc962c9120
commit 4be7a46a10
85 changed files with 3595 additions and 2383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,67 +1,67 @@
.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;
color: var(--text-color);
text-decoration: none !important;
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;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.FunctionCard:hover {
transform: translateY(-7px);
transform: translateY(-7px);
}
/* col-md */
@media (min-width: 768px) {
.FunctionCard {
margin: 0 30px 50px 30px;
}
.FunctionCard {
margin: 0 30px 50px 30px;
}
}
/* col-xl */
@media (min-width: 1200px) {
.FunctionCard {
margin: 0 20px 50px 20px;
}
.FunctionCard {
margin: 0 20px 50px 20px;
}
}
.FunctionCard__top {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
}
.FunctionCard__image {
width: 150px;
width: 150px;
}
.FunctionCard__title {
font-size: 1.4em;
margin: 0;
color: var(--important);
font-weight: 300;
font-size: 1.4em;
margin: 0;
color: var(--important);
font-weight: 300;
}
.FunctionCard__description {
margin: 20px 0 10px 0;
margin: 20px 0 10px 0;
}
.FunctionCard__info {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
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;
}
border-radius: 0.5em;
padding: 0.5em;
margin-right: 20px;
font-size: 16.4px;
}

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

@ -5,51 +5,76 @@ import Loader from '../Loader'
import { API_URL } from '../../utils/config/config'
import './FunctionCard.css'
const FunctionCard = memo(forwardRef((props, ref) => {
const [isLoading, setIsLoading] = useState(true)
const FunctionCard = memo(
forwardRef((props, ref) => {
const [isLoading, setIsLoading] = useState(true)
const handleLoad = () => {
setIsLoading(false)
}
const handleLoad = () => {
setIsLoading(false)
}
const handleError = (event) => {
event.target.src = API_URL + '/images/functions/default.png'
}
const handleError = event => {
event.target.src = API_URL + '/images/functions/default.png'
}
const isFormOrArticle = (props.type === 'form' || props.type === 'article')
const isFormOrArticle = props.type === 'form' || props.type === 'article'
return (
<Link
{
...(props.isAdmin)
return (
<Link
{...(props.isAdmin
? {
href: '/admin/[slug]',
as: `/admin/${props.slug}`
}
: {
href: (isFormOrArticle) ? '/functions/[slug]' : `/functions/${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
}
}
>
{/* 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'>
{isLoading && <Loader width='125px' height='125px' />}
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} 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
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', true)}
</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', true)}</p>
</div>
</div>
</a>
</Link>
)
}))
</a>
</Link>
)
})
)
export default FunctionCard