Project

General

Profile

Actions

Defect #21775

closed

Field "Done" from issue subtasks table overlaps the layout in responsive mode, width 400

Added by Marius BĂLTEANU about 8 years ago. Updated almost 8 years ago.

Status:
Closed
Priority:
Normal
Category:
UI - Responsive
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:
Fixed
Affected version:

Description

Steps to reproduce:
  1. Open an issue with subtasks
  2. Resize the browser to the minimum width (400px in my case, Chrome, latest version)
  3. Observe the field Done that overlaps the layout.

I checked also the issues listing (project/issues) and there the problem doesn't reproduce because of the div "autoscroll" that makes that block scrollable also on horizontal.

Attached is a patch that adds that div for issue subtasks and relations.

After I applied the patch:


Files

after.png (83 KB) after.png Marius BĂLTEANU, 2016-01-21 00:17
before.png (82.5 KB) before.png Marius BĂLTEANU, 2016-01-21 00:17
add_autoscroll_div.patch (1.64 KB) add_autoscroll_div.patch Marius BĂLTEANU, 2016-01-21 00:33
0001-Add-responsive-behaviour-to-subtasks-and-related-iss.patch (2.03 KB) 0001-Add-responsive-behaviour-to-subtasks-and-related-iss.patch Felix Gliesche, 2016-01-21 16:52
after-patch.png (74.1 KB) after-patch.png Felix Gliesche, 2016-01-21 16:53

Related issues

Related to Redmine - Defect #32889: Responsive layout for issue tree and issue relation on issue page is brokenClosedJean-Philippe Lang

Actions
Actions #1

Updated by Marius BĂLTEANU about 8 years ago

Attached the patch.

Actions #2

Updated by Jan from Planio www.plan.io about 8 years ago

  • Category changed from UI to UI - Responsive

Thanks for reporting this and providing a patch.

I am not sure scrolling is the best approach here. Ideally, we'd rearrange the elements so they all fit on the screen without scrolling.

Actions #3

Updated by Jan from Planio www.plan.io about 8 years ago

I've also added a new category for responsive issues as I would expect to see a few more of those in the future. Using a different category will hopefully make it easier for Felix and me to address them quickly.

Actions #4

Updated by Marius BĂLTEANU about 8 years ago

Jan from Planio www.plan.io wrote:

I am not sure scrolling is the best approach here. Ideally, we'd rearrange the elements so they all fit on the screen without scrolling.

I added the autoscroll div from two reasons:
  1. this is the behavior used in the issues page
  2. is a quick fix

I totally agree with you that is not the best approach and I think that the new responsive approach should apply in all pages where the issues are listed (Issues, issue show, my page)

Actions #5

Updated by Felix Gliesche about 8 years ago

I have been working on a solution which avoids scrollbars and lets the columns stack so that each issue displays in two rows :

The screenshot shows how it looks on an iPhone 4 with 320px width (what I consider the minimum resolution width). It looks well for subtasks and related issues. The subject spans over the full width, whereas status, asignee, progress, start_date and end_date use one-third of the available width. I also added text-overflow:ellipsis to the table cells in case the content exceeds the table cell's space.

Actions #6

Updated by Marius BĂLTEANU about 8 years ago

It looks very good.

Actions #7

Updated by Jan from Planio www.plan.io about 8 years ago

  • Status changed from New to Resolved
  • Target version set to Candidate for next minor release
  • Resolution set to Fixed
Actions #8

Updated by Go MAEDA about 8 years ago

  • Status changed from Resolved to New
  • Target version changed from Candidate for next minor release to 3.2.1
  • Resolution deleted (Fixed)

Setting target version to 3.2.1.
Felix, thanks for working on many UI issues.

Actions #9

Updated by Jean-Philippe Lang almost 8 years ago

  • Status changed from New to Closed
  • Assignee set to Jean-Philippe Lang
  • Resolution set to Fixed

Patch committed, thanks.

Actions #10

Updated by Marius BĂLTEANU about 4 years ago

  • Related to Defect #32889: Responsive layout for issue tree and issue relation on issue page is broken added
Actions

Also available in: Atom PDF