Page MenuHomePhabricator

CX2: Adjust the design for link cards
Closed, ResolvedPublic

Description

Currently link cards are represented inconsistently depending on whether they are a link that was created as part of the adaptation process or not:

Adapted linkLink added by the user

Proposed solution

To make the link representations more consistent, the following is proposed:

  • Label the card as "Link", regardless of whether the link was created by the user or adapted.
  • Show a band at the bottom with the equivalent link in the source language if it exists (regardless of such link being on the source article or not).

This is also consistent with related cards such as:

  • T191007: preview a page for the selected text.
  • T193233: managing unadapted and red links.

Layout and style details

The mockup below provides more details about the layout and styling:

Event Timeline

santhosh updated the task description. (Show Details)Jun 20 2017, 4:46 AM
santhosh added a subscriber: santhosh.
Amire80 moved this task from Apr.–June 2017 to CX2 on the ContentTranslation board.
Pginer-WMF renamed this task from Specify design details for link cards to Adjust the design for link cards.Jul 5 2017, 10:10 AM
Pginer-WMF removed Pginer-WMF as the assignee of this task.
Pginer-WMF updated the task description. (Show Details)
Pginer-WMF updated the task description. (Show Details)Feb 19 2018, 4:18 PM
Pginer-WMF renamed this task from Adjust the design for link cards to Adjust the design for page preview cards.Mar 29 2018, 11:38 AM
Pginer-WMF updated the task description. (Show Details)
Pginer-WMF updated the task description. (Show Details)
Pginer-WMF updated the task description. (Show Details)Apr 19 2018, 10:34 AM
Pginer-WMF renamed this task from Adjust the design for page preview cards to CX2: Adjust the design for link cards.Apr 27 2018, 11:18 AM
Pginer-WMF updated the task description. (Show Details)
santhosh claimed this task.May 2 2018, 12:16 PM
santhosh moved this task from Priority backlog to In Progress on the Language-2018-Apr-June board.

Change 430357 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] WIP: CX2: Adjust the design for link cards

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

There is a known issue when double clicking user created link: two cards are shown

Change 430357 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] CX2: Adjust the design for link cards - Part 1

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

Before closing this task T168290#4204530 should either be fixed or filed as a separate task.

Etonkovidova closed this task as Resolved.May 18 2018, 6:31 PM
Etonkovidova added a subscriber: Etonkovidova.

The layout specs have been implemented. Below are the examples
(a) Existing link with source wiki article found:


"NASA" article does not have wikidata description

(b) "Add link" when the source article link is not found - there is some problems in logic when mapping target links to source wiki links that will be addressed in a separate ticket T191007: CX2: Preview existing pages for the selected text

(c) missing link card

The mockup below provides more details about the layout and styling:

I assume the intention here was to be descriptive, not to re-implement the VE link inspector, as this is essentially the same layout, and there's no need for duplication...

Change 448109 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/ContentTranslation@master] De-duplicate link inspector code

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

I assume the intention here was to be descriptive, not to re-implement the VE link inspector, as this is essentially the same layout, and there's no need for duplication...

You are right. I was trying to capture the general anatomy of these cards based on the VE inspectors (I found no visual specification of such inspectors so I measured things in the browser). Note that in addition to the standard UI there are some customizations such as the access to the source version of the linked article at the bottom of the card, and the special card for marking an unadapted link as a red link. If a refactoring is proposed, a before/after compared screenshots would be very helpful.

Petar.petkovic reopened this task as Open.Jul 27 2018, 12:20 PM
Petar.petkovic moved this task from Done to In Review on the Language-2018-Apr-June board.
Petar.petkovic moved this task from Backlog to In Review on the Language-2018-July-September board.

You are right. I was trying to capture the general anatomy of these cards based on the VE inspectors (I found no visual specification of such inspectors so I measured things in the browser).

Cool, my above patch removes some of the CSS duplication. I noticed also you changed the clear circle icon for 'trash' icon (and removed the red). Was this deliberate? I think we were discussing something like that on another ticket, but it should probably be handled upstream for consistency.

Note that in addition to the standard UI there are some customizations such as the access to the source version of the linked article at the bottom of the card, and the special card for marking an unadapted link as a red link. If a refactoring is proposed, a before/after compared screenshots would be very helpful.

The bottom bar is similar to the 'label' bar you designed for the upstream inspector. Is it deliberate that that bar is not present in CX (I think we should keep it)? If not we could share those styles too.

BeforeAfterVE
BeforeAfterVE

Thanks @Esanders. The change looks good.

@Volker_E may be interested on exploring whether to use Base30 (#72777d) or Base20 (#54595d) for secondary grey text. But in any case, having the code unified will be useful to propagate any change in that regard if needed.

Change 448109 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] De-duplicate link inspector code

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

Petar.petkovic moved this task from In Review to QA on the Language-2018-July-September board.
Petar.petkovic removed a subscriber: gerritbot.

@Pginer-WMF Base30 is sufficient in VE's case. It's non-necessary text to understand the link. Where does the extended paragraph originate from? In the CX link cards it needs Base20 to be conforming to level AA with Base90 background.

Etonkovidova closed this task as Resolved.Aug 17 2018, 10:31 PM

Checked in cx2 for CSS refactoring - the link cars looks as per @Esanders's comment screenshot: