kjannette/reactnd-project-bookbrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2 from kjannette/style

Browse Source 
Style
This commit is contained in:
S Jannette
2025-02-27 10:43:55 -05:00
committed by GitHub
parent 1a7b41a2aa 3fdd34a472
commit d377b333fe
3 changed files with 115 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -14,7 +14,7 @@
/> />
<!-- <!--
--> -->
<title>MyReads</title> <title>Book Nook Browser</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

28
src/App.css
View File

@@ -1,10 +1,13 @@
html, body, .root { html,
body,
.root {
height: 100%; height: 100%;
} }
body { body {
line-height: 1.5; line-height: 1.5;
} }
body, .app { body,
.app {
background: white; background: white;
} }
@@ -55,11 +58,11 @@ body, .app {
border-radius: 25px; border-radius: 25px;
background: #2e7d32; background: #2e7d32;
/*background-image: url('./icons/add.svg');*/ /*background-image: url('./icons/add.svg');*/
background-image: url('./icons/search.svg'); background-image: url("./icons/search.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 20px; background-position: 20px;
background-size: 14px; background-size: 14px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
font-size: 14px; font-size: 14px;
color: white; color: white;
text-decoration: none; text-decoration: none;
@@ -76,7 +79,7 @@ body, .app {
left: 0; left: 0;
z-index: 5; z-index: 5;
display: flex; display: flex;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 0 6px rgba(0,0,0,0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 0 6px rgba(0, 0, 0, 0.23);
} }
.search-books-input-wrapper { .search-books-input-wrapper {
flex: 1; flex: 1;
@@ -97,7 +100,7 @@ body, .app {
width: 50px; width: 50px;
height: 53px; height: 53px;
background: white; background: white;
background-image: url('./icons/arrow-back.svg'); background-image: url("./icons/arrow-back.svg");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 28px; background-size: 28px;
@@ -153,11 +156,11 @@ body, .app {
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
background: #60ac5d; background: #60ac5d;
background-image: url('./icons/arrow-drop-down.svg'); background-image: url("./icons/arrow-drop-down.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 20px; background-size: 20px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
} }
.book-shelf-changer select { .book-shelf-changer select {
width: 100%; width: 100%;
@@ -169,7 +172,7 @@ body, .app {
/* book cover */ /* book cover */
.book-cover { .book-cover {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
background: #eee; background: #eee;
} }
.book-cover-title { .book-cover-title {
@@ -178,14 +181,13 @@ body, .app {
font-size: 0.8em; font-size: 0.8em;
} }
/* logo */ /* logo */
.logo { .logo {
width: 30px; width: 30px;
height: 30px; height: 24px;
background-image: url('./icons/logo.svg'); background-image: url("./icons/logo.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
} }

164
src/Bookshelf.js
View File

@@ -1,17 +1,15 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import './Bookshelf.css' import "./Bookshelf.css";
class Bookshelf extends Component { class Bookshelf extends Component {
render() { render() {
const books = this.props.books const books = this.props.books;
const onSelect = this.props.onSelect const onSelect = this.props.onSelect;
return ( return (
<div className="list-books"> <div className="list-books">
<div className="list-books-title"> <div className="list-books-title">
<span className="logo"></span> <span className="logo"></span>
<h1>MyReads</h1> <h1>Book Nook Browser</h1>
</div> </div>
<div className="list-books-content"> <div className="list-books-content">
<div> <div>
@@ -19,19 +17,32 @@ class Bookshelf extends Component {
<h2 className="bookshelf-title">Currently Reading</h2> <h2 className="bookshelf-title">Currently Reading</h2>
<div className="bookshelf-books"> <div className="bookshelf-books">
<ol className="books-grid"> <ol className="books-grid">
{books
{books.filter(function(book){ .filter(function (book) {
return book.shelf === "currentlyReading" return book.shelf === "currentlyReading";
}).map((book) => ( })
.map((book) => (
<li key={book.id}> <li key={book.id}>
<div className="book"> <div className="book">
<div className="book-top"> <div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${ book.imageLinks.thumbnail }")` }}></div> <div
className="book-cover"
style={{
width: 128,
height: 193,
backgroundImage: `url("${book.imageLinks.thumbnail}")`,
}}
></div>
<div className="book-shelf-changer"> <div className="book-shelf-changer">
<select name={book.id} onChange={onSelect} defaultValue={book.shelf}> <select
name={book.id}
onChange={onSelect}
defaultValue={book.shelf}
>
<option value="none">Move to...</option> <option value="none">Move to...</option>
<option value="currentlyReading">Currently Reading</option> <option value="currentlyReading">
Currently Reading
</option>
<option value="wantToRead">Want to Read</option> <option value="wantToRead">Want to Read</option>
<option value="read">Read</option> <option value="read">Read</option>
<option value="none">None</option> <option value="none">None</option>
@@ -42,8 +53,7 @@ class Bookshelf extends Component {
<div className="book-authors">{book.authors}</div> <div className="book-authors">{book.authors}</div>
</div> </div>
</li> </li>
))} ))}
</ol> </ol>
</div> </div>
</div> </div>
@@ -51,31 +61,43 @@ class Bookshelf extends Component {
<h2 className="bookshelf-title">Want to Read</h2> <h2 className="bookshelf-title">Want to Read</h2>
<div className="bookshelf-books"> <div className="bookshelf-books">
<ol className="books-grid"> <ol className="books-grid">
{books
{books.filter(function(book){ .filter(function (book) {
return book.shelf === "wantToRead" return book.shelf === "wantToRead";
}).map((book) => ( })
.map((book) => (
<li key={book.id}> <li key={book.id}>
<div className="book"> <div className="book">
<div className="book-top"> <div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${ book.imageLinks.thumbnail }")` }}></div> <div
<div className="book-shelf-changer"> className="book-cover"
<select name={book.id} onChange={onSelect} defaultValue={book.shelf}> style={{
<option value="none">Move to...</option> width: 128,
<option value="currentlyReading">Currently Reading</option> height: 193,
<option value="wantToRead">Want to Read</option> backgroundImage: `url("${book.imageLinks.thumbnail}")`,
<option value="read">Read</option> }}
<option value="none">None</option> ></div>
</select> <div className="book-shelf-changer">
<select
name={book.id}
onChange={onSelect}
defaultValue={book.shelf}
>
<option value="none">Move to...</option>
<option value="currentlyReading">
Currently Reading
</option>
<option value="wantToRead">Want to Read</option>
<option value="read">Read</option>
<option value="none">None</option>
</select>
</div>
</div> </div>
<div className="book-title">{book.title}</div>
<div className="book-authors">{book.authors}</div>
</div> </div>
<div className="book-title">{book.title}</div> </li>
<div className="book-authors">{book.authors}</div> ))}
</div>
</li>
))}
</ol> </ol>
</div> </div>
</div> </div>
@@ -83,39 +105,51 @@ class Bookshelf extends Component {
<h2 className="bookshelf-title">Read</h2> <h2 className="bookshelf-title">Read</h2>
<div className="bookshelf-books"> <div className="bookshelf-books">
<ol className="books-grid"> <ol className="books-grid">
{books
{books.filter(function(book){ .filter(function (book) {
return book.shelf === "read" return book.shelf === "read";
}).map((book) => ( })
.map((book) => (
<li key={book.id}> <li key={book.id}>
<div className="book"> <div className="book">
<div className="book-top"> <div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url("${ book.imageLinks.thumbnail }")` }}></div> <div
<div className="book-shelf-changer"> className="book-cover"
<select name={book.id} onChange={onSelect} defaultValue={book.shelf}> style={{
<option value="none">Move to...</option> width: 128,
<option value="currentlyReading">Currently Reading</option> height: 193,
<option value="wantToRead">Want to Read</option> backgroundImage: `url("${book.imageLinks.thumbnail}")`,
<option value="read">Read</option> }}
<option value="none">None</option> ></div>
</select> <div className="book-shelf-changer">
<select
name={book.id}
onChange={onSelect}
defaultValue={book.shelf}
>
<option value="none">Move to...</option>
<option value="currentlyReading">
Currently Reading
</option>
<option value="wantToRead">Want to Read</option>
<option value="read">Read</option>
<option value="none">None</option>
</select>
</div>
</div> </div>
<div className="book-title">{book.title}</div>
<div className="book-authors">{book.authors}</div>
</div> </div>
<div className="book-title">{book.title}</div> </li>
<div className="book-authors">{book.authors}</div> ))}
</div>
</li>
))}
</ol> </ol>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
) );
} }
} }
export default Bookshelf export default Bookshelf;