From b5d9a613d98dc5ae629bdc004f19be7c8e5fcd8e Mon Sep 17 00:00:00 2001 From: Stan Hu Date: Thu, 8 Oct 2015 13:22:34 -0700 Subject: [PATCH] Make diff file view easier to use on mobile screens --- CHANGELOG | 1 + app/assets/stylesheets/pages/diff.scss | 114 +++++++++++------- .../stylesheets/pages/merge_requests.scss | 18 ++- app/views/projects/diffs/_file.html.haml | 2 +- 4 files changed, 90 insertions(+), 45 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index b1a35c3c2ab..c4f3b6693f8 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 5e7e59a6af8..d9ef06dc6b6 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 fe69d16fc4b..a1a5208c59c 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 4617b188150..9698921f6da 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