Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Various improvements for long file and commit names #30374

Merged
merged 6 commits into from
Apr 10, 2024
Merged

Various improvements for long file and commit names #30374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d3c71ae
Various improvements for long file and commit names
silverwind Apr 9, 2024
9f47323
remove table-layout: fixed from repo files table
silverwind Apr 9, 2024
dc19658
remove ineffective width
silverwind Apr 9, 2024
d73bf79
fix lint
silverwind Apr 9, 2024
4a128dc
Merge branch 'main' into longnames
GiteaBot Apr 10, 2024
163a360
Merge branch 'main' into longnames
GiteaBot Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions templates/repo/commit_page.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
34 changes: 18 additions & 16 deletions templates/repo/diff/box.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 tw-gap-1 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}}
Expand All @@ -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}}
Expand Down
21 changes: 11 additions & 10 deletions templates/repo/home.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,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 := ""}}
Expand All @@ -66,9 +69,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}}

Expand All @@ -92,28 +93,28 @@
</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>
{{end}}
</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"}}">
Expand All @@ -136,7 +137,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>
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/view_file.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
8 changes: 6 additions & 2 deletions templates/repo/view_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
13 changes: 13 additions & 0 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,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 * {
Expand Down
23 changes: 2 additions & 21 deletions web_src/css/modules/container.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
76 changes: 52 additions & 24 deletions web_src/css/repo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -262,7 +294,6 @@
}

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

Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down