Page MenuHomePhabricator

UploadWizard - Describe step UI issues
Open, Needs TriagePublic

Description

(2) spacing around "Additional information"
@sneha's comment

the spacing around the "Additional information" label's description needs to be fixed

In the current spacing it seems like there is equal amount of spacing above and below the description line "Add the following to make your work more discoverable. Be as specific as you can."
This line should be closer to the title "Additional information" and more space under it.

current spacing.png (672×1 px, 97 KB)

Correct spacing

spacing.png (698×1 px, 167 KB)

(3) additional spacing corrections from @Sneha
Cosmetic issues.png (926×711 px, 106 KB)


DONE

Split from comments - T361050
DONE ✅ - checked in commons wmf.7 - looks as designed. (1) In Category (optional) and Location (optional) labels the font for optional looks larger than in the figma design

figma designcommons beta
Screen Shot 2024-05-21 at 5.47.47 PM.png (814×1 px, 130 KB)
Screen Shot 2024-05-21 at 5.48.19 PM.png (810×1 px, 186 KB)

@sneha's comment:

"optional" text size should be the same as the title text size. If it is already the same size then its okay but looks slightly bigger as pointed our above. Also it looks slightly darker than it is in Figma.

(4) Location
DONE ✅ - checked in commons beta- Should the map icon be displayed in one row, aligned with the coordinates fields or to be placed on a separate row?

commons wmf.7commons beta
Screen Shot 2024-05-30 at 9.35.23 AM.png (858×1 px, 131 KB)
Screen Shot 2024-06-06 at 2.45.21 PM.png (534×1 px, 111 KB)

(works as expected) - un-collapsed map is presented as a popup; figma design displays a map differently:

figma designcommons wmf.7
Screen Shot 2024-05-30 at 10.04.57 AM.png (1×1 px, 303 KB)
Screen Shot 2024-05-30 at 9.54.44 AM.png (948×2 px, 263 KB)

DONE ✅ - checked in commons beta (5) non-existing Category warning has a different icon and styling (refer to figma design for category warning)

figma designcommons wmf.7commons beta
Screen Shot 2024-05-30 at 9.51.46 AM.png (604×1 px, 116 KB)
Screen Shot 2024-05-30 at 9.41.32 AM.png (578×1 px, 129 KB)
Screen Shot 2024-06-06 at 2.45.21 PM.png (534×1 px, 111 KB)

Event Timeline

Change #1037727 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/UploadWizard@master] Remove explicit font-size for fieldset titles

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

For #1 - I think the implementation is correct - at least AFAICT.
The color looks to be correct: Figma has it as #54595D (which was later once more confirmed in Slack), and that's also what it is on beta.
The font size for both the title and the "optional" label and up being 14px, making them equally large. It does indeed look a bit off in your screenshot, though. It looks like they have different units (title = 14px vs optional = vector's default calc(1em * 0.875)), so that might cause differences depending on skin/browser settings. On Minerva, in my browser, the title is actually smaller then the "optional", and the rest of the text.
I'll remove the explicit 14px for the title, so they get the same defaults.

Screenshot 2024-05-31 at 10.07.17.png (627×1 px, 187 KB)

Fix: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/UploadWizard/+/1037727

FYI:
Fix for #4 is here: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/UploadWizard/+/1034844
Fix for #5 is here: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/UploadWizard/+/1037482

I'd suggest, if we can, to hold off on #2/#3 a little longer until most of the in-flight tickets have been merged; until the rest of the features are mostly complete, fixing those styles are a moving target.

Change #1037727 merged by jenkins-bot:

[mediawiki/extensions/UploadWizard@master] Remove explicit font-size for fieldset titles

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