Improve bookcard UI responsiveness (#231)

* Improve bookcard responsive UI

* Hamburger menu

* Resolved conflict, mergin to upstream

* fix missing bookmark button

app/src/components/bookcard.js

@@ -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 = {

app/src/components/categorydescription.js

@@ -1,12 +1,12 @@
 import React from "react";
 
 
-export default ({categoryName}) => {
+export default ({categoryName, categoryImage}) => {
     return (
-        <div aria-labelledby="category-description">
-            <h2 id="category-description">
-                {categoryName}
-            </h2>
+        <div className="my-2 mx-2" aria-labelledby="category-description">
+            <h4 id="category-description">
+    {categoryImage} {categoryName}
+            </h4>
         </div>
     )
 }

app/src/components/header.js

@@ -3,17 +3,17 @@ import PropTypes from "prop-types"
 import React from "react"
 
 const Header = ({ siteTitle }) => (
-  <header className="my-1 bg-red custom-header" aria-labelledby='main-title'>
-    <h1 id="main-title" style={{ margin: 0 }}>
+  <header className="mx-2 bg-red d-none d-lg-block custom-header" aria-labelledby='main-title'>
+    <h4 className="d-flex justify-content-end" id="main-title" style={{ margin: 16 }}>
       <Link
         to="/"
         style={{
-          textDecoration: `none`,
+          textDecorationColor: `none`,
         }}
       >
         {siteTitle}
       </Link>
-    </h1>
+    </h4>
   </header>
 )
 

app/src/components/layout.js

@@ -12,6 +12,7 @@ import { useStaticQuery, graphql } from "gatsby"
 import Header from "./header"
 import "./layout.css"
 import "bootstrap/dist/css/bootstrap.min.css"
+import { Container } from "react-bootstrap"
 
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`
@@ -27,10 +28,14 @@ const Layout = ({ children }) => {
   return (
     <>
       <Header siteTitle={data.site.siteMetadata.title} />
-      <div className="container mx-auto px-10">
+      <Container fluid>
         <main>{children}</main>
-      </div>
-      
+        <footer>
+          © {new Date().getFullYear()}, Built with
+          {` `}
+          <a href="https://www.gatsbyjs.org">Gatsby</a>
+        </footer>
+      </Container>
     </>
   )
 }

app/src/components/sidebar.js

@@ -1,5 +1,5 @@
 import React, { useContext } from "react"
-import { Nav } from "react-bootstrap"
+import { Navbar, Nav } from "react-bootstrap"
 import { StaticQuery, graphql, Link } from "gatsby"
 import "../styles/sidebar.css"
 import { BookmarkContext } from '../context/globalState'
@@ -24,25 +24,25 @@ export default () => {
         }
       `}
       render={data => (
-        <Nav
-          className="col-md-2 d-none d-md-block bg-light sidebar"
-          activeKey="/home"
-        >
-          <div className="sidebar-sticky" role="navigation" aria-label="Sidebar">
-						<div style={{position: "relative", left: "0.9rem", paddingBottom: "0.2rem"}}>
+        <Navbar className="sidebar-sticky" collapseOnSelect expand="lg" bg="ligt" variant="light">
+          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+          <Navbar.Collapse>
+          <div>
+            <div style={{position: "relative", left: "0.9rem", paddingBottom: "0.2rem"}}>
 							<Link to="/readingList">🔖 Reading List ({readingList.bookIds.length})</Link>
 						</div>
             {data.allCategoriesJson.edges.map(function(x, index) {
               return (
-                <Nav.Item key={x.node.name}>
-                  <Nav.Link href={slugify(x.node.name)} role="button">
+                <Nav.Item>
+                  <Nav.Link href={slugify(x.node.name)}>
                     {x.node.emoji} {x.node.name}
                   </Nav.Link>
                 </Nav.Item>
               )
             })}
           </div>
-        </Nav>
+          </Navbar.Collapse>
+        </Navbar>
       )}
     />
   )