Merge branch 'mobile_issues' into 'master'

Improve issue and MR mobile UI Improve the mobile UI for issues and merge requests. To make use of Bootstrap's column grid this also slightly alters the current desktop UI. Namely, the state box is slightly wider and is a 2-column width rather than being a fixed width. This makes it so we can easily break the row into 2 lines on mobile. ### Current UI [Mobile Current](https://www.dropbox.com/s/z3wai49rmo1hwoo/Screen%20Shot%202014-05-02%20at%205.32.45%20PM.png) [Desktop Current](https://www.dropbox.com/s/pwbg9hm3dqft19p/Screen%20Shot%202014-05-02%20at%205.36.10%20PM.png) ### Proposed UI [Mobile Proposed](https://www.dropbox.com/s/csb4xny28jlll0l/Screen%20Shot%202014-05-02%20at%205.28.35%20PM.png) [Desktop Proposed](https://www.dropbox.com/s/pb64wzbh75jb9s4/Screen%20Shot%202014-05-02%20at%205.30.23%20PM.png)
2014-05-06 06:27:02 +00:00 · 2014-05-06 06:27:02 +00:00 · 478d6bd479
parent fd7a221cca ad0f5fdc27
commit 478d6bd479
9 changed files with 119 additions and 59 deletions
--- a/1
+++ b/1
@ -8,6 +8,7 @@ v 6.9.0
  - Fix syntax highlighting for code comments blocks
  - Improve comments loading logic
  - Stop refreshing comments when the tab is hidden
+  - Improve issue and merge request mobile UI (Drew Blessing)

 v 6.8.0
  - Ability to at mention users that are participating in issue and merge req. discussion
--- a/app/assets/stylesheets/generic/issue_box.scss
+++ b/app/assets/stylesheets/generic/issue_box.scss
@ -70,7 +70,6 @@
  }

  .state {
-    height: 34px;
    border-bottom: 1px solid #DDD;
    line-height: 32px;
  }
@ -89,6 +88,18 @@
    border: none;
    border-top: 1px solid #eee;
    padding: 15px 25px;
+
+    // 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 {
@ -106,7 +117,11 @@
    padding: 1px 25px;
    text-align: center;
    text-shadow: none;
-    margin-right: 20px;
    display: inline-block;
+    line-height: 34px;
+  }
+
+  .creator {
+    padding: 2px 15px;
  }
 }
--- a/app/assets/stylesheets/sections/issues.scss
+++ b/app/assets/stylesheets/sections/issues.scss
@ -143,3 +143,36 @@ form.edit-issue {
    border-color: #E5E5E5;
  }
 }
+
+@media (max-width: $screen-xs-max) {
+  .issue-btn-group {
+    width: 100%;
+    margin-top: 5px;
+
+    .btn-group {
+      width: 100%;
+
+      ul {
+        width: 100%;
+        text-align: center;
+      }
+    }
+
+    .btn {
+      width: 100%;
+      margin-top: -1px;
+
+      &:first-child:not(:last-child) {
+        border-radius: 4px 4px 0 0;
+      }
+
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+      }
+
+      &:last-child:not(:first-child) {
+        border-radius: 0 0 4px 4px;
+      }
+    }
+  }
+}
--- a/app/assets/stylesheets/sections/votes.scss
+++ b/app/assets/stylesheets/sections/votes.scss
@ -40,4 +40,10 @@
 .votes-holder {
  float: right;
  width: 250px;
+
+  @media (max-width: $screen-xs-max) {
+    width: 100%;
+    margin-top: 5px;
+    margin-bottom: 10px;
+  }
 }
--- a/app/views/projects/issues/_issue_context.html.haml
+++ b/app/views/projects/issues/_issue_context.html.haml
@ -1,22 +1,24 @@
 = form_for [@project, @issue], remote: true, html: {class: 'edit-issue inline-update'} do |f|
-  %strong.append-right-10
-    Assignee:
+  .row
+    .col-md-6
+      %strong.append-right-10
+        Assignee:

-  - if can?(current_user, :modify_issue, @issue)
-    = project_users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @issue.assignee_id)
-  - elsif issue.assignee
-    = link_to_member(@project, @issue.assignee)
-  - else
-    None
+      - if can?(current_user, :modify_issue, @issue)
+        = project_users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @issue.assignee_id)
+      - elsif issue.assignee
+        = link_to_member(@project, @issue.assignee)
+      - else
+        None

