Page MenuHomePhabricator

Block modal on mobile: Create designs that include full reason
Closed, ResolvedPublic4 Estimated Story Points

Description

Background

Design

Acceptance criteria

  • Clicking See more should scroll the drawer all the way up
  • Scrolling should reveal more details and the reason (no need to snap like Android)
  • See details link will take the user to the Special:Block details page.
  • There is a fade on the bar which holds the Log in button.

Event Timeline

Prtksxna created this task.Aug 25 2020, 2:42 AM
Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptAug 25 2020, 2:42 AM
Prtksxna updated the task description. (Show Details)Aug 26 2020, 4:51 AM
Niharika triaged this task as Medium priority.Aug 26 2020, 4:36 PM
ARamirez_WMF set the point value for this task to 4.Aug 26 2020, 4:36 PM
ARamirez_WMF moved this task from Design to Cards ready for development on the Anti-Harassment board.
Prtksxna updated the task description. (Show Details)Aug 26 2020, 4:51 PM
Jdlrobson moved this task from Needs triage to Triaged on the Mobile board.Aug 28 2020, 8:53 PM

@Prtksxna Is this ready to be implemented?

Prtksxna added a comment.EditedAug 31 2020, 3:06 AM

@Prtksxna Is this ready to be implemented?

Yep, I think so. Let me know if you need any more details.

Actually scratch that, I might have some changes.

Prtksxna updated the task description. (Show Details)Aug 31 2020, 5:25 PM

Change 624045 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[mediawiki/extensions/MobileFrontend@master] Redesign the mobile block message drawer to show long reasons

https://gerrit.wikimedia.org/r/624045

I was thinking the reason would already be visable and the "See More" would just scroll the user upward with something like this:

window.scroll({
  top: 300, // Whatever the height of the space above the drawer is.
  behavior: 'smooth' // Works in modern browsers, ignored in older ones (afaik)
});

basically it would just smooth scroll the drawer to the top (or as high as it goes).

@Prtksxna What do you think? Do you like it exposing it on "See More" or should it scroll?

@Prtksxna What do you think? Do you like it exposing it on "See More" or should it scroll?

I don't think I understand the different between exposing and scrolling. Is what you're proposing different from what @Tchanders had demo'd during stand-up?

@Prtksxna What do you think? Do you like it exposing it on "See More" or should it scroll?

I don't think I understand the different between exposing and scrolling. Is what you're proposing different from what @Tchanders had demo'd during stand-up?

Right now, the only way to get to the reason is by clicking "See More", which pops the content into the drawer.

Originally I was thinking that tapping "See More" would scroll the viewport. In other words, the reason is there regardless if you tap "See More."

Moving this forward, we can iterate if we'd like to improve it.

Change 624045 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Redesign the mobile block message drawer to show long reasons

https://gerrit.wikimedia.org/r/624045

@Tchanders For indefinite blocks, I don't see any value in the expiry field, just says Block will expire in :

Change 626199 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[mediawiki/extensions/MobileFrontend@master] Restore check for duration in BlockMessageDetails

https://gerrit.wikimedia.org/r/626199

@dom_walden The expiry field isn't supposed to show at all if the block is indefinite - that's a regression due to accidentally removing a check for the duration.

Should be fixed in the patch above.

dom_walden added a comment.EditedSep 10 2020, 1:14 PM

Couple of questions/potential issues for @Tchanders @Prtksxna :

  • I find when I scroll down the page partially before clicking edit, the drawer does not display properly
  • I find weird behaviour when I change the orientation when the drawer is visible
    • From portrait to landscape
      • If the drawer is expanded (after pressing "See more"): only bottom of the drawer's content is visible; no way to scroll the rest into view (that I found)
      • If the drawer is not expanded: drawer disappears
    • From landscape to portrait
      • Drawer expanded: content only appears in a small viewport in the drawer, have to scroll to view it
      • Drawer not expanded: more details become visible (perhaps this is a good thing)
  • I find sometimes I can reveal more of the drawer's content when I scroll. Is this deliberate? Is this T261178#6439649?

All the screenshots above are from iPhone 11, but I have reproduced all these issues with other devies (Android, Windows Phone). I have only been able to test on browserstack, though, not physical devices. Someone might want to confirm these issues on physical devices, as I don't have access to any.

Thanks @dom_walden - I can confirm all of these after testing on a real Android phone.

Couple of questions/potential issues for @Tchanders @Prtksxna :

  • I find when I scroll down the page partially before clicking edit, the drawer does not display properly

This is a regression - filed as T262662.

  • I find weird behaviour when I change the orientation when the drawer is visible

It looks as though the block message drawer didn't support the landscape orientation before. E.g. here's how it appeared with a long reason (it's not scrollable):

@Prtksxna @Niharika Do we want to add support for the horizontal orientation?

  • I find sometimes I can reveal more of the drawer's content when I scroll. Is this deliberate? Is this T261178#6439649?

This isn't deliberate - it's also not the suggestion from that comment (@Prtksxna will file that separately).

It's another regression, and looked even worse on Android/Chrome - filed as T262666.

  • I find sometimes I can reveal more of the drawer's content when I scroll. Is this deliberate? Is this T261178#6439649?

This isn't deliberate - it's also not the suggestion from that comment (@Prtksxna will file that separately).

Filed as T262780

Thanks @dom_walden - I can confirm all of these after testing on a real Android phone.

Couple of questions/potential issues for @Tchanders @Prtksxna :

  • I find when I scroll down the page partially before clicking edit, the drawer does not display properly

This is a regression - filed as T262662.

  • I find weird behaviour when I change the orientation when the drawer is visible

It looks as though the block message drawer didn't support the landscape orientation before. E.g. here's how it appeared with a long reason (it's not scrollable):

@Prtksxna @Niharika Do we want to add support for the horizontal orientation?

I think we can not care about it. It's low priority for me.

Change 626199 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Restore check for duration in BlockMessageDetails

https://gerrit.wikimedia.org/r/626199

Thanks everyone for raising those bugs.

I don't think there is anything more to do here.

Change 626199 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Restore check for duration in BlockMessageDetails

https://gerrit.wikimedia.org/r/626199

The bug with infinite expiries seems to be fixed.

Niharika closed this task as Resolved.Oct 2 2020, 7:24 PM