Restyle issue/mr/milestone to new layout

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/generic/issue_box.scss

 /**
- * Issue box:
- * Huge block (one per page) for storing title, descripion and other information.
+ * Issue box for showing Open/Closed state:
  * Used for Issue#show page, MergeRequest#show page etc
  *
- * CLasses:
- *   .issue-box - Regular box
  */
 
 .issue-box {
-  color: #555;
-  margin:20px 0;
-  background: $box_bg;
-  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.09));
+  display: inline-block;
+  padding: 0 10px;
 
   &.issue-box-closed {
-    .state {
-      background-color: #F3CECE;
-      border-color: $border_danger;
-    }
-    .state-label {
     background-color: $bg_danger;
     color: #FFF;
   }
-  }
 
   &.issue-box-merged {
-    .state {
-      background-color: #B7CEE7;
-      border-color: $border_primary;
-    }
-    .state-label {
     background-color: $bg_primary;
     color: #FFF;
   }
-  }
 
   &.issue-box-open {
-    .state {
-      background-color: #D6F1D7;
-      border-color: $bg_success;
-    }
-    .state-label {
     background-color: $bg_success;
     color: #FFF;
   }
-  }
 
   &.issue-box-expired {
-    .state {
-      background-color: #EEE9B3;
-      border-color: #faebcc;
-    }
-    .state-label {
     background: #cea61b;
     color: #FFF;
   }
-  }
-
-  .control-group {
-    margin-bottom: 0;
-  }
-
-  .state {
-    background-color: #f9f9f9;
-  }
-
-  .title {
-    font-size: 28px;
-    font-weight: normal;
-    line-height: 1.5;
-    margin: 0;
-    color: #333;
-    padding: 10px 15px;
-  }
-
-  .context {
-    border: none;
-    border-top: 1px solid #eee;
-    padding: 10px 15px;
-
-    // Reset text align for children
-    .text-right > * { text-align: left; }
-
-    @media (max-width: $screen-xs-max) {
-      // Don't right align on mobile
-      .text-right { text-align: left; }
-
-      .row .col-md-6 {
-        padding-top: 5px;
-      }
-    }
-  }
-
-  .description {
-    padding: 0 15px 10px 15px;
-
-    code {
-      white-space: pre-wrap;
-    }
-  }
-
-  .title, .context, .description {
-    .clearfix {
-      margin: 0;
-    }
-  }
-
-  .state-label {
-    font-size: 14px;
-    float: left;
-    font-weight: bold;
-    padding: 10px 15px;
-  }
-
-  .cross-project-ref {
-    float: left;
-    padding: 10px 15px;
-  }
-
-  .creator {
-    float: right;
-    padding: 10px 15px;
-    a {
-      text-decoration: underline;
-    }
-  }
 }

app/assets/stylesheets/sections/issues.scss

@@ -162,3 +162,7 @@ form.edit-issue {
     }
   }
 }
+
+.issue-title {
+  margin-top: 0;
+}

app/assets/stylesheets/sections/votes.scss

@@ -37,13 +37,3 @@
   margin: 0 8px;
 }
 
-.votes-holder {
-  float: right;
-  width: 250px;
-
-  @media (max-width: $screen-xs-max) {
-    width: 100%;
-    margin-top: 5px;
-    margin-bottom: 10px;
-  }
-}

app/views/projects/issues/_issue_context.html.haml

 = form_for [@project, @issue], remote: true, html: {class: 'edit-issue inline-update'} do |f|
-  .row
-    .col-sm-6
-      %strong.append-right-10
+  %div.prepend-top-20
+    %strong
       Assignee:
 
     - if can?(current_user, :modify_issue, @issue)
@@ -11,8 +10,8 @@
     - else
       None
 
-    .col-sm-6.text-right
-      %strong.append-right-10
+  %div.prepend-top-20
+    %strong
       Milestone:
     - if can?(current_user, :modify_issue, @issue)
       = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone" }, {class: 'select2 select2-compact js-select2 js-milestone'})

