Page MenuHomePhabricator
Create Task
Maniphest T106556

Avoid the dashboard layout breaking on small screens
Closed, ResolvedPublic
Actions

Description

When the window size is reduced, the dashboard layout breaks:

Screen Shot 2015-07-22 at 12.39.31.png (1×1 px, 451 KB)

Some possible ideas (more to be explored):

  • Make the language controls more compact when there is less room. For example, users may not need the whole language name to know which languages are selected.
  • The help column can be rearranged when there is little room. For example, showing as a small floating element at the bottom-right corner that can be expanded into the whole column on demand.

This was reported in the project discussion page.

Details

SubjectRepoBranchLines +/-
Dashboard: Fix broken layout on small screensmediawiki/extensions/ContentTranslationmaster+100 -10
Customize query in gerrit

Related Objects
Search...

Event Timeline

Pginer-WMF created this task.Jul 22 2015, 5:44 PM
Pginer-WMF renamed this task from Avoif the dashboard layout ot break in small screens to Avoid the dashboard layout ot break in small screens.
Pginer-WMF raised the priority of this task from to Needs Triage.
Pginer-WMF updated the task description. (Show Details)
Pginer-WMF added projects: ContentTranslation, Design.
Pginer-WMF set Security to None.
Pginer-WMF added subscribers: • santhosh, • Nirzar, Aklapper, Pginer-WMF.
Pginer-WMF updated the task description. (Show Details)Jul 22 2015, 5:50 PM
Amire80 triaged this task as Medium priority.Jul 23 2015, 5:25 PM
Amire80 added a project: ContentTranslation-Release6.
Amire80 renamed this task from Avoid the dashboard layout ot break in small screens to Avoid the dashboard layout breaking on small screens.Jul 28 2015, 6:30 PM
Amire80 moved this task from Needs Triage to CX6 on the ContentTranslation board.
Amire80 moved this task from Backlog to Bugs on the ContentTranslation-Release6 board.Jul 29 2015, 1:43 PM
Amire80 moved this task from CX6 to CX7 on the ContentTranslation board.Oct 2 2015, 3:58 PM
Amire80 edited projects, added Essential-Work; removed ContentTranslation-Release6.Oct 14 2015, 7:04 AM
Amire80 moved this task from CX7 to Bugs on the ContentTranslation board.Oct 16 2015, 6:57 AM
gerritbot subscribed.Oct 20 2015, 5:09 AM

Change 247514 had a related patch set uploaded (by Jarrettmunton):
Dashboard: Fix broken layout on small screens

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

gerritbot added a project: Patch-For-Review.Oct 20 2015, 5:09 AM
• santhosh added a subscriber: Jarrettmunton.Dec 21 2015, 5:19 AM

@Jarrettmunton, you may improve your patch using the advantages of our grid system. It has multiple break points to support various screensizes. Using that you can control the behavior of UI elements without adding java script code. Here is some quick code example:

diff --git a/modules/dashboard/styles/ext.cx.dashboard.less b/modules/dashboard/styles/ext.cx.dashboard.less
index ab53784..54e65fc 100644
--- a/modules/dashboard/styles/ext.cx.dashboard.less
+++ b/modules/dashboard/styles/ext.cx.dashboard.less
@@ -31,6 +31,9 @@ body {
 .cx-dashboard {
        padding: 20px 50px;
        color: @gray-darker;
+       @media @palm {
+               .mw-ui-one-whole;
+       }
 }
 
 .cx-dashboard__sidebar {
@@ -47,6 +50,25 @@ body {
                .cx-sidebar {
                        min-height: 100vh;
                }
+               @media @palm {
+                       display: none;
+               }
+       }
+       @media @palm {
+               .collapse_to_side;
+       }
+}
+
+
+.collapse_to_side() {
+       position: fixed;
+       top: 0;
+       right: -400px;
+       width: 100%;
+       &:hover {
+               right: 0;
+               width: 80%;
+               z-index: 9999;
        }
 }

@@ -122,6 +144,9 @@ body {

        padding: 0 10px 0 0;
        background-color: #f0f0f0;
+       @media @palm {
+               .mw-ui-one-whole;
+       }
 }

 .cx-translationlist-container.sticky .translation-filter {
@@ -134,6 +159,9 @@ body {
        width: 66%;
        padding-left: 50px;
        padding-right: 15px;
+       @media @palm {
+               .mw-ui-one-whole;
+       }
 }

 .cx-translationlist-container.sticky {

With this, at small sceens, you get

pasted_file (771×474 px, 82 KB)

Only the help icons are shown at this size,

pasted_file (365×462 px, 31 KB)

on hover you get the full widh side bar

pasted_file (588×455 px, 55 KB)

• santhosh added a comment.Dec 21 2015, 5:21 AM

Note that the above examples are just for illustration. @Pginer-WMF can give the expected UX behavior

• santhosh added a comment.Feb 24 2016, 10:30 AM

@Jarrettmunton This part of code is changing a lot recently. So please let us know if you want to continue on this. If delayed, it will be difficult to merge

Pginer-WMF added a parent task: T127695: Design polishing for Content Translation.Feb 25 2016, 10:17 AM
gerritbot added a comment.Apr 22 2016, 5:44 AM

Change 247514 abandoned by Nikerabbit:
Dashboard: Fix broken layout on small screens

Reason:
This patch has not been updated in a long time to address the comments. Anyone feel free to unabandon if this patch is worked on, or start a new patch.

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

Nikerabbit removed a project: Patch-For-Review.Apr 22 2016, 5:44 AM
Pginer-WMF closed this task as Resolved.Mar 1 2018, 5:10 PM
Pginer-WMF claimed this task.

This was solved by T157212: Make translation dashboard layout responsive to adapt to small screens

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL