In T256213#6289919, @hueitan wrote:

Let's say the delay is 200ms, if user mouse leave and back to the popup within 200ms, I think it shouldn't still clear the popup.

@eamedina though in general, it's working as expected, however, I found some minor issues on different android devices, not sure we need news tickets or we can take care of them as part of this ticket.

Thanks @eamedina I will have a look and share my feedback.

I'll update the description once have the loading state animation ready.

For the scope of this ticket, we will only consider adding a delay while closing the preview and will open another ticket to discuss the artificial delay at the beginning of the preview.

We can consider adding .20s(200ms) delay when the cursor leaves the preview. For now, we can start with this number and if required, play around it to find the one which works well once we have it available in code.

I think it would be worth exploring preview for touch devices as a separate ticket as I believe it's size can change along with how we turn them on/off e.g. Wikipedia iPad app does have page preview available but then you are supposed to hold the tap for a couple of seconds before it triggers. So for now, we can consider using the existing layout for iPad or tablet devices and let preview be positioned around the hyperlinked word itself.

@eamedina this looks fine now, I'll move it to product signoff once you merge it.

Looks fine, moving it for product signoff.

looks fine all three browsers(firefox, chrome, safari).

I have updated the ticket with design details, I will add a list of words which are going to get WP treatment inside articles.

@SBisson I am going to address some design feedback received from Angie and then plan is to highlight some words in all these articles to show some WP variety. I think once we finalize the design then we can push it to WP repo.

@SBisson I did make a test GitHub page and uploaded HTML & CSS code for design. I exported the code using a plugin in Sketch so not entirely sure the quality of it, I certainly have some places where I would like us to edit it if we decide to go forward with it.

Found out confirmation and discard messages are left-aligned which doesn't look good on devices. @eamedina is working to center align them.

@hueitan would this link be helpful for logo images?

@hueitan that's an image, I have a list of logo images available with me, I would try to find out if there is a URL for us to fetch it.

Thanks, let me check the export option.

Wordpress sounds good but not sure if we will be able to customize it to embed preview in there?

@SBisson @AMuigai uploading two differents explorations here for feedback. The only difference between these two is the landing page layout whereas the article view remains the same. As of now, these links are compatible with the mobile browser so I would advise you to open the phone. I would scale it for desktop version once we finalized the mobile version. Also, how are we thinking of making the site live? dedicated hosting or using Github?

@eamedina looks fine on all 3 devices.

Working as expected, moving it for product signoff.

I think this middle ground makes sense to me as in my earlier proposal I forgot to consider the role of left/right to navigate within the text.
Unrelated to this, I think we need to tweak the position of the discard dialog box as some text is hidden in the Hindi language on all three devices also our usual adjustment for Jio-2.

Discard dialog box	Fineprint on Jio-2

@eamedina one thing which I forgot to add earlier is Wikipedia Preview's hyper link state once user has interacted with it. This won't require any additional design just the color of a link will change after tap/click on it. I have updated the Zeplin link with the hex code of the color.

@eamedina, Thanks for bringing this case. Indeed, this screen is different than any other single screen we have in the app. In my opinion, it might take some time for users to learn that left/right keys are there to switch links while they are reading the article so it's good to keep the same behavior while they are on feedback screen. However, after installing the branch I felt the current controls are less intuitive, therefore, one suggestion could be, keeping navigations free-flowing and allow users to use the entire DPAD(left, right, up, down) on the screen to move in and out of the box and switching between links.

@eamedina sounds good for the desktop version.

I like Pita's suggestion here, we can use up/down keys on D-PAD to switch control between the text box and fine print and use left/right keys to switch between links.

In T255397#6224179, @SBisson wrote:

What softkeys, if any, should be available when the consent screen shows the offline panel?

Looks fine, I followed the steps mentioned by Pita on GitHub thread.

@SBisson Agreed, this needs to be aligned with partner's design guidelines of treating links. From our side, we can share some options.

@SBisson we can resize them and align them on the center. I did try with George Clooney's article and this is how it looks like.

Working as expected.

@SBisson I am able to see the list of Indian languages when I am installing the app from KaiOS store on the banana phone, however, the "Hindi" language is missing from the list. If helpful, happy to share screenshots of the language list.

@SBisson I have updated the task with some more information, hope that would clear understanding about "continue reading".

Looks as expected, moving it for product signoff.

Sharing some of my thoughts on it, on Android and web, mostly I have seen two patterns being used while using feedback feature in offline mode.

Working as expected, moving it for product signoff.

sure @hueitan I will check with Angie as well.