app/views/projects/issues/show.html.haml

 %h3.page-title
-  Issue ##{@issue.iid}
-
-  %span.pull-right.issue-btn-group
-    - if can?(current_user, :write_issue, @project)
-      = link_to new_project_issue_path(@project), class: "btn btn-grouped", title: "New Issue", id: "new_issue_link" do
-        %i.fa.fa-plus
-        New Issue
-    - if can?(current_user, :modify_issue, @issue)
-      - if @issue.closed?
-        = link_to 'Reopen', project_issue_path(@project, @issue, issue: {state_event: :reopen }, status_only: true), method: :put,  class: "btn btn-grouped btn-reopen"
-      - else
-        = link_to 'Close', project_issue_path(@project, @issue, issue: {state_event: :close }, status_only: true), method: :put, class: "btn btn-grouped btn-close", title: "Close Issue"
-
-      = link_to edit_project_issue_path(@project, @issue), class: "btn btn-grouped" do
-        %i.fa.fa-pencil-square-o
-        Edit
-
-.clearfix
-  .votes-holder
-    #votes= render 'votes/votes_block', votable: @issue
-
-  .back-link
-    = link_to project_issues_path(@project) do
-      ← To issues list
-    %span.milestone-nav-link
-      - if @issue.milestone
-        |
-        %span.light Milestone
-        = link_to project_milestone_path(@project, @issue.milestone) do
-          = @issue.milestone.title
-
-.issue-box{ class: issue_box_class(@issue) }
-  .state.clearfix
-    .state-label
+  .issue-box{ class: issue_box_class(@issue) }
     - if @issue.closed?
       Closed
     - else
       Open
-
-    .cross-project-ref
-      %i.fa.fa-link.has_tooltip{:"data-original-title" => 'Cross-project reference'}
-      = cross_project_reference(@project, @issue)
-
-    .creator
-      Created by #{link_to_member(@project, @issue.author)} #{issue_timestamp(@issue)}
-
-  %h4.title
+  Issue ##{@issue.iid}
+  .pull-right.creator
+    %small Created by #{link_to_member(@project, @issue.author)} #{issue_timestamp(@issue)}
+%hr
+.row
+  .col-sm-9
+    %h3.issue-title
       = gfm escape_once(@issue.title)
-
+    %div
       - if @issue.description.present?
         .description
           .wiki
             = preserve do
               = markdown(@issue.description, parse_tasks: true)
-  .context
-    %cite.cgray
-      = render partial: 'issue_context', locals: { issue: @issue }
-
-
-- content_for :note_actions do
+    %hr
+    - content_for :note_actions do
       - if can?(current_user, :modify_issue, @issue)
         - if @issue.closed?
           = link_to 'Reopen Issue', project_issue_path(@project, @issue, issue: {state_event: :reopen }, status_only: true), method: :put, class: "btn btn-grouped btn-reopen js-note-target-reopen", title: 'Reopen Issue'
         - else
           = link_to 'Close Issue', project_issue_path(@project, @issue, issue: {state_event: :close }, status_only: true), method: :put, class: "btn btn-grouped btn-close js-note-target-close", title: "Close Issue"
-
-.participants
+    .participants
       %cite.cgray
         = pluralize(@issue.participants.count, 'participant')
       - @issue.participants.each do |participant|
         = link_to_member(@project, participant, name: false, size: 24)
-
       .issue-show-labels.pull-right
         - @issue.labels.each do |label|
           = link_to project_issues_path(@project, label_name: label.name) do
             = render_colored_label(label)
 
