From e9e9b6755c854811eaffd99b38bc440f9fcde686 Mon Sep 17 00:00:00 2001
From: palak <43077980+palak199@users.noreply.github.com>
Date: Sat, 17 Oct 2020 01:14:03 +0530
Subject: [PATCH] changes to the sidebar, cards and footer (#237)

* added responsiveness to sidebar and sticky footer

* remobed unused vars

* added functionality to read more button

* a minor logical error fixed

* removed footer
---
 app/src/components/bookcard.js | 26 ++++++++++++++++++++------
 app/src/components/layout.js   |  6 +-----
 app/src/components/sidebar.js  |  2 +-
 app/src/pages/index.js         | 10 ++++++++++
 package-lock.json              |  3 +++
 5 files changed, 35 insertions(+), 12 deletions(-)
 create mode 100644 package-lock.json

diff --git a/app/src/components/bookcard.js b/app/src/components/bookcard.js
index 30292e8..e27c0ba 100644
--- a/app/src/components/bookcard.js
+++ b/app/src/components/bookcard.js
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types"
-import React from "react"
+import React,{useState} from "react"
 import StarRatings from "react-star-ratings"
 import { Card, Row, Col } from "react-bootstrap"
 
@@ -14,10 +14,19 @@ const truncateContent = (content) => {
   return content.length > 350 ? content.substring(0, 350) + "..." : content
 };
 
-const BookCard = ({ book }) => (
-  <Card style={{ width: "44rem", height: "23rem", marginBottom: "15px" }}>
-    <Row aria-label={book.title}>
-      <Col xs={3}>
+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}
@@ -49,13 +58,18 @@ const BookCard = ({ book }) => (
             </div>
           </Card.Subtitle>
           <p style={{ color: "gray", fontSize: "0.8rem", paddingTop: "1rem" }}>
-            {truncateContent(book.description)}
+            {!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>
 )
+}
 
 BookCard.propTypes = {
   siteTitle: PropTypes.object,
diff --git a/app/src/components/layout.js b/app/src/components/layout.js
index ff68d66..a67eb98 100644
--- a/app/src/components/layout.js
+++ b/app/src/components/layout.js
@@ -29,12 +29,8 @@ const Layout = ({ children }) => {
       <Header siteTitle={data.site.siteMetadata.title} />
       <div className="container mx-auto px-10">
         <main>{children}</main>
-        <footer>
-          © {new Date().getFullYear()}, Built with
-          {` `}
-          <a href="https://www.gatsbyjs.org">Gatsby</a>
-        </footer>
       </div>
+      
     </>
   )
 }
diff --git a/app/src/components/sidebar.js b/app/src/components/sidebar.js
index 69f69cb..849319a 100644
--- a/app/src/components/sidebar.js
+++ b/app/src/components/sidebar.js
@@ -25,7 +25,7 @@ export default () => {
       `}
       render={data => (
         <Nav
-          className="col-md-12 d-none d-md-block bg-light sidebar"
+          className="col-md-2 d-none d-md-block bg-light sidebar"
           activeKey="/home"
         >
           <div className="sidebar-sticky" role="navigation" aria-label="Sidebar">
diff --git a/app/src/pages/index.js b/app/src/pages/index.js
index 3ee57ed..7f64a04 100644
--- a/app/src/pages/index.js
+++ b/app/src/pages/index.js
@@ -37,6 +37,16 @@ export default ({ data }) => {
             <BookFeed data={data} limit={maximumBooksToShow} />
           </Col>
         </Row>
+        <Row>
+        {/* <footer style={{marginLeft: 150,
+          width: `100%`,
+          position: `fixed`,
+          bottom: 0}}>
+    © {new Date().getFullYear()}, Built with
+    {` `}
+    <a href="https://www.gatsbyjs.org">Gatsby</a>
+  </footer> */}
+        </Row>
       </Container>
     </Layout>
   )
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..48e341a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}