-  .pull-right
-    %strong.append-right-10
-      Milestone:
-    - if can?(current_user, :modify_issue, @issue)
-      = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'})
-      = hidden_field_tag :issue_context
-      = f.submit class: 'btn'
-    - elsif issue.milestone
-      = link_to issue.milestone.title, project_milestone_path
-    - else
-      None
+    .col-md-6.text-right
+      %strong.append-right-10
+        Milestone:
+      - if can?(current_user, :modify_issue, @issue)
+        = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone" }, {class: 'select2 select2-compact'})
+        = hidden_field_tag :issue_context
+        = f.submit class: 'btn'
+      - elsif issue.milestone
+        = link_to issue.milestone.title, project_milestone_path
+      - else
+        None
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@ -1,7 +1,7 @@
 %h3.page-title
  Issue ##{@issue.iid}

-  %span.pull-right
+  %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.icon-plus
@ -16,28 +16,29 @@
        %i.icon-edit
        Edit

-.votes-holder
-  #votes= render 'votes/votes_block', votable: @issue
+.clearfix
+  .votes-holder
+    #votes= render 'votes/votes_block', votable: @issue

-.back-link
-  = link_to project_issues_path(@project) do
-    &larr; 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
+  .back-link
+    = link_to project_issues_path(@project) do
+      &larr; 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
-    %span.state-label
+  .state.clearfix
+    .state-label.col-sm-2.col-xs-12
      - if @issue.closed?
        Closed
      - else
        Open

-    %span.creator
+    %span.creator.col-sm-9.col-xs-12
      Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)}

  %h4.title
--- a/app/views/projects/merge_requests/show/_context.html.haml
+++ b/app/views/projects/merge_requests/show/_context.html.haml
@ -1,22 +1,24 @@
 = form_for [@project, @merge_request], remote: true, html: {class: 'edit-merge_request inline-update'} do |f|
-  %strong.append-right-10
-    Assignee:
+  .row
+    .col-md-6
+      %strong.append-right-10
+        Assignee:

-  - if can?(current_user, :modify_merge_request, @merge_request)
-    = project_users_select_tag('merge_request[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @merge_request.assignee_id)
-  - elsif merge_request.assignee
-    = link_to_member(@project, @merge_request.assignee)
-  - else
-    None
+      - if can?(current_user, :modify_merge_request, @merge_request)
+        = project_users_select_tag('merge_request[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @merge_request.assignee_id)
+      - elsif merge_request.assignee
+        = link_to_member(@project, @merge_request.assignee)
+      - else
+        None

-  .pull-right
-    %strong.append-right-10
-      Milestone:
-    - if can?(current_user, :modify_merge_request, @merge_request)
-      = f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'})
-      = hidden_field_tag :merge_request_context
-      = f.submit class: 'btn'
-    - elsif merge_request.milestone
-      = link_to merge_request.milestone.title, project_milestone_path
-    - else
-      None
+    .col-md-6.text-right
+      %strong.append-right-10
+        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'})
+        = hidden_field_tag :merge_request_context
+        = f.submit class: 'btn'
+      - elsif merge_request.milestone
+        = link_to merge_request.milestone.title, project_milestone_path
+      - else
+        None
--- a/app/views/projects/merge_requests/show/_mr_box.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_box.html.haml
@ -1,6 +1,6 @@
 .issue-box{ class: issue_box_class(@merge_request) }
-  .state
-    %span.state-label
+  .state.clearfix
+    %span.state-label.col-sm-2.col-xs-12
      - if @merge_request.merged?
        Merged
      - elsif @merge_request.closed?
@ -8,7 +8,7 @@
      - else
        Open

-    %span.creator
+    %span.creator.col-sm-9.col-xs-12
      Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}

  %h4.title
--- a/app/views/projects/merge_requests/show/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_title.html.haml
@ -1,7 +1,7 @@
 %h3.page-title
  = "Merge Request ##{@merge_request.iid}"

-  %span.pull-right
+  %span.pull-right.issue-btn-group
    - if can?(current_user, :modify_merge_request, @merge_request)
      - if @merge_request.open?
        .btn-group.pull-left