Page MenuHomePhabricator
Create Task
Maniphest T239421

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

Assigned To
Lucas_Werkmeister_WMDE
Authored By
Charlie_WMDE
Nov 28 2019, 3:03 PM
Tags
Referenced Files
F31684274: Screenshot_20200316_105242.png
Mar 16 2020, 9:54 AM
F31684273: Screenshot_20200316_105302.png
Mar 16 2020, 9:54 AM
F31674162: Screenshot from 2020-03-10 13-08-00.png
Mar 10 2020, 12:12 PM
F31674164: Screenshot from 2020-03-10 13-08-55.png
Mar 10 2020, 12:12 PM
F31674168: Screenshot from 2020-03-10 13-06-48.png
Mar 10 2020, 12:12 PM
F31655248: Screenshot_2020-03-02 wiki1.png
Mar 2 2020, 12:49 PM
F31655015: mobile_specs.png
Mar 2 2020, 10:50 AM
F31613104: mobile_specs_0212.png
Feb 12 2020, 6:24 PM
View All 16 Files
Subscribers
Aklapper
Charlie_WMDE
darthmon_wmde
Lucas_Werkmeister_WMDE
Lydia_Pintscher
Michael
• Pablo-WMDE
View All 10 Subscribers

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)

mobile_specs.png (712×730 px, 94 KB)

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

SubjectRepoBranchLines +/-
bridge: add border-top for header on mobilemediawiki/extensions/Wikibasemaster+16 -10
bridge: make header larger on mobilemediawiki/extensions/Wikibasemaster+52 -14
bridge: fix list style on mobilemediawiki/extensions/Wikibasemaster+4 -1
bridge: add XL EventEmittingButton sizemediawiki/extensions/Wikibasemaster+30 -8
bridge: make input field larger on mobilemediawiki/extensions/Wikibasemaster+9 -1
bridge: make EventEmittingButton sizes responsivemediawiki/extensions/Wikibasemaster+23 -9
bridge: make bailout button size responsivemediawiki/extensions/Wikibasemaster+7 -7
bridge: remove side margins on mobilemediawiki/extensions/Wikibasemaster+30 -18
bridge: Increase bodyS font-sizes in mobile to bodyMmediawiki/extensions/Wikibasemaster+68 -54
bridge: fix EventEmittingButton sizesmediawiki/extensions/Wikibasemaster+73 -21
bridge: Centralize styling for <strong>, <b>, <em> and <i>mediawiki/extensions/Wikibasemaster+36 -47
bridge: Align ul stylingmediawiki/extensions/Wikibasemaster+33 -30
bridge: Adjust the size of the Header and close button xmediawiki/extensions/Wikibasemaster+21 -18
bridge: Adjust margins in bailout componentsmediawiki/extensions/Wikibasemaster+18 -12
bridge: add missing side margins to permission errorsmediawiki/extensions/Wikibasemaster+13 -8
bridge: Add body mixins and use them where appropriatemediawiki/extensions/Wikibasemaster+68 -52
bridge: define vertical margins in DataBridge-componentmediawiki/extensions/Wikibasemaster+33 -26
bridge: Adjust input field paddingmediawiki/extensions/Wikibasemaster+2 -2
bridge: Adjust spacing within componentsmediawiki/extensions/Wikibasemaster+4 -4
bridge: The default line-height everywhere is now 1.5mediawiki/extensions/Wikibasemaster+3 -2
bridge: Remove extra horizontal margins on mobilemediawiki/extensions/Wikibasemaster+26 -17
bridge: Align styling of header messagesmediawiki/extensions/Wikibasemaster+35 -23
bridge: Change our base color to $wmui-color-base10mediawiki/extensions/Wikibasemaster+13 -4
Show related patches Customize query in gerrit

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Michael added a comment.Feb 13 2020, 10:50 AM
In T239421#5877653, @Lucas_Werkmeister_WMDE wrote:

@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
gerritbot added a comment.Feb 14 2020, 1:27 PM

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

gerritbot added a project: Patch-For-Review.Feb 14 2020, 1:27 PM

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

gerritbot added a comment.Feb 14 2020, 1:27 PM

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

gerritbot added a comment.Feb 14 2020, 3:04 PM

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
gerritbot added a comment.Feb 17 2020, 11:43 AM

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

Michael moved this task from Doing to Peer Review on the Wikidata-Bridge-Sprint-14 board.Feb 17 2020, 11:46 AM
gerritbot added a comment.Feb 17 2020, 3:38 PM

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

gerritbot added a comment.Feb 17 2020, 4:31 PM

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

