Page MenuHomePhabricator

when the article expands up instead of down, it hides the image and wikipedia logo
Closed, ResolvedPublic

Description

Issue when the article expands up instead of down, it hides the image and wikipedia logo when there's still space below the popup.
According to the description, if there is no more space, it should show the image and show a vertical scroll.

12

this is what I found out related to the view port dimensions.
I first saw the issue on my computer with this dimensions.


then i opened the browser on responsive layout and noticed that it starts covering the top of the popup around 800 px even though there is more space below

Design details

These are two design recommendations which we can consider in order to avoid hiding the preview header(thumbnail, wordmark). We might require minor refinements after coding to make sure it looks fine in different conditions.

  • If the preview card comes up above the preview word then let it expand upwards but fixed its headers' position just below the browser's URL address bar. Also, enable vertical scrolling inside preview to let readers read the entire content.
  • If the preview card comes underneath the preview word then let it expand downwards and enable vertical scrolling inside.

Note: Attached mock up is just a representation of the idea.

Event Timeline

Jpita created this task.Jul 10 2020, 4:23 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 10 2020, 4:23 AM

@Jpita Please confirm that this is on desktop?

Jpita added a comment.Jul 10 2020, 6:55 AM

@Jpita Please confirm that this is on desktop?

Yes, for some reason the wikipedia-preview project never appears when I search for it😥

AMuigai moved this task from Backlog to Bugs on the Inuka-Team board.Jul 20 2020, 1:03 PM
AMuigai triaged this task as Medium priority.Aug 4 2020, 5:12 PM

@SGautam_WMF if nothing changes for desktop (in other words, if T256156 is declined), could you have a look here and figure out how should the popup expand so it doesn't become out of view?

SGautam_WMF moved this task from Backlog to Design doing on the Inuka-Team (Kanban) board.
SGautam_WMF added a project: Design.

Thanks, @hueitan for your feedback, @SBisson I am thinking of the following approach to fix the problem.

a. If the preview card comes up above the preview word then let it expand upwards but fixed its headers' position(wordmark, thumbnail) just below the browser's URL address bar. Also, enable vertical scrolling inside it similar to mobile preview to let readers read the entire content.

b. If the preview card comes underneath the preview word then let it expand downwards and enable vertical scrolling inside similar to the mobile preview.

There is one thing we need to check or find out while coding, can we activate vertical scrolling inside preview while web page also has a browser's default vertical scroll active?

SGautam_WMF removed SGautam_WMF as the assignee of this task.Aug 20 2020, 7:23 AM
SGautam_WMF updated the task description. (Show Details)
SGautam_WMF removed a project: Design.
SGautam_WMF moved this task from Design doing to Ready for Dev on the Inuka-Team (Kanban) board.
hueitan claimed this task.Sep 7 2020, 8:22 AM
hueitan moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.

There is one thing we need to check or find out while coding, can we activate vertical scrolling inside preview while web page also has a browser's default vertical scroll active?

This is possible and require more testing on different device and browser.

In addition, i think the same layout logic should apply to before & after expand, that said we don't see any clear difference after clicking the CTA (Continue Reading) in this case, any thought of it?

hueitan moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Sep 14 2020, 9:35 AM

The above question is non-related to the original requirement, may extend the solution but the design still need more time to think about, so please ignore it for now.

can we activate vertical scrolling inside preview while web page also has a browser's default vertical scroll active?

Yes, confirmed.

PR open : https://github.com/wikimedia/wikipedia-preview/pull/61

SBisson moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Sep 14 2020, 3:22 PM

it seems to still be broken in IE11 (1280x800)

Firefox 81 1280x800 gets cut on the bottom

and in chrome it also seems broken before we click the CTA


should I move to dev ?

Jpita added a comment.Sep 15 2020, 8:57 PM

now is showing the scroll bars when it shouldn't
Firefox

it seems to still be broken in IE11 (1280x800)

Confirmed, I will check it again.

Firefox 81 1280x800 gets cut on the bottom

You should able to scroll down to see the content, no?

and in chrome it also seems broken before we click the CTA

This is exactly my above question T257648#6440589, @SGautam_WMF tag you again and maybe you have an idea now?

now is showing the scroll bars when it shouldn't
Firefox

Ok, I will disable the scrollbar here.

There is one thing we need to check or find out while coding, can we activate vertical scrolling inside preview while web page also has a browser's default vertical scroll active?

This is possible and require more testing on different device and browser.

In addition, i think the same layout logic should apply to before & after expand, that said we don't see any clear difference after clicking the CTA (Continue Reading) in this case, any thought of it?

@hueitan this is the best approach I can think as well. Let's use same layout logic before and after expansion.

Firefox 81 1280x800 gets cut on the bottom

You should able to scroll down to see the content, no?

yes I can, my bad, ignore this

SBisson moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Sep 29 2020, 1:42 PM

@Jpita ready for testing

Jpita added a comment.Sep 30 2020, 9:49 AM

merging the code but leaving it in QA to check IE11 once deployed

AMuigai closed this task as Resolved.Sep 30 2020, 8:09 PM