From cab9445ac12ce4862f22209d45ee835e80bfdc0a Mon Sep 17 00:00:00 2001 From: Douwe Maan Date: Sat, 23 Mar 2019 14:33:35 +0100 Subject: [PATCH] Restructure and deduplicate table.code styling --- app/assets/stylesheets/pages/diff.scss | 248 +++++++++++------------- app/assets/stylesheets/pages/notes.scss | 2 +- 2 files changed, 109 insertions(+), 141 deletions(-) diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index d027a5313f9..1fedbd8bddb 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -89,132 +89,6 @@ } } - table.code { - width: 100%; - font-family: $monospace-font; - border: 0; - border-collapse: separate; - margin: 0; - padding: 0; - table-layout: fixed; - border-radius: 0 0 $border-radius-default $border-radius-default; - - .diff-line-num { - width: 50px; - position: relative; - - a { - transition: none; - } - } - - .line_holder td { - line-height: $code-line-height; - font-size: $code-font-size; - vertical-align: top; - - &.noteable_line { - position: relative; - } - - span { - white-space: pre-wrap; - - &.context-cell { - display: inline-block; - width: 100%; - height: 100%; - } - } - - .line { - word-wrap: break-word; - } - } - - &.left-side-selected { - td.line_content.parallel.right-side { - user-select: none; - } - } - - &.right-side-selected { - td.line_content.parallel.left-side { - user-select: none; - } - } - } - - tr.line_holder.parallel { - td.line_content.parallel { - width: 46%; - } - - .add-diff-note { - margin-left: -55px; - } - } - - .old_line, - .new_line { - user-select: none; - margin: 0; - border: 0; - padding: 0 5px; - border-right: 1px solid; - text-align: right; - min-width: 35px; - max-width: 50px; - width: 35px; - - a { - float: left; - width: 35px; - font-weight: $gl-font-weight-normal; - - &[disabled] { - cursor: default; - - &:hover, - &:active { - text-decoration: none; - } - } - } - } - - .line_content { - display: block; - margin: 0; - padding: 0 1.5em; - border: 0; - position: relative; - - &.parallel { - display: table-cell; - - span { - word-break: break-all; - } - } - - &.old { - &::before { - content: '-'; - position: absolute; - left: 0.5em; - } - } - - &.new { - &::before { - content: '+'; - position: absolute; - left: 0.5em; - } - } - } - .diff-loading-error-block { padding: $gl-padding * 2 $gl-padding; text-align: center; @@ -437,10 +311,6 @@ } } - .line_content { - white-space: pre-wrap; - } - .diff-file-container { .frame.deleted { border: 1px solid $deleted; @@ -502,6 +372,114 @@ } } +table.code { + width: 100%; + font-family: $monospace-font; + border: 0; + border-collapse: separate; + margin: 0; + padding: 0; + table-layout: fixed; + border-radius: 0 0 $border-radius-default $border-radius-default; + + tr.line_holder td { + line-height: $code-line-height; + font-size: $code-font-size; + vertical-align: top; + + span { + white-space: pre-wrap; + + &.context-cell { + display: inline-block; + width: 100%; + height: 100%; + } + + &.line { + word-wrap: break-word; + } + } + + &.diff-line-num { + user-select: none; + margin: 0; + border: 0; + padding: 0 10px 0 5px; + border-right: 1px solid; + text-align: right; + width: 50px; + position: relative; + + a { + transition: none; + float: left; + width: 100%; + font-weight: $gl-font-weight-normal; + + &[disabled] { + cursor: default; + + &:hover, + &:active { + text-decoration: none; + } + } + } + + &:not(.js-unfold-bottom) a::before { + content: attr(data-linenumber); + } + } + + &.line_content { + display: block; + margin: 0; + padding: 0 1.5em; + border: 0; + position: relative; + white-space: pre-wrap; + + &.parallel { + display: table-cell; + width: 46%; + + span { + word-break: break-all; + } + } + + &.old { + &::before { + content: '-'; + position: absolute; + left: 0.5em; + } + } + + &.new { + &::before { + content: '+'; + position: absolute; + left: 0.5em; + } + } + } + } + + &.left-side-selected { + td.line_content.parallel.right-side { + user-select: none; + } + } + + &.right-side-selected { + td.line_content.parallel.left-side { + user-select: none; + } + } +} + .diff-stats { align-items: center; padding: 0 0.25rem; @@ -602,16 +580,6 @@ } } -.file-holder { - .diff-line-num:not(.js-unfold-bottom) { - a { - &::before { - content: attr(data-linenumber); - } - } - } -} - .diff-comment-avatar-holders { position: absolute; height: 19px; diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 6156ab06234..0c334e919de 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -736,7 +736,7 @@ $note-form-margin-left: 72px; .add-diff-note { @include btn-comment-icon; opacity: 0; - margin-left: -55px; + margin-left: -50px; position: absolute; top: 50%; transform: translateY(-50%);