Merge pull request #3738 from mk84/21863-widget-box-styles-on-projects-overview

[21863] Widget-box styles on projects overview

app/assets/stylesheets/_misc_legacy.sass

@@ -639,3 +639,10 @@ h4.comment
 a.impaired--empty-link,
 .impaired--empty-link
   color: inherit
+
+/* Align widget boxes with description above on project overview */
+.project-overview
+  margin: 0 -1rem
+
+  .widget-box
+    margin-bottom: 20px

app/assets/stylesheets/content/_my_page.sass

@@ -50,6 +50,9 @@
     .widget-box
       margin-bottom: 20px
 
+      &:last-child
+        margin-bottom: 10px
+
 .handle
   cursor: move
 
@@ -79,10 +82,11 @@ div.box-actions
   .left, .right
     @extend .medium-6
 
-  .left
-    padding: 0 10px 0px 4px
-  .right
-    padding: 0 4px 0 10px
+  .widget-box
+    margin-bottom: 20px
+
+    &:last-child
+      margin-bottom: 10px
 
 .block-receiver
   border: 1px dashed $my-page-edit-box-border-color

app/assets/stylesheets/content/_widget_box.sass

@@ -55,6 +55,14 @@ $widget-box--enumeration-width: 20px
   .icon-context:before
     padding-right: 5px
 
+  &.grid-content
+    padding-left: 10px
+    padding-right: 10px
+
+    .widget-box
+      margin-left: 0
+      margin-right: 0
+
   .widget-box
     @include widget-box--style
     padding: 10px 20px 30px 20px

app/views/projects/_members_box.html.erb

@@ -28,8 +28,11 @@ See doc/COPYRIGHT.rdoc for more details.
 ++#%>
 
 <% if @users_by_role.any? %>
-  <div class="members content-box">
-    <h3><%=l(:label_member_plural)%></h3>
+  <div class="members widget-box">
+    <h3 class="widget-box--header">
+      <span class="icon-context icon-group"></span>
+      <span class="widget-box--header-title"><%=l(:label_member_plural)%></span>
+    </h3>
     <p>
       <% @users_by_role.sort.each do |role, users| %>
         <%= role %>: <%= users.sort.collect{ |u| link_to_user u }.join(", ").html_safe %><br />

app/views/projects/show.html.erb

@@ -31,27 +31,31 @@ See doc/COPYRIGHT.rdoc for more details.
 
 <% breadcrumb_paths(l(:label_overview)) %>
 
-<div class="grid-block medium-up-2">
-  <div class="grid-content">
-    <div class="wiki" ng-non-bindable>
-      <%= format_text @project.description %>
-    </div>
-    <ul>
-      <% if @subprojects.any? %>
-        <li>
-          <%= l(:label_subproject_plural) %>:
-          <%=raw @subprojects.map { |project| link_to(project.name, project) }.to_sentence %>
-        </li>
-      <% end %>
-      <% @project.visible_custom_field_values.each do |custom_value| %>
-        <% if custom_value.value.present? %>
-          <li><%= custom_value.custom_field.name %>: <%= show_value(custom_value) %></li>
-        <% end %>
-      <% end %>
-    </ul>
+<div class="wiki" ng-non-bindable>
+  <%= format_text @project.description %>
+</div>
+<ul>
+  <% if @subprojects.any? %>
+    <li>
+      <%= l(:label_subproject_plural) %>:
+      <%=raw @subprojects.map { |project| link_to(project.name, project) }.to_sentence %>
+    </li>
+  <% end %>
+  <% @project.visible_custom_field_values.each do |custom_value| %>
+    <% if custom_value.value.present? %>
+      <li><%= custom_value.custom_field.name %>: <%= show_value(custom_value) %></li>
+    <% end %>
+  <% end %>
+</ul>
+
+<div class="grid-block medium-up-2 project-overview">
+  <div class="grid-content widget-boxes">
     <% if User.current.allowed_to?(:view_work_packages, @project) %>
-      <div class="issues content-box">
-        <h3><%=l(:label_work_package_tracking)%></h3>
+      <div class="issues widget-box">
+        <h3 class="widget-box--header">
+          <span class="icon-context icon-tracker"></span>
+          <span class="widget-box--header-title"><%=l(:label_work_package_tracking)%></span>
+        </h3>
         <ul>
           <% for type in @types %>
             <li><%= link_to (type.is_standard) ? l(:default_type) : h(type.name),
@@ -72,12 +76,15 @@ See doc/COPYRIGHT.rdoc for more details.
     <%= call_hook(:view_projects_show_left, project: @project) %>
   </div>
 
-  <div class="grid-content">
+  <div class="grid-content widget-boxes">
     <%= render partial: 'members_box' %>
 
     <% if @news.any? && authorize_for('news', 'index') %>
-      <div class="news content-box">
-        <h3><%=l(:label_news_latest)%></h3>
+      <div class="news widget-box">
+        <h3 class="widget-box--header">
+          <span class="icon-context icon-news"></span>
+          <span class="widget-box--header-title"><%=l(:label_news_latest)%></span>
+        </h3>
         <%= render partial: 'news/news', collection: @news %>
         <p><%= link_to l(:label_news_view_all), {controller: '/news', action: 'index', project_id: @project}, class: 'button -highlight' %></p>
       </div>

features/projects/show.feature

@@ -45,7 +45,7 @@ Feature: Showing Projects
 
   Scenario: Calendar link in the 'tickets box' should work when calendar is activated
     When I go to the overview page of the project "omicronpersei8"
-    Then I should see "Calendar" within "#content .issues.content-box"
-    When I click on "Calendar" within "#content .issues.content-box"
+    Then I should see "Calendar" within "#content .issues.widget-box"
+    When I click on "Calendar" within "#content .issues.widget-box"
     Then I should see "Calendar" within ".title-container h2"
     And I should see "Sunday" within "#content > table.cal"