-.voting_notes#notes= render "projects/notes/notes_with_form"
+    .voting_notes#notes= render "projects/notes/notes_with_form"
+  .col-sm-3
+    %div
+      - if can?(current_user, :write_issue, @project)
+        = link_to new_project_issue_path(@project), class: "btn btn-block", title: "New Issue", id: "new_issue_link" do
+          %i.fa.fa-plus
+          New Issue
+      - if can?(current_user, :modify_issue, @issue)
+        - if @issue.closed?
+          = link_to 'Reopen', project_issue_path(@project, @issue, issue: {state_event: :reopen }, status_only: true), method: :put,  class: "btn btn-block btn-reopen"
+        - else
+          = link_to 'Close', project_issue_path(@project, @issue, issue: {state_event: :close }, status_only: true), method: :put, class: "btn btn-block btn-close", title: "Close Issue"
+
+        = link_to edit_project_issue_path(@project, @issue), class: "btn btn-block" do
+          %i.fa.fa-pencil-square-o
+          Edit
+    .clearfix
+      %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
+        = cross_project_reference(@project, @issue)
+    %hr
+    .clearfix
+      .votes-holder
+        %h6 Votes
+        #votes= render 'votes/votes_block', votable: @issue
+    %hr
+    .context
+      %cite.cgray
+        = render partial: 'issue_context', locals: { issue: @issue }

app/views/projects/merge_requests/_show.html.haml

 .merge-request
   = render "projects/merge_requests/show/mr_title"
+  %hr
+  .row
+    .col-sm-9
       = render "projects/merge_requests/show/how_to_merge"
       = render "projects/merge_requests/show/mr_box"
+      %hr
+      .append-bottom-20
+        %p.slead
+          %span From
+          - if @merge_request.for_fork?
+            %strong.label-branch<
+              - if @merge_request.source_project
+                = link_to @merge_request.source_project_namespace, project_path(@merge_request.source_project)
+              - else
+                \ #{@merge_request.source_project_namespace}
+              \:#{@merge_request.source_branch}
+            %span into
+            %strong.label-branch #{@merge_request.target_project_namespace}:#{@merge_request.target_branch}
+          - else
+            %strong.label-branch #{@merge_request.source_branch}
+            %span into
+            %strong.label-branch #{@merge_request.target_branch}
       = render "projects/merge_requests/show/state_widget"
       = render "projects/merge_requests/show/commits"
       = render "projects/merge_requests/show/participants"
@@ -33,6 +53,38 @@
         = render "projects/notes/notes_with_form"
       .mr-loading-status
         = spinner
+    .col-sm-3
+      .issue-btn-group
+        - if can?(current_user, :modify_merge_request, @merge_request)
+          - if @merge_request.open?
+            .btn-group-justified.append-bottom-20
+              .btn-group
+                %a.btn.dropdown-toggle{ data: {toggle: :dropdown} }
+                  %i.fa.fa-download
+                  Download as
+                  %span.caret
+                %ul.dropdown-menu
+                  %li= link_to "Email Patches", project_merge_request_path(@project, @merge_request, format: :patch)
+                  %li= link_to "Plain Diff",    project_merge_request_path(@project, @merge_request, format: :diff)
+            = link_to 'Close', project_merge_request_path(@project, @merge_request, merge_request: { state_event: :close }), method: :put, class: "btn btn-block btn-close", title: "Close merge request"
+            = link_to edit_project_merge_request_path(@project, @merge_request), class: "btn btn-block", id:"edit_merge_request" do
+              %i.fa.fa-pencil-square-o
+              Edit
+          - if @merge_request.closed?
+            = link_to 'Reopen', project_merge_request_path(@project, @merge_request, merge_request: {state_event: :reopen }), method: :put, class: "btn btn-block btn-reopen reopen-mr-link", title: "Close merge request"
+      .clearfix
+        %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
+          = cross_project_reference(@project, @merge_request)
+      %hr
+      .votes-holder.hidden-sm.hidden-xs
+        %h6 Votes
+        #votes= render 'votes/votes_block', votable: @merge_request
+      %hr
+      .context
+        %cite.cgray
+          = render partial: 'projects/merge_requests/show/context', locals: { merge_request: @merge_request }
+
+
 
 :javascript
   var merge_request;

