Page MenuHomePhabricator

Step 1: mobile fixes (impact: medium)
Open, MediumPublic5 Estimate 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

Details

Related Gerrit Patches:
mediawiki/extensions/Wikibase : masterbridge: Align ul styling
mediawiki/extensions/Wikibase : masterbridge: Centralize styling for <strong>, <b>, <em> and <i>
mediawiki/extensions/Wikibase : masterbridge: Adjust the size of the Header and close button x
mediawiki/extensions/Wikibase : masterbridge: Adjust margins in bailout components
mediawiki/extensions/Wikibase : masterbridge: add missing side margins to permission errors
mediawiki/extensions/Wikibase : masterbridge: Add body mixins and use them where appropriate
mediawiki/extensions/Wikibase : masterbridge: define vertical margins in DataBridge-component
mediawiki/extensions/Wikibase : masterbridge: Adjust input field padding
mediawiki/extensions/Wikibase : masterbridge: Adjust spacing within components
mediawiki/extensions/Wikibase : masterbridge: The default line-height everywhere is now 1.5
mediawiki/extensions/Wikibase : masterbridge: Remove extra horizontal margins on mobile
mediawiki/extensions/Wikibase : masterbridge: Align styling of header messages
mediawiki/extensions/Wikibase : masterbridge: Change our base color to $wmui-color-base10

Event Timeline

Restricted Application added a project: Wikidata. · View Herald TranscriptNov 28 2019, 3:03 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Charlie_WMDE updated the task description. (Show Details)Nov 28 2019, 3:28 PM
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptNov 28 2019, 3:28 PM
Charlie_WMDE removed Sarai-WMDE as the assignee of this task.Dec 3 2019, 10:08 AM
Charlie_WMDE updated the task description. (Show Details)
Charlie_WMDE moved this task from Needs work to Ready to estimate on the Wikidata-Bridge board.
Charlie_WMDE added a subscriber: Sarai-WMDE.
Charlie_WMDE updated the task description. (Show Details)Dec 3 2019, 2:21 PM
Charlie_WMDE updated the task description. (Show Details)Dec 3 2019, 2:54 PM
Charlie_WMDE updated the task description. (Show Details)Dec 3 2019, 2:56 PM
Charlie_WMDE renamed this task from mobile mock updates to mobile mock fixes.Dec 3 2019, 2:59 PM
Sarai-WMDE updated the task description. (Show Details)Dec 3 2019, 4:24 PM
Sarai-WMDE moved this task from Needs work to Ready to estimate on the Wikidata-Bridge board.
Lydia_Pintscher renamed this task from mobile mock fixes to Step 1: mobile mock fixes.Dec 5 2019, 1:08 PM
Sarai-WMDE renamed this task from Step 1: mobile mock fixes to Step 1: mobile fixes.Dec 5 2019, 3:52 PM
Sarai-WMDE updated the task description. (Show Details)

The nature of this ticket is, counter to what was agreed when this product was kicked-off, the archetype of the opposite of "responsive development".
Consequently I assume that this is a one-off compensation for oversight in specification so far, but that we can expect stories to contain specification for the new components at all planned viewports from now on.

I'd like us, with this newly found knowledge, to give upcoming stories a hard look during story time, possibly even looking at the already estimated ones again.

/cc @Lydia_Pintscher @darthmon_wmde @WMDE-leszek
FYI @Jakob_WMDE

Lydia_Pintscher triaged this task as Medium priority.Dec 8 2019, 11:48 AM
Lydia_Pintscher renamed this task from Step 1: mobile fixes to Step 1: mobile fixes (impact: medium).Dec 8 2019, 1:20 PM
Sarai-WMDE updated the task description. (Show Details)Dec 20 2019, 3:55 PM

We've added a subtast that we should discuss at the next opportunity

Charlie_WMDE updated the task description. (Show Details)Jan 14 2020, 1:50 PM
Lydia_Pintscher set the point value for this task to 5.Tue, Jan 28, 11:33 AM
Sarai-WMDE updated the task description. (Show Details)Tue, Jan 28, 4:32 PM

Change 571500 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: Change our base color to $wmui-color-base10

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

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

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

Change 571502 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: Remove extra horizontal margins on mobile

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

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

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

Change 571504 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: The default line-height everywhere is now 1.5

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

Change 571505 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: Adjust input field padding

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

Change 571514 had a related patch set uploaded (by Michael Große; owner: Michael Große):
[mediawiki/extensions/Wikibase@master] bridge: define vertical margins in DataBridge-component

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

Change 571500 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Change our base color to $wmui-color-base10

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

Change 571501 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Align styling of header messages

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

Change 571502 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Remove extra horizontal margins on mobile

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

Change 571503 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Adjust spacing within components

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

Change 571504 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: The default line-height everywhere is now 1.5

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

Change 571505 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: Adjust input field padding

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

Change 571514 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] bridge: define vertical margins in DataBridge-component

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

@Charlie_WMDE My suggested views to look at for this task:

  • Bailout views
  • Permission Error view
  • Mobile

Michael, sarai, charlie agreed we go by:

for mobile and desktop

  • bridge UI
  • bail out path
  • permission error view

in each we need to look at:

  • font styles
  • components (buttons, header, input field, component groups)
  • spacing

[radio buttons are in a different story]

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

Sarai-WMDE updated the task description. (Show Details)Wed, Feb 12, 6:18 PM
Sarai-WMDE updated the task description. (Show Details)Wed, Feb 12, 6:24 PM
Michael claimed this task.Thu, Feb 13, 10:49 AM
Michael moved this task from To do to Doing on the Wikidata-Bridge-Sprint-14 board.

@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 TranscriptThu, Feb 13, 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.EditedFri, Feb 14, 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