This PR focuses on the integration of the BookPage link in the other pages of the application: BookSearchTile, CreateList, ListPage and SearchBookModal.
It creates the BookDescriptionOverlay, a component used to wrap around the book image and give a description popup when the user clicks on the image.
Finishes work started in #76
Breakdown
Create BookDescriptionOverlay using react bootstrap popovers
Renders all children inside of it
If there is a description over 500 chars, cut off and add ellipsis
If there is an empty description, do not show the description tag
Add BookDescriptionOverlay to BookSearchTile, CreateList, ListPage and SearchBookModal
Add image classes in the CSS to ensure the sizes are as expected and not too large
Minor string literal changes
Main Difficulties
Deciding whether to implement this as a function in each necessary class or make a new component for it.
Placing the Overlay simply on the modals, SearchBookModal and CreateList, or all pages referencing books.
Screenshot of Feature
This is the description overlay shown when clicking on a book image.
This is the description overlay shown when clicking on a book image with no description.
Description
This PR focuses on the integration of the BookPage link in the other pages of the application:
BookSearchTile,CreateList,ListPageandSearchBookModal.It creates the BookDescriptionOverlay, a component used to wrap around the book image and give a description popup when the user clicks on the image.
Finishes work started in #76
Breakdown
BookSearchTile,CreateList,ListPageandSearchBookModalMain Difficulties
Deciding whether to implement this as a function in each necessary class or make a new component for it.
Placing the Overlay simply on the modals, SearchBookModal and CreateList, or all pages referencing books.
Screenshot of Feature
This is the description overlay shown when clicking on a book image.
This is the description overlay shown when clicking on a book image with no description.
Linked Issue
79