app/views/projects/merge_requests/show/_context.html.haml

 = form_for [@project, @merge_request], remote: true, html: {class: 'edit-merge_request inline-update'} do |f|
-  .row
-    .col-sm-6
-      %strong.append-right-10
+  %div.prepend-top-20
+    %strong
       Assignee:
 
     - if can?(current_user, :modify_merge_request, @merge_request)
@@ -11,8 +10,8 @@
     - else
       None
 
-    .col-sm-6.text-right
-      %strong.append-right-10
+  %div.prepend-top-20
+    %strong
       Milestone:
     - if can?(current_user, :modify_merge_request, @merge_request)
       = f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone" }, {class: 'select2 select2-compact js-select2 js-milestone'})

app/views/projects/merge_requests/show/_mr_box.html.haml

-.issue-box{ class: issue_box_class(@merge_request) }
-  .state.clearfix
-    .state-label
-      - if @merge_request.merged?
-        Merged
-      - elsif @merge_request.closed?
-        Closed
-      - else
-        Open
-
-    .cross-project-ref
-      %i.fa.fa-link.has_tooltip{:"data-original-title" => 'Cross-project reference'}
-      = cross_project_reference(@project, @merge_request)
-
-    .creator
-      Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}
-
-  %h4.title
+%h3.issue-title
   = gfm escape_once(@merge_request.title)
 
+%div
   - if @merge_request.description.present?
     .description
       .wiki
         = preserve do
           = markdown(@merge_request.description, parse_tasks: true)
-
-  .context
-    %cite.cgray
-      = render partial: 'projects/merge_requests/show/context', locals: { merge_request: @merge_request }

app/views/projects/merge_requests/show/_mr_title.html.haml

 %h3.page-title
-  = "Merge Request ##{@merge_request.iid}"
-
-  %span.pull-right.issue-btn-group
-    - if can?(current_user, :modify_merge_request, @merge_request)
-      - if @merge_request.open?
-        .btn-group.pull-left
-          %a.btn.btn-grouped.dropdown-toggle{ data: {toggle: :dropdown} }
-            %i.fa.fa-download
-            Download as
-            %span.caret
-          %ul.dropdown-menu
-            %li= link_to "Email Patches", project_merge_request_path(@project, @merge_request, format: :patch)
-            %li= link_to "Plain Diff",    project_merge_request_path(@project, @merge_request, format: :diff)
-
-        = link_to 'Close', project_merge_request_path(@project, @merge_request, merge_request: { state_event: :close }), method: :put, class: "btn btn-grouped btn-close", title: "Close merge request"
-
-        = link_to edit_project_merge_request_path(@project, @merge_request), class: "btn btn-grouped", id:"edit_merge_request" do
-          %i.fa.fa-pencil-square-o
-          Edit
-      - if @merge_request.closed?
-        = link_to 'Reopen', project_merge_request_path(@project, @merge_request, merge_request: {state_event: :reopen }), method: :put, class: "btn btn-grouped btn-reopen reopen-mr-link", title: "Close merge request"
-
-.votes-holder.hidden-sm.hidden-xs
-  #votes= render 'votes/votes_block', votable: @merge_request
-
-.back-link
-  = link_to project_merge_requests_path(@project) do
-    ← To merge requests
-
-  %span.prepend-left-20
-    %span From
-    - if @merge_request.for_fork?
-      %strong.label-branch<
-        - if @merge_request.source_project
-          = link_to @merge_request.source_project_namespace, project_path(@merge_request.source_project)
-        - else
-          \ #{@merge_request.source_project_namespace}
-        \:#{@merge_request.source_branch}
-      %span into
-      %strong.label-branch #{@merge_request.target_project_namespace}:#{@merge_request.target_branch}
+  .issue-box{ class: issue_box_class(@merge_request) }
+    - if @merge_request.merged?
+      Merged
+    - elsif @merge_request.closed?
+      Closed
     - else
