Improvements for mobile screens
Closed this issue · 3 comments
In stylesheets:
- Change "Get Citation" to "Cite"
- Decrease size of left and right arrows
- Decrease size of Close Button
- Decrease size of Book Title / Section Title
- Ensure ellipsis displays when Book Title / Section Title overflow is hidden
Requiring changes to javascript:
- Contents modal width should fill the screen
- Search results modal width should fill the screen
- Preferences modal width should fill the screen
- Default to Large text
The controls that use modals use a fraction (e.g. 0.75) to configure how wide the modal should be. If we change/augment modals to take a class parameter, these widths could be defined in CSS and reflect mediaqueries.
@jmcglone - should part of this ticket be making certain options unavailable for mobile devices? e.g. remove option for columns?
When I read the "Show Sold Separately" text on my phone I find the banner with New York UP's branding and the "get citation" feature too dominant. I just want to be able to read the book, rather than having my eye drawn to the purple header. Having it so big also reduces the amount of space there is for the text -- especially important on a small screen.
Suggestions for improvement: Have an option to close the banner? Since the citation is to the whole book not an individual page, why not just offer the citation functionality on the book page?