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

4 files changed, 90 insertions, 45 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 416ec54b132..f9a4d17fa16 100644
--- a/CHANGELOG
+++ b/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)
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 5e7e59a6af8..d9ef06dc6b6 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/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;
@@ -90,12 +84,12 @@
       }
     }
 
-    tr.line_holder.parallel{
+    tr.line_holder.parallel {
       .old_line, .new_line, .diff_line {
         min-width: 50px;
       }
 
-      td.line_content.parallel{
+      td.line_content.parallel {
         width: 50%;
       }
     }
@@ -105,7 +99,7 @@
       padding: 0px;
       border: none;
       background: $background-color;
-      color: rgba(0,0,0,0.3);
+      color: rgba(0, 0, 0, 0.3);
       padding: 0px 5px;
       border-right: 1px solid $border-color;
       text-align: right;
@@ -117,7 +111,7 @@
         float: left;
         width: 35px;
         font-weight: normal;
-        color: rgba(0,0,0,0.3);
+        color: rgba(0, 0, 0, 0.3);
         &:hover {
           text-decoration: underline;
         }
@@ -168,7 +162,7 @@
     background: #ddd;
     text-align: center;
     padding: 30px;
-    .wrap{
+    .wrap {
       display: inline-block;
     }
 
@@ -176,7 +170,7 @@
       display: inline-block;
       background-color: #fff;
       line-height: 0;
-      img{
+      img {
         border: 1px solid #FFF;
         background: image-url('trans_bg.gif');
         max-width: 100%;
@@ -189,21 +183,21 @@
         border: 1px solid $added;
       }
     }
-    .image-info{
+    .image-info {
       font-size: 12px;
       margin: 5px 0 0 0;
       color: grey;
     }
 
-    .view.swipe{
+    .view.swipe {
       position: relative;
 
-      .swipe-frame{
+      .swipe-frame {
         display: block;
         margin: auto;
         position: relative;
       }
-      .swipe-wrap{
+      .swipe-wrap {
         overflow: hidden;
         border-left: 1px solid #999;
         position: absolute;
@@ -211,33 +205,33 @@
         top: 13px;
         right: 7px;
       }
-      .frame{
+      .frame {
         top: 0;
         right: 0;
         position: absolute;
-        &.deleted{
+        &.deleted {
           margin: 0;
           display: block;
           top: 13px;
           right: 7px;
         }
       }
-      .swipe-bar{
+      .swipe-bar {
         display: block;
         height: 100%;
         width: 15px;
         z-index: 100;
         position: absolute;
         cursor: pointer;
-        &:hover{
-          .top-handle{
+        &:hover {
+          .top-handle {
             background-position: -15px 3px;
           }
-          .bottom-handle{
+          .bottom-handle {
             background-position: -15px -11px;
           }
-        };
-        .top-handle{
+        }
+        .top-handle {
           display: block;
           height: 14px;
           width: 15px;
@@ -245,7 +239,7 @@
           top: 0px;
           background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
         }
-        .bottom-handle{
+        .bottom-handle {
           display: block;
           height: 14px;
           width: 15px;
@@ -254,9 +248,10 @@
           background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
         }
       }
-    } //.view.swipe
-    .view.onion-skin{
-      .onion-skin-frame{
+    }
+    //.view.swipe
+    .view.onion-skin {
+      .onion-skin-frame {
         display: block;
         margin: auto;
         position: relative;
@@ -267,7 +262,7 @@
         top: 0px;
         left: 0px;
       }
-      .controls{
+      .controls {
         display: block;
         height: 14px;
         width: 300px;
@@ -277,7 +272,7 @@
         left: 50%;
         margin-left: -150px;
 
-        .drag-track{
+        .drag-track {
           display: block;
           position: absolute;
           left: 12px;
@@ -317,39 +312,40 @@
           background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat;
         }
       }
-    } //.view.onion-skin
+    }
+    //.view.onion-skin
   }
-  .view-modes{
+  .view-modes {
     padding: 10px;
     text-align: center;
     background: #EEE;
 
-    ul, li{
+    ul, li {
       list-style: none;
       margin: 0;
       padding: 0;
       display: inline-block;
     }
 
-    li{
+    li {
       color: grey;
       border-left: 1px solid #c1c1c1;
       padding: 0 12px 0 16px;
       cursor: pointer;
-      &:first-child{
+      &:first-child {
         border-left: none;
       }
-      &:hover{
+      &:hover {
         text-decoration: underline;
       }
-      &.active{
-        &:hover{
+      &.active {
+        &:hover {
           text-decoration: none;
         }
         cursor: default;
         color: #333;
       }
-      &.disabled{
+      &.disabled {
         display: none;
       }
     }
@@ -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;
+  }
+}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index fe69d16fc4b..a1a5208c59c 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -75,7 +75,7 @@
   .mr-widget-footer {
     padding: 15px;
   }
-  
+
   .normal {
     color: #5c5d5e;
   }
@@ -102,7 +102,7 @@
   }
 }
 
-.merge-request .merge-request-tabs{
+.merge-request .merge-request-tabs {
   @include nav-menu;
   margin: -$gl-padding;
   padding: $gl-padding;
@@ -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 {
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 4617b188150..9698921f6da 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/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