Redmine

Uploaded a patch (my first one, hopefully I did all correctly...), if I did overlook some elements which should probably also be wrapped, please do inform :)
To test: Go to my page or my account page and resize your browser window horizontally, you will see that split blocks will now keep the same distance from each other.
edit: preview doesn't seem to work potentially due to windows (CR-LF) line breaks.

Uploading alternative one just in case (hopefully this one generated well).

I think flexbox is not bad at all if it works with IE 11. Thank you for checking the compatibility with IE.

IMHO it is OK to include the patch in Redmine 4.1.0.

For consistency, I think it should be fixed as Max suggested. Setting the target version to 4.1.0.

Felix Gliesche wrote:

@Go MAEDA: is IE 11 officially the minimum IE requirement?

As far as I know, the minimum IE requirement is not officially defined. But I think we don't have to support IE <11 because those are no longer supported by Microsoft (they still support IE 9 and 10 on old Windows servers but the market share of those browsers should be very small).

Committed the patch. Thank you for improving Redmine.

Max, what do you think if we do not mix the splitcontent class with other elements that do not have splitcontentleft and splitcontentright classes? I'm referring at My Page layout where the children of splitcontent have list-left and list-right ids (and to add those classes is a little bit too complicated).

I think that the above patch will make the layout more consistent:

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index fa59d6a..f4b48a4 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -441,10 +441,11 @@ div.square {
 .contextual input, .contextual select {font-size:0.9em;}
 .message .contextual { margin-top: 0; }

-.splitcontent {overflow: auto; display: flex; flex-wrap: wrap;}
+.splitcontent, #my-page {overflow: auto; display: flex; flex-wrap: wrap;}
 .splitcontentleft, #list-left {flex: 1; margin-right: 5px;}
 .splitcontentright, #list-right {flex: 1; margin-left: 5px;}
-#list-top {width: 100%;}
+#list-top {flex: 2; flex-basis: 100%;}

Also, what do you think about replacing width: 100% with flex:2; flex-basis: 100%;?

Max Johansson wrote:

1. The patch already wraps #list-left and #list-right with .splitcontent block in app/views/my/page.html.erb so .splitcontent, #my-page {overflow: auto; display: flex; flex-wrap: wrap;} will spawn a double flexbox, and I am not sure if it's good :(
I think if we re to change from:
[...]

To

[...]

Sorry Max, I've totally forgot to attach to my note the full patch that contains also the removal of the new splitcontent div from my page.

and then also give #list-left and #list-right the .splitcontentleft and .splitcontentright classes in addition to their ids, it will be much better, I'm just not sure how complicated this can be because I haven't yet researched it, so I'll do some tests in the evening. :)
I think we should avoid styling the repeating elements by their IDs as much as we can, if we re to achieve 100% True Jedi Consistency and also enable the ability for these types of containers to be reusable and with the same expected behavior everywhere, so plugin developers who are to design their own views could reuse classes and wouldn't be confused by their behavior.

I also think in case of my page, IDs are there strictly only for binding purposes in jQuery to enable things like block swapping (for the most part atleast).

2. I agree with replacing #list-top {flex: 2; flex-basis: 100%;} and also think it's a nice addition. Maybe we might also need to introduce .splitcontenttop class as well, as again, it could be useful to reuse for plugin developers. Many things could be reusable actually, like tool tips and numerous other little things. But that's another due story I guess :)

Totally agree with you and having a second thought on this, it was much easier than I expected to add the splitcontent* classes to my page layout, please view the attached patch (which obsoletes my previous proposal and covers most of our requirements).

I tested and it looks good :)
Maybe responsive.css also might need minor corrections.

Marius BALTEANU wrote:

Thanks for testing it and for pointing out the changes for responsive.css. I tried to apply your patch on top of my patch, but it doesn't apply cleanly.

Is it probably because of the version conflict? use_splitcontent_in_my_page_responsive_fix.patch needs to be applied over the splitcontent-wrapper-fix-unix-spacesfix.diff patch, else it might not find lines :)

Anyway, I think that we should write the styles for responsive only one time instead of duplicating them and we need as well to set margin-right to 0 (otherwise you will have a 5px margin for splitcontentleft element).

I think it's a much cleaner solution too, so adding a patch for it now, it should also be applied over already applied splitcontent-wrapper-fix-unix-spacesfix.diff
After that, I think we re generally done with this issue for now and should apply these hotfixes, commit and re close this issue asap. :)

Remade this patch against very recent trunk, should be working, if not, please inform me (it looks the same as last one, though :( ) :)
I reverted and tested to apply it, it worked for me to apply it cleanly to the most recent development trunk.

Committed Max's splitcontent_responsive_fixed_fix.patch. Thanks.