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>
) )
} }

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

@@ -14,36 +14,39 @@ 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">
<StarRatings <div>{book.author} <b>{book.year ? book.year: null}</b></div>
rating={parseFloat(book.rating)} <div>
numberOfStars={5} <StarRatings
starDimension="18px" rating={parseFloat(book.rating)}
starSpacing="1px" numberOfStars={5}
starRatedColor="#fa604a" starDimension="18px"
/> starSpacing="1px"
<br /> starRatedColor="#fa604a"
{book.author} <b>{book.year ? book.year: null}</b> />
<br /> </div>
{book.amazon_url ? <AmazonURL book={book} />: null} <div style={{ display: "flex", alignItems: "center", paddingTop: ".75rem" }}>
<br /> <div style= {{ width: "30px", height: "30px", marginRight: "5px" }}>
<a href={book.url} > {book.amazon_url ? <AmazonURL book={book} />: null}
<GoodReadsImage /> </div>
</a> <div style= {{ width: "30px", height: "30px" }}>
<a href={book.url} ><GoodReadsImage /></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>