diff --git a/CHANGELOG b/CHANGELOG
index 416ec54b132f337ab8b04c53529a10a4a6f9b4b4..f9a4d17fa161deb3ced065f9c5da1a557378c0ef 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 5e7e59a6af82162ac5b999c33b1c884fe32ee220..d9ef06dc6b650ef7ea962a7ccac01f8a047aa664 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 fe69d16fc4be1f5a8259b49b237ac9d2aac9dbd4..a1a5208c59c29c555660fc6465a29c6320a48b3d 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 4617b188150ff80f65b9054f450842ef673a8326..9698921f6da74c326890fd06531b92266706f357 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