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 }) => {
return (
<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>
)
}

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

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