Wrap "splitcontentright" and "splitcontentleft" containers with a flexbox (#30168).

Patch by Max Johansson.


git-svn-id: http://svn.redmine.org/redmine/trunk@17790 e93f8b46-1217-0410-a6f0-8f06a7374b81

app/views/custom_fields/_form.html.erb

@@ -1,5 +1,6 @@
 <%= error_messages_for 'custom_field' %>
 
+<div class="splitcontent">
 <div class="splitcontentleft">
 <div class="box tabular">
 <p><%= f.select :field_format, custom_field_formats_for_select(@custom_field), {}, :disabled => !@custom_field.new_record? %></p>
@@ -127,5 +128,6 @@ when "IssueCustomField" %>
   </fieldset>
 <% end %>
 </div>
+</div>
 
 <% include_calendar_headers_tags %>

app/views/issues/bulk_edit.html.erb

@@ -28,6 +28,7 @@
 <fieldset class="attributes">
 <legend><%= l(:label_change_properties) %></legend>
 
+<div class="splitcontent">
 <div class="splitcontentleft">
 <% if @allowed_projects.present? %>
 <p>
@@ -188,6 +189,7 @@
 </p>
 <% end %>
 </div>
+</div>
 </fieldset>
 
 <fieldset>

app/views/my/account.html.erb

@@ -15,6 +15,7 @@
                      :url => { :action => "account" },
                      :html => { :id => 'my_account_form',
                                 :method => :post, :multipart => true } do |f| %>
+<div class="splitcontent">
 <div class="splitcontentleft">
 <fieldset class="box tabular">
   <legend><%=l(:label_information_plural)%></legend>
@@ -51,6 +52,7 @@
 
 <p class="mobile-show"><%= submit_tag l(:button_save) %></p>
 </div>
+</div>
 <% end %>
 
 <% content_for :sidebar do %>

app/views/my/page.html.erb

@@ -8,12 +8,14 @@
 <h2><%=l(:label_my_page)%></h2>
 
 <div id="my-page">
+<div class="splitcontent">
 <% @groups.each do |group| %>
   <div id="list-<%= group %>" class="block-receiver">
     <%= render_blocks(@blocks[group], @user) %>
   </div>
 <% end %>
 </div>
+</div>
 
 <%= context_menu %>
 

app/views/projects/show.html.erb

@@ -17,6 +17,7 @@
   <p class="warning"><span class="icon icon-lock"><%= l(:text_project_closed) %></span></p>
 <% end %>
 
+<div class="splitcontent">
 <div class="splitcontentleft">
   <% if @project.description.present? %>
   <div class="wiki">
@@ -118,6 +119,7 @@
 
   <%= call_hook(:view_projects_show_right, :project => @project) %>
 </div>
+</div>
 
 <% content_for :sidebar do %>
   <%= call_hook(:view_projects_show_sidebar_bottom, :project => @project) %>

app/views/reports/issue_report.html.erb

@@ -1,5 +1,6 @@
 <h2><%=l(:label_report_plural)%></h2>
 
+<div class="splitcontent">
 <div class="splitcontentleft">
 <h3>
   <%=l(:field_tracker)%>&nbsp;
@@ -72,4 +73,4 @@
 <br />
 <%= call_hook(:view_reports_issue_report_split_content_right, :project => @project) %>
 </div>
-
+</div>

app/views/trackers/_form.html.erb

@@ -1,5 +1,6 @@
 <%= error_messages_for 'tracker' %>
 
+<div class="splitcontent">
 <div class="splitcontentleft">
 <div class="box tabular">
 <!--[form:tracker]-->
@@ -55,3 +56,4 @@ end %>
 </fieldset>
 <% end %>
 </div>
+</div>

app/views/users/_form.html.erb

@@ -2,6 +2,7 @@
 
 <div id="user_form">
 <!--[form:user]-->
+<div class="splitcontent">
 <div class="splitcontentleft">
 <fieldset class="box tabular">
   <legend><%=l(:label_information_plural)%></legend>
@@ -52,6 +53,7 @@
 </fieldset>
 </div>
 </div>
+</div>
 <div style="clear:left;"></div>
 <!--[eoform:user]-->
 

app/views/users/show.html.erb

@@ -4,6 +4,7 @@
 
 <h2><%= avatar @user, :size => "50" %> <%= @user.name %></h2>
 
+<div class="splitcontent">
 <div class="splitcontentleft">
 <ul>
   <li><%=l(:field_login)%>: <%= @user.login %></li>
@@ -61,5 +62,5 @@
 <% end %>
 <%= call_hook :view_account_right_bottom, :user => @user %>
 </div>
-
+</div>
 <% html_title @user.name %>

app/views/welcome/index.html.erb

@@ -1,5 +1,6 @@
 <h2><%= l(:label_home) %></h2>
 
+<div class="splitcontent">
 <div class="splitcontentleft">
   <div class="wiki">
     <%= textilizable Setting.welcome_text %>
@@ -17,6 +18,7 @@
   <% end %>
   <%= call_hook(:view_welcome_index_right) %>
 </div>
+</div>
 
 <% content_for :header_tags do %>
 <%= auto_discovery_link_tag(:atom, {:controller => 'news', :action => 'index', :key => User.current.rss_key, :format => 'atom'},

public/stylesheets/application.css

@@ -441,9 +441,10 @@ div.square {
 .contextual input, .contextual select {font-size:0.9em;}
 .message .contextual { margin-top: 0; }
 
-.splitcontent {overflow:auto;}
+.splitcontent {overflow: auto; display: flex; flex-wrap: wrap;}
-.splitcontentleft, #list-left {float:left; width:49%;}
+.splitcontentleft, #list-left {flex: 1; margin-right: 5px;}
-.splitcontentright, #list-right {float:right; width:49%;}
+.splitcontentright, #list-right {flex: 1; margin-left: 5px;}
+#list-top {width: 100%;}
 form {display: inline;}
 input, select {vertical-align: middle; margin-top: 1px; margin-bottom: 1px;}
 input[type="submit"] { -webkit-appearance: button; }

public/stylesheets/responsive.css

@@ -219,10 +219,14 @@
 
   .splitcontentleft, #list-left {
     width: 100%;
+    flex: auto;
+    margin-right: 0;
   }
 
   .splitcontentright, #list-right {
     width: 100%;
+    flex: auto;
+    margin-left: 0;
   }
 
   /*----------------------------------------*\
@@ -855,4 +859,3 @@
 
   #login-form {width:100%; margin-top:2em;}
 }
-