Make diff file view easier to use on mobile screens

CHANGELOG

 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

+// 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