Project

General

Profile

Actions

Feature #19097

closed

Responsive layout for mobile devices

Added by Jan from Planio www.plan.io over 9 years ago. Updated almost 9 years ago.

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

0%

Estimated time:
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.


Files

screenshot-iphone6-overview.png (75.9 KB) screenshot-iphone6-overview.png Go MAEDA, 2015-02-13 02:28
screenshot-iphone6-menu.png (61.9 KB) screenshot-iphone6-menu.png Go MAEDA, 2015-02-13 02:28
0002-Add-smooth-scrolling-for-webkit-browsers.patch (704 Bytes) 0002-Add-smooth-scrolling-for-webkit-browsers.patch Jan from Planio www.plan.io, 2015-02-19 21:14
0003-Prevent-zooming-on-mobile-browsers.patch (873 Bytes) 0003-Prevent-zooming-on-mobile-browsers.patch Jan from Planio www.plan.io, 2015-03-04 11:53
0004-Style-contextual-buttons.patch (1.74 KB) 0004-Style-contextual-buttons.patch Jan from Planio www.plan.io, 2015-03-04 12:20
redmine_responsive_contextual1.png (82.4 KB) redmine_responsive_contextual1.png Jan from Planio www.plan.io, 2015-03-04 12:24
redmine_responsive_contextual2.png (61 KB) redmine_responsive_contextual2.png Jan from Planio www.plan.io, 2015-03-04 12:24
0005-Style-login-page.patch (1.2 KB) 0005-Style-login-page.patch Jan from Planio www.plan.io, 2015-03-04 12:41
0007-Align-watchers-area-well-in-mobile-menu.patch (1.77 KB) 0007-Align-watchers-area-well-in-mobile-menu.patch Jan from Planio www.plan.io, 2015-03-13 14:20
0008-Make-loading-indicator-wider.patch (793 Bytes) 0008-Make-loading-indicator-wider.patch Jan from Planio www.plan.io, 2015-03-13 14:21
watchers_sidebar.png (34.7 KB) watchers_sidebar.png Jan from Planio www.plan.io, 2015-03-13 14:24
0010-Add-responsiveness-to-tabular-forms.patch (1.26 KB) 0010-Add-responsiveness-to-tabular-forms.patch Felix Gliesche, 2015-03-24 19:18
0009-Make-UI-Dialogs-responsive.patch (906 Bytes) 0009-Make-UI-Dialogs-responsive.patch Felix Gliesche, 2015-03-24 19:18
0011-Optimize-issues-new-form-for-mobile-devices.patch (837 Bytes) 0011-Optimize-issues-new-form-for-mobile-devices.patch Felix Gliesche, 2015-03-24 19:18
0012-Reorganize-overflow-of-body-and-wrapper.patch (1.22 KB) 0012-Reorganize-overflow-of-body-and-wrapper.patch Felix Gliesche, 2015-08-20 13:50
0001-Responsive-layout.patch (18.4 KB) 0001-Responsive-layout.patch 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 fields when availableClosedJean-Philippe Lang

Actions
Related to Redmine - Feature #4833: mobile java client for redmineClosed2010-02-13

Actions
Related to Redmine - Feature #4830: Android client for redmineClosed2010-02-13

Actions
Related to Redmine - Feature #33156: Allow zooming on mobile devicesClosedGo MAEDA

Actions
Has duplicate Redmine - Feature #20026: Redmine whether to support mobile phonesClosed

Actions
Has duplicate Redmine - Feature #883: Add suport for mobile devices (CSS)Closed2008-03-17

Actions
Has duplicate Redmine - Feature #13842: Support mobile phone users betterClosed

Actions
Has duplicate Redmine - Defect #25727: Interface not responsive to mobile deviceClosed

Actions
Actions #1

Updated by Jan from Planio www.plan.io over 9 years ago

  • Description updated (diff)
Actions #3

Updated by Jan Niggemann (redmine.org team member) over 9 years ago

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

Actions #4

Updated by Jan from Planio www.plan.io over 9 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:

Actions #5

Updated by Jan from Planio www.plan.io over 9 years ago

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

Actions #6

Updated by Akipii Oga over 9 years ago

+1
Good!

Actions #7

Updated by Benedikt Huss over 9 years ago

+1

Looks nice. Bring it on !

Actions #8

Updated by Jan from Planio www.plan.io over 9 years ago

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

Updated by Jan from Planio www.plan.io over 9 years ago

Actions #10

