Page MenuHomePhabricator

The panels should use column width (60%) instead of spanning across the entire screen
Closed, ResolvedPublic

Description

This includes both file captions and all statements (including Depicts).

Acceptance criteria

https://commons.wikimedia.beta.wmflabs.org/w/index.php?title=File:Photo_on_08-02-2019_at_16.35.jpg

  • Captions panel (in "file information" tab) should take up no more than 60% of screen
  • Depicts panel (in "structured data" tab) should take up no more than 60% of screen

Related Objects

Mentioned In
rEWBI0ddde96cafa0: Refactor panel styles to use LESS features, Flexbox
rEWBIb38df740aa6d: Refactor panel styles to use LESS features, Flexbox
rEWBIcaa5505a9966: Refactor panel styles to use LESS features, Flexbox
rEWBId7106b1c1fc7: Refactor panel styles to use LESS features, Flexbox
rEWBI27997bde806e: Refactor panel styles to use LESS features, Flexbox
T216773: Match the spacings and paddings with the design spec
rEWBI582d8244d991: Refactor panel styles to use LESS features, Flexbox
rEWBI13b5aef8b626: Refactor panel styles to use LESS features, Flexbox
rEWBI705feb1329ed: Refactor panel styles to use LESS features, Flexbox
rEWBI8b431836a60b: Refactor panel styles to use LESS features, Flexbox
rEWBI26874fdcdd46: Refactor panel styles to use LESS features, Flexbox
rEWBIaf188eb69587: Refactor panel styles to use LESS features, Flexbox
rEWBIf0c4d650fbcc: Refactor panel styles to use LESS features, Flexbox
T215818: Improvements to the Captions mobile experience
rEWBI1897d0d4857e: Refactor panel styles to use LESS features, Flexbox
rEWBI84342eedc20d: Refactor panel styles to use LESS features, Flexbox
rEWBI2fddf8ae415a: Refactor panel styles to use LESS features, Flexbox
rEWBI307cea8691ea: WIP: Refactor panel styles to use LESS features, Flexbox
rEWBId161237f64a8: WIP: Refactor panel styles to use LESS features, Flexbox
rEWBI0322e433412f: WIP: Refactor panel styles to use LESS features, Flexbox
rEWBIe68135597d50: WIP: Refactor panel styles to use LESS features, Flexbox
rEWBI9df3ed194273: WIP: Refactor panel styles to use LESS features, Flexbox
rEWBI8ab200feeeb7: WIP: Refactor panel styles to use LESS features, Flexbox
rEWBI32af0c6afc77: WIP: Refactor panel styles to use LESS features, Flexbox
Mentioned Here
T216773: Match the spacings and paddings with the design spec

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 21 2019, 10:20 PM
PDrouin-WMF updated the task description. (Show Details)Feb 27 2019, 2:35 PM
PDrouin-WMF renamed this task from [stub] The boxes should use column width, 60% and not span across the entire screen to [stub] The panels should use column width (60%) and not span across the entire screen.Feb 27 2019, 6:07 PM
PDrouin-WMF updated the task description. (Show Details)Feb 27 2019, 6:43 PM
PDrouin-WMF renamed this task from [stub] The panels should use column width (60%) and not span across the entire screen to The panels should use column width (60%) instead of spanning across the entire screen.Feb 27 2019, 8:47 PM
PDrouin-WMF added a project: SDC Engineering.
PDrouin-WMF updated the task description. (Show Details)

This ticket may be out of scope for depicts crawling, but having a discussion around it could still be useful.

Right now the default desktop skin, Vector, fills up the entire width of the browser window with content – regardless of viewport size. Since the Depicts and Captions panels also take up the full-width of their parent element, that could lead to awkwardly-wide widgets, like this:

Unfortunately, this problem is not limited to just our UI elements in MediaInfo – it effects everything, article body text, other special pages, etc.

I think it is worth considering putting some kind of max-width in place, but ideally this would not be done piecemeal (and inconsistently) by every extension.

The tabbed layout that Cormac is currently working on may mitigate some of this, and it might also be worth checking in with the Readers Web team in case there are any recommended max-widths, breakpoints, etc. that they are using elsewhere that we could implement here.

If there are some quick fixes that can be applied in our code that won't create more inconsistency down the road, I am happy to try to implement them.

