From d3c71ae9bb5463ddb3a6e85a36e851b92d50924b Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 9 Apr 2024 21:44:55 +0200 Subject: [PATCH 1/4] Various improvements for long file and commit names --- 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/repo.css | 70 +++++++++++++++++++++++---------- 6 files changed, 89 insertions(+), 54 deletions(-) diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl index 49a0b445b196f..7fec88cb79242 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 ab37f7e318139..e18a0aec17213 100644 --- a/templates/repo/home.tmpl +++ b/templates/repo/home.tmpl @@ -50,8 +50,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 := ""}} @@ -66,9 +69,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}} @@ -92,20 +93,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 -}} @@ -113,7 +114,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/repo.css b/web_src/css/repo.css index 8b91b599e7902..95e33daa1bfc2 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -177,8 +177,39 @@ } } -.repository.file.list .repo-path { - word-break: break-word; +.commit-summary { + flex: 1; + overflow-wrap: anywhere; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.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; } .repository.file.list #repo-files-table { @@ -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) { @@ -2346,7 +2387,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; } @@ -2371,10 +2412,6 @@ tbody.commit-list { tr.commit-list { width: 100%; } - th .message-wrapper { - display: block; - max-width: calc(100vw - 70px); - } .author-wrapper { max-width: 80px; } @@ -2384,27 +2421,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 { @@ -2732,7 +2760,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, From 9f47323cf7ac64b09081a7291ccf7e15e2167f5c Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 9 Apr 2024 22:51:49 +0200 Subject: [PATCH 2/4] remove table-layout: fixed from repo files table --- web_src/css/base.css | 14 ++++++++++++++ web_src/css/modules/container.css | 23 ++--------------------- web_src/css/repo.css | 5 +++-- 3 files changed, 19 insertions(+), 23 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 02bc1b72202e8..4c2ec750c3440 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -25,8 +25,22 @@ --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 * { --fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji); } 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 95e33daa1bfc2..cafe26e65a952 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -212,8 +212,9 @@ td .commit-summary { overflow-wrap: anywhere; } -.repository.file.list #repo-files-table { - table-layout: fixed; +/* 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 { From dc19658346e7785bb2d148505734ab2a5ba1889c Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 9 Apr 2024 23:15:42 +0200 Subject: [PATCH 3/4] remove ineffective width --- web_src/css/repo.css | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index cafe26e65a952..c579745238de6 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -294,7 +294,6 @@ td .commit-summary { } .repository.file.list #repo-files-table td.age { - width: 120px; color: var(--color-text-light-1); } From d73bf79222681ff30b5551c3a6a9b73bee9fd3a9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 9 Apr 2024 23:23:10 +0200 Subject: [PATCH 4/4] fix lint --- web_src/css/base.css | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 4c2ec750c3440..8b0267f207229 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -40,7 +40,6 @@ } } - :root * { --fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji); }
- {{template "repo/latest_commit" .}} + +
+
+ {{template "repo/latest_commit" .}} +
+
{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{TimeSince .LatestCommit.Committer.When ctx.Locale}}{{end}}{{end}}