mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

Various improvements for long file and commit names (#30374) 

Fixes: https://github.com/go-gitea/gitea/issues/29438

This contains numerous enhancements for how large commit messages and
large filenames render. Another notable change is that the file path is
no longer cut off by backend at 30 chars, but rendered in full with
wrapping.

<img width="1329" alt="Screenshot 2024-04-09 at 21 53 57"
src="https://github.com/go-gitea/gitea/assets/115237/5ccbb3d6-643a-4f60-ba79-3572b36d5182">
<hr>
<img width="711" alt="Screenshot 2024-04-09 at 21 44 24"
src="https://github.com/go-gitea/gitea/assets/115237/6ffe8fbb-407c-4aa7-b591-3d80daea7d57">
<hr>
<img width="439" alt="Screenshot 2024-04-09 at 21 19 03"
src="https://github.com/go-gitea/gitea/assets/115237/1ec7f6e9-2fd8-4841-87eb-6ca02ab9cd61">
<hr>
<img width="444" alt="Screenshot 2024-04-09 at 21 18 52"
src="https://github.com/go-gitea/gitea/assets/115237/70931b9e-5841-477e-b3bc-98f8d2662964">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 50099d7af436785daf66a3a9f27bd5c009f90684)

Conflicts:
	- templates/repo/diff/box.tmpl
          Picked Gitea's version, because it appears we missed a
          gt-gap-1 => tw-gap-1 conversion
	- web_src/css/repo.css
          Conflict due to tag signature highlighting, resolved by
          adding the Gitea changes on top of ours manually.
(cherry picked from commit 28170b517914f00449dbce8ba91e02fa1f0f84e5)
This commit is contained in:
silverwind 2024-04-10 08:13:22 +02:00 committed by Earl Warren
parent 01129b593f
commit 8b54d38cbe
No known key found for this signature in database
GPG Key ID: 0579CB2928A78A00
8 changed files with 107 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/repo/commit_page.tmpl
View File

@ -18,10 +18,10 @@
{{end}} {{end}}
{{end}} {{end}}
<div class="ui top attached header clearing segment tw-relative commit-header {{$class}}"> <div class="ui top attached header clearing segment tw-relative commit-header {{$class}}">
<div class="tw-flex tw-mb-4 tw-flex-wrap"> <div class="tw-flex tw-mb-4 tw-gap-1">
<h3 class="tw-mb-0 tw-flex-1"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage $.Context .Commit.Message ($.Repository.ComposeMetas ctx)}}</span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses}}</h3> <h3 class="tw-mb-0 tw-flex-1"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage $.Context .Commit.Message ($.Repository.ComposeMetas ctx)}}</span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses}}</h3>
{{if not $.PageIsWiki}} {{if not $.PageIsWiki}}
<div> <div class="commit-header-buttons">
<a class="ui primary tiny button" href="{{.SourcePath}}"> <a class="ui primary tiny button" href="{{.SourcePath}}">
{{ctx.Locale.Tr "repo.diff.browse_source"}} {{ctx.Locale.Tr "repo.diff.browse_source"}}
</a> </a>

34
templates/repo/diff/box.tmpl
View File

