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

Add alt attribute to Card.Img component

Browse Source
This commit is contained in:
Troels Agergaard
2020-10-22 12:36:55 +02:00
committed by Vishnu Ks
parent ee180c8068
commit c13a65aeb2
1 changed files with 85 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,102 +1,95 @@
import PropTypes from "prop-types" import PropTypes from 'prop-types';
import React, { useState } from "react" import React, { useState } from 'react';
import StarRatings from "react-star-ratings" import StarRatings from 'react-star-ratings';
import { Card, Row, Col } from "react-bootstrap" import { Card, Row, Col } from 'react-bootstrap';
import AmazonURL from "../components/amazonurl" import AmazonURL from '../components/amazonurl';
import Bookmark from "../components/bookmark" import Bookmark from '../components/bookmark';
import GoodReadsImage from "../components/goodreadsimage" import GoodReadsImage from '../components/goodreadsimage';
const truncateContent = content => { const truncateContent = (content) => {
if (!content) { if (!content) {
return "" return '';
} }
return content.length > 350 ? content.substring(0, 350) + "..." : content return content.length > 350 ? content.substring(0, 350) + '...' : content;
} };
const showFullText = content => { const showFullText = (content) => {
if (!content) { if (!content) {
return "" return '';
} }
return content return content;
} };
const BookCard = ({ book }) => { const BookCard = ({ book }) => {
const [show, toggleShow] = useState(false) const [ show, toggleShow ] = useState(false);
return ( return (
<Card style={{ marginBottom: "15px" }}> <Card style={{ marginBottom: '15px' }}>
<Row> <Row>
<Col xs={12} md={4} xl={2}> <Col xs={12} md={4} xl={2}>
<Card.Img <Card.Img
style={{ style={{
paddingLeft: "15px", paddingLeft: '15px',
paddingRight: "15px", paddingRight: '15px',
paddingTop: "30px", paddingTop: '30px'
}} }}
src={book.image_url} src={book.image_url}
/> alt={book.title}
</Col> />
<Col xs={12} md={8} xl={10}> </Col>
<Card.Body> <Col xs={12} md={8} xl={10}>
<Card.Title>{book.title}</Card.Title> <Card.Body>
<Card.Subtitle className="text-muted"> <Card.Title>{book.title}</Card.Title>
<Card.Text style={{ paddingTop: "2px"}}> <Card.Subtitle className="text-muted">
{book.author} <b>{book.year ? book.year : null}</b> <Card.Text style={{ paddingTop: '2px' }}>
</Card.Text> {book.author} <b>{book.year ? book.year : null}</b>
<StarRatings </Card.Text>
rating={parseFloat(book.rating)} <StarRatings
numberOfStars={5} rating={parseFloat(book.rating)}
starDimension="18px" numberOfStars={5}
starSpacing="1px" starDimension="18px"
starRatedColor="#fa604a" starSpacing="1px"
/> starRatedColor="#fa604a"
<div style={{display: "flex",alignItems: "center",paddingTop: ".75rem",}} > />
<div style={{ width: "30px", height: "30px", marginRight: "5px" }}> <div style={{ display: 'flex', alignItems: 'center', paddingTop: '.75rem' }}>
{book.amazon_url ? <AmazonURL book={book} /> : null} <div style={{ width: '30px', height: '30px', marginRight: '5px' }}>
</div> {book.amazon_url ? <AmazonURL book={book} /> : null}
<div style={{ width: "30px", height: "30px" }}> </div>
<a href={book.url}> <div style={{ width: '30px', height: '30px' }}>
<GoodReadsImage /> <a href={book.url}>
</a> <GoodReadsImage />
</div> </a>
<Bookmark book={book} /> </div>
</div> <Bookmark book={book} />
</Card.Subtitle> </div>
<p </Card.Subtitle>
style={{ color: "gray", fontSize: "0.8rem", paddingTop: "1rem" }} <p style={{ color: 'gray', fontSize: '0.8rem', paddingTop: '1rem' }}>
> {!show && truncateContent(book.description)}
{!show && truncateContent(book.description)} {show && showFullText(book.description)}
{show && showFullText(book.description)} </p>
</p> {!show && (
{!show && ( <button className="btn btn-sm btn-primary " onClick={() => toggleShow(true)}>
<button Show More
className="btn btn-sm btn-primary " </button>
onClick={() => toggleShow(true)} )}
> {show && (
Show More <button className="btn btn-sm btn-primary " onClick={() => toggleShow(false)}>
</button> Show Less
)} </button>
{show && ( )}
<button </Card.Body>
className="btn btn-sm btn-primary " </Col>
onClick={() => toggleShow(false)} </Row>
> </Card>
Show Less );
</button> };
)}
</Card.Body>
</Col>
</Row>
</Card>
)
}
BookCard.propTypes = { BookCard.propTypes = {
siteTitle: PropTypes.object, siteTitle: PropTypes.object
} };
BookCard.defaultProps = { BookCard.defaultProps = {
book: {}, book: {}
} };
export default BookCard export default BookCard;