Page MenuHomePhabricator

Insert a horizontal divider between statements on UW
Closed, ResolvedPublic

Description

User story

As a Commons uploader, I want to be able to understand where one Statement begins and one ends, so that I can ensure I'm adding the right metadata in the right place.

We have this

Currently there is little visual differentiation between each statement, and the "Add statement" button is too close to the CC0 license message.

Current UW implementation.png (1×1 px, 334 KB)

We want this

There needs to be a 1px horizontal divider (C8CCD1) between each statement on UW to differentiate one statement from the next, and there needs to be more spacing in between the "Add statement" button and the CC0 message. Follow how statements & the "Add statement" button are already laid out on the File Page for guidance:

  • 16 px between statements
  • 80 px between the "Add statement" button and the category bar

Current FP implementation.png (523×845 px, 70 KB)

Examples:

  • A horizontal line dividing Depicts and the "Add statement" button:

UW Depicts and divider.png (1×1 px, 272 KB)

  • Horizontal line between Depicts and the flow for adding a new statement:

Divider adding statements.png (1×1 px, 311 KB)

  • Horizontal lines dividing statements, as well as the "Add statement" button:

Divider between statements.png (1×1 px, 333 KB)

Acceptance Criteria:

  • A 1 px horizontal line (C8CCD1) dividing statements, including between statements and the "Add statement" button
  • Spacing between statements themselves as well as between the "Add statement" button and the CC0 messaging, should be the same (or similar) as the spacing on FP

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
PDrouin-WMF renamed this task from [stub] Insert a horizontal divider between statements on UW to Insert a horizontal divider between statements on UW.Jul 22 2019, 3:56 PM
PDrouin-WMF updated the task description. (Show Details)

Change 525561 had a related patch set uploaded (by Cparle; owner: Cparle):
[mediawiki/extensions/UploadWizard@master] Adjust margin/border in metadata step

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

@PDrouin-WMF the big gap between the 'add statement' button and the category bar on the File page is due to the 'structured data' tab having a min-height. It goes away if you have lots of statements

I put a patch in for this, looks like. Let me know what you think

image.png (814×743 px, 115 KB)

Oh btw this ticket is locked so I can't move it out of the 'to do' column. Same with T228473

@Cparle -- Screenshot looks good -- I'm thinking we're going to need typographic adjustments in the statements refresh designs. It looks weird to have the learn more link the same size/weight as the property label. Taking note!

Not sure what to do about tickets being locked though :/

Ramsey-WMF moved this task from To Do to Doing on the Structured-Data-Team-Current-Work board.
Ramsey-WMF changed the subtype of this task from "Design" to "Task".
Ramsey-WMF moved this task from Untriaged to Next up on the Multimedia board.

Let me know if this is good to go, design-wise, and I will review & approve so we can merge.

Change 525561 merged by jenkins-bot:
[mediawiki/extensions/UploadWizard@master] Adjust margin/border in metadata step

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

I took a look at this and it works fine for me.

Moving to "verify on production", this is all live and working properly on Beta.