Merge remote-tracking branch 'origin/dev' into feature/rails5

app/assets/stylesheets/_work_packages_show_view_overwrite.scss

@@ -31,26 +31,62 @@ body.controller-work_packages.action-show {
 }
 
 .work-packages--show-view {
+  display: flex;
+  flex-direction: column;
+  height: inherit;
 
   #toolbar {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap-reverse;
     @include clearfix;
   }
 
   .toolbar-container {
     @include clearfix;
     margin-bottom: 20px;
+    padding-right: 20px;
+  }
+
+
+  ul#toolbar-items {
+    @include clearfix;
+    order: 2;
+    margin: 0 0 1rem 2rem;
+
+    button {
+      margin-bottom: 0;
+    }
+
+    li {
+      float: left;
+      position: relative;
+
+      &.toolbar-item:first-of-type {
+        margin-left: 0;
+      }
+
+      .dropdown {
+        top: 100% !important;
+        right: 0px !important;
+        left: auto !important;
+        margin-top: 0;
+
+        ul li {
+          float: none;
+        }
+      }
+    }
   }
 
   .work-packages--split-view {
-    height: auto;
+    flex-shrink: 8;
     border-top: 1px solid #ccc;
-    overflow: hidden;
-    position: absolute;
-    padding-right: 20px;
-    top: 76px;
-    left: 20px;
-    right: 0px;
-    bottom: 0px;
+    overflow: visible;
+    // Important for Safari
+    height: initial;
+    // Important for Firefox to let 'flex-shrink' work correctly.
+    min-height: 0;
 
     &[cg-busy] {
       overflow: visible;
@@ -104,10 +140,6 @@ body.controller-work_packages.action-show {
     }
   }
 
-  .work-packages--split-view {
-    overflow: visible !important;
-  }
-
   .work-packages--right-panel {
     min-width: 420px;
     overflow-y: auto;
@@ -146,31 +178,6 @@ body.controller-work_packages.action-show {
     ul { padding-left: 2em; }
   }
 
-  ul#toolbar-items {
-    @include clearfix;
-    float: right;
-
-    button {
-      margin-bottom: 0;
-    }
-
-    li {
-      float: left;
-      position: relative;
-
-      .dropdown {
-        top: 100% !important;
-        right: 0px !important;
-        left: auto !important;
-        margin-top: 0;
-
-        ul li {
-          float: none;
-        }
-      }
-    }
-  }
-
   .activity-comment {
     margin-top: 15px;
   }
@@ -203,6 +210,21 @@ body.controller-work_packages.action-show {
   }
 }
 
+@media only screen and (max-width: 78rem) {
+  .work-packages--show-view {
+    // Important for Safari
+    height: initial;
+  }
+}
+
+@media only screen and (max-width: 679px) {
+  #toolbar {
+    #toolbar-items {
+      margin-left: 0;
+    }
+  }
+}
+
 #work-packages-index {
   .wiki-anchor {
     display: none;
@@ -210,19 +232,17 @@ body.controller-work_packages.action-show {
 }
 
 .work-packages--show-view {
-  padding-right: 20px;
-
   .subject-header {
-    float: left;
-    margin-right: -470px;
-    margin-top: 0;
-    padding: 10px 470px 0 0;
-    width: 100%;
-
-    .subject-header-inner {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 100%;
+    margin: 0;
+    padding: 0;
+    min-height: 50px;
+    width: initial;
+    align-self: center;
+    flex-grow: 1;
+
+
+    .wp-table--cell-span {
+      white-space: normal;
     }
 
     li .inline-edit { width: 100%; }

app/assets/stylesheets/content/_forms.sass

@@ -147,6 +147,9 @@ $form--field-types: (text-field, text-area, select, check-box, radio-button, ran
     width: 1rem
     z-index: 2
 
+  .-columns-2
+    column-count: 2
+
 .form--separator
   border: 0
   border-bottom: 1px solid $content-form-separator-color

app/views/roles/_form.html.erb

@@ -30,10 +30,10 @@ See doc/COPYRIGHT.rdoc for more details.
 <%= error_messages_for 'role' %>
 
 <% unless @role.builtin? %>
-  <section class="form--section">
-    <div class="form--field"><%= f.text_field :name, required: true %></div>
-    <div class="form--field"><%= f.check_box :assignable %></div>
-    <% if @role.new_record? && @roles.any? %>
+  <div class="form--field"><%= f.text_field :name, required: true %></div>
+  <div class="form--field"><%= f.check_box :assignable %></div>
+  <% if @role.new_record? && @roles.any? %>
+    <div id="member_attributes">
       <div class="form--field">
         <%= styled_label_tag 'copy_workflow_from', l(:label_copy_workflow_from) %>
         <div class="form--field-container">
@@ -41,15 +41,15 @@ See doc/COPYRIGHT.rdoc for more details.
                 content_tag("option") + options_from_collection_for_select(@roles, :id, :name)) %>
         </div>
       </div>
-    <% end %>
-  </section>
+    </div>
+  <% end %>
 <% end %>
 
-<h3 class="form--section-title"><%= l(:label_permissions) %></h3>
-<section class="form--section" id="permissions">
-  <div class="grid-block small-up-2 medium-up-3 large-up-4">
-    <% perms_by_module = @permissions.group_by {|p| p.project_module.to_s} %>
-    <% perms_by_module.keys.sort.each do |mod| %>
+<div id="member_permissions">
+  <% perms_by_module = @permissions.group_by {|p| p.project_module.to_s} %>
+  <% perms_by_module.keys.sort.each do |mod| %>
+    <% module_name = mod.blank? ? 'fieldset--' + Project.model_name.human.downcase.gsub(' ', '_') : 'fieldset--' + l_or_humanize(mod, prefix: 'project_module_').downcase.gsub(' ', '_') %>
+    <fieldset class="form--fieldset -collapsible" id="<%= module_name %>">
       <% module_name = mod.blank? ? "form--" + I18n.t('attributes.project') : "form--" + l_or_humanize(mod, prefix: 'project_module_').gsub(' ','_') %>
       <div class="grid-section">
         <fieldset class="form--fieldset -collapsible" id= "<%= module_name %>">
@@ -59,17 +59,20 @@ See doc/COPYRIGHT.rdoc for more details.
               (<%= check_all_links module_name %>)
             </span>
           </div>
-          <div class="autoscroll">
+          <div class="-columns-2">
             <% perms_by_module[mod].each do |permission| %>
-              <label class="form--label-with-check-box">
-                <%= styled_check_box_tag 'role[permissions][]', permission.name, (@role.permissions.include? permission.name) %>
-                <%= l_or_humanize(permission.name, prefix: 'permission_') %>
-              </label>
+              <div class="form--field autoscroll -trailing-label ">
+                <label class="form--label">
+                  <%= l_or_humanize(permission.name, prefix: 'permission_') %>
+                </label>
+                <div class="form--field-container">
+                  <%= styled_check_box_tag 'role[permissions][]', permission.name, (@role.permissions.include? permission.name) %>
+                </div>
+              </div>
             <% end %>
           </div>
         </fieldset>
       </div>
-    <% end %>
-  </div>
-  <%= check_all_links 'permissions' %>
-</section>
+    </fieldset>
+  <% end %>
+</div>