Merge branch 'improve-mobile-ui' into 'master'

Improve mobile UI pt2

Next UI elements were improved for mobile view

* comments
* comment form
* issues navigation
* removed duplicate MR sidebar btn
* tabs

Desktop improvements:

* increase comment author username font size
* dark colour for comment author name

Related to #1493

See merge request !1285

app/assets/stylesheets/generic/common.scss

@@ -330,10 +330,6 @@ table {
   }
 }
 
-@media (max-width: $screen-xs-max) {
-  .container .content { margin-top: 20px; }
-}
-
 .wiki .highlight, .note-body .highlight {
   margin-bottom: 9px;
 }

app/assets/stylesheets/generic/mobile.scss

+/** Common mobile (screen XS) styles **/
+@media (max-width: $screen-xs-max) {
+  .container .content {
+    margin-top: 20px;
+  }
+
+  .nav.nav-tabs > li > a {
+    padding: 10px;
+    font-size: 12px;
+    margin-right: 3px;
+
+    .badge {
+      display: none;
+    }
+  }
+}
+

app/assets/stylesheets/generic/timeline.scss

@@ -75,3 +75,20 @@
     }
   }
 }
+
+@media (max-width: $screen-xs-max) {
+  .timeline {
+    &:before {
+      background: none;
+    }
+    .timeline-entry .timeline-entry-inner {
+      .timeline-icon {
+        display: none;
+      }
+
+      .timeline-content {
+        margin-left: 0;
+      }
+    }
+  }
+}

app/assets/stylesheets/sections/issues.scss

@@ -151,4 +151,14 @@ form.edit-issue {
       }
     }
   }
+
+  .issue {
+    &:hover  .issue-actions {
+      display: none !important;
+    }
+
+    .issue-updated-at {
+      display: none;
+    }
+  }
 }

app/assets/stylesheets/sections/notes.scss

@@ -36,13 +36,16 @@ ul.notes {
       font-size: 13px;
     }
     .author {
-      color: #555;
+      color: #333;
       font-weight: bold;
       font-size: 14px;
       &:hover {
-        color: $link_hover_color;
+        color: $link_color;
       }
     }
+    .author-username {
+      font-size: 14px;
+    }
   }
 
   .discussion {

app/views/projects/_issues_nav.html.haml

@@ -2,7 +2,7 @@
   - if project_nav_tab? :issues
     = nav_link(controller: :issues) do
       = link_to project_issues_path(@project), class: "tab" do
-        Browse Issues
+        Issues
   - if project_nav_tab? :merge_requests
     = nav_link(controller: :merge_requests) do
       = link_to project_merge_requests_path(@project), class: "tab" do
@@ -19,7 +19,7 @@
 
   - if current_controller?(:issues)
     - if current_user
-      %li
+      %li.hidden-xs
         = link_to project_issues_path(@project, :atom, { private_token: current_user.private_token }) do
           %i.fa.fa-rss
 
@@ -45,8 +45,8 @@
       .pull-right
         %button.btn.btn-default.sidebar-expand-button
           %i.icon.fa.fa-list
-            
+
         - if can? current_user, :write_merge_request, @project
-          = link_to new_project_merge_request_path(@project), class: "pull-right btn btn-new", title: "New Merge Request" do
+          = link_to new_project_merge_request_path(@project), class: "btn btn-new pull-left", title: "New Merge Request" do
             %i.fa.fa-plus
             New Merge Request

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

@@ -28,7 +28,7 @@
       %span.task-status
         = issue.task_status
 
-    .pull-right
+    .pull-right.issue-updated-at
       %small updated #{time_ago_with_tooltip(issue.updated_at, 'bottom', 'issue_update_ago')}
 
     .issue-labels

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

@@ -7,7 +7,7 @@
         %i.fa.fa-check
         MERGED
     - else
-      %span.pull-right
+      %span.pull-right.hidden-xs
         - if merge_request.for_fork?
           %span.light
             #{merge_request.source_project_namespace}:
@@ -31,7 +31,7 @@
       %span.task-status
         = merge_request.task_status
 
-    .pull-right
+    .pull-right.hidden-xs
       %small updated #{time_ago_with_tooltip(merge_request.updated_at, 'bottom', 'merge_request_updated_ago')}
 
     .merge-request-labels

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

 = render "projects/issues_nav"
 
 .row
-  .fixed.sidebar-expand-button.hidden-lg.hidden-md
-    %i.fa.fa-list.fa-2x
   .col-md-3.responsive-side
     = render 'shared/project_filter', project_entities_path: project_merge_requests_path(@project),
              labels: true, redirect: 'merge_requests', entity: 'merge_request'

app/views/projects/notes/_form.html.haml

@@ -29,7 +29,7 @@
       = yield(:note_actions)
       %a.btn.grouped.js-close-discussion-note-form Cancel
 
-    .note-form-option
+    .note-form-option.hidden-xs
       %a.choose-btn.btn.js-choose-note-attachment-button
         %i.fa.fa-paperclip
         %span Choose File ...

features/project/active_tab.feature

@@ -110,7 +110,7 @@ Feature: Project Active Tab
 
   Scenario: On Project Issues/Browse
     Given I visit my project's issues page
-    Then the active sub tab should be Browse Issues
+    Then the active sub tab should be Issues
     And no other sub tabs should be active
     And the active main tab should be Issues
 

features/steps/project/active_tab.rb

@@ -89,8 +89,8 @@ class Spinach::Features::ProjectActiveTab < Spinach::FeatureSteps
     click_link('Labels')
   end
 
-  step 'the active sub tab should be Browse Issues' do
-    ensure_active_sub_tab('Browse Issues')
+  step 'the active sub tab should be Issues' do
+    ensure_active_sub_tab('Issues')
   end
 
   step 'the active sub tab should be Milestones' do

features/steps/project/issues/milestones.rb

@@ -8,7 +8,7 @@ class Spinach::Features::ProjectIssuesMilestones < Spinach::FeatureSteps
     milestone = @project.milestones.find_by(title: "v2.2")
     page.should have_content(milestone.title[0..10])
     page.should have_content(milestone.expires_at)
-    page.should have_content("Browse Issues")
+    page.should have_content("Issues")
   end
 
   step 'I click link "v2.2"' do
@@ -28,7 +28,7 @@ class Spinach::Features::ProjectIssuesMilestones < Spinach::FeatureSteps
     milestone = @project.milestones.find_by(title: "v2.3")
     page.should have_content(milestone.title[0..10])
     page.should have_content(milestone.expires_at)
-    page.should have_content("Browse Issues")
+    page.should have_content("Issues")
   end
 
   step 'project "Shop" has milestone "v2.2"' do