Various improvements for long file and commit names (#30374)

+2 -2

templates/repo/commit_page.tmpl

··· 18 18 {{end}} 19 19 {{end}} 20 20 <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"> 22 22 <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> 23 23 {{if not $.PageIsWiki}} 24 - <div> 24 + <div class="commit-header-buttons"> 25 25 <a class="ui primary tiny button" href="{{.SourcePath}}"> 26 26 {{ctx.Locale.Tr "repo.diff.browse_source"}} 27 27 </a>

+18 -16

templates/repo/diff/box.tmpl

··· 111 111 {{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}} 112 112 <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}}> 113 113 <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 gt-gap-2 tw-flex-wrap"> 114 + <div class="diff-file-name tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-flex-wrap"> 115 115 <button class="fold-file btn interact-bg tw-p-1{{if not $isExpandable}} tw-invisible{{end}}"> 116 116 {{if $file.ShouldBeHidden}} 117 117 {{svg "octicon-chevron-right" 18}} ··· 128 128 {{template "repo/diff/stats" dict "file" . "root" $}} 129 129 {{end}} 130 130 </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> 146 148 </div> 147 149 <div class="diff-file-header-actions tw-flex tw-items-center tw-gap-1 tw-flex-wrap"> 148 150 {{if $showFileViewToggle}}

+11 -10

templates/repo/home.tmpl

··· 58 58 </div> 59 59 {{end}} 60 60 {{template "repo/sub_menu" .}} 61 + {{$n := len .TreeNames}} 62 + {{$l := Eval $n "-" 1}} 63 + {{$isHomepage := (eq $n 0)}} 61 64 <div class="repo-button-row"> 62 - <div class="tw-flex tw-items-center tw-flex-wrap tw-gap-y-2"> 65 + <div class="tw-flex tw-items-center tw-gap-y-2"> 63 66 {{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}} 64 67 {{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}} 65 68 {{$cmpBranch := ""}} ··· 74 77 </a> 75 78 {{end}} 76 79  77 - {{$n := len .TreeNames}} 78 - {{$l := Eval $n "-" 1}} 79 - {{if eq $n 0}} 80 + {{if $isHomepage}} 80 81 <a href="{{.Repository.Link}}/find/{{.BranchNameSubURL}}" class="ui compact basic button">{{ctx.Locale.Tr "repo.find_file.go_to_file"}}</a> 81 82 {{end}} 82 83 ··· 100 101 </button> 101 102 {{end}} 102 103 103 - {{if and (eq $n 0) (.Repository.IsTemplate)}} 104 + {{if and $isHomepage (.Repository.IsTemplate)}} 104 105 <a role="button" class="ui primary compact button" href="{{AppSubUrl}}/repo/create?template_id={{.Repository.ID}}"> 105 106 {{ctx.Locale.Tr "repo.use_template"}} 106 107 </a> 107 108 {{end}} 108 - {{if ne $n 0}} 109 + {{if (not $isHomepage)}} 109 110 <span class="breadcrumb repo-path tw-ml-1"> 110 111 <a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a> 111 112 {{- range $i, $v := .TreeNames -}} 112 113 <span class="breadcrumb-divider">/</span> 113 114 {{- if eq $i $l -}} 114 - <span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span> 115 + <span class="active section" title="{{$v}}">{{$v}}</span> 115 116 {{- else -}} 116 - {{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</a></span> 117 + {{$p := index $.Paths $i}}<span class="section"><a href="{{$.BranchLink}}/{{PathEscapeSegments $p}}" title="{{$v}}">{{$v}}</a></span> 117 118 {{- end -}} 118 119 {{- end -}} 119 120 </span> ··· 121 122 </div> 122 123 <div class="tw-flex tw-items-center"> 123 124  124 - {{if eq $n 0}} 125 + {{if $isHomepage}} 125 126 <div class="clone-panel ui action tiny input"> 126 127 {{template "repo/clone_buttons" .}} 127 128 <button class="ui small jump dropdown icon button" data-tooltip-content="{{ctx.Locale.Tr "repo.more_operations"}}"> ··· 144 145 </div> 145 146 {{template "repo/cite/cite_modal" .}} 146 147 {{end}} 147 - {{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}} 148 + {{if and (not $isHomepage) (not .IsViewFile) (not .IsBlame)}} 148 149 <a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}"> 149 150 {{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}} 150 151 </a>

+3 -3

templates/repo/view_file.tmpl

··· 11 11 {{end}} 12 12 13 13 {{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"> 16 16 {{template "repo/latest_commit" .}} 17 17 </div> 18 18 {{if .LatestCommit}} 19 19 {{if .LatestCommit.Committer}} 20 - <div class="ui text grey right age"> 20 + <div class="text grey age"> 21 21 {{TimeSince .LatestCommit.Committer.When ctx.Locale}} 22 22 </div> 23 23 {{end}}

+6 -2

templates/repo/view_list.tmpl

··· 1 1 <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}}> 2 2 <thead> 3 3 <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> 6 10 </th> 7 11 <th class="text grey right age">{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{TimeSince .LatestCommit.Committer.When ctx.Locale}}{{end}}{{end}}</th> 8 12 </tr>

+13

web_src/css/base.css

··· 26 26 --tab-size: 4; 27 27 --checkbox-size: 15px; /* height and width of checkbox and radio inputs */ 28 28 --page-spacing: 16px; /* space between page elements */ 29 + --page-margin-x: 32px; /* minimum space on left and right side of page */ 30 + } 31 + 32 + @media (min-width: 768px) and (max-width: 1200px) { 33 + :root { 34 + --page-margin-x: 16px; 35 + } 36 + } 37 + 38 + @media (max-width: 767.98px) { 39 + :root { 40 + --page-margin-x: 8px; 41 + } 29 42 } 30 43 31 44 :root * {

+2 -21

web_src/css/modules/container.css

··· 49 49 /* overwrite width of containers inside the main page content div (div with class "page-content") */ 50 50 .page-content .ui.ui.ui.container:not(.fluid) { 51 51 width: 1280px; 52 - max-width: calc(100% - 64px); 52 + max-width: calc(100% - calc(2 * var(--page-margin-x))); 53 53 margin-left: auto; 54 54 margin-right: auto; 55 55 } 56 56 57 57 .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); 78 59 }

