third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix whitespace rendering in diff (#13415)

Browse Source 
- 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: https://github.com/go-gitea/gitea/issues/13406
tokarchuk/v1.17
silverwind 4 years ago committed by GitHub
parent 951a333733
commit 62719cdd2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 45 additions and 58 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. 1
      routers/repo/blame.go
  2. 2
      templates/repo/blame.tmpl
  3. 8
      templates/repo/diff/blob_excerpt.tmpl
  4. 6
      templates/repo/diff/box.tmpl
  5. 4
      templates/repo/diff/section_unified.tmpl
  6. 8
      templates/repo/settings/webhook/history.tmpl
  7. 2
      templates/repo/view_file.tmpl
  8. 2
      templates/repo/wiki/revision.tmpl
  9. 4
      templates/user/profile.tmpl
  10. 52
      web_src/less/_base.less
  11. 11
      web_src/less/_repository.less
  12. 3
      web_src/less/helpers.less

1
routers/repo/blame.go
Unescape View File

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

2
templates/repo/blame.tmpl
Unescape View File

@ -26,7 +26,7 @@
<tr>
<td class="lines-commit">{{.BlameCommitInfo}}</td>
<td class="lines-num">{{.BlameLineNums}}</td>
<td class="lines-code"><pre><code class="chroma"><ol class="linenums">{{.BlameContent}}</ol></code></pre></td>
<td class="lines-code"><code class="chroma"><ol class="linenums">{{.BlameContent}}</ol></code></td>
</tr>
</tbody>
</table>

8
templates/repo/diff/blob_excerpt.tmpl
Unescape View File

@ -19,14 +19,14 @@
</a>
{{end}}
</td>
<td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td>
<td colspan="5" class="lines-code lines-code-old "><code class="code-inner">{{$.section.GetComputedInlineDiffFor $line}}</code></td>
{{else}}
<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>
<td class="blob-excerpt lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker=""></span>{{end}}</td>
<td class="blob-excerpt lines-code lines-code-old halfwidth"><span class="mono wrap">{{if $line.LeftIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
<td class="blob-excerpt lines-code lines-code-old halfwidth"><code class="code-inner">{{if $line.LeftIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
<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>
<td class="blob-excerpt lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker=""></span>{{end}}</td>
<td class="blob-excerpt lines-code lines-code-new halfwidth"><span class="mono wrap">{{if $line.RightIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</span></td>
<td class="blob-excerpt lines-code lines-code-new halfwidth"><code class="code-inner">{{if $line.RightIdx}}{{$.section.GetComputedInlineDiffFor $line}}{{end}}</code></td>
{{end}}
</tr>
{{end}}
@ -56,7 +56,7 @@
<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>
{{end}}
<td class="blob-excerpt lines-type-marker"><span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><span class="mono wrap">{{$.section.GetComputedInlineDiffFor $line}}</span></td>
<td class="blob-excerpt lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code class="code-inner">{{$.section.GetComputedInlineDiffFor $line}}</code></td>
</tr>
{{end}}
{{end}}

6
templates/repo/diff/box.tmpl
Unescape View File

@ -154,14 +154,14 @@
</a>
{{end}}
</td>
<td colspan="5" class="lines-code lines-code-old "><span class="mono wrap">{{$section.GetComputedInlineDiffFor $line}}</span></td>
<td colspan="5" class="lines-code lines-code-old "><code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</span></td>
{{else}}
<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>
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
<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>
<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>
<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>
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
<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>
<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>
{{end}}
</tr>
{{if gt (len $line.Comments) 0}}

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

@ -27,9 +27,9 @@
{{end}}
<td class="lines-type-marker"><span class="mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
{{if eq .GetType 4}}
<td class="chroma lines-code blob-hunk"><span class="mono wrap">{{$section.GetComputedInlineDiffFor $line}}</span></td>
<td class="chroma lines-code blob-hunk"><code class="code-inner">{{$section.GetComputedInlineDiffFor $line}}</code></td>
{{else}}
<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>
<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>
{{end}}
</tr>
{{if gt (len $line.Comments) 0}}

8
templates/repo/settings/webhook/history.tmpl
Unescape View File

@ -44,12 +44,12 @@
<div class="ui bottom attached tab segment active" data-tab="request-{{.ID}}">
{{if .RequestInfo}}
<h5>{{$.i18n.Tr "repo.settings.webhook.headers"}}</h5>
<pre class="raw"><strong>Request URL:</strong> {{.URL}}
<pre class="webhook-info"><strong>Request URL:</strong> {{.URL}}
<strong>Request method:</strong> {{if .HTTPMethod}}{{.HTTPMethod}}{{else}}POST{{end}}
{{ range $key, $val := .RequestInfo.Headers }}<strong>{{$key}}:</strong> {{$val}}
{{end}}</pre>
<h5>{{$.i18n.Tr "repo.settings.webhook.payload"}}</h5>
<pre class="raw"><code class="json">{{.PayloadContent}}</code></pre>
<pre class="webhook-info"><code class="json">{{.PayloadContent}}</code></pre>
{{else}}
N/A
{{end}}
@ -57,10 +57,10 @@
<div class="ui bottom attached tab segment" data-tab="response-{{.ID}}">
{{if .ResponseInfo}}
<h5>{{$.i18n.Tr "repo.settings.webhook.headers"}}</h5>
<pre class="raw">{{ range $key, $val := .ResponseInfo.Headers }}<strong>{{$key}}:</strong> {{$val}}
<pre class="webhook-info">{{ range $key, $val := .ResponseInfo.Headers }}<strong>{{$key}}:</strong> {{$val}}
{{end}}</pre>
<h5>{{$.i18n.Tr "repo.settings.webhook.body"}}</h5>
<pre class="raw"><code>{{.ResponseInfo.Body}}</code></pre>
<pre class="webhook-info"><code>{{.ResponseInfo.Body}}</code></pre>
{{else}}
N/A
{{end}}

2
templates/repo/view_file.tmpl
Unescape View File

@ -99,7 +99,7 @@
<span id="L{{$line}}" data-line-number="{{$line}}"></span>
</td>
<td rel="L{{$line}}" class="lines-code chroma">
<code>{{$code | Safe}}</code>
<code class="code-inner">{{$code | Safe}}</code>
</td>
</tr>
{{end}}

2
templates/repo/wiki/revision.tmpl
Unescape View File

@ -31,7 +31,7 @@
<div class="ui header eight wide column">
<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>
{{$title}}
<div class="ui sub header wrap">
<div class="ui sub header word-break">
{{$timeSince := TimeSince .Author.When $.Lang}}
{{.i18n.Tr "repo.wiki.last_commit_info" .Author.Name $timeSince | Safe}}
</div>

4
templates/user/profile.tmpl
Unescape View File

@ -13,11 +13,11 @@
<img src="{{.Owner.SizedRelAvatarLink 290}}" title="{{.Owner.Name}}" height="290" width="290"/>
</span>
{{end}}
<div class="content wrap">
<div class="content word-break">
{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
<span class="username text center">{{.Owner.Name}}</span>
</div>
<div class="extra content wrap">
<div class="extra content word-break">
<ul class="text black">
{{if .Owner.Location}}
<li>{{svg "octicon-location"}} {{.Owner.Location}}</li>

52
web_src/less/_base.less
Unescape View File

@ -177,42 +177,6 @@ a:hover,
color: var(--color-primary-dark-2);
}
.rounded {
border-radius: var(--border-radius) !important;
}
.wrap {
word-wrap: break-word;
word-break: break-all;
}
.mono {
font-family: var(--fonts-monospace);
}
pre,
code {
font: 12px var(--fonts-monospace);
&.raw {
padding: 7px 12px;
margin: 10px 0;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
font-size: 13px;
line-height: 1.5;
overflow: auto;
}
&.wrap {
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: break-word;
word-wrap: break-word;
}
}
.dont-break-out {
overflow-wrap: break-word;
word-wrap: break-word;
@ -1137,10 +1101,6 @@ i.icon.centerlock {
padding-left: 5px;
}
.lines-code code {
white-space: pre;
}
.lines-code.active,
.lines-code .active {
background: #fffbdd !important;
@ -1155,6 +1115,18 @@ i.icon.centerlock {
padding: 0 !important;
}
.code-inner {
font: 12px var(--fonts-monospace);
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: break-word;
word-wrap: break-word;
}
.blame .code-inner {
white-space: pre;
}
.lines-commit {
vertical-align: top;
color: #999999;

11
web_src/less/_repository.less
Unescape View File

@ -3239,6 +3239,17 @@ td.blob-excerpt {
padding-left: 8px;
}
.webhook-info {
padding: 7px 12px;
margin: 10px 0;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
font-size: 13px;
line-height: 1.5;
overflow: auto;
}
.title_wip_desc {
margin-top: 1em;
}

3
web_src/less/helpers.less
Unescape View File

@ -4,6 +4,9 @@
.js { justify-content: flex-start; }
.je { justify-content: flex-end; }
.sb { justify-content: space-between; }
.mono { font-family: var(--fonts-monospace); }
.rounded { border-radius: var(--border-radius) !important; }
.word-break { word-wrap: break-word; word-break: break-all; }
.m-0 { margin: 0 !important; }
.m-1 { margin: .125rem !important; }

Write Preview
Loading…
Cancel
Save