From eb620603b64e86a7a2c2ec4fc63d5914cf909d8e 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 --- 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 3ae7fffa1cc94..c37fb46975763 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 5327b7f02c809..92a3163642cf6 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 a0da585452e93..f5746e8040f5f 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -51,8 +51,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 := ""}} @@ -67,9 +70,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}} @@ -93,20 +94,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 -}} @@ -114,7 +115,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 9c5bd9094d1cc..0683004718010 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 7c463c50a6c16..fb257bd474cbb 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 69fa74d3e50c0..cf85e118d9b08 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -25,6 +25,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 dc854f89d00d0..f394d6c06de5f 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 5a9546938f4a7..36cebb016b1a1 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); } @@ -1219,10 +1250,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; } @@ -2114,6 +2141,20 @@ padding-bottom: 0 !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) { @@ -2444,7 +2485,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; } @@ -2469,10 +2510,6 @@ tbody.commit-list { tr.commit-list { width: 100%; } - th .message-wrapper { - display: block; - max-width: calc(100vw - 70px); - } .author-wrapper { max-width: 80px; } @@ -2482,27 +2519,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 { @@ -2829,7 +2857,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}}