From 6c4b82d4a6b6d91baf604c602e560feca45ef134 Mon Sep 17 00:00:00 2001
From: Damien <damien.armillon@gmail.com>
Date: Fri, 17 May 2019 17:28:25 +0200
Subject: [PATCH] Add cards for the Toucan
---
front/src/view/AllToucanPage/AllToucanPage.js | 5 ++++-
front/src/view/AllToucanPage/ToucanCard.js | 20 +++++++++++--------
2 files changed, 16 insertions(+), 9 deletions(-)
diff --git a/front/src/view/AllToucanPage/AllToucanPage.js b/front/src/view/AllToucanPage/AllToucanPage.js
index e8a963c..e3d4e9a 100644
--- a/front/src/view/AllToucanPage/AllToucanPage.js
+++ b/front/src/view/AllToucanPage/AllToucanPage.js
@@ -1,5 +1,5 @@
import React, {Component} from 'react'
-import {Card} from 'semantic-ui-react'
+import {Card, Segment} from 'semantic-ui-react'
import ToucanCard from './ToucanCard'
import env from '../../.env'
@@ -26,15 +26,18 @@ class AllToucan extends Component {
}
render(){
return (
+ <Segment style={{margin:"3em",padding:"2em"}}>
<Card.Group>
{this.state.toucans.map( toucan => {
return <ToucanCard
image={`${env.backURL}/toucan/img/${toucan["_id"]}`}
link={`${env.backURL}/toucan/pdf/${toucan["_id"]}`}
header={toucan.title}
+ date={(new Date(toucan.date).toLocaleDateString())}
/>
})}
</Card.Group>
+ </Segment>
)}
}
diff --git a/front/src/view/AllToucanPage/ToucanCard.js b/front/src/view/AllToucanPage/ToucanCard.js
index 0ce6d5d..a94c2eb 100644
--- a/front/src/view/AllToucanPage/ToucanCard.js
+++ b/front/src/view/AllToucanPage/ToucanCard.js
@@ -3,14 +3,18 @@ import {Card, Image} from 'semantic-ui-react'
const ToucanCard = ({...props}) => {
return (
- <Card
- href={props.link}
- >
- <Image src={props.image} size="small"/>
- <Card.Content>
- <Card.Header content="HDNZIDJZEP"/>
- </Card.Content>
- </Card>
+ <Card
+ href={props.link}
+ link
+ style={{margin:"1em"}}
+ description="On test"
+ >
+ <Card.Content>
+ <Card.Header content={props.header}/>
+ <Card.Meta content={props.date} textAlign="right"/>
+ </Card.Content>
+ <Image src={props.image}/>
+ </Card>
)
}
--
GitLab