From 8b54d38cbe85f8004161a1e40b76f30db3370642 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 10 Apr 2024 08:13:22 +0200 Subject: [PATCH] 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. Screenshot 2024-04-09 at 21 53 57
Screenshot 2024-04-09 at 21 44 24
Screenshot 2024-04-09 at 21 19 03
Screenshot 2024-04-09 at 21 18 52 --------- Co-authored-by: Giteabot (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) --- templates/repo/commit_page.tmpl | 4 +- templates/repo/diff/box.tmpl | 34 +++++++------- templates/repo/home.tmpl | 21 +++++---- templates/repo/view_file.tmpl | 6 +-- templates/repo/view_list.tmpl | 8 +++- web_src/css/base.css | 13 ++++++ web_src/css/modules/container.css | 23 +--------- web_src/css/repo.css | 76 +++++++++++++++++++++---------- 8 files changed, 107 insertions(+), 78 deletions(-) diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl index 3ae7fffa1c..c37fb46975 100644 --- a/templates/repo/commit_page.tmpl +++ b/templates/repo/commit_page.tmpl @@ -18,10 +18,10 @@ {{end}} {{end}}
-
+

{{RenderCommitMessage $.Context .Commit.Message ($.Repository.ComposeMetas ctx)}}{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses}}

{{if not $.PageIsWiki}} -
+
{{ctx.Locale.Tr "repo.diff.browse_source"}} diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 9ede83dcb7..6b343e4ee0 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -111,7 +111,7 @@ {{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}}