gerritbot added a comment.Feb 17 2020, 4:32 PM

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

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

gerritbot added a comment.Feb 17 2020, 4:32 PM

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

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

gerritbot added a comment.Feb 18 2020, 5:41 PM

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

gerritbot added a comment.Feb 19 2020, 11:58 AM

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

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

ReleaseTaggerBot edited projects, added MW-1.35-notes (1.35.0-wmf.21; 2020-02-25); removed MW-1.35-notes (1.35.0-wmf.20; 2020-02-18).Feb 19 2020, 12:00 PM
gerritbot added a comment.Feb 20 2020, 3:33 PM

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
Lucas_Werkmeister_WMDE moved this task from Peer Review to To do on the Wikidata-Bridge-Sprint-14 board.

Copy+paste for convenience:

In T239421#5885110, @Michael wrote:

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
Maintenance_bot removed a project: Patch-For-Review.Feb 20 2020, 4:11 PM
Lucas_Werkmeister_WMDE claimed this task.Feb 21 2020, 2:12 PM
Lucas_Werkmeister_WMDE moved this task from To do to Doing on the Wikidata-Bridge-Sprint-14 board.
gerritbot added a comment.Feb 21 2020, 2:13 PM

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

gerritbot added a project: Patch-For-Review.Feb 21 2020, 2:13 PM
Lucas_Werkmeister_WMDE moved this task from Doing to Peer Review on the Wikidata-Bridge-Sprint-14 board.Feb 21 2020, 2:14 PM
Lucas_Werkmeister_WMDE mentioned this in T244992: Incorporate new component library release in bridge.Feb 25 2020, 12:02 PM
gerritbot added a comment.Feb 25 2020, 6:19 PM

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

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

Lucas_Werkmeister_WMDE moved this task from Peer Review to To do on the Wikidata-Bridge-Sprint-14 board.Feb 25 2020, 6:23 PM
Maintenance_bot removed a project: Patch-For-Review.Feb 25 2020, 7:10 PM
• Pablo-WMDE added a project: Wikidata-Bridge-Sprint-15.Feb 26 2020, 9:42 AM
Lucas_Werkmeister_WMDE removed Lucas_Werkmeister_WMDE as the assignee of this task.Feb 27 2020, 10:32 AM
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.
gerritbot added a comment.Feb 27 2020, 4:29 PM

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

gerritbot added a project: Patch-For-Review.Feb 27 2020, 4:29 PM
Michael added a comment.Feb 27 2020, 4:43 PM

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
Lucas_Werkmeister_WMDE added a comment.Feb 28 2020, 2:11 PM
  • 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.

Lucas_Werkmeister_WMDE claimed this task.Feb 28 2020, 3:36 PM
gerritbot added a comment.Feb 28 2020, 3:52 PM

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

Lucas_Werkmeister_WMDE added a comment.Feb 28 2020, 4:03 PM

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?

Lucas_Werkmeister_WMDE updated the task description. (Show Details)Feb 28 2020, 4:04 PM
gerritbot added a comment.Feb 28 2020, 4:53 PM

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

Lucas_Werkmeister_WMDE moved this task from Doing to Peer Review on the Wikidata-Bridge-Sprint-15 board.Feb 28 2020, 4:54 PM
Lucas_Werkmeister_WMDE updated the task description. (Show Details)Feb 28 2020, 4:56 PM
gerritbot added a comment.Feb 28 2020, 5:22 PM

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

Lucas_Werkmeister_WMDE updated the task description. (Show Details)Feb 28 2020, 5:22 PM
gerritbot added a comment.Feb 28 2020, 5:26 PM

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

ReleaseTaggerBot edited projects, added MW-1.35-notes (1.35.0-wmf.22; 2020-03-03); removed MW-1.35-notes (1.35.0-wmf.21; 2020-02-25).Feb 28 2020, 6:00 PM
Lucas_Werkmeister_WMDE updated the task description. (Show Details)Feb 28 2020, 6:15 PM
gerritbot added a comment.Feb 28 2020, 7:16 PM

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
gerritbot added a comment.Mar 2 2020, 12:27 PM

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

gerritbot added a comment.Mar 2 2020, 12:27 PM

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

Lucas_Werkmeister_WMDE added a comment.Mar 2 2020, 12:49 PM

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:

Screenshot_2020-03-02 wiki1.png (450×500 px, 29 KB)

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

Lucas_Werkmeister_WMDE added a comment.Mar 2 2020, 3:37 PM

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 :)

Lucas_Werkmeister_WMDE added a comment.Mar 2 2020, 3:39 PM

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 updated the task description. (Show Details)Mar 2 2020, 5:00 PM
gerritbot added a comment.Mar 2 2020, 5:50 PM

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

