Page MenuHomePhabricator

Step 1: UX->Dev Sync (impact: medium)
Closed, ResolvedPublic5 Estimated Story Points

Description

We need to adapt the mobile screens to make them more user-friendly and OOUI compliant (right margins, spacing, font sizes…) :)

MOCKS
main screen (just for guidance, please find detailed specs in Figma – link below)

MAIN SPECS

Mobile font (headings): size: 16px; line-height: 20px; weight: 600
Mobile font (body): size: 16px; line-height: 24px

Header height: 50px (48+1+1)
"Publish changes" button size: 48px
Close button size: 48x48px (More specs in WiKit)
Input field: 40px
Horizontal and vertical margins: 16px

Find more specs and mobile screens in this Figma artboard.

Notes:

  • mobile means width is below the current break point

Current checklist (checked means merged, but not necessarily verified):

Details

ProjectBranchLines +/-Subject
mediawiki/extensions/Wikibasemaster+16 -10
mediawiki/extensions/Wikibasemaster+52 -14
mediawiki/extensions/Wikibasemaster+4 -1
mediawiki/extensions/Wikibasemaster+30 -8
mediawiki/extensions/Wikibasemaster+9 -1
mediawiki/extensions/Wikibasemaster+23 -9
mediawiki/extensions/Wikibasemaster+7 -7
mediawiki/extensions/Wikibasemaster+30 -18
mediawiki/extensions/Wikibasemaster+68 -54
mediawiki/extensions/Wikibasemaster+73 -21
mediawiki/extensions/Wikibasemaster+36 -47
mediawiki/extensions/Wikibasemaster+33 -30
mediawiki/extensions/Wikibasemaster+21 -18
mediawiki/extensions/Wikibasemaster+18 -12
mediawiki/extensions/Wikibasemaster+13 -8
mediawiki/extensions/Wikibasemaster+68 -52
mediawiki/extensions/Wikibasemaster+33 -26
mediawiki/extensions/Wikibasemaster+2 -2
mediawiki/extensions/Wikibasemaster+4 -4
mediawiki/extensions/Wikibasemaster+3 -2
mediawiki/extensions/Wikibasemaster+26 -17
mediawiki/extensions/Wikibasemaster+35 -23
mediawiki/extensions/Wikibasemaster+13 -4
Show related patches Customize query in gerrit

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@Michael Is this ready for Verification already or is more work still missing?

No, so far we only looked at the main Data Bridge interface. Still want to look at the Bailout and Permission Error Screen and at all those things in mobile.

Restricted Application added a project: User-Michael. · View Herald TranscriptFeb 13 2020, 10:50 AM

Change 571996 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: Add body mixins and use them where appropriate

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

Change 572010 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: Adjust margins in bailout components

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

Change 572032 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: add missing side margins to permission errors

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

Change 547198 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: Adjust the size of the Header and close button x

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

Michael added a comment.EditedFeb 14 2020, 3:47 PM

List of things left Todo from the last pairing session:

  • The button on the bailout screen should have a font-size of 14px, a total height of 32 px, with a margin-top of 4px and a margin-bottom of 5px
  • The color of the button icons should be #222 -> T245150
  • On the bailout screen the bullet points should be indented like the bullet points in the cascade protection list of pages --> https://gerrit.wikimedia.org/r/572651
  • The size of the x in the close button should be 20px by 20px and the total dimensions of the button should be 40px by 40px, thus the inner size of the header needs to be 40px, too -> https://gerrit.wikimedia.org/r/547198

Change 572651 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: Align ul styling

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

Change 572695 had a related patch set uploaded (by Tonina Zhelyazkova; owner: Tonina Zhelyazkova):
[mediawiki/extensions/Wikibase@master] brige: Centralize styling for <strong>, <bold>, <em> and <i>

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

Change 571996 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Add body mixins and use them where appropriate

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

Change 572010 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Adjust margins in bailout components

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

Change 572032 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: add missing side margins to permission errors

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

Change 547198 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Adjust the size of the Header and close button x

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

Change 572651 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Align ul styling

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

Change 572695 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Centralize styling for <strong>, <b>, <em> and <i>

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

Lucas_Werkmeister_WMDE removed Michael as the assignee of this task.EditedFeb 20 2020, 3:57 PM

Copy+paste for convenience:

List of things left Todo from the last pairing session:

  • The button on the bailout screen should have a font-size of 14px, a total height of 32 px, with a margin-top of 4px and a margin-bottom of 5px --> https://gerrit.wikimedia.org/r/573999
  • The color of the button icons should be #222 -> T245150
  • On the bailout screen the bullet points should be indented like the bullet points in the cascade protection list of pages --> https://gerrit.wikimedia.org/r/572651
  • The size of the x in the close button should be 20px by 20px and the total dimensions of the button should be 40px by 40px, thus the inner size of the header needs to be 40px, too -> https://gerrit.wikimedia.org/r/547198

Change 573999 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: fix EventEmittingButton sizes

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

Change 573999 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: fix EventEmittingButton sizes

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

Michael claimed this task.Feb 27 2020, 4:05 PM
Michael moved this task from To do to Doing on the Wikidata-Bridge-Sprint-15 board.

Change 575290 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: Increase bodyS font-sizes in mobile to bodyM

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

