Feature #19097

Responsive layout for mobile devices

Added by Jan from Planio www.plan.io about 3 years ago. Updated over 2 years ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Jean-Philippe Lang% Done:

0%

Category:UI
Target version:3.2.0
Resolution:Fixed

Description

There have been a number of attempts to make Redmine more mobile-friendly, most of which have been incorporated in themes.

However, I believe that "mobile-friendliness" (e.g. a responsive layout) has nothing to do with the main purpose of themes.

IMO, the main purpose of themes is adding a custom design, like colors, icons, fonts, etc. Mobile-friendlyness on the other hand, should be a core feature for any modern web application. At Planio, we've been developing such a responsive layout during the past weeks and I would like to contribute this back to the Redmine community. In fact, I would really enjoy seeing this go into the Redmine core.

It has no dependencies on Planio itself or on any theme. In fact, it also tries to also cause minimal disruption to existing themes. On the standard (desktop, i.e. >900px) view, existing themes should just work like before.

Moreover, only a few minimal changes should be required by theme developers to make their existing themes work and look good on smaller screens.

Current status

The patch consists of a few changes to the base layout, some JavaScript (for the right side fly-out menu) and a self-contained stylesheet file. In this first step, the stylesheet tries to reach a minimum setup in order to achieve basic responsiveness for Redmine. The following things were kept in mind:

  • In Redmine, anything that is below 900px has a horizontal scrollbar anyways and therefore does not fit in viewport, so start adding responsiveness here
  • Use as little JavaScript as possible -> try CSS solution first
  • Don't use workarounds for IE below 9 to keep things easy

How to make existing themes work

Almost all existing themes we tested, work great on regular desktop screens. In fact, they also work with the mobile layout out of the box. To make them more beautiful, only a few tweaks to the respective theme CSS are required:

The colors mentioned here are all standard Redmine theme colors. That should make a find & replace for existing theme developers easier.

/* Header background color */
#wrapper  #header {
  background-color: #628db6;
}

/* Mobile toggle button colors */
#wrapper #header a.mobile-toggle-button {
  border-left-color: #dddddd;
  color: #f8f8f8;
}

/* Flyout menu colors */
#wrapper .flyout-menu {
  color: #ffffff;
  background-color: #3e5b76;
}

/* Flyout menu border color */
#wrapper .flyout-menu__avatar, #wrapper .flyout-menu ul li a {
  border-top-color: rgba(255,255,255,.1); /* white with alpha transparency */
}

/* Flyout menu link color */
#wrapper .flyout-menu a, #wrapper .flyout-menu__avatar a {
  color: #ffffff;
}

/* Flyout menu headings background */
#wrapper .flyout-menu h3 {
  background-color: #628db6;
}

/* Flyout menu headings text color */
#wrapper .flyout-menu h3, #wrapper .flyout-menu h4 {
  color: #ffffff;
}

/* Search magnifying glass label color */
#wrapper .search-magnifier {
  color: #bbbbbb;
}

/* Project menu dropdown arrow color */
#wrapper .jump-box-arrow {
     color: #ffffff;
}

These are all CSS classes which we believe most existing theme developers should need to adapt in order to make their theme look good with the responsive layout.

What's left to to?

We will be working on making individual views more mobile-friendly as well. This will be a step-by-step process where we will try to work on the important parts (issues list, issue forms) first and then work our way back to the not so important views.

However, since this patch already improves the status quo on mobile devices and is self-contained, I'd say it could already be committed.

screenshot-iphone6-overview.png (75.9 KB) Go MAEDA, 2015-02-13 02:28

screenshot-iphone6-menu.png (61.9 KB) Go MAEDA, 2015-02-13 02:28

0002-Add-smooth-scrolling-for-webkit-browsers.patch Magnifier (704 Bytes) Jan from Planio www.plan.io, 2015-02-19 21:14

0003-Prevent-zooming-on-mobile-browsers.patch Magnifier (873 Bytes) Jan from Planio www.plan.io, 2015-03-04 11:53

