Merge branch 'make-diff-css-better-for-mobile' into 'master'

Make diff file view easier to use on mobile screens

Viewing diffs on a mobile screen is a bit of an awkward experience at the moment. Here are a few issues (by no means complete):

## Before

### Tabs are scrunched

![image](https://gitlab.com/stanhu/gitlab-ce/uploads/45924e36cfb107dc56795a7dcdfbc5b5/image.png)

### Filenames take too much room, buttons cluttered

![image](https://gitlab.com/stanhu/gitlab-ce/uploads/a5e5611271fe26dfd3922aa0b8780458/image.png)

## After

This MR makes a few tweaks to make this a bit better. It just addresses a few issues, but there is plenty of room for improvement (e.g. shrink fonts, etc.):

### Eliminate padding to make tabs fit

![image](https://gitlab.com/gitlab-org/gitlab-ce/uploads/fbcf128d1f221b9b9e53df274238dc62/image.png)

### Make filenames, buttons more readable

This screenshot allows the filename to use the whole row, omits the file mode changes, and puts the buttons centered in the view:

![image](https://gitlab.com/gitlab-org/gitlab-ce/uploads/d2e5b9424f058827ba2552056c516e18/image.png)

Towards a better mobile experience: #2787 

See merge request !1449

CHANGELOG

@@ -1,6 +1,7 @@
 Please view this file on the master branch, on stable branches it's out of date.
 
 v 8.1.0 (unreleased)
+  - Make diff file view easier to use on mobile screens (Stan Hu)
   - Add support for creating directories from Files page (Stan Hu)
   - Allow removing of project without confirmation when JavaScript is disabled (Stan Hu)
   - Support filtering by "Any" milestone or issue and fix "No Milestone" and "No Label" filters (Stan Hu)

app/assets/stylesheets/pages/diff.scss

@@ -1,3 +1,4 @@
+// Common
 .diff-file {
   margin-left: -$gl-padding;
   margin-right: -$gl-padding;
@@ -12,24 +13,17 @@
     color: #555;
     z-index: 10;
 
-    > span {
+    .diff-title {
       font-family: $monospace_font;
       word-break: break-all;
-      margin-right: 200px;
       display: block;
 
       .file-mode {
-        margin-left: 10px;
         color: #777;
       }
     }
 
-    .diff-btn-group {
-      float: right;
-      position: absolute;
-      top: 5px;
-      right: 15px;
-
+    .diff-controls {
       .btn {
         padding: 0px 10px;
         font-size: 13px;
@@ -236,7 +230,7 @@
           .bottom-handle {
             background-position: -15px -11px;
           }
-        };
+        }
         .top-handle {
           display: block;
           height: 14px;
@@ -254,7 +248,8 @@
           background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
         }
       }
-    } //.view.swipe
+    }
+    //.view.swipe
     .view.onion-skin {
       .onion-skin-frame {
         display: block;
@@ -317,7 +312,8 @@
           background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat;
         }
       }
-    } //.view.onion-skin
+    }
+    //.view.onion-skin
   }
   .view-modes {
     padding: 10px;
@@ -373,3 +369,37 @@
   float: right;
   margin-top: -5px;
 }
+
+// Mobile
+@media (max-width: 480px) {
+  .diff-title {
+    margin: 0;
+
+    .file-mode {
+      display: none;
+    }
+  }
+
+  .diff-controls {
+    position: static;
+    text-align: center;
+  }
+}
+
+// Bigger screens
+@media (min-width: 481px) {
+  .diff-title {
+    margin-right: 200px;
+
+    .file-mode {
+      margin-left: 10px;
+    }
+  }
+
+  .diff-controls {
+    float: right;
+    position: absolute;
+    top: 5px;
+    right: 15px;
+  }
+}

app/assets/stylesheets/pages/merge_requests.scss

@@ -110,6 +110,20 @@
   margin-bottom: 1px;
 }
 
+// Mobile
+@media (max-width: 480px) {
+  .merge-request .merge-request-tabs {
+    margin: 0;
+    padding: 0;
+
+    li {
+      a {
+        padding: 0;
+      }
+    }
+  }
+}
+
 .mr_source_commit,
 .mr_target_commit {
   .commit {

app/views/projects/diffs/_file.html.haml

@@ -16,7 +16,7 @@
         - if diff_file.mode_changed?
           %span.file-mode= "#{diff_file.diff.a_mode} → #{diff_file.diff.b_mode}"
 
-      .diff-btn-group
+      .diff-controls
         - if blob.text?
           = link_to '#', class: 'js-toggle-diff-comments btn btn-sm active has_tooltip', title: "Toggle comments for this file" do
             %i.fa.fa-comments