@ -111,7 +111,7 @@
{{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}} {{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}}
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} tw-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}> <div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} tw-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
<h4 class="diff-file-header sticky-2nd-row ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between tw-flex-wrap"> <h4 class="diff-file-header sticky-2nd-row ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between tw-flex-wrap">
<div class="diff-file-name tw-flex tw-items-center gt-gap-2 tw-flex-wrap"> <div class="diff-file-name tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-flex-wrap">
<button class="fold-file btn interact-bg tw-p-1{{if not $isExpandable}} tw-invisible{{end}}"> <button class="fold-file btn interact-bg tw-p-1{{if not $isExpandable}} tw-invisible{{end}}">
{{if $file.ShouldBeHidden}} {{if $file.ShouldBeHidden}}
{{svg "octicon-chevron-right" 18}} {{svg "octicon-chevron-right" 18}}
@ -128,21 +128,23 @@
{{template "repo/diff/stats" dict "file" . "root" $}} {{template "repo/diff/stats" dict "file" . "root" $}}
{{end}} {{end}}
</div> </div>
<span class="file tw-font-mono"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}</a>{{if .IsLFSFile}} ({{ctx.Locale.Tr "repo.stored_lfs"}}){{end}}</span> <span class="file tw-flex tw-items-center tw-font-mono tw-flex-1"><a class="muted file-link" title="{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}" href="#diff-{{$file.NameHash}}">{{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}</a>
<button class="btn interact-fg tw-p-2" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button> {{if .IsLFSFile}} ({{ctx.Locale.Tr "repo.stored_lfs"}}){{end}}
{{if $file.IsGenerated}} <button class="btn interact-fg tw-p-2" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
<span class="ui label">{{ctx.Locale.Tr "repo.diff.generated"}}</span> {{if $file.IsGenerated}}
{{end}} <span class="ui label">{{ctx.Locale.Tr "repo.diff.generated"}}</span>
{{if $file.IsVendored}} {{end}}
<span class="ui label">{{ctx.Locale.Tr "repo.diff.vendored"}}</span> {{if $file.IsVendored}}
{{end}} <span class="ui label">{{ctx.Locale.Tr "repo.diff.vendored"}}</span>
{{if and $file.Mode $file.OldMode}} {{end}}
{{$old := ctx.Locale.Tr ($file.ModeTranslationKey $file.OldMode)}} {{if and $file.Mode $file.OldMode}}
{{$new := ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}} {{$old := ctx.Locale.Tr ($file.ModeTranslationKey $file.OldMode)}}
<span class="tw-ml-4 tw-font-mono">{{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}}</span> {{$new := ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}
{{else if $file.Mode}} <span class="tw-mx-2 tw-font-mono tw-whitespace-nowrap">{{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}}</span>
<span class="tw-ml-4 tw-font-mono">{{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}</span> {{else if $file.Mode}}
{{end}} <span class="tw-mx-2 tw-font-mono tw-whitespace-nowrap">{{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}</span>
{{end}}
</span>
</div> </div>
<div class="diff-file-header-actions tw-flex tw-items-center tw-gap-1 tw-flex-wrap"> <div class="diff-file-header-actions tw-flex tw-items-center tw-gap-1 tw-flex-wrap">
{{if $showFileViewToggle}} {{if $showFileViewToggle}}

21
templates/repo/home.tmpl
View File

@ -59,8 +59,11 @@
</div> </div>
{{end}} {{end}}
{{template "repo/sub_menu" .}} {{template "repo/sub_menu" .}}
{{$n := len .TreeNames}}
{{$l := Eval $n "-" 1}}
{{$isHomepage := (eq $n 0)}}
<div class="repo-button-row"> <div class="repo-button-row">
<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-y-2"> <div class="tw-flex tw-items-center tw-gap-y-2">
{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}} {{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}} {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
{{$cmpBranch := ""}} {{$cmpBranch := ""}}
@ -75,9 +78,7 @@
</a> </a>
{{end}} {{end}}
<!-- Show go to file and breadcrumbs if not on home page --> <!-- Show go to file and breadcrumbs if not on home page -->
{{$n := len .TreeNames}} {{if $isHomepage}}
{{$l := Eval $n "-" 1}}
{{if eq $n 0}}
<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a> <a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a>
{{end}} {{end}}
@ -101,20 +102,20 @@
</button> </button>
{{end}} {{end}}
{{if and (eq $n 0) (.Repository.IsTemplate)}} {{if and $isHomepage (.Repository.IsTemplate)}}
<a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}"> <a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}">
{{ctx.Locale.Tr "repo.use_template"}} {{ctx.Locale.Tr "repo.use_template"}}
</a> </a>
{{end}} {{end}}
{{if ne $n 0}} {{if (not $isHomepage)}}
<span class="breadcrumb repo-path tw-ml-1"> <span class="breadcrumb repo-path tw-ml-1">
<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a> <a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
{{- range $i, $v := .TreeNames -}} {{- range $i, $v := .TreeNames -}}
<span class="breadcrumb-divider">/</span> <span class="breadcrumb-divider">/</span>
{{- if eq $i $l -}} {{- if eq $i $l -}}
<span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span> <span class="active section" title="{{$v}}">{{$v}}</span>
{{- else -}} {{- else -}}
{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</a></span> {{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{$v}}</a></span>
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
</span> </span>
@ -122,7 +123,7 @@
</div> </div>
<div class="tw-flex tw-items-center"> <div class="tw-flex tw-items-center">
<!-- Only show clone panel in repository home page --> <!-- Only show clone panel in repository home page -->
{{if eq $n 0}} {{if $isHomepage}}
<div class="clone-panel ui action tiny input"> <div class="clone-panel ui action tiny input">
{{template "repo/clone_buttons" .}} {{template "repo/clone_buttons" .}}
<button class="ui small jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}"> <button class="ui small jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
@ -145,7 +146,7 @@
</div> </div>
{{template "repo/cite/cite_modal" .}} {{template "repo/cite/cite_modal" .}}
{{end}} {{end}}
{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}} {{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}
<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}"> <a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}} {{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
</a> </a>

6
templates/repo/view_file.tmpl
View File

@ -11,13 +11,13 @@
{{end}} {{end}}
{{if not .ReadmeInList}} {{if not .ReadmeInList}}
<div id="repo-file-commit-box" class="ui top attached header list-header tw-mb-4"> <div id="repo-file-commit-box" class="ui top attached header list-header tw-mb-4 tw-flex tw-justify-between">
<div> <div class="latest-commit">
{{template "repo/latest_commit" .}} {{template "repo/latest_commit" .}}
</div> </div>
{{if .LatestCommit}} {{if .LatestCommit}}
{{if .LatestCommit.Committer}} {{if .LatestCommit.Committer}}
<div class="ui text grey right age"> <div class="text grey age">
{{TimeSince .LatestCommit.Committer.When ctx.Locale}} {{TimeSince .LatestCommit.Committer.When ctx.Locale}}
</div> </div>
{{end}} {{end}}

8
templates/repo/view_list.tmpl
View File

@ -1,8 +1,12 @@
<table id="repo-files-table" class="ui single line table tw-mt-0" {{if .HasFilesWithoutLatestCommit}}hx-indicator="tr.notready td.message span" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}> <table id="repo-files-table" class="ui single line table tw-mt-0" {{if .HasFilesWithoutLatestCommit}}hx-indicator="tr.notready td.message span" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}>
<thead> <thead>
<tr class="commit-list"> <tr class="commit-list">
<th colspan="2"> <th class="tw-overflow-hidden" colspan="2">
{{template "repo/latest_commit" .}} <div class="tw-flex">
<div class="latest-commit">
{{template "repo/latest_commit" .}}
</div>
</div>
</th> </th>
<th class="text grey right age">{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{TimeSince .LatestCommit.Committer.When ctx.Locale}}{{end}}{{end}}</th> <th class="text grey right age">{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{TimeSince .LatestCommit.Committer.When ctx.Locale}}{{end}}{{end}}</th>
</tr> </tr>

13
web_src/css/base.css
View File

@ -26,6 +26,19 @@
--tab-size: 4; --tab-size: 4;
--checkbox-size: 15px; /* height and width of checkbox and radio inputs */ --checkbox-size: 15px; /* height and width of checkbox and radio inputs */
--page-spacing: 16px; /* space between page elements */ --page-spacing: 16px; /* space between page elements */
--page-margin-x: 32px; /* minimum space on left and right side of page */
}
@media (min-width: 768px) and (max-width: 1200px) {
:root {
--page-margin-x: 16px;
}
}
@media (max-width: 767.98px) {
:root {
--page-margin-x: 8px;
}
} }
:root * { :root * {

23
web_src/css/modules/container.css
View File

@ -49,30 +49,11 @@
/* overwrite width of containers inside the main page content div (div with class "page-content") */ /* overwrite width of containers inside the main page content div (div with class "page-content") */
.page-content .ui.ui.ui.container:not(.fluid) { .page-content .ui.ui.ui.container:not(.fluid) {
width: 1280px; width: 1280px;
max-width: calc(100% - 64px); max-width: calc(100% - calc(2 * var(--page-margin-x)));
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.ui.container.fluid.padded { .ui.container.fluid.padded {
padding: 0 32px; padding: 0 var(--page-margin-x);
}
/* enable fluid page widths for medium size viewports */
@media (min-width: 768px) and (max-width: 1200px) {
.page-content .ui.ui.ui.container:not(.fluid) {
max-width: calc(100% - 32px);
}
.ui.container.fluid.padded {
padding: 0 16px;
}
}
@media (max-width: 767.98px) {
.page-content .ui.ui.ui.container:not(.fluid) {
max-width: calc(100% - 16px);
}
.ui.container.fluid.padded {
padding: 0 8px;
}
} }

76
web_src/css/repo.css
View File

@ -177,12 +177,44 @@
} }
} }
.repository.file.list .repo-path { .commit-summary {
word-break: break-word; flex: 1;
overflow-wrap: anywhere;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.repository.file.list #repo-files-table { .commit-header .commit-summary,
table-layout: fixed; td .commit-summary {
white-space: normal;
}
.latest-commit {
display: flex;
flex: 1;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
.latest-commit .sha {
display: none;
}
.latest-commit .commit-summary {
margin-left: 8px;
}
}
.repo-path {
display: flex;
overflow-wrap: anywhere;
}
/* this is what limits the commit table width to a value that works on all viewport sizes */
#repo-files-table th:first-of-type {
max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x)));
} }
.repository.file.list #repo-files-table thead th { .repository.file.list #repo-files-table thead th {
@ -262,7 +294,6 @@
} }
.repository.file.list #repo-files-table td.age { .repository.file.list #repo-files-table td.age {
width: 120px;
color: var(--color-text-light-1); color: var(--color-text-light-1);
} }
@ -1223,10 +1254,6 @@
margin: 0; margin: 0;
} }
.repository #commits-table td.message {
text-overflow: unset;
}
.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) { .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
background-color: var(--color-light) !important; background-color: var(--color-light) !important;
} }
@ -2153,6 +2180,20 @@
display: inline-block !important; display: inline-block !important;
} }
.commit-header-buttons {
display: flex;
gap: 4px;
align-items: flex-start;
white-space: nowrap;
}
@media (max-width: 767.98px) {
.commit-header-buttons {
flex-direction: column;
align-items: stretch;
}
}
.settings.webhooks .list > .item:not(:first-child), .settings.webhooks .list > .item:not(:first-child),
.settings.githooks .list > .item:not(:first-child), .settings.githooks .list > .item:not(:first-child),
.settings.actions .list > .item:not(:first-child) { .settings.actions .list > .item:not(:first-child) {
@ -2469,7 +2510,7 @@ tbody.commit-list {
.author-wrapper { .author-wrapper {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: calc(100% - 50px); max-width: 100%;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
@ -2494,10 +2535,6 @@ tbody.commit-list {
tr.commit-list { tr.commit-list {
width: 100%; width: 100%;
} }
th .message-wrapper {
display: block;
max-width: calc(100vw - 70px);
}
.author-wrapper { .author-wrapper {
max-width: 80px; max-width: 80px;
} }
@ -2507,27 +2544,18 @@ tbody.commit-list {
tr.commit-list { tr.commit-list {
width: 723px; width: 723px;
} }
th .message-wrapper {
max-width: 120px;
}
} }
@media (min-width: 992px) and (max-width: 1200px) { @media (min-width: 992px) and (max-width: 1200px) {
tr.commit-list { tr.commit-list {
width: 933px; width: 933px;
} }
th .message-wrapper {
max-width: 350px;
}
} }
@media (min-width: 1201px) { @media (min-width: 1201px) {
tr.commit-list { tr.commit-list {
width: 1127px; width: 1127px;
} }
th .message-wrapper {
max-width: 525px;
}
} }
.commit-list .commit-status-link { .commit-list .commit-status-link {
@ -2854,7 +2882,7 @@ tbody.commit-list {
.repository.file.list #repo-files-table .entry td.message, .repository.file.list #repo-files-table .entry td.message,
.repository.file.list #repo-files-table .commit-list td.message, .repository.file.list #repo-files-table .commit-list td.message,
.repository.file.list #repo-files-table .entry span.commit-summary, .repository.file.list #repo-files-table .entry span.commit-summary,
.repository.file.list #repo-files-table .commit-list span.commit-summary { .repository.file.list #repo-files-table .commit-list tr span.commit-summary {
display: none !important; display: none !important;
} }
.repository.view.issue .comment-list .timeline, .repository.view.issue .comment-list .timeline,