Pinging @Nirzar in this discussion for FYI

Let's not worry about the other elements stretching, vector not having a column grid is stopping us from implementing these changes. the task around that is pending since 2013 and it feels like a separate issue.

These are new boxes we are introducing. as far as the technical solution which is just adding width 60% to these boxes is feasible, we should do it.

either by adding that property to

wbmi-entityview-statementsGroup

or adding a container to

wbmi-entityview

also just FYI we will need to tweak the caption box fixed width mentioned when we reduce the box width
otherwise it breaks

@Nirzar do you know if there are any breakpoints / browser width values that are already in use in other places where it would be sensible for a 60% width rule to kick in at?

For example, even up to a viewport width of 1000 or 1200px, I think a full-width panel is fine:

But at extreme widths, things start to look wonky (here is the same screen at ~2550px wide):

My instinct would probably be to set a breakpoint that would take effect at around 1280px or so, or to just give the panels a max-width of 900-1000 pixels.

My final question is – will the inconsistency of widths between the different panel-style elements on the file page be more jarring than what we have currently (Summary and Licensing boxes would stay full-width even if panels get shortened):

Nirzar added a comment.EditedFeb 28 2019, 10:08 PM

based on our guideline

we use

  • 320, 414 smartphone+ portrait,
  • 568 for landscape smartphones
  • 768 for tablets, 992 tablet+/netbooks,
  • 1200 wide desktop

so I feel like we can do width: 60% / max-width:1200px

also thank you bringing up inconsistency!
here's my thought: we are adding new OOUI objects into old vector skin with old elements like the templates and copyright stuff. I think we should set the precedence for better layouts while we are adding new items. we can then go cleanup old stuff in future but when we do, we will just have to make the old stuff follow new guidelines and not the other way around.

does that help?

Thanks, good to know. As long as folks are okay with gradually adding more responsive features (even if it is not 100% consistent everywhere), these are changes that can be made now. @PDrouin-WMF I may have a few other questions for you tomorrow based on future UI elements that will be added here as more features get introduced. In the Invision mockups there is what looks like an explanatory text box off to the right of the structured data panels. I just want to make sure I don't end up making anything more difficult in the future.

Ramsey-WMF moved this task from Untriaged to Desired epics on the Multimedia board.Mar 8 2019, 2:44 AM
Ha78na moved this task from Desired epics to Next up on the Multimedia board.Mar 8 2019, 5:28 PM
Ramsey-WMF triaged this task as Normal priority.

Now that tabs are in place, this should be unblocked.

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

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

@PDrouin-WMF I'm working on this ticket as part of a patch to hopefully make panel styles simpler and more consistent generally. It turns out we can use Flexbox now, which has the potential to greatly simplify styling tasks.

Here is a screenshot of the current captions panel at a max-width of 768px, in both read and edit states.

Read mode:

Edit mode:

Ha78na added a subscriber: Ha78na.Mar 22 2019, 2:27 PM

@PDrouin-WMF I'm going to now combine my work onto this patchset as well - I will upload new images later today that also reflect the changes I made together with Eric's.

Updates screenshots including work from T216773 (and in person design-dev pairing). @PDrouin-WMF

Captions -read mode:

Captions -edit mode:

Depicts -edit mode

@Ha78na a few more CSS adjustments need to be made regarding spacing/height/alignment:

Thank you!

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

Here is the current visual state of the panels:

Captions

Depicts

The panels are responsive at smaller sizes (as are their contents, because we are now using Flexbox for layout here). A max-width of 768 pixels has been specified. This means that users on tablet devices will generally see the panels take up all available width, but on screens that start to get larger the panel will limit itself.

As I just commented over at T216773, I understand that there may be some more adjustments that need to be made in terms of spacing, alignment, etc. Assuming everyone is happy with the new width and overall layout, I'd prefer to merge the current patch now and close this ticket, and then refine the design in smaller patches going forward.

This is looking much improved, really appreciate all the work you (@egardner & @Ha78na) have been doing!

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 egardner to Edtadros.
matthiasmullie moved this task from Code Review to Needs QA on the Multimedia-Current-Work board.

@PDrouin-WMF Can we considered this finished and close/resolve this ticket?

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

Yes, thanks!