Commit 19fd34d9 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

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
parents 468c3559 b5d9a613
Please view this file on the master branch, on stable branches it's out of date. Please view this file on the master branch, on stable branches it's out of date.
v 8.1.0 (unreleased) 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) - Add support for creating directories from Files page (Stan Hu)
- Allow removing of project without confirmation when JavaScript is disabled (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) - Support filtering by "Any" milestone or issue and fix "No Milestone" and "No Label" filters (Stan Hu)
......
// Common
.diff-file { .diff-file {
margin-left: -$gl-padding; margin-left: -$gl-padding;
margin-right: -$gl-padding; margin-right: -$gl-padding;
...@@ -12,24 +13,17 @@ ...@@ -12,24 +13,17 @@
color: #555; color: #555;
z-index: 10; z-index: 10;
> span { .diff-title {
font-family: $monospace_font; font-family: $monospace_font;
word-break: break-all; word-break: break-all;
margin-right: 200px;
display: block; display: block;
.file-mode { .file-mode {
margin-left: 10px;
color: #777; color: #777;
} }
} }
.diff-btn-group { .diff-controls {
float: right;
position: absolute;
top: 5px;
right: 15px;
.btn { .btn {
padding: 0px 10px; padding: 0px 10px;
font-size: 13px; font-size: 13px;
...@@ -90,12 +84,12 @@ ...@@ -90,12 +84,12 @@
} }
} }
tr.line_holder.parallel{ tr.line_holder.parallel {
.old_line, .new_line, .diff_line { .old_line, .new_line, .diff_line {
min-width: 50px; min-width: 50px;
} }
td.line_content.parallel{ td.line_content.parallel {
width: 50%; width: 50%;
} }
} }
...@@ -105,7 +99,7 @@ ...@@ -105,7 +99,7 @@
padding: 0px; padding: 0px;
border: none; border: none;
background: $background-color; background: $background-color;
color: rgba(0,0,0,0.3); color: rgba(0, 0, 0, 0.3);
padding: 0px 5px; padding: 0px 5px;
border-right: 1px solid $border-color; border-right: 1px solid $border-color;
text-align: right; text-align: right;
...@@ -117,7 +111,7 @@ ...@@ -117,7 +111,7 @@
float: left; float: left;
width: 35px; width: 35px;
font-weight: normal; font-weight: normal;
color: rgba(0,0,0,0.3); color: rgba(0, 0, 0, 0.3);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
...@@ -168,7 +162,7 @@ ...@@ -168,7 +162,7 @@
background: #ddd; background: #ddd;
text-align: center; text-align: center;
padding: 30px; padding: 30px;
.wrap{ .wrap {
display: inline-block; display: inline-block;
} }
...@@ -176,7 +170,7 @@ ...@@ -176,7 +170,7 @@
display: inline-block; display: inline-block;
background-color: #fff; background-color: #fff;
line-height: 0; line-height: 0;
img{ img {
border: 1px solid #FFF; border: 1px solid #FFF;
background: image-url('trans_bg.gif'); background: image-url('trans_bg.gif');
max-width: 100%; max-width: 100%;
...@@ -189,21 +183,21 @@ ...@@ -189,21 +183,21 @@
border: 1px solid $added; border: 1px solid $added;
} }
} }
.image-info{ .image-info {
font-size: 12px; font-size: 12px;
margin: 5px 0 0 0; margin: 5px 0 0 0;
color: grey; color: grey;
} }
.view.swipe{ .view.swipe {
position: relative; position: relative;
.swipe-frame{ .swipe-frame {
display: block; display: block;
margin: auto; margin: auto;
position: relative; position: relative;
} }
.swipe-wrap{ .swipe-wrap {
overflow: hidden; overflow: hidden;
border-left: 1px solid #999; border-left: 1px solid #999;
position: absolute; position: absolute;
...@@ -211,33 +205,33 @@ ...@@ -211,33 +205,33 @@
top: 13px; top: 13px;
right: 7px; right: 7px;
} }
.frame{ .frame {
top: 0; top: 0;
right: 0; right: 0;
position: absolute; position: absolute;
&.deleted{ &.deleted {
margin: 0; margin: 0;
display: block; display: block;
top: 13px; top: 13px;
right: 7px; right: 7px;
} }
} }
.swipe-bar{ .swipe-bar {
display: block; display: block;
height: 100%; height: 100%;
width: 15px; width: 15px;
z-index: 100; z-index: 100;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
&:hover{ &:hover {
.top-handle{ .top-handle {
background-position: -15px 3px; background-position: -15px 3px;
} }
.bottom-handle{ .bottom-handle {
background-position: -15px -11px; background-position: -15px -11px;
} }
}; }
.top-handle{ .top-handle {
display: block; display: block;
height: 14px; height: 14px;
width: 15px; width: 15px;
...@@ -245,7 +239,7 @@ ...@@ -245,7 +239,7 @@
top: 0px; top: 0px;
background: image-url('swipemode_sprites.gif') 0 3px no-repeat; background: image-url('swipemode_sprites.gif') 0 3px no-repeat;
} }
.bottom-handle{ .bottom-handle {
display: block; display: block;
height: 14px; height: 14px;
width: 15px; width: 15px;
...@@ -254,9 +248,10 @@ ...@@ -254,9 +248,10 @@
background: image-url('swipemode_sprites.gif') 0 -11px no-repeat; background: image-url('swipemode_sprites.gif') 0 -11px no-repeat;
} }
} }
} //.view.swipe }
.view.onion-skin{ //.view.swipe
.onion-skin-frame{ .view.onion-skin {
.onion-skin-frame {
display: block; display: block;
margin: auto; margin: auto;
position: relative; position: relative;
...@@ -267,7 +262,7 @@ ...@@ -267,7 +262,7 @@
top: 0px; top: 0px;
left: 0px; left: 0px;
} }
.controls{ .controls {
display: block; display: block;
height: 14px; height: 14px;
width: 300px; width: 300px;
...@@ -277,7 +272,7 @@ ...@@ -277,7 +272,7 @@
left: 50%; left: 50%;
margin-left: -150px; margin-left: -150px;
.drag-track{ .drag-track {
display: block; display: block;
position: absolute; position: absolute;
left: 12px; left: 12px;
...@@ -317,39 +312,40 @@ ...@@ -317,39 +312,40 @@
background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat; background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat;
} }
} }
} //.view.onion-skin
} }
.view-modes{ //.view.onion-skin
}
.view-modes {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
background: #EEE; background: #EEE;
ul, li{ ul, li {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block; display: inline-block;
} }
li{ li {
color: grey; color: grey;
border-left: 1px solid #c1c1c1; border-left: 1px solid #c1c1c1;
padding: 0 12px 0 16px; padding: 0 12px 0 16px;
cursor: pointer; cursor: pointer;
&:first-child{ &:first-child {
border-left: none; border-left: none;
} }
&:hover{ &:hover {
text-decoration: underline; text-decoration: underline;
} }
&.active{ &.active {
&:hover{ &:hover {
text-decoration: none; text-decoration: none;
} }
cursor: default; cursor: default;
color: #333; color: #333;
} }
&.disabled{ &.disabled {
display: none; display: none;
} }
} }
...@@ -373,3 +369,37 @@ ...@@ -373,3 +369,37 @@
float: right; float: right;
margin-top: -5px; 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;
}
}
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
} }
} }
.merge-request .merge-request-tabs{ .merge-request .merge-request-tabs {
@include nav-menu; @include nav-menu;
margin: -$gl-padding; margin: -$gl-padding;
padding: $gl-padding; padding: $gl-padding;
...@@ -110,6 +110,20 @@ ...@@ -110,6 +110,20 @@
margin-bottom: 1px; 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_source_commit,
.mr_target_commit { .mr_target_commit {
.commit { .commit {
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
- if diff_file.mode_changed? - if diff_file.mode_changed?
%span.file-mode= "#{diff_file.diff.a_mode}#{diff_file.diff.b_mode}" %span.file-mode= "#{diff_file.diff.a_mode}#{diff_file.diff.b_mode}"
.diff-btn-group .diff-controls
- if blob.text? - if blob.text?
= link_to '#', class: 'js-toggle-diff-comments btn btn-sm active has_tooltip', title: "Toggle comments for this file" do = link_to '#', class: 'js-toggle-diff-comments btn btn-sm active has_tooltip', title: "Toggle comments for this file" do
%i.fa.fa-comments %i.fa.fa-comments
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment