Clean up Expiry field on Special:Block on Mobile
Open, NormalPublic3 Story Points

Description

On a mobile device:

  1. The vertical spacing between the three "fields" should be increased so it looks like the Reason field.
  2. The toggle should be full-width (i.e. each button should occupy 50% of the width).

On a larger mobile device:

  1. The vertical spacing between the three "fields" should be increased so it looks like the Reason field.
  2. The toggle should be full-width (i.e. each button should occupy 50% of the width).
  3. The drop-down field should line up with the text field.

On a tablet device:

  1. The vertical spacing between the three "fields" should be increased so it looks like the Reason field.
  2. The drop-down should occupy the remaining horizontal space.
  3. The text field should fill the remaining horizontal space.
TBolliger added a subscriber: Prtksxna.

Assigning to @Prtksxna to evaluate and decide exactly how this should appear on Minerva

TBolliger moved this task from Untriaged to Backlog on the Anti-Harassment board.Oct 30 2018, 7:03 PM

I think the points that @dbarratt has written are appropriate and we can go ahead with them. Do you need me to mock these up (I am guessing no, but still asking before un-assigning myself)?

I think the points that @dbarratt has written are appropriate and we can go ahead with them. Do you need me to mock these up (I am guessing no, but still asking before un-assigning myself)?

I don't think that's necessary unless @TBolliger wants it.

Thanks for your feedback!

Prtksxna removed Prtksxna as the assignee of this task.Nov 12 2018, 10:19 AM
Tchanders moved this task from Ready to In progress on the Anti-Harassment (AHT Sprint 33) board.

Change 476048 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[mediawiki/core@master] Improve layout of ExpiryInputWidget on mobile

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

Here are some screenshots in the different skins with that patch:

VectorMonobookMinerva
Desktop
Tablet
Mobile

Tablet mode

I'm beginning to think we shouldn't have the tablet mode, and instead we should go straight to the mobile mode. Here's why:

  • In the proposed layout for tablet mode, it's tricky to get the dropdown to fill the remaining space next to the button group. At the moment, it's calculated based on the width of the button group, but this is different in different skins... In the example above, it works in Minerva, but breaks in the other skins. (NB for a similar reason, the widget is currently too narrow on desktop in Monobook.) We could improve on this by making it work for Vector and being a bit narrow in Minerva and Monobook, but it might be better to jump to the mobile layout, which works in all three.
  • The layout of this widget is complicated by the fact that the dropdown and text input are both contained within the "select with input" widget. Otherwise we could solve the problem with a table layout, for example.
  • I don't think we gain much from having the tablet mode. The dropdown is already wider than it needs to be in the proposed tablet layout - I don't think making it full-width is that different.

What do you think @Prtksxna?

Full-width buttons

I'm also not sure about the full-width buttons (see below). They don't feel very OOUI to me and I can't think of other examples in where we resize buttons like this - normally they fit to their content. @Volker_E and @Prtksxna what are your thoughts?

Definitely looks better, and I agree that we don't specifically need a tablet mode. I also agree that the stretched buttons look strange (and no longer look like buttons, really.)

Change 476048 merged by jenkins-bot:
[mediawiki/core@master] Improve layout of ExpiryInputWidget on mobile

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

Full-width buttons

I'm also not sure about the full-width buttons (see below). They don't feel very OOUI to me and I can't think of other examples in where we resize buttons like this - normally they fit to their content. @Volker_E and @Prtksxna what are your thoughts?

@Tchanders Not needed and not intended. We've got minimum size requirements baked into buttons for mobile. It is actually better to stay with smaller ones (except a few edge cases) as it's emphasizing more a button look. Thanks!