This should (hopefully) be the last batch of changes associated with this ticket:

  • the font-size of everything that is body-S, i.e. 14px, on desktop, should be body-M, i.e. 16px on mobile. (https://gerrit.wikimedia.org/r/575290)
  • the bailout and permission error views are missing bullet points in front of the list items, but only on mobile, not on desktop
  • the bailout and permission error views should not have an extra 24px side border on mobile
  • the button on the bailout view should be a size L on mobile
  • The header should have an inner height of 48px + 2x 1px border
  • The close button should be 48px x 48px on mobile, the icon is unchanged
  • The Publish button should be a size XL on mobile, with the same font-size and line-height but more padding: 12px 16px 12px 16px;
  • The string data value textfield should have a height of 40px (including border) and a font-size of 16px
  • the bailout and permission error views are missing bullet points in front of the list items, but only on mobile, not on desktop

This turns out to be because MinervaNeue includes its own reset.css, which sets list-style: none for every ul element (unprefixed). It later restores some styles, including i/em and b/strong; however, restoring the list-style is prefixed (with .content), for some reason. So we’ll need to set our own list-style – normalize.css doesn’t do it for us, because that’s only supposed to account for differences between browsers, not for CSS resets from other parts of the page.

Change 575558 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: fix list style on mobile

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

The Publish button should be a size XL on mobile, with the same font-size and line-height but more padding: 12px 16px 12px 16px;

That gives me a total size of 50px (border-top-width + padding-top + font-size * line-height + padding-bottom + border-bottom-width = 1px + 12px + 24px + 12px + 1px) – how does that fit within the 48px header?

Change 575567 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: make input field larger on mobile

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

Change 575574 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: remove side margins on mobile

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

Change 575290 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Increase bodyS font-sizes in mobile to bodyM

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

Change 575574 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: remove side margins on mobile

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

Sarai-WMDE updated the task description. (Show Details)Mar 2 2020, 10:50 AM

Change 576014 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: add responsive sizes for EventEmittingButton

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

Change 576015 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: make bailout button size responsive

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

I just noticed another thing: we currently have a discrepancy between the “publish” button, the “cancel”/“close” button, and the header height. The “publish” button’s height is relative to the browser font size (rem), but the “cancel”/“close” button’s height and the height of the full header are both absolute (px). At a browser font size of 32px, that looks like this:

Which one is correct? Should the header height grow with the browser font size (rem for everything), or should it remain constant?

The “publish” button’s height is relative to the browser font size (rem), but the “cancel”/“close” button’s height and the height of the full header are both absolute (px).

IRL discussion summary: We don’t yet have comprehensive specs for what should happen at different browser font sizes; try to do something that makes sense, without too much pressure :)

The string data value textfield should have a height of 40px (including border) and a font-size of 16px (https://gerrit.wikimedia.org/r/575567)

@Charlie_WMDE a question that came up during review: does the height have to change as soon as the viewport size changes (e. g. when you resize the window), or is it mainly important that the size is correct when opening the bridge at a certain viewport size? With the current implementation, the height is only updated when the input value is changed. (It depends on the content – if the value doesn’t fit on one line, the input grows.)

Change 576015 abandoned by Lucas Werkmeister (WMDE):
bridge: make bailout button size responsive

Reason:
no longer needed with new version of base change (M size is already responsive)

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

Change 576113 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: add XL EventEmittingButton size

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

Change 576114 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: make header larger on mobile

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

Change 576014 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: make EventEmittingButton sizes responsive

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

Change 575567 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: make input field larger on mobile

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

The string data value textfield should have a height of 40px (including border) and a font-size of 16px (https://gerrit.wikimedia.org/r/575567)

@Charlie_WMDE a question that came up during review: does the height have to change as soon as the viewport size changes (e. g. when you resize the window), or is it mainly important that the size is correct when opening the bridge at a certain viewport size? With the current implementation, the height is only updated when the input value is changed. (It depends on the content – if the value doesn’t fit on one line, the input grows.)

@Lucas_Werkmeister_WMDE to me, part of a responsive modal would be that the size changes when the viewport changes.

Change 576113 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: add XL EventEmittingButton size

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

Change 575558 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: fix list style on mobile

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

Change 576114 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: make header larger on mobile

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

@Lucas_Werkmeister_WMDE hey, i just checked the ticket and everything looks fine except for the header height. it shows up as 49px for me because there is only a 1px border at the bottom but nothing on the top.

Oh, I see what happened… on Desktop, there is a surrounding border by the OOUI window, so we make our own header 41px high without a border.

On mobile, the OOUI window expands to fill the whole screen, and no longer has a border.

So should we now add a border-top of our own on mobile? (But still no border on the other sides?)

Change 578928 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/Wikibase@master] bridge: add border-top for header on mobile

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

So should we now add a border-top of our own on mobile? (But still no border on the other sides?)

(The above change assumes that the answer to these questions is “yes”, though I’d appreciate a confirmation from UX to be sure.)

Michael renamed this task from Step 1: mobile fixes (impact: medium) to Step 1: UX->Dev Sync (impact: medium).Mar 12 2020, 12:15 PM

So should we now add a border-top of our own on mobile? (But still no border on the other sides?)

(The above change assumes that the answer to these questions is “yes”, though I’d appreciate a confirmation from UX to be sure.)

@Lucas_Werkmeister_WMDE yes, adding a 1px border on top of the header, so it measures 50px altogether is correct.

Change 578928 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: add border-top for header on mobile

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

@Lucas_Werkmeister_WMDE Heyho, for me the top border is still missing. Am I looking in the wrong place?

@Lucas_Werkmeister_WMDE Heyho, for me the top border is still missing. Am I looking in the wrong place?

Yes, this was only an issue on mobile. On desktop, the top border is provided by the surrounding element and is therefore not part of the header element itself. But if you look at the header element on mobile, then you'll see the top border there.

(Though honestly, I have yet to understand what purpose it serves there.)

See also the screenshots in T239421#5955854 (it’s more obvious at 300% zoom).

Charlie_WMDE closed this task as Resolved.Mar 16 2020, 11:38 AM
Charlie_WMDE moved this task from Verification to Done on the Wikidata-Bridge-Sprint-16 board.

@was looking at desktop. sorry. mobile looks good \o/