Skip to content

Commit 6c5b088

Browse files
GiteaBotsilverwind
GiteaBot
and
silverwind
authored
Various improvements for long file and commit names (go-gitea#30374) (go-gitea#30386)
Backport go-gitea#30374 by @silverwind Fixes: go-gitea#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: silverwind <[email protected]>
1 parent 88b3d19 commit 6c5b088

File tree

8 files changed

+107
-78
lines changed

8 files changed

+107
-78
lines changed

‎templates/repo/commit_page.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@
1818
{{end}}
1919
{{end}}
2020
<div class="ui top attached header clearing segment tw-relative commit-header {{$class}}">
21-
<div class="tw-flex tw-mb-4 tw-flex-wrap">
21+
<div class="tw-flex tw-mb-4 tw-gap-1">
2222
<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>
2323
{{if not $.PageIsWiki}}
24-
<div>
24+
<div class="commit-header-buttons">
2525
<a class="ui primary tiny button" href="{{.SourcePath}}">
2626
{{ctx.Locale.Tr "repo.diff.browse_source"}}
2727
</a>

‎templates/repo/diff/box.tmpl

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
{{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}}
112112
<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}}>
113113
<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">
114-
<div class="diff-file-name tw-flex tw-items-center tw-gap-1 tw-flex-wrap">
114+
<div class="diff-file-name tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-flex-wrap">
115115
<button class="fold-file btn interact-bg tw-p-1{{if not $isExpandable}} tw-invisible{{end}}">
116116
{{if $file.ShouldBeHidden}}
117117
{{svg "octicon-chevron-right" 18}}
@@ -128,21 +128,23 @@
128128
{{template "repo/diff/stats" dict "file" . "root" $}}
129129
{{end}}
130130
</div>
131-
<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>
132-
<button class="btn interact-fg tw-p-2" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
133-
{{if $file.IsGenerated}}
134-
<span class="ui label">{{ctx.Locale.Tr "repo.diff.generated"}}</span>
135-
{{end}}
136-
{{if $file.IsVendored}}
137-
<span class="ui label">{{ctx.Locale.Tr "repo.diff.vendored"}}</span>
138-
{{end}}
139-
{{if and $file.Mode $file.OldMode}}
140-
{{$old := ctx.Locale.Tr ($file.ModeTranslationKey $file.OldMode)}}
141-
{{$new := ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}
142-
<span class="tw-ml-4 tw-font-mono">{{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}}</span>
143-
{{else if $file.Mode}}
144-
<span class="tw-ml-4 tw-font-mono">{{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}</span>
145-
{{end}}
131+
<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>
132+
{{if .IsLFSFile}} ({{ctx.Locale.Tr "repo.stored_lfs"}}){{end}}
133+
<button class="btn interact-fg tw-p-2" data-clipboard-text="{{$file.Name}}">{{svg "octicon-copy" 14}}</button>
134+
{{if $file.IsGenerated}}
135+
<span class="ui label">{{ctx.Locale.Tr "repo.diff.generated"}}</span>
136+
{{end}}
137+
{{if $file.IsVendored}}
138+
<span class="ui label">{{ctx.Locale.Tr "repo.diff.vendored"}}</span>
139+
{{end}}
140+
{{if and $file.Mode $file.OldMode}}
141+
{{$old := ctx.Locale.Tr ($file.ModeTranslationKey $file.OldMode)}}
142+
{{$new := ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}
143+
<span class="tw-mx-2 tw-font-mono tw-whitespace-nowrap">{{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}}</span>
144+
{{else if $file.Mode}}
145+
<span class="tw-mx-2 tw-font-mono tw-whitespace-nowrap">{{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}}</span>
146+
{{end}}
147+
</span>
146148
</div>
147149
<div class="diff-file-header-actions tw-flex tw-items-center tw-gap-1 tw-flex-wrap">
148150
{{if $showFileViewToggle}}

‎templates/repo/home.tmpl

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,11 @@
5151
</div>
5252
{{end}}
5353
{{template "repo/sub_menu" .}}
54+
{{$n := len .TreeNames}}
55+
{{$l := Eval $n "-" 1}}
56+
{{$isHomepage := (eq $n 0)}}
5457
<div class="repo-button-row">
55-
<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-y-2">
58+
<div class="tw-flex tw-items-center tw-gap-y-2">
5659
{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
5760
{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
5861
{{$cmpBranch := ""}}
@@ -67,9 +70,7 @@
6770
</a>
6871
{{end}}
6972
<!-- Show go to file and breadcrumbs if not on home page -->
70-
{{$n := len .TreeNames}}
71-
{{$l := Eval $n "-" 1}}
72-
{{if eq $n 0}}
73+
{{if $isHomepage}}
7374
<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a>
7475
{{end}}
7576

@@ -93,28 +94,28 @@
9394
</button>
9495
{{end}}
9596

96-
{{if and (eq $n 0) (.Repository.IsTemplate)}}
97+
{{if and $isHomepage (.Repository.IsTemplate)}}
9798
<a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}">
9899
{{ctx.Locale.Tr "repo.use_template"}}
99100
</a>
100101
{{end}}
101-
{{if ne $n 0}}
102+
{{if (not $isHomepage)}}
102103
<span class="breadcrumb repo-path tw-ml-1">
103104
<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
104105
{{- range $i, $v := .TreeNames -}}
105106
<span class="breadcrumb-divider">/</span>
106107
{{- if eq $i $l -}}
107-
<span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span>
108+
<span class="active section" title="{{$v}}">{{$v}}</span>
108109
{{- else -}}
109-
{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</a></span>
110+
{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{$v}}</a></span>
110111
{{- end -}}
111112
{{- end -}}
112113
</span>
113114
{{end}}
114115
</div>
115116
<div class="tw-flex tw-items-center">
116117
<!-- Only show clone panel in repository home page -->
117-
{{if eq $n 0}}
118+
{{if $isHomepage}}
118119
<div class="clone-panel ui action tiny input">
119120
{{template "repo/clone_buttons" .}}
120121
<button class="ui small jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
@@ -137,7 +138,7 @@
137138
</div>
138139
{{template "repo/cite/cite_modal" .}}
139140
{{end}}
140-
{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}}
141+
{{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}
141142
<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
142143
{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
143144
</a>

‎templates/repo/view_file.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
{{end}}
1212

1313
{{if not .ReadmeInList}}
14-
<div id="repo-file-commit-box" class="ui top attached header list-header tw-mb-4">
15-
<div>
14+
<div id="repo-file-commit-box" class="ui top attached header list-header tw-mb-4 tw-flex tw-justify-between">
15+
<div class="latest-commit">
1616
{{template "repo/latest_commit" .}}
1717
</div>
1818
{{if .LatestCommit}}
1919
{{if .LatestCommit.Committer}}
20-
<div class="ui text grey right age">
20+
<div class="text grey age">
2121
{{TimeSince .LatestCommit.Committer.When ctx.Locale}}
2222
</div>
2323
{{end}}

‎templates/repo/view_list.tmpl

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
<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}}>
22
<thead>
33
<tr class="commit-list">
4-
<th colspan="2">
5-
{{template "repo/latest_commit" .}}
4+
<th class="tw-overflow-hidden" colspan="2">
5+
<div class="tw-flex">
6+
<div class="latest-commit">
7+
{{template "repo/latest_commit" .}}
8+
</div>
9+
</div>
610
</th>
711
<th class="text grey right age">{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{TimeSince .LatestCommit.Committer.When ctx.Locale}}{{end}}{{end}}</th>
812
</tr>

‎web_src/css/base.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,19 @@
2525
--tab-size: 4;
2626
--checkbox-size: 15px; /* height and width of checkbox and radio inputs */
2727
--page-spacing: 16px; /* space between page elements */
28+
--page-margin-x: 32px; /* minimum space on left and right side of page */
29+
}
30+
31+
@media (min-width: 768px) and (max-width: 1200px) {
32+
:root {
33+
--page-margin-x: 16px;
34+
}
35+
}
36+
37+
@media (max-width: 767.98px) {
38+
:root {
39+
--page-margin-x: 8px;
40+
}
2841
}
2942

3043
:root * {

‎web_src/css/modules/container.css

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -49,30 +49,11 @@
4949
/* overwrite width of containers inside the main page content div (div with class "page-content") */
5050
.page-content .ui.ui.ui.container:not(.fluid) {
5151
width: 1280px;
52-
max-width: calc(100% - 64px);
52+
max-width: calc(100% - calc(2 * var(--page-margin-x)));
5353
margin-left: auto;
5454
margin-right: auto;
5555
}
5656

5757
.ui.container.fluid.padded {
58-
padding: 0 32px;
59-
}
60-
61-
/* enable fluid page widths for medium size viewports */
62-
@media (min-width: 768px) and (max-width: 1200px) {
63-
.page-content .ui.ui.ui.container:not(.fluid) {
64-
max-width: calc(100% - 32px);
65-
}
66-
.ui.container.fluid.padded {
67-
padding: 0 16px;
68-
}
69-
}
70-
71-
@media (max-width: 767.98px) {
72-
.page-content .ui.ui.ui.container:not(.fluid) {
73-
max-width: calc(100% - 16px);
74-
}
75-
.ui.container.fluid.padded {
76-
padding: 0 8px;
77-
}
58+
padding: 0 var(--page-margin-x);
7859
}

‎web_src/css/repo.css

Lines changed: 52 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -177,12 +177,44 @@
177177
}
178178
}
179179

180-
.repository.file.list .repo-path {
181-
word-break: break-word;
180+
.commit-summary {
181+
flex: 1;
182+
overflow-wrap: anywhere;
183+
overflow: hidden;
184+
white-space: nowrap;
185+
text-overflow: ellipsis;
182186
}
183187

184-
.repository.file.list #repo-files-table {
185-
table-layout: fixed;
188+
.commit-header .commit-summary,
189+
td .commit-summary {
190+
white-space: normal;
191+
}
192+
193+
.latest-commit {
194+
display: flex;
195+
flex: 1;
196+
align-items: center;
197+
overflow: hidden;
198+
text-overflow: ellipsis;
199+
}
200+
201+
@media (max-width: 767.98px) {
202+
.latest-commit .sha {
203+
display: none;
204+
}
205+
.latest-commit .commit-summary {
206+
margin-left: 8px;
207+
}
208+
}
209+
210+
.repo-path {
211+
display: flex;
212+
overflow-wrap: anywhere;
213+
}
214+
215+
/* this is what limits the commit table width to a value that works on all viewport sizes */
216+
#repo-files-table th:first-of-type {
217+
max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x)));
186218
}
187219

