BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 19fd34d9 by Dmitriy Zaporozhets
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
Showing with 89 additions and 44 deletions
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;
......@@ -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-modes{
//.view.onion-skin
}
.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
......@@ -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
......@@ -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