-      %strong.label-branch #{@merge_request.source_branch}
-      %span into
-      %strong.label-branch #{@merge_request.target_branch}
+      Open
+  = "Merge Request ##{@merge_request.iid}"
+  .pull-right.creator
+    %small Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}

app/views/projects/milestones/show.html.haml

 = render "projects/issues_nav"
 %h3.page-title
-  Milestone ##{@milestone.iid}
-  .pull-right
-    - if can?(current_user, :admin_milestone, @project)
-      = link_to edit_project_milestone_path(@project, @milestone), class: "btn btn-grouped" do
-        %i.fa.fa-pencil-square-o
-        Edit
-      - if @milestone.active?
-        = link_to 'Close Milestone', project_milestone_path(@project, @milestone, milestone: {state_event: :close }), method: :put, class: "btn btn-close btn-grouped"
-      - else
-        = link_to 'Reopen Milestone', project_milestone_path(@project, @milestone, milestone: {state_event: :activate }), method: :put, class: "btn btn-reopen btn-grouped"
-
-- if @milestone.issues.any? && @milestone.can_be_closed?
-  .alert.alert-success
-    %span All issues for this milestone are closed. You may close milestone now.
-
-.back-link
-  = link_to project_milestones_path(@project) do
-    ← To milestones list
-
-
-.issue-box{ class: issue_box_class(@milestone) }
-  .state.clearfix
-    .state-label
+  .issue-box{ class: issue_box_class(@milestone) }
     - if @milestone.closed?
       Closed
     - elsif @milestone.expired?
       Expired
     - else
       Open
-    .creator
-      = @milestone.expires_at
+  Milestone ##{@milestone.iid}
+  .pull-right.creator
+    %small= @milestone.expires_at
 
-  %h4.title
+%hr
+- if @milestone.issues.any? && @milestone.can_be_closed?
+  .alert.alert-success
+    %span All issues for this milestone are closed. You may close milestone now.
+.row
+  .col-sm-9
+    %h3.issue-title
       = gfm escape_once(@milestone.title)
-
+    %div
       - if @milestone.description.present?
         .description
           .wiki
             = preserve do
               = markdown @milestone.description
 
+    %hr
     .context
-    %p
+      %p.lead
         Progress:
         #{@milestone.closed_items_count} closed
         –
@@ -53,6 +39,22 @@
       .progress.progress-info
         .progress-bar{style: "width: #{@milestone.percent_complete}%;"}
 
+  .col-sm-3
+    %div
+      - if can?(current_user, :admin_milestone, @project)
+        = link_to edit_project_milestone_path(@project, @milestone), class: "btn btn-block" do
+          %i.fa.fa-pencil-square-o
+          Edit
+        - if @milestone.active?
+          = link_to 'Close Milestone', project_milestone_path(@project, @milestone, milestone: {state_event: :close }), method: :put, class: "btn btn-close btn-block"
+        - else
+          = link_to 'Reopen Milestone', project_milestone_path(@project, @milestone, milestone: {state_event: :activate }), method: :put, class: "btn btn-reopen btn-block"
+      = link_to new_project_issue_path(@project, issue: { milestone_id: @milestone.id }), class: "btn  btn-block", title: "New Issue" do
+        %i.fa.fa-plus
+        New Issue
+      = link_to 'Browse Issues', project_issues_path(@milestone.project, milestone_id: @milestone.id), class: "btn  edit-milestone-link btn-block"
+
+
 
 %ul.nav.nav-tabs
   %li.active
@@ -69,10 +71,6 @@
       %span.badge= @users.count
 
   .pull-right
-    = link_to new_project_issue_path(@project, issue: { milestone_id: @milestone.id }), class: "btn btn-small btn-grouped", title: "New Issue" do
-      %i.fa.fa-plus
-      New Issue
-    = link_to 'Browse Issues', project_issues_path(@milestone.project, milestone_id: @milestone.id), class: "btn btn-small edit-milestone-link btn-grouped"
 
 .tab-content
   .tab-pane.active#tab-issues