188220
.repository.file.list #repo-files-table thead th {
@@ -262,7 +294,6 @@
262294
}
263295

264296
.repository.file.list #repo-files-table td.age {
265-
width: 120px;
266297
color: var(--color-text-light-1);
267298
}
268299

@@ -1219,10 +1250,6 @@
12191250
margin: 0;
12201251
}
12211252

1222-
.repository #commits-table td.message {
1223-
text-overflow: unset;
1224-
}
1225-
12261253
.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
12271254
background-color: var(--color-light) !important;
12281255
}
@@ -2114,6 +2141,20 @@
21142141
padding-bottom: 0 !important;
21152142
}
21162143

2144+
.commit-header-buttons {
2145+
display: flex;
2146+
gap: 4px;
2147+
align-items: flex-start;
2148+
white-space: nowrap;
2149+
}
2150+
2151+
@media (max-width: 767.98px) {
2152+
.commit-header-buttons {
2153+
flex-direction: column;
2154+
align-items: stretch;
2155+
}
2156+
}
2157+
21172158
.settings.webhooks .list > .item:not(:first-child),
21182159
.settings.githooks .list > .item:not(:first-child),
21192160
.settings.actions .list > .item:not(:first-child) {
@@ -2444,7 +2485,7 @@ tbody.commit-list {
24442485
.author-wrapper {
24452486
overflow: hidden;
24462487
text-overflow: ellipsis;
2447-
max-width: calc(100% - 50px);
2488+
max-width: 100%;
24482489
display: inline-block;
24492490
vertical-align: middle;
24502491
}
@@ -2469,10 +2510,6 @@ tbody.commit-list {
24692510
tr.commit-list {
24702511
width: 100%;
24712512
}
2472-
th .message-wrapper {
2473-
display: block;
2474-
max-width: calc(100vw - 70px);
2475-
}
24762513
.author-wrapper {
24772514
max-width: 80px;
24782515
}
@@ -2482,27 +2519,18 @@ tbody.commit-list {
24822519
tr.commit-list {
24832520
width: 723px;
24842521
}
2485-
th .message-wrapper {
2486-
max-width: 120px;
2487-
}
24882522
}
24892523

24902524
@media (min-width: 992px) and (max-width: 1200px) {
24912525
tr.commit-list {
24922526
width: 933px;
24932527
}
2494-
th .message-wrapper {
2495-
max-width: 350px;
2496-
}
24972528
}
24982529

24992530
@media (min-width: 1201px) {
25002531
tr.commit-list {
25012532
width: 1127px;
25022533
}
2503-
th .message-wrapper {
2504-
max-width: 525px;
2505-
}
25062534
}
25072535

25082536
.commit-list .commit-status-link {
@@ -2829,7 +2857,7 @@ tbody.commit-list {
28292857
.repository.file.list #repo-files-table .entry td.message,
28302858
.repository.file.list #repo-files-table .commit-list td.message,
28312859
.repository.file.list #repo-files-table .entry span.commit-summary,
2832-
.repository.file.list #repo-files-table .commit-list span.commit-summary {
2860+
.repository.file.list #repo-files-table .commit-list tr span.commit-summary {
28332861
display: none !important;
28342862
}
28352863
.repository.view.issue .comment-list .timeline,

0 commit comments

Comments
 (0)