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

Improve bookcard UI responsiveness (#231)

Browse Source 
* Improve bookcard responsive UI

* Hamburger menu

* Resolved conflict, mergin to upstream

* fix missing bookmark button
This commit is contained in:
Irsyad Rahman
2020-10-18 13:09:57 +07:00
committed by GitHub
parent d656841cb3
commit 97522a0332
12 changed files with 8691 additions and 5500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import PropTypes from "prop-types"
import React,{useState} from "react"
import React, { useState } from "react"
import StarRatings from "react-star-ratings"
import { Card, Row, Col } from "react-bootstrap"
@@ -7,38 +7,43 @@ import AmazonURL from "../components/amazonurl"
import Bookmark from "../components/bookmark"
import GoodReadsImage from "../components/goodreadsimage"
const truncateContent = (content) => {
const truncateContent = content => {
if (!content) {
return ""
}
return content.length > 350 ? content.substring(0, 350) + "..." : content
};
}
const showFullText = (content) =>{
const showFullText = content => {
if (!content) {
return ""
}
return content
}
const BookCard = ({book}) =>{
const [show,toggleShow] = useState(false)
return(
<Card className="ml-5 mb-2">
<Row>
<Col className="col-3 align-self-center">
<Card.Img
style={{ width: "9rem", paddingLeft: "25px", paddingRight: "-15px", paddingTop: "30px" }}
src={book.image_url}
alt={book.title}
/>
</Col>
<Col>
<Card.Body style={{ marginLeft: "-30px"}}>
<Card.Title>{book.title}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">
<div>{book.author} <b>{book.year ? book.year: null}</b></div>
<div>
const BookCard = ({ book }) => {
const [show, toggleShow] = useState(false)
return (
<Card style={{ marginBottom: "15px" }}>
<Row>
<Col xs={12} md={4} xl={2}>
<Card.Img
style={{
paddingLeft: "15px",
paddingRight: "15px",
paddingTop: "30px",
}}
src={book.image_url}
resizeMode="contain"
/>
</Col>
<Col xs={12} md={8} xl={10}>
<Card.Body>
<Card.Title>{book.title}</Card.Title>
<Card.Subtitle className="text-muted">
<Card.Text style={{ paddingTop: "2px"}}>
{book.author} <b>{book.year ? book.year : null}</b>
</Card.Text>
<StarRatings
rating={parseFloat(book.rating)}
numberOfStars={5}
@@ -46,29 +51,45 @@ return(
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 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>
<Bookmark book={book} />
</div>
<div style= {{ width: "30px", height: "30px" }}>
<a href={book.url} ><GoodReadsImage /></a>
</div>
<Bookmark book={book} />
</div>
</Card.Subtitle>
<p style={{ color: "gray", fontSize: "0.8rem", paddingTop: "1rem" }}>
{!show && truncateContent(book.description)}
{show && showFullText(book.description)}
</p>
{!show && <button className="btn btn-primary" onClick={() => toggleShow(true)}>Show More</button>}
{show && <button className="btn btn-primary" onClick={() => toggleShow(false)}>Show Less</button>}
</Card.Body>
</Col>
</Row>
</Card>
)
</Card.Subtitle>
<p
style={{ color: "gray", fontSize: "0.8rem", paddingTop: "1rem" }}
>
{!show && truncateContent(book.description)}
{show && showFullText(book.description)}
</p>
{!show && (
<button
className="btn btn-sm btn-primary "
onClick={() => toggleShow(true)}
>
Show More
</button>
)}
{show && (
<button
className="btn btn-sm btn-primary "
onClick={() => toggleShow(false)}
>
Show Less
</button>
)}
</Card.Body>
</Col>
</Row>
</Card>
)
}
BookCard.propTypes = {