UI: Dashboard: grid of books
Context
We need to show all books that a user has created in a grid on the dashboard page. In future, when collaboration is possibly developed, the user could be shown books shared with them too.
The books should appear in alphabetical order and show 10 books per page, five in each row with two rows per page.
When there are more than ten books, add pagination in a bottom navigation bar to the next page of ten books, and so on. When the user clicks to the next page of books, the dashboard all stays the same except for the ten books shown, and the page number indicator.
If the user doesn't have any books yet, we should show a message in place of the grid below the 'Your books' title which says 'You don't have any books yet.'
The tiles can display a placeholder cover thumbnail until the integration with Lulu’s cover design is done.
Design
- Add the grid of books as in the Figma design here and shown below. The grid should be responsive:
- Also add a version of this page for when the user doesn't have any books, with message in place of the grid below the 'Your books' title which says 'You don't have any books yet.'
- Add pagination depending on screen sizes.
- Tiles can display a placeholder cover thumbnail until the integration with Lulu’s cover design is done (we can leave them grey rectangles for now).
- We should expect actions on these tiles in future phases (as shown with ‘duplicate’ and ‘delete’ in the above image) for now we will show actions and only have 'Delete', 'Duplicate' and other actions could come later.
- We need to add the book title under each tile.
Implementation (if applicable)
[A description of the steps to implement the feature.]
Alternative approaches (if applicable)
[Include any alternatives to meet this use case.]
Open issues (if applicable)
[Links to and a discussion of related issues, if applicable.]