From 5291c8411f8f7cbf8df44e9e0c1c0328868b3cd2 Mon Sep 17 00:00:00 2001 From: Shinh18 Date: Wed, 28 Oct 2020 02:20:54 -0400 Subject: [PATCH 1/5] fix styling of book info page --- frontend/package-lock.json | 20 ++++++++- frontend/src/pages/Book.jsx | 38 +++++++++++----- frontend/src/pages/book.scss | 85 ++++++++++++++++++++++++++++++++++++ 3 files changed, 130 insertions(+), 13 deletions(-) create mode 100644 frontend/src/pages/book.scss diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8530fc0..7942a4f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3521,6 +3521,8 @@ }, "@testing-library/jest-dom": { "version": "4.2.4", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz", + "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==", "requires": { "@babel/runtime": "^7.5.1", "chalk": "^2.4.1", @@ -3545,6 +3547,8 @@ }, "@testing-library/react": { "version": "9.5.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz", + "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==", "requires": { "@babel/runtime": "^7.8.4", "@testing-library/dom": "^6.15.0", @@ -3552,7 +3556,9 @@ } }, "@testing-library/user-event": { - "version": "7.2.1" + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz", + "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==" }, "@types/babel__core": { "version": "7.1.10", @@ -10431,6 +10437,8 @@ }, "node-sass": { "version": "4.14.1", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz", + "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==", "requires": { "async-foreach": "^0.1.3", "chalk": "^1.1.1", @@ -10564,7 +10572,9 @@ } }, "normalize.css": { - "version": "8.0.1" + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" }, "npm-run-path": { "version": "2.0.2", @@ -12428,6 +12438,8 @@ }, "react": { "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz", + "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -12647,6 +12659,8 @@ }, "react-dom": { "version": "16.14.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz", + "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -12712,6 +12726,8 @@ }, "react-scripts": { "version": "3.4.3", + "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz", + "integrity": "sha512-oSnoWmii/iKdeQiwaO6map1lUaZLmG0xIUyb/HwCVFLT7gNbj8JZ9RmpvMCZ4fB98ZUMRfNmp/ft8uy/xD1RLA==", "requires": { "@babel/core": "7.9.0", "@svgr/webpack": "4.3.3", diff --git a/frontend/src/pages/Book.jsx b/frontend/src/pages/Book.jsx index 23f568f..bac3cf1 100644 --- a/frontend/src/pages/Book.jsx +++ b/frontend/src/pages/Book.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import './book.scss'; import { useParams } from 'react-router-dom'; import { bookURL } from '../SERVER'; @@ -21,17 +22,32 @@ export default function Book() { }, []); return ( - <> -

{book.title}

-
-
author
-
{book.author}
-
genre
-
{book.genre}
-
year
-
{book.yearPublished}
-
- book cover + <> +
+
+
+ book cover +
+
+
+
title
+
{book.title}
+
author
+
{book.author}
+
genre
+
{book.genre}
+
year
+
{book.yearPublished}
+
+
+ +
+
+ +
+
+
+
); } diff --git a/frontend/src/pages/book.scss b/frontend/src/pages/book.scss new file mode 100644 index 0000000..fa8516f --- /dev/null +++ b/frontend/src/pages/book.scss @@ -0,0 +1,85 @@ +@import '../fonts/fontWeight.scss'; + +.container { + padding: 4.5em; +} + +.row::after { + content: ""; + clear: both; + display: table; + } + +[class*="col-"] { + float: left; + padding: 15px; + text-align: center; +} + +.col-1 {width: 8.33%;} +.col-2 {width: 16.66%;} +.col-3 {width: 25%;} +.col-4 {width: 33.33%;} +.col-5 {width: 41.66%;} +.col-6 {width: 50%;} +.col-7 {width: 58.33%;} +.col-8 {width: 66.66%;} +.col-9 {width: 75%;} +.col-10 {width: 83.33%;} +.col-11 {width: 91.66%;} +.col-12 {width: 100%;} + +dt { + float: left; + clear: left; + width: 100px; + text-align: right; + text-transform: uppercase; + font: $regular 1.5em/1.5 'Quicksand', sans-serif; +} +dt::after { + content: ":"; +} +dd { + margin: 0 0 0 10px; + //padding-left: 0.5em; + padding: 0 0 70px 2px; + font-style: 'Quicksand', sans-serif; + font-size: larger; +} + +.backBtn { + background-color: #db5127; + border: none; + color: white; + padding: 15px 10px; + text-align: center; + font-size: 24px; + margin: 4px 2px; + opacity: 0.6; + transition: 0.3s; + display: inline-block; + text-transform: uppercase; + cursor: pointer; + border-radius: 15px; +} + +.backBtn:hover {opacity: 1} + +.addBtn { + background-color: #3e8e41; + border: none; + color: white; + padding: 15px 10px; + text-align: center; + font-size: 24px; + margin: 4px 2px; + opacity: 0.6; + transition: 0.3s; + display: inline-block; + text-transform: uppercase; + cursor: pointer; + border-radius: 15px; +} + +.addBtn:hover {opacity: 1} From 9394b7587c0fb9a739210480391d0332df67c118 Mon Sep 17 00:00:00 2001 From: Shinh18 Date: Thu, 29 Oct 2020 17:01:03 -0400 Subject: [PATCH 2/5] add coherent class names --- frontend/src/pages/Book.jsx | 20 +++--- frontend/src/pages/book.scss | 135 ++++++++++++++++------------------- 2 files changed, 70 insertions(+), 85 deletions(-) diff --git a/frontend/src/pages/Book.jsx b/frontend/src/pages/Book.jsx index bac3cf1..ca808cd 100644 --- a/frontend/src/pages/Book.jsx +++ b/frontend/src/pages/Book.jsx @@ -23,12 +23,12 @@ export default function Book() { return ( <> -
-
-
+
+
+
book cover
-
+
title
{book.title}
@@ -38,16 +38,12 @@ export default function Book() {
{book.genre}
year
{book.yearPublished}
-
-
- -
-
- -
+
+ +
-
+
); } diff --git a/frontend/src/pages/book.scss b/frontend/src/pages/book.scss index fa8516f..88e3fa7 100644 --- a/frontend/src/pages/book.scss +++ b/frontend/src/pages/book.scss @@ -1,85 +1,74 @@ @import '../fonts/fontWeight.scss'; -.container { - padding: 4.5em; +.PageTitle { + margin: 0 0 1.25em; + font: $regular 2.25em/1.5 'Quicksand', sans-serif; } -.row::after { - content: ""; - clear: both; - display: table; - } - -[class*="col-"] { - float: left; - padding: 15px; - text-align: center; -} +.Section { + padding: 4.5em; -.col-1 {width: 8.33%;} -.col-2 {width: 16.66%;} -.col-3 {width: 25%;} -.col-4 {width: 33.33%;} -.col-5 {width: 41.66%;} -.col-6 {width: 50%;} -.col-7 {width: 58.33%;} -.col-8 {width: 66.66%;} -.col-9 {width: 75%;} -.col-10 {width: 83.33%;} -.col-11 {width: 91.66%;} -.col-12 {width: 100%;} + &__row::after { + content: ""; + clear: both; + display: table; + } -dt { - float: left; - clear: left; - width: 100px; - text-align: right; - text-transform: uppercase; - font: $regular 1.5em/1.5 'Quicksand', sans-serif; -} -dt::after { - content: ":"; -} -dd { - margin: 0 0 0 10px; - //padding-left: 0.5em; - padding: 0 0 70px 2px; - font-style: 'Quicksand', sans-serif; - font-size: larger; -} + /* + &__button { + padding: 5em; + } + */ -.backBtn { - background-color: #db5127; - border: none; - color: white; - padding: 15px 10px; - text-align: center; - font-size: 24px; - margin: 4px 2px; - opacity: 0.6; - transition: 0.3s; - display: inline-block; - text-transform: uppercase; - cursor: pointer; - border-radius: 15px; } -.backBtn:hover {opacity: 1} +.BookDetails { + float: left; + padding: 15px; + text-align: center; + width: 50%; + + dt { + float: left; + clear: left; + width: 100px; + text-align: right; + text-transform: uppercase; + font: $regular 1.5em/1.5 'Quicksand', sans-serif; + } -.addBtn { - background-color: #3e8e41; - border: none; - color: white; - padding: 15px 10px; - text-align: center; - font-size: 24px; - margin: 4px 2px; - opacity: 0.6; - transition: 0.3s; - display: inline-block; - text-transform: uppercase; - cursor: pointer; - border-radius: 15px; + dt::after { + content: ":"; + } + + dd { + margin: 0 0 0 10px; + //padding-left: 0.5em; + padding: 0 0 70px 2px; + font-style: 'Quicksand', sans-serif; + font-size: larger; + } } -.addBtn:hover {opacity: 1} +.Button { + + border: none; + color: white; + padding: 0.5em ; + text-align: center; + font-size: 24px; + margin: 4px 2px; + display: inline-block; + text-transform: uppercase; + cursor: pointer; + border-radius: 15px; + + &__back { + background-color: #db5127; + } + + &__add { + background-color: #3e8e41; + } + +} From 74ae3787e89c3edf454ae406218c247115fb4028 Mon Sep 17 00:00:00 2001 From: Shinh18 Date: Thu, 29 Oct 2020 17:07:32 -0400 Subject: [PATCH 3/5] add book title as page heading --- frontend/src/pages/Book.jsx | 3 ++- frontend/src/pages/book.scss | 7 ++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/Book.jsx b/frontend/src/pages/Book.jsx index ca808cd..e8688c1 100644 --- a/frontend/src/pages/Book.jsx +++ b/frontend/src/pages/Book.jsx @@ -24,7 +24,8 @@ export default function Book() { return ( <>
-
+
+

{book.title}

book cover
diff --git a/frontend/src/pages/book.scss b/frontend/src/pages/book.scss index 88e3fa7..404e050 100644 --- a/frontend/src/pages/book.scss +++ b/frontend/src/pages/book.scss @@ -1,12 +1,13 @@ @import '../fonts/fontWeight.scss'; .PageTitle { - margin: 0 0 1.25em; + margin: 0 0 1.25em ; font: $regular 2.25em/1.5 'Quicksand', sans-serif; + text-transform: uppercase; } .Section { - padding: 4.5em; + padding: 2em; &__row::after { content: ""; @@ -24,7 +25,7 @@ .BookDetails { float: left; - padding: 15px; + // padding: 15px; text-align: center; width: 50%; From c3c8d62b455e89bae2708682f43026853b7bfe7b Mon Sep 17 00:00:00 2001 From: Shinh18 Date: Thu, 29 Oct 2020 17:20:58 -0400 Subject: [PATCH 4/5] change px unit into em --- frontend/src/pages/book.scss | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/frontend/src/pages/book.scss b/frontend/src/pages/book.scss index 404e050..cd21d8f 100644 --- a/frontend/src/pages/book.scss +++ b/frontend/src/pages/book.scss @@ -14,25 +14,17 @@ clear: both; display: table; } - - /* - &__button { - padding: 5em; - } - */ - } .BookDetails { float: left; - // padding: 15px; text-align: center; - width: 50%; + width: 40em; dt { float: left; clear: left; - width: 100px; + width: 5em; text-align: right; text-transform: uppercase; font: $regular 1.5em/1.5 'Quicksand', sans-serif; @@ -43,26 +35,25 @@ } dd { - margin: 0 0 0 10px; + margin: 0.5em; //padding-left: 0.5em; - padding: 0 0 70px 2px; + padding: 0 0 3.5em 0; font-style: 'Quicksand', sans-serif; font-size: larger; } } .Button { - border: none; color: white; padding: 0.5em ; text-align: center; - font-size: 24px; - margin: 4px 2px; + font-size: 1.5em; + margin: 0 2em; display: inline-block; text-transform: uppercase; cursor: pointer; - border-radius: 15px; + border-radius: 0.5em; &__back { background-color: #db5127; @@ -70,6 +61,5 @@ &__add { background-color: #3e8e41; - } - + } } From 6866b154f2b133e0a6703e25c76929a61faeef99 Mon Sep 17 00:00:00 2001 From: Shinh18 Date: Thu, 29 Oct 2020 17:22:35 -0400 Subject: [PATCH 5/5] made requested changes --- frontend/src/pages/Book.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/pages/Book.jsx b/frontend/src/pages/Book.jsx index e8688c1..26ee957 100644 --- a/frontend/src/pages/Book.jsx +++ b/frontend/src/pages/Book.jsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from 'react'; import './book.scss'; import { useParams } from 'react-router-dom'; - import { bookURL } from '../SERVER'; export default function Book() { @@ -22,7 +21,6 @@ export default function Book() { }, []); return ( - <>

{book.title}

@@ -45,6 +43,5 @@ export default function Book() {
- ); }