Description/User story
| Current default text box | Currently creator's view after selecting text | Currently reader's view |
 |  |  |
As a reader,
I want to view text on a wiki story, so that I can understand both the message and the image subject.
As a creator,
I want to add relevant text on a wiki story, so that I can curate a story around text that's readable and an image subject that's visible.
Design
Changes for story builder
| Text box no scrolling | Text box when scrolling is available - before scroll | Text box when scrolling is available - after scrolling |
 |  |  |
- Increase empty text box size from 70px to 72px.
- Change text box left and right margin from 18px to 16px.
- Allow scrolling when story text is more than the maximum height of a text box.
- Show a fade(blur) to communicate that there is more text to scroll.
- Move fade position from bottom to top when no content is left to scroll up.
- Don’t show the fade either top or bottom while user is scrolling the text.
- Don't show the fade when text scrolling is not available.
- Change textbox content padding from
padding: 10px 13px 10px 13px;
to
padding: 8px 20px 8px 8px;
Changes for story viewer
| Text box no scrolling | Text box when scrolling is available - before scroll | Text box when scrolling is available - after scrolling |
 |  |  |
- Allow scrolling when story text is more than the maximum height of a text box.
- Show a fade(blur) to communicate that there is more text to scroll.
- Don't show the fade when text scrolling is not available.
- Once story text is scrolled, the page transition should freeze.
- Change textbox content padding from
padding: 10px;
to
padding: 8px 20px 8px 8px;
- Change textbox left and right margin
from
left: 20px; right: 20px;
to
left: 16px; right: 16px;
Note: We will experiment with different values of text box's height to find a working solution.
Acceptance criteria
- There should be a defined maximum height of the text area.
- Users should be able to scroll through text while viewing a story (there should be some indication of this being possible - a scroll bar?)
- Once story text is scrolled, the page transition should freeze.
- The user should be able to manually proceed to the previous/next story page.
Test scenarios
- Resize the screen width and ensure the text height remains constant.
- Browser compatibility testing.
