Skip to content

G
gitlab-ce
Commit 19fd34d9 authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets
Browse files
Options

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
Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 45 deletions
CHANGELOG
View file @ 19fd34d9
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
View file @ 19fd34d9
// 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;
}
}
app/assets/stylesheets/pages/merge_requests.scss
View file @ 19fd34d9
......@@ -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 {
......
app/views/projects/diffs/_file.html.haml
View file @ 19fd34d9
......@@ -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
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7