lib/Mind-Expanding-Books
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style book card

Browse Source
This commit is contained in:
Elysia Ong
2020-10-12 16:39:39 +08:00
committed by Vishnu Ks
parent 454ada1ee6
commit ef9fc03843
2 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/components/amazonurl.js
View File

@@ -8,7 +8,7 @@ const getTargetURL = (book) => {
export default ({ book }) => { export default ({ book }) => {
return ( return (
<OutboundLink href={getTargetURL(book)} target="_blank"> <OutboundLink href={getTargetURL(book)} target="_blank">
<img alt="Amazon link" style={{ "width": "30px" }} src="https://img.icons8.com/color/48/000000/amazon.png"/> <img alt="Amazon link" style={{ marginBottom: "-8px" }} src="https://img.icons8.com/color/48/000000/amazon.png"/>
</OutboundLink> </OutboundLink>
) )
} }

25
app/src/components/bookcard.js
View File

@@ -14,19 +14,21 @@ const truncateContent = (content) => {
}; };
const BookCard = ({ book }) => ( const BookCard = ({ book }) => (
<Card style={{ width: "44rem", height: "21rem", marginBottom: "15px" }}> <Card style={{ width: "44rem", height: "18rem", marginBottom: "15px" }}>
<Row aria-label={book.title}> <Row aria-label={book.title}>
<Col xs={3}> <Col xs={3}>
<Card.Img <Card.Img
style={{ height: "12rem", width: "8rem", paddingLeft: "25px", paddingRight: "-15px", paddingTop: "30px" }} style={{ width: "9rem", paddingLeft: "25px", paddingRight: "-15px", paddingTop: "30px" }}
src={book.image_url} src={book.image_url}
alt={book.title} alt={book.title}
/> />
</Col> </Col>
<Col> <Col>
<Card.Body> <Card.Body style={{ marginLeft: "-30px"}}>
<Card.Title>{book.title}</Card.Title> <Card.Title>{book.title}</Card.Title>
<Card.Subtitle className="mb-2 text-muted"> <Card.Subtitle className="mb-2 text-muted">
<div>{book.author} <b>{book.year ? book.year: null}</b></div>
<div>
<StarRatings <StarRatings
rating={parseFloat(book.rating)} rating={parseFloat(book.rating)}
numberOfStars={5} numberOfStars={5}
@@ -34,16 +36,17 @@ const BookCard = ({ book }) => (
starSpacing="1px" starSpacing="1px"
starRatedColor="#fa604a" starRatedColor="#fa604a"
/> />
<br /> </div>
{book.author} <b>{book.year ? book.year: null}</b> <div style={{ display: "flex", alignItems: "center", paddingTop: ".75rem" }}>
<br /> <div style= {{ width: "30px", height: "30px", marginRight: "5px" }}>
{book.amazon_url ? <AmazonURL book={book} />: null} {book.amazon_url ? <AmazonURL book={book} />: null}
<br /> </div>
<a href={book.url} > <div style= {{ width: "30px", height: "30px" }}>
<GoodReadsImage /> <a href={book.url} ><GoodReadsImage /></a>
</a> </div>
</div>
</Card.Subtitle> </Card.Subtitle>
<p> <p style={{ color: "gray", fontSize: "0.8rem", paddingTop: "1rem" }}>
{truncateContent(book.description)} {truncateContent(book.description)}
</p> </p>
</Card.Body> </Card.Body>