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

Hotfix

Browse Source
This commit is contained in:
Kenneth Jannette
2025-02-27 10:37:53 -05:00
parent 1a7b41a2aa
commit b39f786339
3 changed files with 115 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/App.css
View File

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

164
src/Bookshelf.js
View File

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