This PR focuses on the UI update of the BookSearchTile object, the view rendered on the Browse page after the User enters a search term and presses enter. It also sets the framework for the user to see lists of booklists they can add a book to.
Breakdown
Format the book information horizontally instead of being stacked as before
Add a button for adding the given book to their booklist
Generates dynamically based on how many booklists the user has
Add tests to incorporate the new Add to List button
Pass a "Book" object to the SearchBookTile instead of each primitive variable (authors, title, thumbnail..)
Main Difficulties
Deciding which dropdown library to use - there are a lot of possibilities but I decided to use the ReactBootstrap components.
Setting up the test data to 'mock' the lists of BookLists I would get - I ended up just creating arrays with names and ids to show.
Ensuring that the dropdown was not covered by the buttons on the next lowest book element - with lots of help from Geoff, it now ensures that when the element is in focus, it will be the top layer seen.
Screenshot of Feature
Before this PR
Created in this PR
This screenshot shows the tile view after hovering over one of the tiles with a lightblue background.
This screenshot shows the dropdown depicting the list of the user's clubs and communities that they can add the book to (currently dummy data).
New tile is optimized for mobile view too!
Linked Issue
9
Creates Issue #48 for handling empty BookLists or Club/Communities
Description
This PR focuses on the UI update of the BookSearchTile object, the view rendered on the Browse page after the User enters a search term and presses enter. It also sets the framework for the user to see lists of booklists they can add a book to.
Breakdown
Add to ListbuttonMain Difficulties
Deciding which dropdown library to use - there are a lot of possibilities but I decided to use the ReactBootstrap components.
Setting up the test data to 'mock' the lists of BookLists I would get - I ended up just creating arrays with names and ids to show.
Ensuring that the dropdown was not covered by the buttons on the next lowest book element - with lots of help from Geoff, it now ensures that when the element is in focus, it will be the top layer seen.
Screenshot of Feature
Before this PR
Created in this PR
This screenshot shows the tile view after hovering over one of the tiles with a lightblue background.
This screenshot shows the dropdown depicting the list of the user's clubs and communities that they can add the book to (currently dummy data).
New tile is optimized for mobile view too!
Linked Issue
9
Creates Issue #48 for handling empty BookLists or Club/Communities