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

frontend: Loader + Refactoring

Browse Source
This commit is contained in:
Divlo
2020-03-21 16:43:37 +01:00
parent a0fb5ee13a
commit 895d0c7f6b
8 changed files with 144 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/components/FunctionCard/FunctionCard.css
View File

@ -11,6 +11,12 @@
cursor: pointer;
transition: all .3s;
}
.FunctionCard__container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.FunctionCard:hover {
transform: translateY(-7px);
}

46
frontend/components/FunctionCard/FunctionCard.js
View File

@ -1,20 +1,36 @@
import Link from 'next/link';
import { useState, Fragment } from 'react';
import Loader from '../Loader/Loader';
import './FunctionCard.css';
const FunctionCard = (props) => (
<Link href={`/functions/${props.slug}`}>
<div className="FunctionCard col-sm-24 col-md-10 col-xl-7">
<div className="FunctionCard__top">
<img 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>
</Link>
);
const FunctionCard = (props) => {
const [isLoading, setIsLoading] = useState(true);
const handleLoad = () => {
setIsLoading(false);
}
return (
<Link href={`/functions/${props.slug}`}>
<Fragment>
<div className={"FunctionCard col-sm-24 col-md-10 col-xl-7"}>
{isLoading && <Loader width="100px" height="100px" />}
<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>
</Fragment>
</Link>
);
}
export default FunctionCard;