gerritbot added a comment.Mar 2 2020, 6:42 PM

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

gerritbot added a comment.Mar 2 2020, 6:42 PM

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

gerritbot added a comment.Mar 2 2020, 7:53 PM

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

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

gerritbot added a comment.Mar 2 2020, 8:02 PM

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

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

Lucas_Werkmeister_WMDE updated the task description. (Show Details)Mar 3 2020, 10:27 AM
Charlie_WMDE added a comment.Mar 3 2020, 11:22 AM
In T239421#5932957, @Lucas_Werkmeister_WMDE wrote:

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.

Lucas_Werkmeister_WMDE mentioned this in T246765: Recalculate ResizingTextField height on window resize.Mar 4 2020, 10:59 AM
Lucas_Werkmeister_WMDE updated the task description. (Show Details)Mar 4 2020, 12:49 PM
gerritbot added a comment.Mar 4 2020, 1:37 PM

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

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

ReleaseTaggerBot edited projects, added MW-1.35-notes (1.35.0-wmf.24; 2020-03-17); removed MW-1.35-notes (1.35.0-wmf.22; 2020-03-03).Mar 4 2020, 2:01 PM
Lucas_Werkmeister_WMDE updated the task description. (Show Details)Mar 4 2020, 5:49 PM
Jdforrester-WMF edited projects, added MW-1.35-notes (1.35.0-wmf.23; 2020-03-10); removed MW-1.35-notes (1.35.0-wmf.24; 2020-03-17).Mar 5 2020, 3:01 PM
gerritbot added a comment.Mar 6 2020, 2:44 PM

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

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

Lucas_Werkmeister_WMDE updated the task description. (Show Details)Mar 6 2020, 2:59 PM
gerritbot added a comment.Mar 6 2020, 4:13 PM

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 updated the task description. (Show Details)Mar 6 2020, 4:15 PM
Lucas_Werkmeister_WMDE moved this task from Peer Review to Verification on the Wikidata-Bridge-Sprint-15 board.
Charlie_WMDE closed subtask T246765: Recalculate ResizingTextField height on window resize as Resolved.Mar 10 2020, 11:11 AM
Charlie_WMDE moved this task from Verification to To do on the Wikidata-Bridge-Sprint-15 board.Mar 10 2020, 11:22 AM

@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.

Lucas_Werkmeister_WMDE added a comment.Mar 10 2020, 12:12 PM

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.

Screenshot from 2020-03-10 13-06-48.png (171×949 px, 19 KB)

Screenshot from 2020-03-10 13-08-00.png (180×419 px, 11 KB)

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

Screenshot from 2020-03-10 13-08-55.png (248×815 px, 23 KB)

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

darthmon_wmde added a project: Wikidata-Bridge-Sprint-16.Mar 11 2020, 9:45 AM
gerritbot added a comment.Mar 11 2020, 12:19 PM

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

Lucas_Werkmeister_WMDE moved this task from To do to Peer Review on the Wikidata-Bridge-Sprint-16 board.Mar 11 2020, 3:56 PM
Lucas_Werkmeister_WMDE added a comment.Mar 11 2020, 4:45 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.)

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
Charlie_WMDE added a comment.Mar 12 2020, 3:46 PM
In T239421#5960735, @Lucas_Werkmeister_WMDE wrote:

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.

Lucas_Werkmeister_WMDE added a comment.Mar 12 2020, 4:02 PM

Great, thank you!

gerritbot added a comment.Mar 12 2020, 5:43 PM

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

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

ReleaseTaggerBot edited projects, added MW-1.35-notes (1.35.0-wmf.24; 2020-03-17); removed MW-1.35-notes (1.35.0-wmf.23; 2020-03-10).Mar 12 2020, 6:00 PM
Maintenance_bot removed a project: Patch-For-Review.Mar 12 2020, 6:11 PM
Lucas_Werkmeister_WMDE moved this task from Peer Review to Verification on the Wikidata-Bridge-Sprint-16 board.Mar 13 2020, 11:02 AM
Charlie_WMDE added a comment.Mar 16 2020, 9:54 AM

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

Screenshot_20200316_105242.png (155×242 px, 6 KB)

Screenshot_20200316_105302.png (113×540 px, 12 KB)

Michael added a comment.Mar 16 2020, 10:05 AM
In T239421#5971450, @Charlie_WMDE wrote:

@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.)

Lucas_Werkmeister_WMDE added a comment.Mar 16 2020, 11:24 AM

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/

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL