Fix wrapping long code lines in UI (#5927)
Wrapping was initially added in https://github.com/go-gitea/gitea/pull/2789 but it is currently disabled because the rule that applies wrapping to the wrap class did not have enough CSS specificity. Resolved the issue by using a general selector that matches all code boxes. The previous wrap class was removed because it had only been inconsistenly applied to various code boxes and because I found no easy way to add classes to code boxes rendered in Markdown. Also removed a seemingly useless :before on code view and added padding to restore the spacing.
This commit is contained in:
parent
af22df8314
commit
12ee544411
5 changed files with 11 additions and 25 deletions
File diff suppressed because one or more lines are too long
|
@ -27,26 +27,15 @@ pre, code {
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
&.wrap {
|
|
||||||
white-space: pre-wrap; /* CSS 3 */
|
|
||||||
// white-space: -moz-normal; /* Mozilla, since 1999 */
|
|
||||||
// white-space: -normal; /* Opera 4-6 */
|
|
||||||
// white-space: -o-normal; /* Opera 7 */
|
|
||||||
|
|
||||||
-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;
|
|
||||||
}
|
}
|
||||||
|
/* Wrap long lines of code. This will also apply to Markdown code boxes. */
|
||||||
|
pre > code {
|
||||||
|
white-space: pre-wrap !important;
|
||||||
|
word-break: break-all !important;
|
||||||
|
overflow-wrap: break-word !important;
|
||||||
}
|
}
|
||||||
.dont-break-out {
|
.dont-break-out {
|
||||||
/* These are technically the same, but use both */
|
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
word-wrap: break-word;
|
|
||||||
|
|
||||||
-ms-word-break: break-all;
|
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
|
||||||
/* Adds a hyphen where the word breaks, if supported (No Blink) */
|
/* Adds a hyphen where the word breaks, if supported (No Blink) */
|
||||||
|
|
|
@ -370,13 +370,10 @@
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
li {
|
li {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
padding: 0 .25em;
|
||||||
&.active {
|
&.active {
|
||||||
background: #ffffdd;
|
background: #ffffdd;
|
||||||
}
|
}
|
||||||
&:before {
|
|
||||||
content: ' ';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -127,7 +127,7 @@
|
||||||
{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 2))}}
|
{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 2))}}
|
||||||
<a class="ui green button add-code-comment add-code-comment-left" data-path="{{$file.Name}}" data-side="left" data-idx="{{$line.LeftIdx}}">+</a>
|
<a class="ui green button add-code-comment add-code-comment-left" data-path="{{$file.Name}}" data-side="left" data-idx="{{$line.LeftIdx}}">+</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
|
<pre><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
|
||||||
</td>
|
</td>
|
||||||
<td class="lines-num lines-num-new">
|
<td class="lines-num lines-num-new">
|
||||||
<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
|
<span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
|
||||||
|
@ -137,7 +137,7 @@
|
||||||
{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 3))}}
|
{{if and $.SignedUserID $line.CanComment $.PageIsPullFiles (not (eq .GetType 3))}}
|
||||||
<a class="ui green button add-code-comment add-code-comment-right" data-path="{{$file.Name}}" data-side="right" data-idx="{{$line.RightIdx}}">+</a>
|
<a class="ui green button add-code-comment add-code-comment-right" data-path="{{$file.Name}}" data-side="right" data-idx="{{$line.RightIdx}}">+</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
|
<pre><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{{if gt (len $line.Comments) 0}}
|
{{if gt (len $line.Comments) 0}}
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
{{if and $.root.SignedUserID $line.CanComment $.root.PageIsPullFiles}}
|
{{if and $.root.SignedUserID $line.CanComment $.root.PageIsPullFiles}}
|
||||||
<a class="ui green button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}" data-path="{{$file.Name}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">+</a>
|
<a class="ui green button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}" data-path="{{$file.Name}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">+</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre>
|
<pre><code class="{{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{$section.GetComputedInlineDiffFor $line}}</code></pre>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{{if gt (len $line.Comments) 0}}
|
{{if gt (len $line.Comments) 0}}
|
||||||
|
|
Reference in a new issue