0004-Style-contextual-buttons.patch Magnifier (1.74 KB) Jan from Planio www.plan.io, 2015-03-04 12:20

redmine_responsive_contextual1.png (82.4 KB) Jan from Planio www.plan.io, 2015-03-04 12:24

redmine_responsive_contextual2.png (61 KB) Jan from Planio www.plan.io, 2015-03-04 12:24

0005-Style-login-page.patch Magnifier (1.2 KB) Jan from Planio www.plan.io, 2015-03-04 12:41

0007-Align-watchers-area-well-in-mobile-menu.patch Magnifier (1.77 KB) Jan from Planio www.plan.io, 2015-03-13 14:20

0008-Make-loading-indicator-wider.patch Magnifier (793 Bytes) Jan from Planio www.plan.io, 2015-03-13 14:21

watchers_sidebar.png (34.7 KB) Jan from Planio www.plan.io, 2015-03-13 14:24

0010-Add-responsiveness-to-tabular-forms.patch Magnifier (1.26 KB) Felix Gliesche, 2015-03-24 19:18

0009-Make-UI-Dialogs-responsive.patch Magnifier (906 Bytes) Felix Gliesche, 2015-03-24 19:18

0011-Optimize-issues-new-form-for-mobile-devices.patch Magnifier (837 Bytes) Felix Gliesche, 2015-03-24 19:18

0012-Reorganize-overflow-of-body-and-wrapper.patch Magnifier (1.22 KB) Felix Gliesche, 2015-08-20 13:50

0001-Responsive-layout.patch Magnifier (18.4 KB) Jan from Planio www.plan.io, 2015-08-20 13:59


Related issues

Related to Redmine - Patch #19468: Replace jQuery UI Datepicker with native browser date fie... Closed
Related to Redmine - Feature #4833: mobile java client for redmine Closed 2010-02-13
Related to Redmine - Feature #4830: Android client for redmine Closed 2010-02-13
Duplicated by Redmine - Feature #20026: Redmine whether to support mobile phones Closed
Duplicated by Redmine - Feature #883: Add suport for mobile devices (CSS) Closed 2008-03-17
Duplicated by Redmine - Feature #13842: Support mobile phone users better Closed

Associated revisions

Revision 14817
Added by Jean-Philippe Lang over 2 years ago