+52 -24

web_src/css/repo.css

··· 177 177 } 178 178 } 179 179 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; 182 186 } 183 187 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))); 186 218 } 187 219 188 220 .repository.file.list #repo-files-table thead th { ··· 262 294 } 263 295 264 296 .repository.file.list #repo-files-table td.age { 265 - width: 120px; 266 297 color: var(--color-text-light-1); 267 298 } 268 299 ··· 1223 1254 margin: 0; 1224 1255 } 1225 1256 1226 - .repository #commits-table td.message { 1227 - text-overflow: unset; 1228 - } 1229 - 1230 1257 .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) { 1231 1258 background-color: var(--color-light) !important; 1232 1259 } ··· 2153 2180 display: inline-block !important; 2154 2181 } 2155 2182 2183 + .commit-header-buttons { 2184 + display: flex; 2185 + gap: 4px; 2186 + align-items: flex-start; 2187 + white-space: nowrap; 2188 + } 2189 + 2190 + @media (max-width: 767.98px) { 2191 + .commit-header-buttons { 2192 + flex-direction: column; 2193 + align-items: stretch; 2194 + } 2195 + } 2196 + 2156 2197 .settings.webhooks .list > .item:not(:first-child), 2157 2198 .settings.githooks .list > .item:not(:first-child), 2158 2199 .settings.actions .list > .item:not(:first-child) { ··· 2384 2425 .author-wrapper { 2385 2426 overflow: hidden; 2386 2427 text-overflow: ellipsis; 2387 - max-width: calc(100% - 50px); 2428 + max-width: 100%; 2388 2429 display: inline-block; 2389 2430 vertical-align: middle; 2390 2431 } ··· 2409 2450 tr.commit-list { 2410 2451 width: 100%; 2411 2452 } 2412 - th .message-wrapper { 2413 - display: block; 2414 - max-width: calc(100vw - 70px); 2415 - } 2416 2453 .author-wrapper { 2417 2454 max-width: 80px; 2418 2455 } ··· 2422 2459 tr.commit-list { 2423 2460 width: 723px; 2424 2461 } 2425 - th .message-wrapper { 2426 - max-width: 120px; 2427 - } 2428 2462 } 2429 2463 2430 2464 @media (min-width: 992px) and (max-width: 1200px) { 2431 2465 tr.commit-list { 2432 2466 width: 933px; 2433 - } 2434 - th .message-wrapper { 2435 - max-width: 350px; 2436 2467 } 2437 2468 } 2438 2469 2439 2470 @media (min-width: 1201px) { 2440 2471 tr.commit-list { 2441 2472 width: 1127px; 2442 - } 2443 - th .message-wrapper { 2444 - max-width: 525px; 2445 2473 } 2446 2474 } 2447 2475 ··· 2770 2798 .repository.file.list #repo-files-table .entry td.message, 2771 2799 .repository.file.list #repo-files-table .commit-list td.message, 2772 2800 .repository.file.list #repo-files-table .entry span.commit-summary, 2773 - .repository.file.list #repo-files-table .commit-list span.commit-summary { 2801 + .repository.file.list #repo-files-table .commit-list tr span.commit-summary { 2774 2802 display: none !important; 2775 2803 } 2776 2804 .repository.view.issue .comment-list .timeline,

Configure Feed

Configure Feed