Improve bookcard UI responsiveness

app/gatsby-node.js

@@ -42,6 +42,7 @@ exports.createPages = async function ({ actions, graphql }) {
         context: {
             categoryName: category.name,
             data: data.data,
+            image: category.emoji,
             limit: null,
         },
       })

app/package.json

@@ -33,7 +33,7 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
-    "husky": ">=4",
+    "husky": "^4.3.0",
     "lint-staged": ">=10",
     "prettier": "1.19.1",
     "tailwindcss": "^1.1.2"

app/src/components/bookcard.js

@@ -1,74 +1,95 @@
 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"
 
 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}
                 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 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>
-								<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>
       )}
     />
   )

app/src/pages/index.js

@@ -4,7 +4,7 @@ import { graphql } from "gatsby"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 import SideBar from "../components/sidebar"
-import { Container, Row, Col } from "react-bootstrap"
+import { Container, Row, Col, Navbar } from "react-bootstrap"
 import BookFeed from "../components/feed"
 
 function myFunction(setMaximumBooksToShow, maximumBooksToShow) {
@@ -28,12 +28,12 @@ export default ({ data }) => {
   return (
     <Layout>
       <SEO title="Home" />
-      <Container fluid>
+      <Container fluid> 
         <Row>
-          <Col xs={2}>
+          <Col lg={2}>
             <SideBar />
           </Col>
-          <Col>
+          <Col lg={10}>
             <BookFeed data={data} limit={maximumBooksToShow} />
           </Col>
         </Row>

app/src/styles/sidebar.css

@@ -8,6 +8,11 @@
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
   width: max-content;
 }
+
+.nav-link {
+  font-size: .900rem;
+}
+
 #sidebar-wrapper {
   min-height: 100vh !important;
   width: 100vw;
@@ -25,3 +30,6 @@
   min-width: 0;
   width: 100%;
 }
+
+
+

app/src/templates/categoryTemplate.js

@@ -1,31 +1,32 @@
-import React, { useState, useEffect } from 'react';
-import { graphql } from 'gatsby';
+import React, { useState, useEffect } from "react"
+import { graphql } from "gatsby"
 
-import { Container, Row, Col } from 'react-bootstrap';
-import Layout from '../components/layout';
-import SEO from '../components/seo';
-import SideBar from '../components/sidebar';
-import CategoryDescription from '../components/categorydescription';
-import BookFeed from '../components/feed';
+import Layout from "../components/layout"
+import SEO from "../components/seo"
+import SideBar from "../components/sidebar"
+import CategoryDescription from "../components/categorydescription"
+import { Container, Row, Col } from "react-bootstrap"
+import BookFeed from "../components/feed"
+
+const basicTemplate = props => {
+  const { pageContext } = props
+  const { categoryName, data, image } = pageContext
 
-const basicTemplate = (props) => {
-  const { pageContext } = props;
-  const { categoryName, data } = pageContext;
   return (
     <Layout>
       <SEO title="Home" />
       <Container fluid>
         <Row>
-          <Col xs={2}>
+          <Col lg={2}>
             <SideBar />
           </Col>
-          <Col>
-            <CategoryDescription categoryName={categoryName} />
+          <Col lg={10}>
+            <CategoryDescription categoryName={categoryName} categoryImage={image} />
             <BookFeed data={data} categoryName={categoryName} />
           </Col>
         </Row>
       </Container>
     </Layout>
-  );
-};
-export default basicTemplate;
+  )
+}
+export default basicTemplate