Improve mobile UI for issues and merge requests

Drew Blessing
1 parent 172ad962
Showing 9 changed files with 119 additions and 59 deletions Show diff stats
CHANGELOG
app/assets/stylesheets/generic/issue_box.scss
app/assets/stylesheets/sections/issues.scss
app/assets/stylesheets/sections/votes.scss
app/views/projects/issues/_issue_context.html.haml
app/views/projects/issues/show.html.haml
app/views/projects/merge_requests/show/_context.html.haml
app/views/projects/merge_requests/show/_mr_box.html.haml
app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -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
@@ -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;
   }
 }
@@ -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;
+      }
+    }
+  }
+}
@@ -40,4 +40,10 @@
 .votes-holder {
   float: right;
   width: 250px;
+
+  @media (max-width: $screen-xs-max) {
+    width: 100%;
+    margin-top: 5px;
+    margin-bottom: 10px;
+  }
 }
 = 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
 %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
 = 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
 .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
 %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
...	...	@@ -8,6 +8,7 @@ v 6.9.0
8	8	- Fix syntax highlighting for code comments blocks
9	9	- Improve comments loading logic
10	10	- Stop refreshing comments when the tab is hidden
	11	+ - Improve issue and merge request mobile UI (Drew Blessing)
11	12
12	13	v 6.8.0
13	14	- Ability to at mention users that are participating in issue and merge req. discussion
...	...
...	...	@@ -70,7 +70,6 @@
70	70	}
71	71
72	72	.state {
73		- height: 34px;
74	73	border-bottom: 1px solid #DDD;
75	74	line-height: 32px;
76	75	}
...	...	@@ -89,6 +88,18 @@
89	88	border: none;
90	89	border-top: 1px solid #eee;
91	90	padding: 15px 25px;
	91	+
	92	+ // Reset text align for children
	93	+ .text-right > * { text-align: left; }
	94	+
	95	+ @media (max-width: $screen-xs-max) {
	96	+ // Don't right align on mobile
	97	+ .text-right { text-align: left; }
	98	+
	99	+ .row .col-md-6 {
	100	+ padding-top: 5px;
	101	+ }
	102	+ }
92	103	}
93	104
94	105	.description {
...	...	@@ -106,7 +117,11 @@
106	117	padding: 1px 25px;
107	118	text-align: center;
108	119	text-shadow: none;
109		- margin-right: 20px;
110	120	display: inline-block;
	121	+ line-height: 34px;
	122	+ }
	123	+
	124	+ .creator {
	125	+ padding: 2px 15px;
111	126	}
112	127	}
...	...
...	...	@@ -143,3 +143,36 @@ form.edit-issue {
143	143	border-color: #E5E5E5;
144	144	}
145	145	}
	146	+
	147	+@media (max-width: $screen-xs-max) {
	148	+ .issue-btn-group {
	149	+ width: 100%;
	150	+ margin-top: 5px;
	151	+
	152	+ .btn-group {
	153	+ width: 100%;
	154	+
	155	+ ul {
	156	+ width: 100%;
	157	+ text-align: center;
	158	+ }
	159	+ }
	160	+
	161	+ .btn {
	162	+ width: 100%;
	163	+ margin-top: -1px;
	164	+
	165	+ &:first-child:not(:last-child) {
	166	+ border-radius: 4px 4px 0 0;
	167	+ }
	168	+
	169	+ &:not(:first-child):not(:last-child) {
	170	+ border-radius: 0;
	171	+ }
	172	+
	173	+ &:last-child:not(:first-child) {
	174	+ border-radius: 0 0 4px 4px;
	175	+ }
	176	+ }
	177	+ }
	178	+}
...	...
...	...	@@ -40,4 +40,10 @@
40	40	.votes-holder {
41	41	float: right;
42	42	width: 250px;
	43	+
	44	+ @media (max-width: $screen-xs-max) {
	45	+ width: 100%;
	46	+ margin-top: 5px;
	47	+ margin-bottom: 10px;
	48	+ }
43	49	}
...	...
1	1	= form_for [@project, @issue], remote: true, html: {class: 'edit-issue inline-update'} do \|f\|
2		- %strong.append-right-10
3		- Assignee:
	2	+ .row
	3	+ .col-md-6
	4	+ %strong.append-right-10
	5	+ Assignee:
4	6
5		- - if can?(current_user, :modify_issue, @issue)
6		- = project_users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @issue.assignee_id)
7		- - elsif issue.assignee
8		- = link_to_member(@project, @issue.assignee)
9		- - else
10		- None
	7	+ - if can?(current_user, :modify_issue, @issue)
	8	+ = project_users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @issue.assignee_id)
	9	+ - elsif issue.assignee
	10	+ = link_to_member(@project, @issue.assignee)
	11	+ - else
	12	+ None
