Change Details

====Description This task aims to implement an 'End of Highlight' screen that appears after a user has finished reading a highlight. The screen will present the user with a selection of highlights that they can navigate to next. ====Design |{F38096759 width=260}| **Layout:** - The screen consists of a header, a 2x2 card grid section, and a footer. - Header: Include the 'Discover more' title. The title should be vertically aligned with the back arrow. Title font size: 18px, weight: Medium, color: #202122 - Place the title "Discover more" at the top center of the screen. **Card Section:** - Use the card design consistent with the category page. - Display 4 highlight cards in a 2x2 grid layout. **Card content & randomness logic:** - Display 4 highlight cards in a 2x2 grid, similar to the layout on the category page. - If there are remaining highlights from the current topic the user is reading, use the first slots for those. - Fill any remaining slots with highlights from different topics. - Include a text link at the bottom center saying "See all WikiHighlights." - Make the text link clickable, which navigates the user to the category page. - Text properties: Font size 14px, Weight: Medium, Color: #3366cc. **Interactions:** - Tapping on a card takes the user to the respective highlight. - Tapping on the 'See all WikiHighlights' link takes the user to the category page. - Tapping on the back arrow at the top-left corner takes the user to the category page. **Progress bar & scroll behavior:** |{F38096780 width=260}||{F38096759 width=260}| - For the highlight currently being read, the progress bar will reach its full state when the user arrives at the "Discover more" screen. - Scrolling down on the "Discover More" screen does not advance to another highlight or page. Instead, it allows the user to view all available options within the "Discover More" section. - Scrolling up on the "Discover More" screen will take the user back to the previous page of the highlight they were reading. Note: For the Long-form article microsite, a "Related Articles" section already exists. [[ https://www.figma.com/file/xx0TPcZleutgFPUIy6rcUI/Automated%2C-Human-reviewed%2C-visual-article-summaries?type=design&node-id=1888%3A745&mode=design&t=GlXkAcbHX5GSzPhM-1 | **Design file** ]] **Acceptance Criteria** - The 'Discover more' screen should load seamlessly after a user has finished reading a highlight. - All user interactions like tapping on cards or the 'See all WikiHighlights' link should work as intended. - The design should be responsive and should look good on different device sizes.

====Description This task aims to implement an 'End of Highlight' screen that appears after a user has finished reading a highlight. The screen will present the user with a selection of highlights that they can navigate to next. ====Design |{F38096759 width=260}| **Layout:** - The screen consists of a header, a 2x2 card grid section, and a footer. - Header: Include the 'Discover more' title. The title should be vertically aligned with the back arrow. Title font size: 18px, weight: Medium, color: #202122 - Place the title "Discover more" at the top center of the screen. **Card Section:** - Use the card design consistent with the category page. - Display 4 highlight cards in a 2x2 grid layout. **Card content & randomness logic:** - Display 4 highlight cards in a 2x2 grid, similar to the layout on the category page. - If there are remaining highlights from the current topic the user is reading, use the first slots for those. - Fill any remaining slots with highlights from different topics. - Include a text link at the bottom center saying "See all WikiHighlights." - Make the text link clickable, which navigates the user to the category page. - Text properties: Font size 14px, Weight: Medium, Color: #3366cc. **Interactions:** - Tapping on a card takes the user to the respective highlight. - Tapping on the 'See all WikiHighlights' link takes the user to the category page. - Tapping on the back arrow at the top-left corner takes the user to the category page. **Progress bar & scroll behavior:** |{F38096780 width=260}||{F38096759 width=260}| - For the highlight currently being read, the progress bar will reach its full state when the user arrives at the "Discover more" screen. - Scrolling down on the "Discover More" screen does not advance to another highlight or page. Instead, it allows the user to view all available options within the "Discover More" section. - Scrolling up on the "Discover More" screen will take the user back to the previous page of the highlight they were reading. Note: For the Long-form article microsite, a "Related Articles" section already exists. [[ https://www.figma.com/file/xx0TPcZleutgFPUIy6rcUI/Automated%2C-Human-reviewed%2C-visual-article-summaries?type=design&node-id=1888%3A745&mode=design&t=GlXkAcbHX5GSzPhM-1 | Design file ]] **Acceptance Criteria** - The 'Discover more' screen should load seamlessly after a user has finished reading a highlight. - All user interactions like tapping on cards or the 'See all WikiHighlights' link should work as intended. - The design should be responsive and should look good on different device sizes.

====Description This task aims to implement an 'End of Highlight' screen that appears after a user has finished reading a highlight. The screen will present the user with a selection of highlights that they can navigate to next. ====Design |{F38096759 width=260}| **Layout:** - The screen consists of a header, a 2x2 card grid section, and a footer. - Header: Include the 'Discover more' title. The title should be vertically aligned with the back arrow. Title font size: 18px, weight: Medium, color: #202122 - Place the title "Discover more" at the top center of the screen. **Card Section:** - Use the card design consistent with the category page. - Display 4 highlight cards in a 2x2 grid layout. **Card content & randomness logic:** - Display 4 highlight cards in a 2x2 grid, similar to the layout on the category page. - If there are remaining highlights from the current topic the user is reading, use the first slots for those. - Fill any remaining slots with highlights from different topics. - Include a text link at the bottom center saying "See all WikiHighlights." - Make the text link clickable, which navigates the user to the category page. - Text properties: Font size 14px, Weight: Medium, Color: #3366cc. **Interactions:** - Tapping on a card takes the user to the respective highlight. - Tapping on the 'See all WikiHighlights' link takes the user to the category page. - Tapping on the back arrow at the top-left corner takes the user to the category page. **Progress bar & scroll behavior:** |{F38096780 width=260}||{F38096759 width=260}| - For the highlight currently being read, the progress bar will reach its full state when the user arrives at the "Discover more" screen. - Scrolling down on the "Discover More" screen does not advance to another highlight or page. Instead, it allows the user to view all available options within the "Discover More" section. - Scrolling up on the "Discover More" screen will take the user back to the previous page of the highlight they were reading. Note: For the Long-form article microsite, a "Related Articles" section already exists. [[ https://www.figma.com/file/xx0TPcZleutgFPUIy6rcUI/Automated%2C-Human-reviewed%2C-visual-article-summaries?type=design&node-id=1888%3A745&mode=design&t=GlXkAcbHX5GSzPhM-1 | **Design file** ]] **Acceptance Criteria** - The 'Discover more' screen should load seamlessly after a user has finished reading a highlight. - All user interactions like tapping on cards or the 'See all WikiHighlights' link should work as intended. - The design should be responsive and should look good on different device sizes.