Page MenuHomePhabricator

Adjust termbox break points to minerva skin breakpoints
Closed, ResolvedPublic3 Estimated Story Points

Description

Motivation
As a user I would like to have a pleasant experience of the termbox throughtout different devices and screen sizes. I would like to be able to to scan the text easily and do not loose track of lines of text.

Acceptance Criteria

  • the termbox is build into the minerva skin (no hacks)
  • the defined termbox columns (content, margin, interaction column) scale as defined
    • the columns don't get narrower as defined
    • the columns don't get wider as defined
  • the content column breaks as defined
  • alignment of text is as defined
  • alignment iof icons as defined

Specifications (mocks for detailed view – Figma file)

1st Breakpoint: 340 – 719 px (total screen width, not termbox exclusive)
“Content column” is the only scaling until 420 px wide

  • IxD (Interaction) column is scaling up to 64 px
  • padding scales up until the next breakpoint is reached

2nd Breakpoint: 720 – 951 px (not a real breakpoint from our view, but from the minerva skin)

  • Margin of Minerva expands to 54 px
  • the padding (blue) therefor shrinks
  • content and IxD-area remain the same width as before

3rd Breakpoint: 952 – 1095 px (total screen width, not termbox exclusive)

  • Content becomes 3 columns
  • column scale from 244 to 290 px
  • languages caption stays on top of the label
  • Paddings scale down to 16 px
  • “Interaction section” (red, right) remains 64 px
  • Margin is defined by Minerva skin
  • “In more languages” and “All entered languages” will be fixed at 56px from the left side

4th Breakpoint: 1096 – infinite px (total screen width, not termbox exclusive)

  • Content becomes 4 columns
  • languages column is fixed by 128 px
  • other columns are always 244 px
  • Padding scales down to 16 px
  • “Interaction section” (red, right) remains 64 px
  • Margin is defined by Minerva
  • “In more languages” and “All entered languages” will be fixed at 202px from the left side (not including margin from the Minerva skin)
  • only the far right margin will grow

Random notes
The minerva skin break points are:
< 720px
16px margin left and right

and >= 720px
3,35em (=54px at default font size) margin left and right

and >= 1000px
centered
width: 90% (of the total viewport)
max-width of 993.3px

This means old ones will also be modified.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 29 2019, 11:27 AM
Lea_WMDE updated the task description. (Show Details)Jan 30 2019, 3:24 PM

Please check the Figma File. I updated the specs on how things should behave in the comments underneath the screens. Simplification regarding transition was part of it. The transluscent mocks are old ones and no longer to be considerable but still there for orientation.

Please let me know if you need any further informations.

Hanna_Petruschat_WMDE set the point value for this task to 3.

Taking over the relevant discussion from the other ticket:

  1. When all entered languages are expanded, the aliases still run into the "interactive sidebar". see screenshot below

  1. Yes, that's a known issue. If it's ok with you, I would rather make this part of T214898 because it doesn't have much to do with the buttons.

Change 489196 had a related patch set uploaded (by Jakob; owner: Jakob):
[wikibase/termbox@master] Adjust termbox break points to minerva skin breakpoints

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

Change 489235 had a related patch set uploaded (by Jakob; owner: Jakob):
[wikibase/termbox@master] Align toggle buttons with label column

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

The specs for the "In more languages" Text are the following for

Breaktpoint 3

  • fixed position
  • 56px from the left side (no margin of the Minerva skin included)
  • 56px include 8px padding from text to devider line (see screenshot)

Breakpoint 4

  • fixed position
  • 202 px from the left side (no margin of the Minerva skin included)
  • 202px include 8px padding from text to devider line (see screenshot)

I'll update the task description as well.

Change 489196 merged by jenkins-bot:
[wikibase/termbox@master] Adjust termbox break points to minerva skin breakpoints

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

Change 489235 merged by jenkins-bot:
[wikibase/termbox@master] Align toggle buttons with label column

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

Change 490032 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[mediawiki/extensions/Wikibase@master] termbox: update to latest

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

Change 490032 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] termbox: update to latest

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

Jakob_WMDE removed Jakob_WMDE as the assignee of this task.Feb 15 2019, 4:39 PM
Jakob_WMDE added a subscriber: Jakob_WMDE.

Thanks for sharing. I've one tiny remark, which will make a difference in the future, when more interactive elements will be introduced:
Could you please adjust the minimum width of the content box from 260px (current) to 244px (as defined).

Other than that everything regarding this ticket seems fine. I would leave to check " the termbox is build into the minerva skin (no hacks)" for someone who has the actual techincal understanding wether this criteria is done.

Change 491524 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[wikibase/termbox@master] Fingerprint: column min-width is 244px

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

@Hanna_Petruschat_WMDE Thanks for the poke - I created a patch to change the min-width.
Historically the 260px seem to have been the width including margin (some calculation was performed on it) but when it was changed the difference was not compensated for.

Lea_WMDE triaged this task as Medium priority.Feb 25 2019, 11:51 AM

Change 491524 merged by jenkins-bot:
[wikibase/termbox@master] Fingerprint: column min-width is 244px

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

Change 492668 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[mediawiki/extensions/Wikibase@master] termbox: update to latest version

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

Change 492668 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] termbox: update to latest version

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

Hanna_Petruschat_WMDE closed this task as Resolved.Feb 26 2019, 7:41 AM
Hanna_Petruschat_WMDE updated the task description. (Show Details)
Hanna_Petruschat_WMDE updated the task description. (Show Details)

Thanks @Jakob_WMDE! Looks goood...
I checked of the "no hacks"-acceptance criteria as well.