Skip to content

Commit 50099d7

Browse files
silverwindGiteaBot
silverwind
and
GiteaBot
authored
Various improvements for long file and commit names (go-gitea#30374)
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: Giteabot <[email protected]>
1 parent 6cac11c commit 50099d7

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
@@ -50,8 +50,11 @@
5050
</div>
5151
{{end}}
5252
{{template "repo/sub_menu" .}}
53+
{{$n := len .TreeNames}}
54+
{{$l := Eval $n "-" 1}}
55+
{{$isHomepage := (eq $n 0)}}
5356
<div class="repo-button-row">
54-
<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-y-2">
57+
<div class="tw-flex tw-items-center tw-gap-y-2">
5558
{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
5659
{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
5760
{{$cmpBranch := ""}}
@@ -66,9 +69,7 @@
6669
</a>
6770
{{end}}
6871
<!-- Show go to file and breadcrumbs if not on home page -->
69-
{{$n := len .TreeNames}}
70-
{{$l := Eval $n "-" 1}}
71-
{{if eq $n 0}}
72+
{{if $isHomepage}}
7273
<a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a>
7374
{{end}}
7475

@@ -92,28 +93,28 @@
9293
</button>
9394
{{end}}
9495

95-
{{if and (eq $n 0) (.Repository.IsTemplate)}}
96+
{{if and $isHomepage (.Repository.IsTemplate)}}
9697
<a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}">
9798
{{ctx.Locale.Tr "repo.use_template"}}
9899
</a>
99100
{{end}}
100-
{{if ne $n 0}}
101+
{{if (not $isHomepage)}}
101102
<span class="breadcrumb repo-path tw-ml-1">
102103
<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
103104
{{- range $i, $v := .TreeNames -}}
104105
<span class="breadcrumb-divider">/</span>
105106
{{- if eq $i $l -}}
106-
<span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span>
107+
<span class="active section" title="{{$v}}">{{$v}}</span>
107108
{{- else -}}
108-
{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</a></span>
109+
{{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{$v}}</a></span>
109110
{{- end -}}
110111
{{- end -}}
111112
</span>
112113
{{end}}
113114
</div>
114115
<div class="tw-flex tw-items-center">
115116
<!-- Only show clone panel in repository home page -->
116-
{{if eq $n 0}}
117+
{{if $isHomepage}}
117118
<div class="clone-panel ui action tiny input">
118119
{{template "repo/clone_buttons" .}}
119120
<button class="ui small jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}">
@@ -136,7 +137,7 @@
136137
</div>
137138
{{template "repo/cite/cite_modal" .}}
138139
{{end}}
139-
{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}}
140+
{{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}}
140141
<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
141142
{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
142143
</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) {
@@ -2346,7 +2387,7 @@ tbody.commit-list {
23462387
.author-wrapper {
23472388
overflow: hidden;
23482389
text-overflow: ellipsis;
2349-
max-width: calc(100% - 50px);
2390+
max-width: 100%;
23502391
display: inline-block;
23512392
vertical-align: middle;
23522393
}
@@ -2371,10 +2412,6 @@ tbody.commit-list {
23712412
tr.commit-list {
23722413
width: 100%;
23732414
}
2374-
th .message-wrapper {
2375-
display: block;
2376-
max-width: calc(100vw - 70px);
2377-
}
23782415
.author-wrapper {
23792416
max-width: 80px;
23802417
}
@@ -2384,27 +2421,18 @@ tbody.commit-list {
23842421
tr.commit-list {
23852422
width: 723px;
23862423
}
2387-
th .message-wrapper {
2388-
max-width: 120px;
2389-
}
23902424
}
23912425

23922426
@media (min-width: 992px) and (max-width: 1200px) {
23932427
tr.commit-list {
23942428
width: 933px;
23952429
}
2396-
th .message-wrapper {
2397-
max-width: 350px;
2398-
}
23992430
}
24002431

24012432
@media (min-width: 1201px) {
24022433
tr.commit-list {
24032434
width: 1127px;
24042435
}
2405-
th .message-wrapper {
2406-
max-width: 525px;
2407-
}
24082436
}
24092437

24102438
.commit-list .commit-status-link {
@@ -2732,7 +2760,7 @@ tbody.commit-list {
27322760
.repository.file.list #repo-files-table .entry td.message,
27332761
.repository.file.list #repo-files-table .commit-list td.message,
27342762
.repository.file.list #repo-files-table .entry span.commit-summary,
2735-
.repository.file.list #repo-files-table .commit-list span.commit-summary {
2763+
.repository.file.list #repo-files-table .commit-list tr span.commit-summary {
27362764
display: none !important;
27372765
}
27382766
.repository.view.issue .comment-list .timeline,

0 commit comments

Comments
 (0)