From 8b54d38cbe85f8004161a1e40b76f30db3370642 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
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.
<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)
---
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}}
<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>
{{if not $.PageIsWiki}}
- <div>
+ <div class="commit-header-buttons">
<a class="ui primary tiny button" href="{{.SourcePath}}">
{{ctx.Locale.Tr "repo.diff.browse_source"}}
</a>
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}}
<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">
- <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}}">
{{if $file.ShouldBeHidden}}
{{svg "octicon-chevron-right" 18}}
@@ -128,21 +128,23 @@
{{template "repo/diff/stats" dict "file" . "root" $}}
{{end}}
</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>
- <button class="btn interact-fg tw-p-2" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
- {{if $file.IsGenerated}}
- <span class="ui label">{{ctx.Locale.Tr "repo.diff.generated"}}</span>
- {{end}}
- {{if $file.IsVendored}}
- <span class="ui label">{{ctx.Locale.Tr "repo.diff.vendored"}}</span>
- {{end}}
- {{if and $file.Mode $file.OldMode}}
- {{$old := ctx.Locale.Tr ($file.ModeTranslationKey $file.OldMode)}}
- {{$new := ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}
- <span class="tw-ml-4 tw-font-mono">{{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}}</span>
- {{else if $file.Mode}}
- <span class="tw-ml-4 tw-font-mono">{{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}</span>
- {{end}}
+ <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>
+ {{if .IsLFSFile}} ({{ctx.Locale.Tr "repo.stored_lfs"}}){{end}}
+ <button class="btn interact-fg tw-p-2" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
+ {{if $file.IsGenerated}}
+ <span class="ui label">{{ctx.Locale.Tr "repo.diff.generated"}}</span>
+ {{end}}
+ {{if $file.IsVendored}}
+ <span class="ui label">{{ctx.Locale.Tr "repo.diff.vendored"}}</span>
+ {{end}}
+ {{if and $file.Mode $file.OldMode}}
+ {{$old := ctx.Locale.Tr ($file.ModeTranslationKey $file.OldMode)}}
+ {{$new := ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}
+ <span class="tw-mx-2 tw-font-mono tw-whitespace-nowrap">{{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}}</span>
+ {{else if $file.Mode}}
+ <span class="tw-mx-2 tw-font-mono tw-whitespace-nowrap">{{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}</span>
+ {{end}}
+ </span>
</div>
<div class="diff-file-header-actions tw-flex tw-items-center tw-gap-1 tw-flex-wrap">
{{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 @@
</div>
{{end}}
{{template "repo/sub_menu" .}}
+ {{$n := len .TreeNames}}
+ {{$l := Eval $n "-" 1}}
+ {{$isHomepage := (eq $n 0)}}
<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"}}
{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
{{$cmpBranch := ""}}
@@ -75,9 +78,7 @@
</a>
{{end}}
<!-- Show go to file and breadcrumbs if not on home page -->
- {{$n := len .TreeNames}}
- {{$l := Eval $n "-" 1}}
- {{if eq $n 0}}
+ {{if $isHomepage}}
<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a>
{{end}}
@@ -101,20 +102,20 @@
</button>
{{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}}">
{{ctx.Locale.Tr "repo.use_template"}}
</a>
{{end}}
- {{if ne $n 0}}
+ {{if (not $isHomepage)}}
<span class="breadcrumb repo-path tw-ml-1">
<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
{{- range $i, $v := .TreeNames -}}
<span class="breadcrumb-divider">/</span>
{{- if eq $i $l -}}
- <span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span>
+ <span class="active section" title="{{$v}}">{{$v}}</span>
{{- 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 -}}
</span>
@@ -122,7 +123,7 @@
</div>
<div class="tw-flex tw-items-center">
<!-- Only show clone panel in repository home page -->
- {{if eq $n 0}}
+ {{if $isHomepage}}
<div class="clone-panel ui action tiny input">
{{template "repo/clone_buttons" .}}
<button class="ui small jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
@@ -145,7 +146,7 @@
</div>
{{template "repo/cite/cite_modal" .}}
{{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}}">
{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
</a>
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}}
- <div id="repo-file-commit-box" class="ui top attached header list-header tw-mb-4">
- <div>
+ <div id="repo-file-commit-box" class="ui top attached header list-header tw-mb-4 tw-flex tw-justify-between">
+ <div class="latest-commit">
{{template "repo/latest_commit" .}}
</div>
{{if .LatestCommit}}
{{if .LatestCommit.Committer}}
- <div class="ui text grey right age">
+ <div class="text grey age">
{{TimeSince .LatestCommit.Committer.When ctx.Locale}}
</div>
{{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 @@
<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>
<tr class="commit-list">
- <th colspan="2">
- {{template "repo/latest_commit" .}}
+ <th class="tw-overflow-hidden" colspan="2">
+ <div class="tw-flex">
+ <div class="latest-commit">
+ {{template "repo/latest_commit" .}}
+ </div>
+ </div>
</th>
<th class="text grey right age">{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{TimeSince .LatestCommit.Committer.When ctx.Locale}}{{end}}{{end}}</th>
</tr>
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,