Updated by Jan from Planio www.plan.io over 9 years ago

Actions #11

Updated by Felix Gliesche over 9 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.

Actions #12

Updated by Jan from Planio www.plan.io over 9 years ago

  • File deleted (0001-Responsive-layout.patch)
Actions #13

Updated by Jan from Planio www.plan.io over 9 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.

Actions #14

Updated by Jan from Planio www.plan.io over 9 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:

Actions #15

Updated by Jan from Planio www.plan.io over 9 years ago

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

Actions #16

Updated by Go MAEDA over 9 years ago

+100
This should be Redmine core!

Actions #17

Updated by Jens Krämer over 9 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.

Actions #18

Updated by Jens Krämer over 9 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.

Actions #19

Updated by Jan from Planio www.plan.io over 9 years ago

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

Updated by Jan from Planio www.plan.io over 9 years ago

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

Actions #21

Updated by Jan from Planio www.plan.io over 9 years ago

Watchers now look like this in the sidebar:

Actions #22

Updated by Jens Krämer over 9 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.

Actions #23

Updated by Jan from Planio www.plan.io over 9 years ago

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

Updated by Jan from Planio www.plan.io over 9 years ago

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

Updated by Felix Gliesche over 9 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.

Actions #26

Updated by Jan from Planio www.plan.io over 9 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.

Actions #27

Updated by Jan from Planio www.plan.io over 9 years ago

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

Updated by Jan from Planio www.plan.io over 9 years ago

  • File deleted (0001-Responsive-layout.patch)
Actions #29

Updated by Jan from Planio www.plan.io over 9 years ago

  • File deleted (0001-Responsive-layout.patch)
Actions #30

Updated by Jan from Planio www.plan.io over 9 years ago

  • File 0001-Responsive-layout.patch added

And a quick correction.

Actions #31

Updated by Toshi MARUYAMA over 9 years ago

  • Has duplicate Feature #20026: Redmine whether to support mobile phones added
Actions #32

Updated by George Notaras over 9 years ago

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

Actions #33

Updated by the fury about 9 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!

Actions #34

Updated by Oleg German about 9 years ago

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

Actions #35

Updated by Jan from Planio www.plan.io about 9 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.

Actions #36

Updated by Go MAEDA about 9 years ago

jan 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!

Actions #37

Updated by Jan from Planio www.plan.io about 9 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.

Actions #38

Updated by Jan from Planio www.plan.io about 9 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.

Actions #39

Updated by Jan Niggemann (redmine.org team member) about 9 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?

Actions #40

Updated by the fury about 9 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?

Actions #41

Updated by Jan from Planio www.plan.io about 9 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!

Actions #42

Updated by the fury about 9 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!

Actions #43

Updated by Jan from Planio www.plan.io about 9 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.

Actions #44

Updated by Oleg German about 9 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.

Actions #45

Updated by Felix Gliesche about 9 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.

Actions #46

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

  • File deleted (0001-Responsive-layout.patch)
Actions #47

Updated by Jan from Planio www.plan.io about 9 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.

Actions #48

Updated by Go MAEDA about 9 years ago

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

jp jp, could it be included in 3.2.0?

Actions #49

Updated by Jan from Planio www.plan.io about 9 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!

Actions #50

Updated by Benedikt Huss almost 9 years ago

+1 Bring it on!

Actions #51

Updated by budo kaiman almost 9 years ago

+1 from me as well.

Actions #52

Updated by Ebrahim Mohammadi almost 9 years ago

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

Actions #53

Updated by Jean-Philippe Lang almost 9 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.

Actions #54

Updated by Jan from Planio www.plan.io almost 9 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.

Actions #55

Updated by Toshi MARUYAMA almost 9 years ago

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

Updated by Toshi MARUYAMA almost 9 years ago

Actions #57

Updated by Toshi MARUYAMA almost 9 years ago

  • Has duplicate Feature #883: Add suport for mobile devices (CSS) added
Actions #58

Updated by Toshi MARUYAMA almost 9 years ago

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

Updated by Toshi MARUYAMA almost 9 years ago

  • Has duplicate Feature #13842: Support mobile phone users better added
Actions #60

Updated by Go MAEDA almost 9 years ago

Actions #61

Updated by Go MAEDA over 8 years ago

Actions #62

Updated by Go MAEDA about 6 years ago

  • Has duplicate Defect #25727: Interface not responsive to mobile device added
Actions #63

Updated by Go MAEDA over 4 years ago

Actions

Also available in: Atom PDF