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

frontend: FunctionCard CSS Function__info bottom

Browse Source
This commit is contained in:
Divlo 2020-03-20 18:36:48 +01:00
parent 5edf5e7069
commit cb3ca25aac
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,6 +27,12 @@
} }
} }
.FunctionCard__top {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
}
.FunctionCard__image { .FunctionCard__image {
width: 150px; width: 150px;
} }

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

@ -4,9 +4,11 @@ import './FunctionCard.css';
const FunctionCard = (props) => ( const FunctionCard = (props) => (
<Link href={`/functions/${props.slug}`}> <Link href={`/functions/${props.slug}`}>
<div className="FunctionCard col-sm-24 col-md-10 col-xl-7"> <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} /> <img className="FunctionCard__image" alt={props.title} src={props.image} />
<h2 className="FunctionCard__title">{props.title}</h2> <h2 className="FunctionCard__title">{props.title}</h2>
<p className="FunctionCard__description">{props.description}</p> <p className="FunctionCard__description">{props.description}</p>
</div>
<div className="FunctionCard__info"> <div className="FunctionCard__info">
<p className="FunctionCard__category" style={{ backgroundColor: props.category.color }}>{props.category.name}</p> <p className="FunctionCard__category" style={{ backgroundColor: props.category.color }}>{props.category.name}</p>
<p className="FunctionCard__publication-date">{props.publicationDate}</p> <p className="FunctionCard__publication-date">{props.publicationDate}</p>