Page MenuHomePhabricator

Apply design improvements to Special:NewLexemeAlpha page
Closed, ResolvedPublic3 Estimated Story Points

Description

Context

A design review of the current implementation of the new Special:NewLexemeAlpha page resulted in the detection of some small deviations from the original specifications. These should be corrected.

All needed improvements are collected below. Anyone carrying out the changes should feel free to create further subtasks if/as needed.

List of improvements

Correct spacing around the intro paragraph (wbl-snl-search-existing)

  • The spacing between the article toolbar and the initial paragraph and should be 16px (1rem). The current space between these elements is of around 30px.
  • The spacing between the initial paragraph and the main content div should be 24px (1.5rem) instead of the default 1em. (Changed to 16px/1rem for consistency during discussion)

Screenshot 2022-07-08 at 13.07.26.png (610×1 px, 161 KB)

Correct font-size of terms of use paragraph (wbl-snl-copyright)

  • The compounding effect is causing the font size of the terms of use paragraph to be too small (only 11.38px). To ensure a legibile baseline, we should apply an override in context to make sure that this text has a size of a minimum of 13px.

Screenshot 2022-07-08 at 13.28.42.png (714×922 px, 104 KB)

Correct spacing within the infopanel (wbl-snl-infopanel wbl-snl-infopanel--notice)

  • All elements within the infopanel should have a vertical spacing of 16px (1rem) between them (including default paragraph margins, which should probably be removed to facilitate the correct application of spacing –see next point).

Screenshot 2022-07-08 at 13.19.03.png (734×1 px, 127 KB)

  • The last paragraph inside the infopanel shouldn't display a margin-block-end, so the minimum spacing between said paragraph and the infopanel's border is only of 24px (1.5rem).

Screenshot 2022-07-08 at 13.20.34.png (724×1 px, 121 KB)

Align elements in the infopanel header

  • The icon and text included in the infopanel header are not optically center-aligned on the horizontal axis.

Screenshot 2022-07-08 at 16.27.13.png (132×338 px, 14 KB)

Event Timeline

Sarai-WMDE renamed this task from Design improvements to Approve design improvements to Special:NewLexemeAlpha page.Jul 14 2022, 1:57 PM
Sarai-WMDE renamed this task from Approve design improvements to Special:NewLexemeAlpha page to Apply design improvements to Special:NewLexemeAlpha page.
Sarai-WMDE added a project: Wikidata.
karapayneWMDE set the point value for this task to 3.Jul 26 2022, 9:26 AM

Copyright message font size and search existing/warning message margins:
https://github.com/wmde/new-lexeme-special-page/pull/263

Change 822621 had a related patch set uploaded (by Noa wmde; author: Noa wmde):

[mediawiki/extensions/WikibaseLexeme@master] Lexidata: adjust styling

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

@Sarai-WMDE @noarave I am reviewing this task and the measures both before and after applying the patch are different in Chrome and Firefox. I am assuming you made both the original test and the fix using Chrome? Do we want to have different numbers in different browsers? I know this is due to the relative units, but is the base different for both browsers?

Examples: (in the branch submitted by Noa, tho these differences exist also in the current version of master)

margin-bottom of text "You can check..." - Firefox: 18px, Chrome: 16px
wbl-snl-copyright paragraph computed font size - Firefox: 14.625px, Chrome 13px


I don't understand this requirement:

The last paragraph inside the infopanel shouldn't display a margin-block-end, so the minimum spacing between said paragraph and the infopanel's border is only of 24px (1.5rem).

because the distance between the paragraph and the lower border of the gray infopanel doesn't seem to be determined by any of its contents, its height is matching the height of the white infopanel.

To summarize: Noa's fix is solving the issues for Chrome, but the inconsistency between measures in both browsers remains.

@guergana.tzatchkova to test this it's best to make sure your default font-size is set to 16px (in Firefox it's under Settings -> General, in the Fonts section).

Change 822621 merged by jenkins-bot:

[mediawiki/extensions/WikibaseLexeme@master] Lexidata: adjust styling

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

Just a couple of comments after reviewing the design touch ups in Beta:

  1. Regarding...

All elements within the infopanel should have a vertical spacing of 16px (1rem) between them

Unfortunately, the space around the lemma card is still 1em (14px) instead of 1rem (16px). This should be corrected.

Screenshot 2022-08-23 at 10.11.36.png (1×2 px, 691 KB)

  1. The new 1rem margin is being applied to the elements within the lemma card via the selector .wbl-snl-infopanel__content :first-child. This is causing the card to display incorrect spacing. The extra internal margin should be removed.

    Screenshot 2022-08-23 at 10.26.42.png (764×2 px, 326 KB)
  1. The margin around the warning message should also be corrected. It's currently 0.5em (7px) while it, again, should be 1rem. Looks like that would be the default spacing if a different margin wouldn't be imposed to the component. (The message wasn't there when I initially checked the NewLexemeAlpha page, so let me know if I should create a separate ticket.)

    Screenshot 2022-08-23 at 10.18.11.png (628×2 px, 316 KB)

All the rest looks awesome!! Thanks @noarave and @guergana.tzatchkova.

Change 825732 had a related patch set uploaded (by Noa wmde; author: Noa wmde):

[mediawiki/extensions/WikibaseLexeme@master] Lexidata: add class names and margins to infopanel elements

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

Change 825732 merged by jenkins-bot:

[mediawiki/extensions/WikibaseLexeme@master] Lexidata: add class names and margins to infopanel elements

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

The page is looking amazing in Beta! Thanks for all the changes, @noarave.

I just noticed a side effect that requires a small last fix:

  • The vertical spacing between the "About Lexemes" title and the first paragraph should remain 1rem (16px):

Screenshot 2022-08-24 at 12.20.45.png (224×736 px, 35 KB)

@Sarai-WMDE I don't know why, but vector styles seem to be overruling ours. Will look into fixing it

Change 826807 had a related patch set uploaded (by Noa wmde; author: Noa wmde):

[mediawiki/extensions/WikibaseLexeme@master] Lexidata: media query styles are overriding margins on infopanel

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

Change 826807 merged by jenkins-bot:

[mediawiki/extensions/WikibaseLexeme@master] Lexidata: media query styles are overriding margins on infopanel

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

✅ All fixes done and looking great.
Checked using Chrome 104, Safari 15.6 and Firefox 104 on macOS Monterey.