Responsive layout for mobile devices (#19097).

Patch by Felix Gliesche.

Revision 14818
Added by Jean-Philippe Lang over 2 years ago

Add smooth scrolling for webkit browsers (#19097).

Patch by Felix Gliesche.

Revision 14819
Added by Jean-Philippe Lang over 2 years ago

Prevent zooming on mobile browsers (#19097).

Patch by Felix Gliesche.

Revision 14820
Added by Jean-Philippe Lang over 2 years ago

Style contextual buttons (#19097).

Patch by Felix Gliesche.

Revision 14821
Added by Jean-Philippe Lang over 2 years ago

Style login page (#19097).

Patch by Felix Gliesche.

Revision 14822
Added by Jean-Philippe Lang over 2 years ago

Align watchers area well in mobile menu (#19097).

Patch by Felix Gliesche.

Revision 14823
Added by Jean-Philippe Lang over 2 years ago

Make loading indicator wider (#19097).

Patch by Felix Gliesche.

Revision 14824
Added by Jean-Philippe Lang over 2 years ago

Make UI Dialogs responsive (#19097).

Patch by Felix Gliesche.

Revision 14825
Added by Jean-Philippe Lang over 2 years ago

Add responsiveness to tabular forms (#19097).

Patch by Felix Gliesche.

Revision 14826
Added by Jean-Philippe Lang over 2 years ago

Optimize issues/new form for mobile devices (#19097).

Patch by Felix Gliesche.

Revision 14827
Added by Jean-Philippe Lang over 2 years ago

Reorganize overflow of body and wrapper (#19097).

Patch by Felix Gliesche.

Revision 14828
Added by Jean-Philippe Lang over 2 years ago

Don't use 100% width for date fields (#19097).

Revision 14831
Added by Jean-Philippe Lang over 2 years ago

Extract the "Add filter" drop-down from the table (#19097).

Revision 14844
Added by Jean-Philippe Lang over 2 years ago

Don't put all contextual buttons on their own line (#19097).

Revision 14845
Added by Jean-Philippe Lang over 2 years ago

Makes the application settings forms responsive (#19097).

Revision 14847
Added by Jean-Philippe Lang over 2 years ago

Fixed that timelog comments are not visible on the responsive issue edit form (#19097).

Revision 14848
Added by Jean-Philippe Lang over 2 years ago

Render issue attributes using divs instead of a table for responsiveness (#19097).

Revision 14849
Added by Jean-Philippe Lang over 2 years ago

Remove left margin on search results and activity (#19097).

Revision 14850
Added by Jean-Philippe Lang over 2 years ago

Don't float version summary (#19097).

Revision 14851
Added by Jean-Philippe Lang over 2 years ago

Improved responsiveness for versions and roadmap (#19097).

Width of progress bars is no longer hard-coded in views.

Revision 14852
Added by Jean-Philippe Lang over 2 years ago

Adds a Save button at the end of the account form for mobile devices (#19097).

Revision 14853
Added by Jean-Philippe Lang over 2 years ago

Issue attributes no longer in a table (#19097).

Revision 14947
Added by Jean-Philippe Lang over 2 years ago

Adapt pagination for smaller screens (#19097).

History

#1 Updated by Jan from Planio www.plan.io about 3 years ago

  • Description updated (diff)

#3 Updated by Jan Niggemann (redmine.org team member) about 3 years ago

Looks really good indeed! I think that a lot of our users would welcome such a responsive layout.

#4 Updated by Jan from Planio www.plan.io about 3 years ago

Thanks guys for the praise. And thanks for trying it out and posting the screenshots, I meant to make some as well but forgot :)

I'll repaste them here:

#5 Updated by Jan from Planio www.plan.io about 3 years ago

Here's a second patch which fixes scrolling in the basecamp (and possibly other) theme(s)

#6 Updated by Akipii Oga about 3 years ago

+1
Good!

#7 Updated by Benedikt Huss about 3 years ago

+1

Looks nice. Bring it on !

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

  • Related to Feature #883: Add suport for mobile devices (CSS) added

#9 Updated by Jan from Planio www.plan.io about 3 years ago

#10 Updated by Jan from Planio www.plan.io about 3 years ago

#11 Updated by Felix Gliesche about 3 years ago

  • File 0001-Responsive-layout.patch added

I am attaching a rebased version of the initial patch in order for this patch to work for latest code changes on redmine.

#12 Updated by Jan from Planio www.plan.io about 3 years ago

  • File deleted (0001-Responsive-layout.patch)

#13 Updated by Jan from Planio www.plan.io about 3 years ago

This additional patch prevents mobile browsers from zooming into form fields (and zooming in general) which is not wanted in a responsive layout.

#14 Updated by Jan from Planio www.plan.io about 3 years ago

This additional patch adds style for contextual buttons which are found in many places in Redmine above (or below) the main content. It works with many themes out of the box and helps tapping contextual icons with fingers (on smartphone touchscreens) rather than a mouse pointer.

I'm also attaching some additional screenshots:

#15 Updated by Jan from Planio www.plan.io about 3 years ago

This additional patch adds page specific style for the login screen to properly align with the (smaller) screen size.

#16 Updated by Go MAEDA about 3 years ago

+100
This should be Redmine core!

#17 Updated by Jens Krämer about 3 years ago

  • File 0006-fixes-for-JS-issues-caused-by-flyout-menu.patch added

This patch fixes some minor issues that were caused by rendering the sidebar a second time for the flyout menu which leads to duplicate HTML element ids.

#18 Updated by Jens Krämer about 3 years ago

  • File 0006-fixes-for-JS-issues-caused-by-flyout-menu.patch added

added one more fix - slight change to my/_sidebar.html.erb to use api-access-key class instead of id.

#19 Updated by Jan from Planio www.plan.io about 3 years ago

  • File deleted (0006-fixes-for-JS-issues-caused-by-flyout-menu.patch)

#20 Updated by Jan from Planio www.plan.io about 3 years ago

Attached are another two patches which make the watchers in the sidebar and the ajax loading indicator look more beautiful.

#21 Updated by Jan from Planio www.plan.io about 3 years ago

Watchers now look like this in the sidebar:

#22 Updated by Jens Krämer about 3 years ago

  • File 0006-fixes-for-JS-issues-caused-by-flyout-menu.patch added

revised patch to keep api-access-key-id for compatibility with RedminePM app.

#23 Updated by Jan from Planio www.plan.io about 3 years ago

  • File deleted (0006-fixes-for-JS-issues-caused-by-flyout-menu.patch)

#24 Updated by Jan from Planio www.plan.io about 3 years ago

  • Related to Patch #19468: Replace jQuery UI Datepicker with native browser date fields when available added

#25 Updated by Felix Gliesche about 3 years ago

I am adding three patches that start optimizing forms for mobile devices:

  • UI dialogs are made responsive (e.g. adding a watcher in new/issue form)
  • Tabular forms are optimized for mobile
  • Form for creating issues (issue/new) was adjusted as one of the most important forms on redmine

While most tabular forms that are being used in other places look already great, we will be optimizing these forms specifically step by step and add the corresponding patches here soon.

#26 Updated by Jan from Planio www.plan.io almost 3 years ago

  • File 0001-Responsive-layout.patch added

It turns out that for a number of reasons, the initial approach of duplicating menus and sidebar as proposed in patch 0001 is not ideal. As 0006 shows, a number of things can break due to this whenever code relies on the fact that stuff only exists once. Therefore, we've adapted patch 0001. It now moves the menus and sidebar using Javascript in case of small screen widths. This should be much safer.

Patch 0006 becomes obsolete with this. The entire series applies cleanly to current Redmine trunk.

#27 Updated by Jan from Planio www.plan.io almost 3 years ago

  • File deleted (0006-fixes-for-JS-issues-caused-by-flyout-menu.patch)

#28 Updated by Jan from Planio www.plan.io almost 3 years ago

  • File deleted (0001-Responsive-layout.patch)

#29 Updated by Jan from Planio www.plan.io almost 3 years ago

  • File deleted (0001-Responsive-layout.patch)

#30 Updated by Jan from Planio www.plan.io almost 3 years ago

  • File 0001-Responsive-layout.patch added

And a quick correction.

#31 Updated by Toshi MARUYAMA almost 3 years ago

  • Duplicated by Feature #20026: Redmine whether to support mobile phones added

#32 Updated by George Notaras almost 3 years ago

Judging by the screenshots, this is fantastic work! Can't wait to see this in core!

#33 Updated by the fury almost 3 years ago

This is an absolute must. Not only for mobile devices, but for desktops too, where my windows are often split half & half to have a couple of them open at the same time. If my window is too small, things fall to the right in most of the styles and I have to scroll horizontally to hit them in the sidebar.

I hope this makes it into Redmine soon!

#34 Updated by Oleg German over 2 years ago

Hello, I've extracted this patches to plugin, so testing became more easy
https://github.com/ogerman/redmine_responsive

#35 Updated by Jan from Planio www.plan.io over 2 years ago

Hi Oleg, thanks very much. Nice work. Even though, I would love for this to become part of the core at some point, so an extra plugin won't be needed anymore.

#36 Updated by Go MAEDA over 2 years ago

@Jan, how do you think about the quality of this awsome patch? Is it production level?
I think it is time to set the target version to 3.2.0!

#37 Updated by Jan from Planio www.plan.io over 2 years ago

Yes, that would be great. It's still not "complete" yet since we haven't worked on all individual views yet. For instance, the Gantt chart will obviously need some individual attention to work on small screens and some other areas as well. But my argument would be: Even if it's not complete yet, it is "better than nothing" since the current default layout is not optimized for mobile devices at all.

That being said, I would love to see this in 3.2.0. That would also make future improvements easier, I think. Right now, I believe it's getting more and more tricky with all the little patches :)

I will leave the decision up to you guys, though. Since it was me proposing this feature in the first place, I don't want to "push" it or anything.

#38 Updated by Jan from Planio www.plan.io over 2 years ago

But to give a more precise answer to the question: the code that is already there is production level, we're using it in production on Planio already for about a half year.

#39 Updated by Jan Niggemann (redmine.org team member) over 2 years ago

  • Assignee set to Jean-Philippe Lang

Jan from Planio www.plan.io wrote:

That being said, I would love to see this in 3.2.0.

So would I (and lots of others)!

That would also make future improvements easier, I think. Right now, I believe it's getting more and more tricky with all the little patches :)

I'm assigning this to JPL so he can look in to this. Is there anything that's actually keeping us from merging this?

#40 Updated by the fury over 2 years ago

Oleg German wrote:

Hello, I've extracted this patches to plugin, so testing became more easy
https://github.com/ogerman/redmine_responsive

I gave this a shot, but I think I may have done something wrong, as my tabs along the top (overview, issues, etc.) disappear when I shrink the browser window small enough. I can't find them anywhere in the hamburger menu, and they do not return when I put it back to normal size. Does this happen in the patched version as well?

#41 Updated by Jan from Planio www.plan.io over 2 years ago

the fury wrote:

Oleg German wrote:

Hello, I've extracted this patches to plugin, so testing became more easy
https://github.com/ogerman/redmine_responsive

I gave this a shot, but I think I may have done something wrong, as my tabs along the top (overview, issues, etc.) disappear when I shrink the browser window small enough. I can't find them anywhere in the hamburger menu, and they do not return when I put it back to normal size. Does this happen in the patched version as well?

It should not. If you can reproduce this with just the set of patches installed and not the plugin, please let me know and I'll look into it.

I'd prefer if we could keep the discussion in this issue just about the patches and the Redmine feature and discuss the plugin in the forums or on Github maybe? I think that will help the Redmine contributors with their work on getting the patches integrated in the trunk. Thanks!

#42 Updated by the fury over 2 years ago

Jan from Planio www.plan.io wrote:

the fury wrote:

Oleg German wrote:

Hello, I've extracted this patches to plugin, so testing became more easy
https://github.com/ogerman/redmine_responsive

I gave this a shot, but I think I may have done something wrong, as my tabs along the top (overview, issues, etc.) disappear when I shrink the browser window small enough. I can't find them anywhere in the hamburger menu, and they do not return when I put it back to normal size. Does this happen in the patched version as well?

It should not. If you can reproduce this with just the set of patches installed and not the plugin, please let me know and I'll look into it.

I'd prefer if we could keep the discussion in this issue just about the patches and the Redmine feature and discuss the plugin in the forums or on Github maybe? I think that will help the Redmine contributors with their work on getting the patches integrated in the trunk. Thanks!

Sorry about that! I deleted the plugin and applied the patches instead (I had to manually do a couple of the hunks, I had a slightly different jQuery version and no meta viewport tag in my base.html.erb).

The issue I experienced in the plugin did not occur. Those tab links spill out into the hamburger menu, and the tabs come back when the browser window is big enough, as I would expect.

Thank you and the rest of the plan.io team for all of your hard work on this!

#43 Updated by Jan from Planio www.plan.io over 2 years ago

the fury wrote:

Jan from Planio www.plan.io wrote:

the fury wrote:

Oleg German wrote:

Hello, I've extracted this patches to plugin, so testing became more easy
https://github.com/ogerman/redmine_responsive

I gave this a shot, but I think I may have done something wrong, as my tabs along the top (overview, issues, etc.) disappear when I shrink the browser window small enough. I can't find them anywhere in the hamburger menu, and they do not return when I put it back to normal size. Does this happen in the patched version as well?

It should not. If you can reproduce this with just the set of patches installed and not the plugin, please let me know and I'll look into it.

I'd prefer if we could keep the discussion in this issue just about the patches and the Redmine feature and discuss the plugin in the forums or on Github maybe? I think that will help the Redmine contributors with their work on getting the patches integrated in the trunk. Thanks!

Sorry about that!

No problem, don't worry.

I deleted the plugin and applied the patches instead (I had to manually do a couple of the hunks, I had a slightly different jQuery version and no meta viewport tag in my base.html.erb).

The issue I experienced in the plugin did not occur. Those tab links spill out into the hamburger menu, and the tabs come back when the browser window is big enough, as I would expect.

Thank you and the rest of the plan.io team for all of your hard work on this!

Sounds awesome, thanks for testing! Glad it's working as expected.

#44 Updated by Oleg German over 2 years ago

I gave this a shot, but I think I may have done something wrong, as my tabs along the top (overview, issues, etc.) disappear when I shrink the browser window small enough. I can't find them anywhere in the hamburger menu, and they do not return when I put it back to normal size. Does this happen in the patched version as well?

Thank you for feedback, I've fixed this bug.

#45 Updated by Felix Gliesche over 2 years ago

On iOS devices that respond to the main media query (e.g. ipad landscape does not, but ipad portrat does) there was a problem with autocomplete due to the overflow-x property on the body element. Moving this property to #wrapper fixes this issue. I am attaching a corresponding patch that fixes this issue.

#46 Updated by Jan from Planio www.plan.io over 2 years ago

  • File deleted (0001-Responsive-layout.patch)

#47 Updated by Jan from Planio www.plan.io over 2 years ago

Housekeeping: I am updating the 0001 patch to make it apply cleanly on current Redmine trunk, since Redmine has updated the jquery_ujs minor version from 3.1.1 to 3.1.3 in r14381.

#48 Updated by Go MAEDA over 2 years ago

  • Target version changed from Candidate for next major release to 3.2.0

@JPL, could it be included in 3.2.0?

#49 Updated by Jan from Planio www.plan.io over 2 years ago

I think it would be awesome if this patch series made it into 3.2.0. As mentioned before, not all views have been modified to look great yet on small screens, but I believe this patch creates a solid basis for the general layout, sidebar, forms, contextual buttons and so on. It has been live like this for all Planio users for more than a half year now and we've received very positive feedback.

Also, having these patches in the core would make it easier and could eventually also inspire other people in the community to contribute more responsive CSS patches for individual views based on this framework. Thank you for your consideration!

#50 Updated by Benedikt Huss over 2 years ago

+1 Bring it on!

#51 Updated by budo kaiman over 2 years ago

+1 from me as well.

#52 Updated by Ebrahim Mohammadi over 2 years ago

Including a responsive UI in 3.2.0 would convince me to upgrade https://peygir.com to that version.

#53 Updated by Jean-Philippe Lang over 2 years ago

  • Status changed from Needs feedback to Closed
  • Resolution set to Fixed

Patches from 1 to 12 are committed except 6 (missing?). Thank you for this nice work.

#54 Updated by Jan from Planio www.plan.io over 2 years ago

Jean-Philippe Lang wrote:

Patches from 1 to 12 are committed except 6 (missing?). Thank you for this nice work.

These are great news, thanks! Patch 6 has become obsolete by our rewrite of 1 (see #19097-26), so the patch series is complete. We will submit further responsive improvements as separate patches as we work on this more in the coming months.

#55 Updated by Toshi MARUYAMA over 2 years ago

  • Related to deleted (Feature #883: Add suport for mobile devices (CSS))

#56 Updated by Toshi MARUYAMA over 2 years ago

#57 Updated by Toshi MARUYAMA over 2 years ago

  • Duplicated by Feature #883: Add suport for mobile devices (CSS) added

#58 Updated by Toshi MARUYAMA over 2 years ago

  • Related to deleted (Feature #13842: Support mobile phone users better)

#59 Updated by Toshi MARUYAMA over 2 years ago

  • Duplicated by Feature #13842: Support mobile phone users better added

#60 Updated by Go MAEDA over 2 years ago

#61 Updated by Go MAEDA about 2 years ago

Also available in: Atom PDF