Skip to content

Commit 62719cd

Browse files
silverwindsilverwind
authored
Fix whitespace rendering in diff (#13415)
- Introduce new .code-inner class that sets the CSS attributes on rendered code lines like view,blame and diff. - Rename .wrap class to .word-break to reflect what it actually does - Remove .raw which was only used on webhook page - Set white-space: pre-wrap except on blame where it can break the layout Fixes: #13406
1 parent 951a333 commit 62719cd

File tree

12 files changed

+45
-58
lines changed

12 files changed

+45
-58
lines changed

‎routers/repo/blame.go‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ func renderBlame(ctx *context.Context, blameParts []git.BlamePart, commitNames m
237237
}
238238
fileName := fmt.Sprintf("%v", ctx.Data["FileName"])
239239
line = highlight.Code(fileName, line)
240+
line = `<code class="code-inner">` + line + `</code>`
240241
if len(part.Lines)-1 == index && len(blameParts)-1 != pi {
241242
codeLines.WriteString(fmt.Sprintf(`<li class="L%d bottom-line" rel="L%d">%s</li>`, i, i, line))
242243
} else {

‎templates/repo/blame.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<tr>
2727
<td class="lines-commit">{{.BlameCommitInfo}}</td>
2828
<td class="lines-num">{{.BlameLineNums}}</td>
29-
<td class="lines-code"><pre><code class="chroma"><ol class="linenums">{{.BlameContent}}</ol></code></pre></td>
29+
<td class="lines-code"><code class="chroma"><ol class="linenums">{{.BlameContent}}</ol></code></td>
3030
</tr>
3131
</tbody>
3232
</table>

‎templates/repo/diff/blob_excerpt.tmpl‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@
1919
</a>
2020
{{end}}
2121
</td>
22-
<td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td>
22+
<td colspan="5" class="lines-code lines-code-old "><code class="code-inner">{{$.section.GetComputedInlineDiffFor $line}}</code></td>
2323
{{else}}
2424
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{Sha1 $.fileName}}L{{$line.LeftIdx}}{{end}}"></span></td>
2525
<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker=""></span>{{end}}</td>
26-
<td class="blob-excerpt lines-code lines-code-old halfwidth"><span class="mono wrap">{{if $line.LeftIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
26+
<td class="blob-excerpt lines-code lines-code-old halfwidth"><code class="code-inner">{{if $line.LeftIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
2727
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{Sha1 $.fileName}}R{{$line.RightIdx}}{{end}}"></span></td>
2828
<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker=""></span>{{end}}</td>
29-
<td class="blob-excerpt lines-code lines-code-new halfwidth"><span class="mono wrap">{{if $line.RightIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
29+
<td class="blob-excerpt lines-code lines-code-new halfwidth"><code class="code-inner">{{if $line.RightIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
3030
{{end}}
3131
</tr>
3232
{{end}}
@@ -56,7 +56,7 @@
5656
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{Sha1 $.fileName}}R{{$line.RightIdx}}{{end}}"></span></td>
5757
{{end}}
5858
<td class="blob-excerpt lines-type-marker"><span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
59-
<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td>
59+
<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code class="code-inner">{{$.section.GetComputedInlineDiffFor $line}}</code></td>
6060
</tr>
6161
{{end}}
6262
{{end}}

‎templates/repo/diff/box.tmpl‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -154,14 +154,14 @@
154154
</a>
155155
{{end}}
156156
</td>
157-
<td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$section.GetComputedInlineDiffFor $line}}</span></td>
157+
<td colspan="5" class="lines-code lines-code-old "><code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</span></td>
158158
{{else}}
159159
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}"></span></td>
160160
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
161-
<td class="lines-code lines-code-old halfwidth">{{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}}" data-type-marker="+"></a>{{end}}<span class="mono wrap">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
161+
<td class="lines-code lines-code-old halfwidth">{{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}}" data-type-marker="+"></a>{{end}}<code class="code-inner">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
162162
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}"></span></td>
163163
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
164-
<td class="lines-code lines-code-new halfwidth">{{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}}" data-type-marker="+"></a>{{end}}<span class="mono wrap">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
164+
<td class="lines-code lines-code-new halfwidth">{{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}}" data-type-marker="+"></a>{{end}}<code class="code-inner">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
165165
{{end}}
166166
</tr>
167167
{{if gt (len $line.Comments) 0}}

‎templates/repo/diff/section_unified.tmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@
2727
{{end}}
2828
<td class="lines-type-marker"><span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
2929
{{if eq .GetType 4}}
30-
<td class="chroma lines-code blob-hunk"><span class="mono wrap">{{$section.GetComputedInlineDiffFor $line}}</span></td>
30+
<td class="chroma lines-code blob-hunk"><code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</code></td>
3131
{{else}}
32-
<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{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}}" data-type-marker="+"></a>{{end}}<span class="mono wrap">{{$section.GetComputedInlineDiffFor $line}}</span></td>
32+
<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{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}}" data-type-marker="+"></a>{{end}}<code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</code></td>
3333
{{end}}
3434
</tr>
3535
{{if gt (len $line.Comments) 0}}

‎templates/repo/settings/webhook/history.tmpl‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,23 +44,23 @@
4444
<div class="ui bottom attached tab segment active" data-tab="request-{{.ID}}">
4545
{{if .RequestInfo}}
4646
<h5>{{$.i18n.Tr "repo.settings.webhook.headers"}}</h5>
47-
<pre class="raw"><strong>Request URL:</strong> {{.URL}}
47+
<pre class="webhook-info"><strong>Request URL:</strong> {{.URL}}
4848
<strong>Request method:</strong> {{if .HTTPMethod}}{{.HTTPMethod}}{{else}}POST{{end}}
4949
{{ range $key, $val := .RequestInfo.Headers }}<strong>{{$key}}:</strong> {{$val}}
5050
{{end}}</pre>
5151
<h5>{{$.i18n.Tr "repo.settings.webhook.payload"}}</h5>
52-
<pre class="raw"><code class="json">{{.PayloadContent}}</code></pre>
52+
<pre class="webhook-info"><code class="json">{{.PayloadContent}}</code></pre>
5353
{{else}}
5454
N/A
5555
{{end}}
5656
</div>
5757
<div class="ui bottom attached tab segment" data-tab="response-{{.ID}}">
5858
{{if .ResponseInfo}}
5959
<h5>{{$.i18n.Tr "repo.settings.webhook.headers"}}</h5>
60-
<pre class="raw">{{ range $key, $val := .ResponseInfo.Headers }}<strong>{{$key}}:</strong> {{$val}}
60+
<pre class="webhook-info">{{ range $key, $val := .ResponseInfo.Headers }}<strong>{{$key}}:</strong> {{$val}}
6161
{{end}}</pre>
6262
<h5>{{$.i18n.Tr "repo.settings.webhook.body"}}</h5>
63-
<pre class="raw"><code>{{.ResponseInfo.Body}}</code></pre>
63+
<pre class="webhook-info"><code>{{.ResponseInfo.Body}}</code></pre>
6464
{{else}}
6565
N/A
6666
{{end}}

‎templates/repo/view_file.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
<span id="L{{$line}}" data-line-number="{{$line}}"></span>
100100
</td>
101101
<td rel="L{{$line}}" class="lines-code chroma">
102-
<code>{{$code | Safe}}</code>
102+
<code class="code-inner">{{$code | Safe}}</code>
103103
</td>
104104
</tr>
105105
{{end}}

‎templates/repo/wiki/revision.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<div class="ui header eight wide column">
3232
<a class="file-revisions-btn ui basic button" title="{{.i18n.Tr "repo.wiki.back_to_wiki"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}" ><span>{{.revision}}</span> {{svg "octicon-home"}}</a>
3333
{{$title}}
34-
<div class="ui sub header wrap">
34+
<div class="ui sub header word-break">
3535
{{$timeSince := TimeSince .Author.When $.Lang}}
3636
{{.i18n.Tr "repo.wiki.last_commit_info" .Author.Name $timeSince | Safe}}
3737
</div>

‎templates/user/profile.tmpl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@
1313
<img src="{{.Owner.SizedRelAvatarLink 290}}" title="{{.Owner.Name}}" height="290" width="290"/>
1414
</span>
1515
{{end}}
16-
<div class="content wrap">
16+
<div class="content word-break">
1717
{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
1818
<span class="username text center">{{.Owner.Name}}</span>
1919
</div>
20-
<div class="extra content wrap">
20+
<div class="extra content word-break">
2121
<ul class="text black">
2222
{{if .Owner.Location}}
2323
<li>{{svg "octicon-location"}} {{.Owner.Location}}</li>

‎web_src/less/_base.less‎

Lines changed: 12 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -177,42 +177,6 @@ a:hover,
177177
color: var(--color-primary-dark-2);
178178
}
179179

180-
.rounded {
181-
border-radius: var(--border-radius) !important;
182-
}
183-
184-
.wrap {
185-
word-wrap: break-word;
186-
word-break: break-all;
187-
}
188-
189-
.mono {
190-
font-family: var(--fonts-monospace);
191-
}
192-
193-
pre,
194-
code {
195-
font: 12px var(--fonts-monospace);
196-
197-
&.raw {
198-
padding: 7px 12px;
199-
margin: 10px 0;
200-
background-color: #f8f8f8;
201-
border: 1px solid #dddddd;
202-
border-radius: 3px;
203-
font-size: 13px;
204-
line-height: 1.5;
205-
overflow: auto;
206-
}
207-
208-
&.wrap {
209-
white-space: pre-wrap;
210-
word-break: break-all;
211-
overflow-wrap: break-word;
212-
word-wrap: break-word;
213-
}
214-
}
215-
216180
.dont-break-out {
217181
overflow-wrap: break-word;
218182
word-wrap: break-word;
@@ -1137,10 +1101,6 @@ i.icon.centerlock {
11371101
padding-left: 5px;
11381102
}
11391103

1140-
.lines-code code {
1141-
white-space: pre;
1142-
}
1143-
11441104
.lines-code.active,
11451105
.lines-code .active {
11461106
background: #fffbdd !important;
@@ -1155,6 +1115,18 @@ i.icon.centerlock {
11551115
padding: 0 !important;
11561116
}
11571117

1118+
.code-inner {
1119+
font: 12px var(--fonts-monospace);
1120+
white-space: pre-wrap;
1121+
word-break: break-all;
1122+
overflow-wrap: break-word;
1123+
word-wrap: break-word;
1124+
}
1125+
1126+
.blame .code-inner {
1127+
white-space: pre;
1128+
}
1129+
11581130
.lines-commit {
11591131
vertical-align: top;
11601132
color: #999999;

0 commit comments

Comments
 (0)