mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Add wrapping to long diff lines (#2789)

Browse Source 
* Add wrapping to long diff lines to fix #1827

* Fix  css class and make changes to source (less) files

* Fix wrong space indentation

* Fix indentation inconsistencies and remove very old WebKit workaround
pull/2582/head
Lauris BH 7 years ago committed by Lunny Xiao
parent ddb7f59ef4
commit 762f1d7237
4 changed files with 1724 additions and 1720 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      public/css/index.css
  2. 895
      public/less/_base.less
  3. 2545
      public/less/_repository.less
  4. 2
      templates/repo/diff/section_unified.tmpl

2
public/css/index.css
View File

File diff suppressed because one or more lines are too long

895
public/less/_base.less
Unescape View File

@ -1,508 +1,511 @@
@footer-margin: 40px; @footer-margin: 40px;
body { body {
font-family: "Helvetica Neue", "Microsoft YaHei", Arial, Helvetica, sans-serif !important; font-family: "Helvetica Neue", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
background-color: #fff; background-color: #fff;
overflow-y: scroll; overflow-y: scroll;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
img { img {
border-radius: 3px; border-radius: 3px;
} }
pre, code { pre, code {
font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace; font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
&.raw { &.raw {
padding: 7px 12px; padding: 7px 12px;
margin: 10px 0; margin: 10px 0;
background-color: #f8f8f8; background-color: #f8f8f8;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.5;
overflow: auto; overflow: auto;
} }
&.wrap { &.wrap {
white-space: pre-wrap; /* CSS 3 */ white-space: pre-wrap; /* CSS 3 */
// white-space: -moz-normal; /* Mozilla, since 1999 */ // white-space: -moz-normal; /* Mozilla, since 1999 */
// white-space: -normal; /* Opera 4-6 */ // white-space: -normal; /* Opera 4-6 */
// white-space: -o-normal; /* Opera 7 */ // white-space: -o-normal; /* Opera 7 */
word-break: break-word;
} -ms-word-break: break-all;
word-break: break-all;
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
}
} }
.dont-break-out { .dont-break-out {
/* These are technically the same, but use both */ /* These are technically the same, but use both */
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
-ms-word-break: break-all; -ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all;
word-break: break-all;
/* Instead use this non-standard one: */ /* Adds a hyphen where the word breaks, if supported (No Blink) */
word-break: break-word; -ms-hyphens: auto;
-moz-hyphens: auto;
/* Adds a hyphen where the word breaks, if supported (No Blink) */ -webkit-hyphens: auto;
-ms-hyphens: auto; hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
} }
.full.height { .full.height {
padding: 0; padding: 0;
margin: 0 0 -@footer-margin*2 0; margin: 0 0 -@footer-margin*2 0;
min-height: 100%; min-height: 100%;
} }
.following.bar { .following.bar {
z-index: 900; z-index: 900;
left: 0; left: 0;
width: 100%; width: 100%;
&.light { &.light {
background-color: white; background-color: white;
border-bottom: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.04);
} }
.column .menu { .column .menu {
margin-top: 0; margin-top: 0;
} }
.top.menu a.item.brand { .top.menu a.item.brand {
padding-left: 0; padding-left: 0;
} }
.brand .ui.mini.image { .brand .ui.mini.image {
width: 30px; width: 30px;
} }
.top.menu a.item:hover, .top.menu a.item:hover,
.top.menu .dropdown.item:hover, .top.menu .dropdown.item:hover,
.top.menu .dropdown.item.active { .top.menu .dropdown.item.active {
background-color: transparent; background-color: transparent;
} }
.top.menu a.item:hover { .top.menu a.item:hover {
color: rgba(0,0,0,.45); color: rgba(0,0,0,.45);
} }
.top.menu .menu { .top.menu .menu {
z-index: 900; z-index: 900;
} }
.icon, .icon,
.octicon { .octicon {
margin-right: 5px !important; margin-right: 5px !important;
} }
.head.link.item { .head.link.item {
padding-right: 0 !important; padding-right: 0 !important;
} }
.avatar > .ui.image { .avatar > .ui.image {
margin-right: 0; margin-right: 0;
} }
.avatar .octicon-triangle-down { .avatar .octicon-triangle-down {
margin-top: 6.5px; margin-top: 6.5px;
} }
.searchbox { .searchbox {
background-color: rgb(244, 244, 244) !important; background-color: rgb(244, 244, 244) !important;
&:focus { &:focus {
background-color: rgb(233, 233, 233) !important; background-color: rgb(233, 233, 233) !important;
} }
} }
.text .octicon { .text .octicon {
width: 16px; width: 16px;
text-align: center; text-align: center;
} }
.right.menu { .right.menu {
.menu { .menu {
left: auto; left: auto;
right: 0; right: 0;
} }
.dropdown .menu { .dropdown .menu {
margin-top: 0; margin-top: 0;
} }
} }
} }
.ui { .ui {
&.left { &.left {
float: left; float: left;
} }
&.right { &.right {
float: right; float: right;
} }
&.button, &.menu .item { &.button, &.menu .item {
-moz-user-select: auto; -moz-user-select: auto;
-ms-user-select: auto; -ms-user-select: auto;
-webkit-user-select: auto; -webkit-user-select: auto;
user-select: auto; user-select: auto;
} }
&.container { &.container {
&.fluid { &.fluid {
&.padded { &.padded {
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
} }
} }
} }
&.form { &.form {
.ui.button { .ui.button {
font-weight: normal; font-weight: normal;
} }
} }
.text { .text {
&.red { &.red {
color: #d95c5c !important; color: #d95c5c !important;
a { a {
color: #d95c5c !important; color: #d95c5c !important;
&:hover { &:hover {
color: #E67777 !important; color: #E67777 !important;
} }
} }
} }
&.blue { &.blue {
color: #428bca !important; color: #428bca !important;
a { a {
color: #15c !important; color: #15c !important;
&:hover { &:hover {
color: #428bca !important; color: #428bca !important;
} }
} }
} }
&.black { &.black {
color: #444; color: #444;
&:hover { &:hover {
color: #000; color: #000;
} }
} }
&.grey { &.grey {
color: #767676 !important; color: #767676 !important;
a { a {
color: #444 !important; color: #444 !important;
&:hover { &:hover {
color: #000 !important; color: #000 !important;
} }
} }
} }
&.light.grey { &.light.grey {
color: #888 !important; color: #888 !important;
} }
&.green { &.green {
color: #6cc644 !important; color: #6cc644 !important;
} }
&.purple { &.purple {
color: #6e5494 !important; color: #6e5494 !important;
} }
&.yellow { &.yellow {
color: #FBBD08 !important; color: #FBBD08 !important;
} }
&.gold { &.gold {
color: #a1882b !important; color: #a1882b !important;
} }
&.left { &.left {
text-align: left !important; text-align: left !important;
} }
&.right { &.right {
text-align: right !important; text-align: right !important;
} }
&.small { &.small {
font-size: 0.75em; font-size: 0.75em;
} }
&.normal { &.normal {
font-weight: normal; font-weight: normal;
} }
&.bold { &.bold {
font-weight: bold; font-weight: bold;
} }
&.italic { &.italic {
font-style: italic; font-style: italic;
} }
&.truncate { &.truncate {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
} }
&.thin { &.thin {
font-weight: normal; font-weight: normal;
} }
&.middle { &.middle {
vertical-align: middle; vertical-align: middle;
} }
} }
.message { .message {
text-align: center; text-align: center;
} }
.header > i + .content { .header > i + .content {
padding-left: 0.75rem; padding-left: 0.75rem;
vertical-align: middle; vertical-align: middle;
} }
.warning { .warning {
&.header { &.header {
background-color: #F9EDBE !important; background-color: #F9EDBE !important;
border-color: #F0C36D; border-color: #F0C36D;
} }
&.segment { &.segment {
border-color: #F0C36D; border-color: #F0C36D;
} }
} }
.info { .info {
&.segment { &.segment {
border: 1px solid #c5d5dd; border: 1px solid #c5d5dd;
&.top { &.top {
background-color: #e6f1f6 !important; background-color: #e6f1f6 !important;
h3, h4 { h3, h4 {
margin-top: 0; margin-top: 0;
} }
h3:last-child { h3:last-child {
margin-top: 4px; margin-top: 4px;
} }
> :last-child { > :last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
} }
.normal.header { .normal.header {
font-weight: normal; font-weight: normal;
} }
.avatar.image { .avatar.image {
border-radius: 3px; border-radius: 3px;
} }
.form { .form {
.fake { .fake {
display: none !important; display: none !important;
} }
.sub.field { .sub.field {
margin-left: 25px; margin-left: 25px;
} }
} }
.sha.label { .sha.label {
font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace; font-family: Consolas, Menlo, Monaco, "Lucida Console", monospace;
font-size: 13px; font-size: 13px;
padding: 6px 10px 4px 10px; padding: 6px 10px 4px 10px;
font-weight: normal; font-weight: normal;
margin: 0 6px; margin: 0 6px;
} }
&.status.buttons { &.status.buttons {
.octicon { .octicon {
margin-right: 4px; margin-right: 4px;
} }
} }
&.inline.delete-button { &.inline.delete-button {
padding: 8px 15px; padding: 8px 15px;
font-weight: normal; font-weight: normal;
} }
.background { .background {
&.red { &.red {
background-color: #d95c5c !important; background-color: #d95c5c !important;
} }
&.blue { &.blue {
background-color: #428bca !important; background-color: #428bca !important;
} }
&.black { &.black {
background-color: #444; background-color: #444;
} }
&.grey { &.grey {
background-color: #767676 !important; background-color: #767676 !important;
} }
&.light.grey { &.light.grey {
background-color: #888 !important; background-color: #888 !important;
} }
&.green { &.green {
background-color: #6cc644 !important; background-color: #6cc644 !important;
} }
&.purple { &.purple {
background-color: #6e5494 !important; background-color: #6e5494 !important;
} }
&.yellow { &.yellow {
background-color: #FBBD08 !important; background-color: #FBBD08 !important;
} }
&.gold { &.gold {
background-color: #a1882b !important; background-color: #a1882b !important;
} }
} }
.branch-tag-choice { .branch-tag-choice {
line-height: 20px; line-height: 20px;
} }
} }
.overflow.menu { .overflow.menu {
.items { .items {
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
.item { .item {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
display: block; display: block;
border: none; border: none;
height: auto; height: auto;
border-top: none; border-top: none;
line-height: 1em; line-height: 1em;
color: rgba(0,0,0,.8); color: rgba(0,0,0,.8);
padding: .71428571em 1.14285714em !important; padding: .71428571em 1.14285714em !important;
font-size: 1rem; font-size: 1rem;
text-transform: none; text-transform: none;
font-weight: 400; font-weight: 400;
box-shadow: none; box-shadow: none;
-webkit-touch-callout: none; -webkit-touch-callout: none;
&.active { &.active {
font-weight: 700; font-weight: 700;
} }
&:hover { &:hover {
background: rgba(0,0,0,.05); background: rgba(0,0,0,.05);
color: rgba(0,0,0,.8); color: rgba(0,0,0,.8);
z-index: 13; z-index: 13;
} }
} }
} }
} }
.scrolling.menu { .scrolling.menu {
.item.selected { .item.selected {
font-weight: 700 !important; font-weight: 700 !important;
} }
} }
footer { footer {
margin-top: @footer-margin+14px !important; margin-top: @footer-margin+14px !important;
height: @footer-margin; height: @footer-margin;
background-color: white; background-color: white;
border-top: 1px solid #d6d6d6; border-top: 1px solid #d6d6d6;
clear: both; clear: both;
width: 100%; width: 100%;
color: #888888; color: #888888;
.container { .container {
padding-top: 10px; padding-top: 10px;
.fa { .fa {
width: 16px; width: 16px;
text-align: center; text-align: center;
color: #428bca; color: #428bca;
} }
.links >* { .links >* {
border-left: 1px solid #d6d6d6; border-left: 1px solid #d6d6d6;
padding-left: 8px; padding-left: 8px;
margin-left: 5px; margin-left: 5px;
&:first-child { &:first-child {
border-left: none; border-left: none;
} }
} }
} }
.ui.language .menu { .ui.language .menu {
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
margin-bottom: 7px; margin-bottom: 7px;
} }
} }
.hide { .hide {
display: none; display: none;
} }
.center { .center {
text-align: center; text-align: center;
} }
.generate-img(16); .generate-img(16);
.generate-img(@n, @i: 1) when (@i =< @n) { .generate-img(@n, @i: 1) when (@i =< @n) {
.img-@{i} { .img-@{i} {
width: (2px * @i) !important; width: (2px * @i) !important;
height: (2px * @i) !important; height: (2px * @i) !important;
} }
.generate-img(@n, (@i + 1)); .generate-img(@n, (@i + 1));
} }
// Accessibility // Accessibility
.sr-only { .sr-only {
position: absolute; position: absolute;
width: 1px; width: 1px;
height: 1px; height: 1px;
padding: 0; padding: 0;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
border: 0; border: 0;
} }
.sr-only-focusable:active, .sr-only-focusable:active,
.sr-only-focusable:focus { .sr-only-focusable:focus {
position: static; position: static;
width: auto; width: auto;
height: auto; height: auto;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
clip: auto; clip: auto;
} }
@media only screen and (max-width: 991px) and (min-width: 768px) { @media only screen and (max-width: 991px) and (min-width: 768px) {
.ui.container { .ui.container {
width: 95%; width: 95%;
} }
} }
/* Overrides some styles of the Highlight.js plugin */ /* Overrides some styles of the Highlight.js plugin */
.hljs { .hljs {
background: inherit !important; background: inherit !important;
padding: 0 !important; padding: 0 !important;
} }
.ui.menu.new-menu { .ui.menu.new-menu {
justify-content: center !important; justify-content: center !important;
padding-top: 15px !important; padding-top: 15px !important;
margin-top: -15px !important; margin-top: -15px !important;
margin-bottom: 15px !important; margin-bottom: 15px !important;
background-color: #FAFAFA !important; background-color: #FAFAFA !important;
border-width: 1px !important; border-width: 1px !important;
} }
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {
.ui.menu.new-menu { .ui.menu.new-menu {
overflow-x: auto !important; overflow-x: auto !important;
justify-content: left !important; justify-content: left !important;
padding-bottom: 5px; padding-bottom: 5px;
} }
.ui.menu.new-menu::-webkit-scrollbar { .ui.menu.new-menu::-webkit-scrollbar {
height: 8px; height: 8px;
display: none; display: none;
} }
.ui.menu.new-menu:hover::-webkit-scrollbar { .ui.menu.new-menu:hover::-webkit-scrollbar {
display: block; display: block;
} }
.ui.menu.new-menu::-webkit-scrollbar-track { .ui.menu.new-menu::-webkit-scrollbar-track {
background: rgba(0,0,0,0.01); background: rgba(0,0,0,0.01);
} }
.ui.menu.new-menu::-webkit-scrollbar-thumb { .ui.menu.new-menu::-webkit-scrollbar-thumb {
background:rgba(0,0,0,0.2); background:rgba(0,0,0,0.2);
} }
.ui.menu.new-menu:after { .ui.menu.new-menu:after {
position: absolute; position: absolute;
margin-top: -15px; margin-top: -15px;
display: block; display: block;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
content: ' '; content: ' ';
right: 0; right: 0;
height: 53px; height: 53px;
z-index: 1000; z-index: 1000;
width: 60px; width: 60px;
clear: none; clear: none;
visibility: visible; visibility: visible;
} }
.ui.menu.new-menu a.item:last-child { .ui.menu.new-menu a.item:last-child {
padding-right: 30px !important; padding-right: 30px !important;
} }
} }
[v-cloak] { [v-cloak] {
display: none !important; display: none !important;
} }
.repos-search { .repos-search {

2545
public/less/_repository.less
View File

File diff suppressed because it is too large Load Diff

2
templates/repo/diff/section_unified.tmpl
Unescape View File

@ -16,7 +16,7 @@
</td> </td>
{{end}} {{end}}
<td class="lines-code"> <td class="lines-code">
<pre><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre> <pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre>
</td> </td>
</tr> </tr>
{{end}} {{end}}

Write Preview
Loading…
Cancel
Save