-
+
- {{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{ctx.Locale.Tr "repo.stored_lfs"}}){{end}} - - {{if $file.IsGenerated}} - {{ctx.Locale.Tr "repo.diff.generated"}} - {{end}} - {{if $file.IsVendored}} - {{ctx.Locale.Tr "repo.diff.vendored"}} - {{end}} - {{if and $file.Mode $file.OldMode}} - {{$old := ctx.Locale.Tr ($file.ModeTranslationKey $file.OldMode)}} - {{$new := ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}} - {{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}} - {{else if $file.Mode}} - {{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}} - {{end}} + {{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}} + {{if .IsLFSFile}} ({{ctx.Locale.Tr "repo.stored_lfs"}}){{end}} + + {{if $file.IsGenerated}} + {{ctx.Locale.Tr "repo.diff.generated"}} + {{end}} + {{if $file.IsVendored}} + {{ctx.Locale.Tr "repo.diff.vendored"}} + {{end}} + {{if and $file.Mode $file.OldMode}} + {{$old := ctx.Locale.Tr ($file.ModeTranslationKey $file.OldMode)}} + {{$new := ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}} + {{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}} + {{else if $file.Mode}} + {{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}} + {{end}} +
{{if $showFileViewToggle}} diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl index 75a0005e56..e224febaf2 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -59,8 +59,11 @@
{{end}} {{template "repo/sub_menu" .}} + {{$n := len .TreeNames}} + {{$l := Eval $n "-" 1}} + {{$isHomepage := (eq $n 0)}}
-
+
{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}} {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}} {{$cmpBranch := ""}} @@ -75,9 +78,7 @@ {{end}} - {{$n := len .TreeNames}} - {{$l := Eval $n "-" 1}} - {{if eq $n 0}} + {{if $isHomepage}} {{ctx.Locale.Tr "repo.find_file.go_to_file"}} {{end}} @@ -101,20 +102,20 @@ {{end}} - {{if and (eq $n 0) (.Repository.IsTemplate)}} + {{if and $isHomepage (.Repository.IsTemplate)}} {{ctx.Locale.Tr "repo.use_template"}} {{end}} - {{if ne $n 0}} + {{if (not $isHomepage)}} {{StringUtils.EllipsisString .Repository.Name 30}} {{- range $i, $v := .TreeNames -}} / {{- if eq $i $l -}} - {{StringUtils.EllipsisString $v 30}} + {{$v}} {{- else -}} - {{$p := index $.Paths $i}}{{StringUtils.EllipsisString $v 30}} + {{$p := index $.Paths $i}}{{$v}} {{- end -}} {{- end -}} @@ -122,7 +123,7 @@
- {{if eq $n 0}} + {{if $isHomepage}}
{{template "repo/clone_buttons" .}}
{{template "repo/cite/cite_modal" .}} {{end}} - {{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}} + {{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}} {{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}} diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index 2680b374cd..333121c205 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -11,13 +11,13 @@ {{end}} {{if not .ReadmeInList}} -
-
+
+
{{template "repo/latest_commit" .}}
{{if .LatestCommit}} {{if .LatestCommit.Committer}} -
+
{{TimeSince .LatestCommit.Committer.When ctx.Locale}}
{{end}} diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl index 7c463c50a6..fb257bd474 100644 --- a/templates/repo/view_list.tmpl +++ b/templates/repo/view_list.tmpl @@ -1,8 +1,12 @@ - diff --git a/web_src/css/base.css b/web_src/css/base.css index 174523b649..a1f9c087fd 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -26,6 +26,19 @@ --tab-size: 4; --checkbox-size: 15px; /* height and width of checkbox and radio inputs */ --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 * { diff --git a/web_src/css/modules/container.css b/web_src/css/modules/container.css index dc854f89d0..f394d6c06d 100644 --- a/web_src/css/modules/container.css +++ b/web_src/css/modules/container.css @@ -49,30 +49,11 @@ /* overwrite width of containers inside the main page content div (div with class "page-content") */ .page-content .ui.ui.ui.container:not(.fluid) { width: 1280px; - max-width: calc(100% - 64px); + max-width: calc(100% - calc(2 * var(--page-margin-x))); margin-left: auto; margin-right: auto; } .ui.container.fluid.padded { - padding: 0 32px; -} - -/* 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; - } + padding: 0 var(--page-margin-x); } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 28e78730d3..53766ac0f9 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -177,12 +177,44 @@ } } -.repository.file.list .repo-path { - word-break: break-word; +.commit-summary { + flex: 1; + overflow-wrap: anywhere; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } -.repository.file.list #repo-files-table { - table-layout: fixed; +.commit-header .commit-summary, +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 { @@ -262,7 +294,6 @@ } .repository.file.list #repo-files-table td.age { - width: 120px; color: var(--color-text-light-1); } @@ -1223,10 +1254,6 @@ margin: 0; } -.repository #commits-table td.message { - text-overflow: unset; -} - .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) { background-color: var(--color-light) !important; } @@ -2153,6 +2180,20 @@ 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.githooks .list > .item:not(:first-child), .settings.actions .list > .item:not(:first-child) { @@ -2469,7 +2510,7 @@ tbody.commit-list { .author-wrapper { overflow: hidden; text-overflow: ellipsis; - max-width: calc(100% - 50px); + max-width: 100%; display: inline-block; vertical-align: middle; } @@ -2494,10 +2535,6 @@ tbody.commit-list { tr.commit-list { width: 100%; } - th .message-wrapper { - display: block; - max-width: calc(100vw - 70px); - } .author-wrapper { max-width: 80px; } @@ -2507,27 +2544,18 @@ tbody.commit-list { tr.commit-list { width: 723px; } - th .message-wrapper { - max-width: 120px; - } } @media (min-width: 992px) and (max-width: 1200px) { tr.commit-list { width: 933px; } - th .message-wrapper { - max-width: 350px; - } } @media (min-width: 1201px) { tr.commit-list { width: 1127px; } - th .message-wrapper { - max-width: 525px; - } } .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 .commit-list td.message, .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; } .repository.view.issue .comment-list .timeline,
- {{template "repo/latest_commit" .}} + +
+
+ {{template "repo/latest_commit" .}} +
+
{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{TimeSince .LatestCommit.Committer.When ctx.Locale}}{{end}}{{end}}