Redmine

Please do not commit because I want to test more these changes. I looked yesterday for few seconds and I saw some problems.

The patch looks good to me, although I'm not sure if the width is sufficient for the text length of everbody's saved queries. It also wraps the heading of "Custom queries" if you choose German ( it's "Benutzerdefinierte Abfragen" ) as interface language. No big deal to me but I think it's worth mentioning.

Overall, I think the patch is a great improvement.

+1

I'm also wondering about the nature of this rule, does anybody have idea what it should do?

* html #content{ width: 75%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}

because in the default version, just one line above it would already be defined as:

#content{ width: 75%; padding-left: 0; margin-top: 0px; padding: 6px 10px 10px 10px;}

I have a feeling, Internet Explorer is guilty :)

In my environment, the #content loads first with 100% width and right after, the sidebar which makes the screen "shakes".

I think width: 22% will anyway often exceed it's maximum limitation of max-width, maybe we could try min-width: 220px and max-width: 280px or 300px?
In theory sidebar's content should then expand the sidebar in width within these margins a bit depending on what it contains. :)

There is a gridbox design suggestion now pending for further discussion, so this ticket will be affected if we will decide to move #main-menu inside #main container, ultimately making this patch obsolete, because it will then become a 3 tiled gridbox instead of a flexbox. Please see #30451#note-6 for reference.

Max Johansson wrote:

I think it will be better to ignore #30451 for now, so attaching the patch with min-width and max-width rules for the sidebar, the content of the sidebar will now expand it up to 340px if contains long elements, if there is no need, it will reduce up to 220px.

Thank you for the patch. Narrower sidebar than the current implementation should be nice for many people.

I tried the patch but I found that the sidebar hardly expands even if there is a custom query with a long name and the width of the browser window is around 1800px. With my Firefox, the width of the sidebar is 261px at 1024px window and 271px at 1800px window.

How can I see a sidebar with a width of 340px?

Go MAEDA wrote:

I tested main-block-fixes-no-swap-min-max_no_shrink.diff.

When there is a query with a long name, the sidebar became too large even in small screens and the left side of the page is cropped.

It is because of the missing width: 22%; rule.

The patch sets a min-width of 220px and a max-width of 340px for longer query names as it was constrained by Max in #30435#note-13.
By setting the width to 22% again we're loosing space on higher resolutions as the sidebar grows to its max-width even if there's no need to.
It can make a difference up to 120px which can give you an extra column in the issues list or an extra month on the gantt chart.

On the other hand I have to admit that 340px can be too big on small screens (37% @900px). It affects resolutions between 900px and around 1500px.
It just slightly affects the higher resolutions e.g. 1377px so should we consider to set the width only for smaller resolutions? What are your thoughts on this?

Bernhard Rohloff wrote:

By setting the width to 22% again we're loosing space on higher resolutions as the sidebar grows to its max-width even if there's no need to.

What I tried to explain in #30435#note-10, but thanks for doing it more clearly. :)

On the other hand I have to admit that 340px can be too big on small screens (37% @900px). It affects resolutions between 900px and around 1500px.
It just slightly affects the higher resolutions e.g. 1377px so should we consider to set the width only for smaller resolutions? What are your thoughts on this?

I propose to either:
1. Create adaptive rules then where we d set max width of the sidebar for different screen sizes/resolutions like so:
Иван Савенко screen and (min-width: 1400px) {#sidebar{max-width:340px;}
Иван Савенко screen and (min-width: 1200px) {#sidebar{max-width:280px;}
Иван Савенко screen and (min-width: 1000px) {#sidebar{max-width:220px;}

I don't have different displays at the moment to test this, perhaps I'll have to do it with setting other lower resolutions of my 1920x1080 native display, I will post an update when tests will be done then and post the patch.

2. Limit the length of the names of custom queries instead and then skip all the adaptive rules.
3. Or move queries away from the sidebar into a more lucky location and again skip all the adaptiveness, because frankly IMHO sidebar isn't the most successful place for the menu objects which allow for ridiculously ultra-long titles.

Max Johansson wrote:

I propose to either:
1. Create adaptive rules then where we d set max width of the sidebar for different screen sizes/resolutions like so:
Иван Савенко screen and (min-width: 1400px) {#sidebar{max-width:340px;}
Иван Савенко screen and (min-width: 1200px) {#sidebar{max-width:280px;}
Иван Савенко screen and (min-width: 1000px) {#sidebar{max-width:220px;}

I don't have different displays at the moment to test this, perhaps I'll have to do it with setting other lower resolutions of my 1920x1080 native display, I will post an update when tests will be done then and post the patch.

Don't bother with fiddling around in your screen settings. You can test it easily with the builtin dev tools of you browser of choice. Nowadays they all have an option to test multiple screen sizes.
This is IMHO my prefered solution.

2. Limit the length of the names of custom queries instead and then skip all the adaptive rules.

I think this doesn't meet the requirements.

3. Or move queries away from the sidebar into a more lucky location and again skip all the adaptiveness, because frankly IMHO sidebar isn't the most successful place for the menu objects which allow for ridiculously ultra-long titles.

As im not a fan of the sidebar at all this would be my favorite solution. But it requires a lot more effort and discussion so I think this can't be an option for this feature, right now.

The below patch fixes the problem for me:

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 09bcd5b..79cf1d0 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -92,7 +92,7 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 #sidebar div.wiki ul {margin:inherit; padding-left:40px;}
 #sidebar div.wiki ul li {list-style-type:inherit;}

-#content { flex-grow: 1; background-color: #fff; margin: 0px; padding: 6px 10px 10px 10px; }
+#content { flex-grow: 1; background-color: #fff; margin: 0px; padding: 6px 10px 10px 10px; overflow-x: auto;}
 html>body #content { min-height: 600px; }
 * html body #content { height: 600px; } /* IE */

Bernhard Ganslmeier, is it ok for you this fix?

Marius BALTEANU wrote:

The below patch fixes the problem for me:

[...]

Bernhard Ganslmeier, is it ok for you this fix?

Thank you for sharing the patch.
I confirmed that the layout on medium-sized screens( #30435#note-24, /issues and /time_entries pages) does not break by applying your patch.

I also tested the fix and it works for me, too.

I created a new issue #32037, please add it as related to this one, because part of important discussion was started in here. :)