Page MenuHomePhabricator

Match the spacings and paddings with the design spec
Closed, ResolvedPublic

Description

CSS changes for both Captions & Depicts (we may need to hold off on this until tabs are implemented)



Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 21 2019, 10:22 PM
PDrouin-WMF updated the task description. (Show Details)Feb 27 2019, 4:33 PM
PDrouin-WMF renamed this task from [stub] Match the spacings and paddings with the design spec to Match the spacings and paddings with the design spec.Feb 27 2019, 10:50 PM
PDrouin-WMF updated the task description. (Show Details)
PDrouin-WMF moved this task from Doing 📝 to Done/Handed off 📮 on the SDC Design board.
egardner added subscribers: Cparle, egardner.EditedFeb 27 2019, 11:22 PM

I'm happy to take a pass at this, but some things may change based on the new tabbed layout of these panels that @Cparle is currently implementing.

Actually, I think I will set the status of this ticket as "blocked" until the tab UI ticket is completed.

Ha78na added a subscriber: Ha78na.EditedMar 5 2019, 4:24 PM

Maybe some of the concerns of the mobile design ticket T215818 could also be addressed as part of this work.

Ramsey-WMF moved this task from Untriaged to Next up on the Multimedia board.Mar 8 2019, 2:35 AM

If this is to be done after the tabs are done then it should be blocked by T215642, instead of blocking T215644 (which… it doesn't?).

Now that tabs are seemingly almost ready to go, we can unblock this, yeah?

Updated padding changes to the statement box (per a chat with Nirzar): you can attach the items to the search box since the search adds an object to the list.

See here:

Ha78na claimed this task.Mar 18 2019, 9:05 PM
Ha78na moved this task from To Do to Doing on the Structured-Data-Team-Current-Work board.

Change 497835 had a related patch set uploaded (by Ha78na; owner: Ha78na):
[mediawiki/extensions/WikibaseMediaInfo@master] [WIP] Styling adjustments on captions and statements tabs

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

Change 498215 had a related patch set uploaded (by Ha78na; owner: Ha78na):
[mediawiki/extensions/UploadWizard@master] Adjust caption remove button css

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

Change 498215 merged by jenkins-bot:
[mediawiki/extensions/UploadWizard@master] Adjust caption remove button css

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

Change 497835 abandoned by Ha78na:
Styling adjustments on captions and statements tabs

Reason:
Found out you can use flexbox with mediawiki which changes ... everything. Would have been nice to realize this earlier

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

Change 498261 had a related patch set uploaded (by Ha78na; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] WIP: Refactor panel styles to use LESS features, Flexbox

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

Ramsey-WMF triaged this task as High priority.Mar 25 2019, 4:35 PM

Another update from design.

Change 498261 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Refactor panel styles to use LESS features, Flexbox

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

Ok, here is the current visual state of the panels. @PDrouin-WMF I was working from the Invision link here as a visual reference:
https://wikimedia.invisionapp.com/share/ZMOI9QK9TKS#/screens/324827164

Captions Panel
Read mode:

Edit mode:

Depicts Panel
Read mode:

Edit mode:

If there are minor adjustments remaining to spacing, etc (seems like that has gone back and forth a bit), I think my preference would be to merge my current patch which at least resolves T216772, and then refine things in an a new smaller patch. The current patch also contains a lot of under-the-hood improvements in how CSS is organized that should make small adjustments easier to do down the road.

This is looking so much better. Sounds good to me to merge the current patch and any additional adjustments can be smaller patches. Thank you!

Change 498261 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Refactor panel styles to use LESS features, Flexbox

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

matthiasmullie reassigned this task from Ha78na to PDrouin-WMF.EditedApr 3 2019, 6:54 AM
matthiasmullie added a subscriber: matthiasmullie.

Moving to QA, but assigning to @PDrouin-WMF instead of Edward.

These changes are on beta (e.g. https://commons.wikimedia.beta.wmflabs.org/wiki/File:2019-01-26-zion-road.jpg)

Captions is looking much better with all the adjustments. Depicts is also looking great, and there are just two minor changes that need to be made:

  1. The baseline alignment is still slightly off - moving the P number down just a tad should fix that

  1. Depicts is capitalized. It should be lowercase.

2. is simply because that property has an uppercase 'D' on beta-wikidata - we don't capitalize or lowercase the labels. It's lowercase on prod wikidata, so that won't be an issue there.

2. is simply because that property has an uppercase 'D' on beta-wikidata - we don't capitalize or lowercase the labels. It's lowercase on prod wikidata, so that won't be an issue there.

I've changed the label on Beta Wikidata so the capitalisation is now fixed. :-)

Change 502389 had a related patch set uploaded (by Jforrester; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Minor CSS improvements to better match designs

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

Change 502389 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Minor CSS improvements to better match designs

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

@PDrouin-WMF do you think we could close/resolve this ticket now?

PDrouin-WMF closed this task as Resolved.Apr 17 2019, 2:30 PM

Yes, thank you!