11	13
12		- .pull-right
13		- %strong.append-right-10
14		- Milestone:
15		- - if can?(current_user, :modify_issue, @issue)
16		- = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'})
17		- = hidden_field_tag :issue_context
18		- = f.submit class: 'btn'
19		- - elsif issue.milestone
20		- = link_to issue.milestone.title, project_milestone_path
21		- - else
22		- None
	14	+ .col-md-6.text-right
	15	+ %strong.append-right-10
	16	+ Milestone:
	17	+ - if can?(current_user, :modify_issue, @issue)
	18	+ = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone" }, {class: 'select2 select2-compact'})
	19	+ = hidden_field_tag :issue_context
	20	+ = f.submit class: 'btn'
	21	+ - elsif issue.milestone
	22	+ = link_to issue.milestone.title, project_milestone_path
	23	+ - else
	24	+ None
...	...
1	1	%h3.page-title
2	2	Issue ##{@issue.iid}
3	3
4		- %span.pull-right
	4	+ %span.pull-right.issue-btn-group
5	5	- if can?(current_user, :write_issue, @project)
6	6	= link_to new_project_issue_path(@project), class: "btn btn-grouped", title: "New Issue", id: "new_issue_link" do
7	7	%i.icon-plus
...	...	@@ -16,28 +16,29 @@
16	16	%i.icon-edit
17	17	Edit
18	18
19		-.votes-holder
20		- #votes= render 'votes/votes_block', votable: @issue
	19	+.clearfix
	20	+ .votes-holder
	21	+ #votes= render 'votes/votes_block', votable: @issue
21	22
22		-.back-link
23		- = link_to project_issues_path(@project) do
24		- ← To issues list
25		- %span.milestone-nav-link
26		- - if @issue.milestone
27		- \|
28		- %span.light Milestone
29		- = link_to project_milestone_path(@project, @issue.milestone) do
30		- = @issue.milestone.title
	23	+ .back-link
	24	+ = link_to project_issues_path(@project) do
	25	+ ← To issues list
	26	+ %span.milestone-nav-link
	27	+ - if @issue.milestone
	28	+ \|
	29	+ %span.light Milestone
	30	+ = link_to project_milestone_path(@project, @issue.milestone) do
	31	+ = @issue.milestone.title
31	32
32	33	.issue-box{ class: issue_box_class(@issue) }
33		- .state
34		- %span.state-label
	34	+ .state.clearfix
	35	+ .state-label.col-sm-2.col-xs-12
35	36	- if @issue.closed?
36	37	Closed
37	38	- else
38	39	Open
39	40
40		- %span.creator
	41	+ %span.creator.col-sm-9.col-xs-12
41	42	Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)}
42	43
43	44	%h4.title
...	...
1	1	= form_for [@project, @merge_request], remote: true, html: {class: 'edit-merge_request inline-update'} do \|f\|
2		- %strong.append-right-10
3		- Assignee:
	2	+ .row
	3	+ .col-md-6
	4	+ %strong.append-right-10
	5	+ Assignee:
4	6
5		- - if can?(current_user, :modify_merge_request, @merge_request)
6		- = project_users_select_tag('merge_request[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @merge_request.assignee_id)
7		- - elsif merge_request.assignee
8		- = link_to_member(@project, @merge_request.assignee)
9		- - else
10		- None
	7	+ - if can?(current_user, :modify_merge_request, @merge_request)
	8	+ = project_users_select_tag('merge_request[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @merge_request.assignee_id)
	9	+ - elsif merge_request.assignee
	10	+ = link_to_member(@project, @merge_request.assignee)
	11	+ - else
	12	+ None
11	13
12		- .pull-right
13		- %strong.append-right-10
14		- Milestone:
15		- - if can?(current_user, :modify_merge_request, @merge_request)
16		- = f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'})
17		- = hidden_field_tag :merge_request_context
18		- = f.submit class: 'btn'
19		- - elsif merge_request.milestone
20		- = link_to merge_request.milestone.title, project_milestone_path
21		- - else
22		- None
	14	+ .col-md-6.text-right
	15	+ %strong.append-right-10
	16	+ Milestone:
	17	+ - if can?(current_user, :modify_merge_request, @merge_request)
	18	+ = f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone" }, {class: 'select2 select2-compact'})
	19	+ = hidden_field_tag :merge_request_context
	20	+ = f.submit class: 'btn'
	21	+ - elsif merge_request.milestone
	22	+ = link_to merge_request.milestone.title, project_milestone_path
	23	+ - else
	24	+ None
...	...
1	1	.issue-box{ class: issue_box_class(@merge_request) }
2		- .state
3		- %span.state-label
	2	+ .state.clearfix
	3	+ %span.state-label.col-sm-2.col-xs-12
4	4	- if @merge_request.merged?
5	5	Merged
6	6	- elsif @merge_request.closed?
...	...	@@ -8,7 +8,7 @@
8	8	- else
9	9	Open
10	10
11		- %span.creator
	11	+ %span.creator.col-sm-9.col-xs-12
12	12	Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)}
13	13
14	14	%h4.title
...	...
1	1	%h3.page-title
2	2	= "Merge Request ##{@merge_request.iid}"
3	3
4		- %span.pull-right
	4	+ %span.pull-right.issue-btn-group
5	5	- if can?(current_user, :modify_merge_request, @merge_request)
6	6	- if @merge_request.open?
7	7	.btn-group.pull-left
...	...