Some design improvements

[martinklepsch]

Hi

I really appreciate your efforts making a modern responsive theme for Redmine. I hope that this leads to a better default theme for Redmine.

I have some improvements that came to my eye as I first tested it:

• In web applications links that have been :visited should have the same color as unvisited links
• Don't overuse CSS3 effects where they add no functionality
  Examples
  • In the administration screen the menu items have a rounded black pill behind them I think a more subtile styling would suffice here. You could try to go with text styling only to indicate the current menu item. (you did that pretty good at the project menu and at a projects configuration menu)
  • Usage of gradients at many locations (subjective point, I personally think flat colors are less irritating and can be beautiful too
• Go for consitency: You use lots of rounded corners, why not use a 3px radius for the projects configuration menu too?
• I think the project selection dropdown would be better located at the topmost menu as it is not an option of the current project but an option of the application itself
• The :hover state of menu items in a projects configuration menu is not very readable, maybe the color of the currently active item and bold would do that

I'm happy to discuss all of this and I'm looking foward to your thoughts.

[koppen]

Thanks a lot for your feedback.

In web applications links that have been :visited should have the same color as unvisited links

There is a lot of value in :visited for Redmine; being able to see what issues you have visited in a long issues list and what links you have followed in the wiki come to mind.

In the administration screen the menu items have a rounded black pill behind them I think a more subtile styling would suffice here. You could try to go with text styling only to indicate the current menu item. (you did that pretty good at the project menu and at a projects configuration menu)

Yeah, I am not too pleased with the admin menu styling. It was a quick fix to override some horrid standard styling from a newish Redmine version, I believe. I'll be happy to see pull requests improving it.

Usage of gradients at many locations (subjective point, I personally think flat colors are less irritating and can be beautiful too

This is more a case of personal opinion and taste, I reckon. Suffice to say, I prefer it the way it is, with the flat version looking more bland and boring. I don't expect Pepper to change in this regard.

Go for consitency: You use lots of rounded corners, why not use a 3px radius for the projects configuration menu too?

I suppose you mean the .tabs element, which is visible on /projects/foo/settings? This element already has rounded corners, albeit not as much as the elements wrapping it. Being subordinate to its parent element it looks better when the corner radius is a little smaller than the parents corner radius.

Also, only the top corners are rounded, which is also deliberate. Rounded corners tend to group elements and separate them from other elements. However, the tabs should not be separated from the content area, which it controls, thus the corners toward the content area are flat.

I think the project selection dropdown would be better located at the topmost menu as it is not an option of the current project but an option of the application itself

I tend to agree. As I recall, however, placing it there caused considerable visual artifacts like flickering on every page load (perhaps only in some browsers), thus it's current location was deemed better. There has been some discussion on this over on #2, if you're interested. That said, I'd be happy to see pull requests improving this.

The :hover state of menu items in a projects configuration menu is not very readable, maybe the color of the currently active item and bold would do that

You're right, it could be better. The color change you propose is probably a better idea, but the bold will cause the width of the hovered element to change, causing all subsequent tab items to jump horizontally.

When you submit pull requests for the improvements you want to see implemented, please keep them small (preferably one improvement/fx per pull request). I'm looking forward to merging them.

[martinklepsch]

In web applications links that have been :visited should have the same color as unvisited links

There is a lot of value in :visited for Redmine; being able to see what issues you have visited in a long issues list and what links you have followed in the wiki come to mind.

While I understand your point I still think that this can be confusing to the user.
Also my point was directed to menus and this kind of stuff.

Usage of gradients at many locations (subjective point, I personally think flat colors are less irritating and can be beautiful too

This is more a case of personal opinion and taste, I reckon. Suffice to say, I prefer it the way it is, with the flat version looking more bland and boring. I don't expect Pepper to change in this regard.

It sure is. I just think you can reach a similar result with less contrast.

Go for consitency: You use lots of rounded corners, why not use a 3px radius for the projects configuration menu too?

I suppose you mean the .tabs element, which is visible on /projects/foo/settings? This element already has rounded >> corners, albeit not as much as the elements wrapping it. Being subordinate to its parent element it looks better when >> the corner radius is a little smaller than the parents corner radius.

Oh, you are right. Missed this somehow then.

The :hover state of menu items in a projects configuration menu is not very readable, maybe the color of the currently active item and bold would do that

You're right, it could be better. The color change you propose is probably a better idea, but the bold will cause the width of the hovered element to change, causing all subsequent tab items to jump horizontally.

Okay, good point. There'll be some other way then.