Design foundations and book components #45
Merged
+926
−171
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Basic setup for design elements and components, to be continued on a different machine
Create/move all global .css files into styles/ folder - index.css - tokens.css - base.css - reset.css Add styles_documentation.md to docs/, describes purpose and rules of global .css files, and other style decisions
New file: client\src\types\book.ts Book mirrors the current GraphQL schema / Mongoose model
New files: - BookCover.tsx and .module.css - BookCard.tsx and .module.css - BookGrid.tsx and .module.css - ´BookCover` generates styled color cover for books that are missing a real img cover (URL) - ´BookCard` creates book card used in grid on Browse and My shelf pages, uses select fields from Book type, includes link to book detail page, optional visual shelf plank element, title, author, year, save toggle ribbon button - `BookGrid` creates list of `BookCard`s, renders into auto-fill grid that responds to different screen sizes Add react-router-dom config to .json files in client/, used by BookCard link
Use: pass the applied query as `value` (e.g. from the URL "?q="); onSearch fires only on Enter or button, never while typing.
Updated docs to reflect recent changes to components and CSS
Sign in
to join this conversation on GitHub.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add the shared styles (tokens, reset, base) and the first components:
BookCover,BookCard,BookGridandSearchField, plus the clientBooktype.Close #32, Close #34, Close #35
Notes
BookGridprops:books,savedIds,ratings,onToggleSaved, and optionalshowShelf. The wooden shelf is shown on My shelf only, never on Browse. The grid does not know which page it is on.idis still to be settled (see open questions indecisions.md).npm run buildruns clean.New dependency:
react-router-dom(forLinkinBookCard). Runnpm installinclient/to make sure you have the required package.NB! No actual pages have been created, so it is not possible to see this in use via
npm run devPreview:
Desktop view without shelf element
Desktop view with shelf element
Search field in focus, with input, button highlighted
The purple header and the surrounding page are a throwaway mockup, used only to show the components in context.
Fonts Fraunces and Figtree are not loaded yet (fallback fonts). Self-hosting fonts is a separate task.