Skip to content

Commit df9a78c

Browse files
silverwindwxiaoguang
silverwind
and
wxiaoguang
authored
Tweak repo sidebar (#32847)
Before and after: <img width="218" alt="Screenshot 2024-12-15 at 04 53 53" src="https://github.com/user-attachments/assets/299b1f0a-ba72-47c6-b662-a9d540d4d741" /> <img width="222" alt="Screenshot 2024-12-15 at 04 53 41" src="https://github.com/user-attachments/assets/5a2b5332-e324-4d20-82e9-21d1c850e826" /> Diff without whitespace: https://github.com/go-gitea/gitea/pull/32847/files?diff=unified&w=1 The `tw-mt-2` is fine even if the element renders empty: <img width="387" alt="image" src="https://github.com/user-attachments/assets/76a976e4-ba2e-48a5-9248-c361552a937a" /> --------- Co-authored-by: wxiaoguang <[email protected]>
1 parent 9264811 commit df9a78c

File tree

9 files changed

+141
-131
lines changed

9 files changed

+141
-131
lines changed

‎options/locale/locale_en-US.ini

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2632,6 +2632,7 @@ release.new_release = New Release
26322632
release.draft = Draft
26332633
release.prerelease = Pre-Release
26342634
release.stable = Stable
2635+
release.latest = Latest
26352636
release.compare = Compare
26362637
release.edit = edit
26372638
release.ahead.commits = <strong>%d</strong> commits

‎templates/repo/home.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
{{$treeNamesLen := len .TreeNames}}
2020
{{$isTreePathRoot := eq $treeNamesLen 0}}
21-
{{$showSidebar := $isTreePathRoot}}
21+
{{$showSidebar := and $isTreePathRoot (not .HideRepoInfo) (not .IsBlame)}}
2222
<div class="{{Iif $showSidebar "repo-grid-filelist-sidebar" "repo-grid-filelist-only"}}">
2323
<div class="repo-home-filelist">
2424
{{template "repo/sub_menu" .}}
@@ -130,8 +130,8 @@
130130
</div>
131131

132132
{{if $showSidebar}}
133-
<div class="repo-home-sidebar-top">{{template "repo/home_sidebar_top" .}}</div>
134-
<div class="repo-home-sidebar-bottom">{{template "repo/home_sidebar_bottom" .}}</div>
133+
{{template "repo/home_sidebar_top" .}}
134+
{{template "repo/home_sidebar_bottom" .}}
135135
{{end}}
136136
</div>
137137
</div>

‎templates/repo/home_sidebar_bottom.tmpl

Lines changed: 48 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,61 @@
1-
<div class="flex-list">
2-
{{if .LatestRelease}}
3-
<div class="flex-item">
4-
<div class="flex-item-main">
5-
<div class="flex-item-title">
6-
<a class="item muted" href="{{.Link}}/releases">
7-
{{ctx.Locale.Tr "repo.releases"}}
8-
<span class="ui small label">{{.NumReleases}}</span>
9-
</a>
10-
</div>
11-
<div class="flex-item">
12-
<div class="flex-item-icon">
13-
{{svg "octicon-tag" 16}}
1+
<div class="repo-home-sidebar-bottom">
2+
<div class="flex-list">
3+
{{if .LatestRelease}}
4+
<div class="flex-item">
5+
<div class="flex-item-main">
6+
<div class="flex-item-title">
7+
<a class="item muted" href="{{.Link}}/releases">
8+
{{ctx.Locale.Tr "repo.releases"}}
9+
<span class="ui small label">{{.NumReleases}}</span>
10+
</a>
1411
</div>
15-
<div class="flex-item-main">
16-
<div class="flex-item-header">
17-
<div class="flex-item-title tw-gap-2">
18-
<a class="gt-ellipsis muted" href="{{.LatestRelease.Link}}" title="{{.LatestRelease.Title}}">{{.LatestRelease.Title}}</a>
19-
<span class="ui basic green label tw-h-100">{{ctx.Locale.Tr "latest"}}</span>
20-
</div>
12+
<div class="flex-item">
13+
<div class="flex-item-icon">
14+
{{svg "octicon-tag" 16}}
2115
</div>
22-
<div class="flex-item-body">
23-
<span class="time">{{DateUtils.TimeSince .LatestRelease.CreatedUnix}}</span>
16+
<div class="flex-item-main">
17+
<div class="flex-item-header">
18+
<div class="flex-item-title tw-gap-2">
19+
<a class="gt-ellipsis muted" href="{{.LatestRelease.Link}}" title="{{.LatestRelease.Title}}">{{.LatestRelease.Title}}</a>
20+
{{template "repo/release/label" (dict "Release" .LatestRelease "IsLatest" true)}}
21+
</div>
22+
</div>
23+
<div class="flex-item-body">
24+
<span class="time">{{DateUtils.TimeSince .LatestRelease.CreatedUnix}}</span>
25+
</div>
2426
</div>
2527
</div>
2628
</div>
2729
</div>
28-
</div>
29-
{{end}}
30+
{{end}}
3031

31-
{{if and (not .IsEmptyRepo) .LanguageStats}}
32-
<div class="flex-item">
33-
<div class="flex-item-main">
34-
<div class="flex-item-title">
35-
{{ctx.Locale.Tr "repo.repo_lang"}}
36-
</div>
37-
38-
<div class="flex-item-body">
39-
<div class="language-stats">
40-
{{range .LanguageStats}}
41-
<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
42-
{{end}}
32+
{{if and (not .IsEmptyRepo) .LanguageStats}}
33+
<div class="flex-item">
34+
<div class="flex-item-main">
35+
<div class="flex-item-title">
36+
{{ctx.Locale.Tr "repo.repo_lang"}}
4337
</div>
44-
<div class="language-stats-details">
45-
{{range .LanguageStats}}
46-
<div class="item">
47-
<i class="color-icon" style="background-color: {{.Color}}"></i>
48-
<span class="tw-font-semibold">
49-
{{Iif (eq .Language "other") (ctx.Locale.Tr "repo.language_other") .Language}}
50-
</span>
51-
{{.Percentage}}%
52-
</div>
53-
{{end}}
38+
39+
<div class="flex-item-body">
40+
<div class="language-stats">
41+
{{range .LanguageStats}}
42+
<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
43+
{{end}}
44+
</div>
45+
<div class="language-stats-details">
46+
{{range .LanguageStats}}
47+
<div class="item">
48+
<i class="color-icon" style="background-color: {{.Color}}"></i>
49+
<span class="tw-font-semibold">
50+
{{Iif (eq .Language "other") (ctx.Locale.Tr "repo.language_other") .Language}}
51+
</span>
52+
{{.Percentage}}%
53+
</div>
54+
{{end}}
55+
</div>
5456
</div>
5557
</div>
5658
</div>
59+
{{end}}
5760
</div>
58-
{{end}}
5961
</div>

‎templates/repo/home_sidebar_top.tmpl

Lines changed: 63 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,70 @@
1-
<form class="ignore-dirty tw-flex tw-flex-1 tw-mt-1" action="{{.RepoLink}}/search" method="get">
2-
<div class="ui small action input tw-flex-1">
3-
<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
4-
{{template "shared/search/button"}}
5-
</div>
6-
</form>
1+
<div class="repo-home-sidebar-top">
2+
<form class="ignore-dirty tw-flex tw-flex-1 tw-mt-1" action="{{.RepoLink}}/search" method="get">
3+
<div class="ui small action input tw-flex-1">
4+
<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}"> {{template "shared/search/button"}}
5+
</div>
6+
</form>
77

8-
<div class="flex-list">
9-
<div class="flex-item">
10-
<div class="flex-item-main">
11-
<div class="flex-item-title">
12-
{{ctx.Locale.Tr "repo.repo_desc"}}
13-
</div>
14-
{{if and (not .HideRepoInfo) (not .IsBlame)}}
15-
<div class="flex-item-body repo-description tw-break-anywhere tw-gap-2 tw-mt-2">
16-
{{- $description := .Repository.DescriptionHTML ctx -}}
17-
{{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}}
18-
{{if .Repository.Website}}{{svg "octicon-link"}}<a href="{{.Repository.Website}}">{{.Repository.Website}}</a>{{end}}
19-
</div>
20-
<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-my-2" id="repo-topics">
21-
{{/* !!!! it SHOULD and MUST match the code in issue-home.js */}}
22-
{{range .Topics}}<a class="repo-topic ui large label gt-ellipsis" title={{.Name}} href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
23-
</div>
24-
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
25-
<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>
26-
{{end}}
27-
{{end}}
28-
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
29-
<div class="ui form tw-hidden flex-item-body tw-gap-2 tw-my-2" id="topic_edit">
30-
<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
31-
<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
32-
{{range .Topics}}
33-
{{/* keep the same layout as Fomantic UI generated labels */}}
34-
<a class="ui label transition visible tw-cursor-default tw-inline-block repo-topic" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
8+
<div class="flex-list">
9+
<div class="flex-item">
10+
<div class="flex-item-main">
11+
<div class="flex-item-title">{{ctx.Locale.Tr "repo.repo_desc"}}</div>
12+
<div class="flex-item-body tw-text-16">
13+
<div class="tw-flex tw-flex-col tw-gap-2 tw-mt-2">
14+
<div class="repo-description tw-break-anywhere tw-gap-2">
15+
{{- $description := .Repository.DescriptionHTML ctx -}}
16+
{{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}}
17+
</div>
18+
19+
{{if .Repository.Website}}
20+
<a class="flex-text-block" href="{{.Repository.Website}}">
21+
{{svg "octicon-link" 16 "tw-text-text"}} <span class="tw-text-primary">{{.Repository.Website}}</span>
22+
</a>
23+
{{end}}
24+
25+
<div id="repo-topics" class="flex-text-block tw-flex-wrap tw-gap-1 tw-my-1 tw-text-text">
26+
{{/* !!!! it SHOULD and MUST match the code in repo-home.ts */}}
27+
{{range .Topics}}<a class="repo-topic ui large label gt-ellipsis" title={{.Name}} href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
28+
</div>
29+
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
30+
<button id="manage_topic" class="btn interact-fg tw-mb-2 tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>
31+
<div class="ui form tw-hidden tw-my-2" id="topic_edit">
32+
<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
33+
<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
34+
{{range .Topics}}
35+
{{/* keep the same layout as Fomantic UI generated labels */}}
36+
<a class="ui label transition visible tw-cursor-default tw-inline-block repo-topic" data-value="{{.Name}}">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
37+
{{end}}
38+
<div class="text"></div>
39+
</div>
40+
<div class="tw-my-2">
41+
<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
42+
<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
43+
</div>
44+
</div>
45+
{{end}}
46+
47+
{{if .ReadmeExist}}
48+
<a class="flex-text-block muted" href="{{.TreeLink}}/{{.FileName}}">
49+
{{svg "octicon-book"}} {{ctx.Locale.Tr "readme"}}
50+
</a>
51+
{{end}}
52+
53+
{{if .DetectedRepoLicenses}}
54+
<a class="flex-text-block muted" href="{{.RepoLink}}/src/{{.Repository.DefaultBranch}}/{{PathEscapeSegments .LicenseFileName}}" title="{{StringUtils.Join .DetectedRepoLicenses ", "}}">
55+
{{svg "octicon-law"}} {{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}}
56+
</a>
57+
{{end}}
58+
59+
{{if .CitiationExist}}
60+
{{template "repo/cite/cite_modal" .}}
61+
<a class="flex-text-block muted" id="cite-repo-button">
62+
{{svg "octicon-cross-reference"}} {{ctx.Locale.Tr "repo.cite_this_repo"}}
63+
</a>
3564
{{end}}
36-
<div class="text"></div>
37-
</div>
38-
<div>
39-
<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
40-
<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
4165
</div>
4266
</div>
43-
{{end}}
44-
{{if .ReadmeExist}}
45-
<div class="flex-item-body tw-mt-2">
46-
<a class="flex-text-block muted" href="{{.TreeLink}}/{{.FileName}}">
47-
{{svg "octicon-book"}} {{ctx.Locale.Tr "readme"}}
48-
</a>
49-
</div>
50-
{{end}}
51-
{{if .DetectedRepoLicenses}}
52-
<div class="flex-item-body">
53-
<a class="flex-text-block muted" href="{{.RepoLink}}/src/{{.Repository.DefaultBranch}}/{{PathEscapeSegments .LicenseFileName}}" title="{{StringUtils.Join .DetectedRepoLicenses ", "}}">
54-
{{svg "octicon-law"}} {{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}}
55-
</a>
56-
</div>
57-
{{end}}
58-
{{if .CitiationExist}}
59-
<div class="flex-item-body">
60-
{{template "repo/cite/cite_modal" .}}
61-
<a class="flex-text-block muted" id="cite-repo-button">
62-
{{svg "octicon-cross-reference"}} {{ctx.Locale.Tr "repo.cite_this_repo"}}
63-
</a>
64-
</div>
65-
{{end}}
67+
</div>
6668
</div>
6769
</div>
6870
</div>

‎templates/repo/release/label.tmpl

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{{/*
2+
Template Attributes:
3+
* Release: the release
4+
* IsLatest: boolean indicating whether this is the latest release, optional
5+
*/}}
6+
{{if .IsLatest}}
7+
<span class="ui green label">{{ctx.Locale.Tr "repo.release.latest"}}</span>
8+
{{else if .Release.IsDraft}}
9+
<span class="ui yellow label">{{ctx.Locale.Tr "repo.release.draft"}}</span>
10+
{{else if .Release.IsPrerelease}}
11+
<span class="ui orange label">{{ctx.Locale.Tr "repo.release.prerelease"}}</span>
12+
{{else if (not .Release.IsTag)}}
13+
<span class="ui green label">{{ctx.Locale.Tr "repo.release.stable"}}</span>
14+
{{end}}

‎templates/repo/release/list.tmpl

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,7 @@
3333
<h4 class="release-list-title tw-break-anywhere">
3434
{{if $.PageIsSingleTag}}{{$release.Title}}{{else}}<a class="muted" href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>{{end}}
3535
{{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "tw-flex"}}
36-
{{if $release.IsDraft}}
37-
<span class="ui yellow label">{{ctx.Locale.Tr "repo.release.draft"}}</span>
38-
{{else if $release.IsPrerelease}}
39-
<span class="ui orange label">{{ctx.Locale.Tr "repo.release.prerelease"}}</span>
40-
{{else if (not $release.IsTag)}}
41-
<span class="ui green label">{{ctx.Locale.Tr "repo.release.stable"}}</span>
42-
{{end}}
36+
{{template "repo/release/label" (dict "Release" $release)}}
4337
</h4>
4438
<div>
4539
{{if and $.CanCreateRelease (not $.PageIsSingleTag)}}

‎web_src/css/repo.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -101,11 +101,6 @@
101101
margin-bottom: 12px;
102102
}
103103

104-
.repository .repo-description {
105-
font-size: 16px;
106-
margin-bottom: 5px;
107-
}
108-
109104
.commit-summary {
110105
flex: 1;
111106
overflow-wrap: anywhere;

‎web_src/css/repo/home.css

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,24 @@
44
grid-template-rows: auto auto 1fr;
55
}
66

7-
.repo-grid-filelist-sidebar .repo-home-filelist {
7+
.repo-home-filelist {
88
min-width: 0;
99
grid-column: 1;
1010
grid-row: 1 / 4;
1111
}
1212

13-
.repo-grid-filelist-sidebar .repo-home-sidebar-top {
13+
.repo-home-sidebar-top {
1414
grid-column: 2;
1515
grid-row: 1;
1616
padding-left: 1em;
1717
}
18-
.repo-grid-filelist-sidebar .repo-home-sidebar-bottom {
18+
19+
.repo-home-sidebar-bottom {
1920
grid-column: 2;
2021
grid-row: 2;
2122
padding-left: 1em;
2223
}
24+
2325
.repo-home-sidebar-bottom .flex-list > :first-child {
2426
border-top: 1px solid var(--color-secondary); /* same to .flex-list > .flex-item + .flex-item */
2527
}
@@ -29,16 +31,16 @@
2931
grid-template-columns: 100%;
3032
grid-template-rows: auto auto auto;
3133
}
32-
.repo-grid-filelist-sidebar .repo-home-filelist {
34+
.repo-home-filelist {
3335
grid-column: 1;
3436
grid-row: 2;
3537
}
36-
.repo-grid-filelist-sidebar .repo-home-sidebar-top {
38+
.repo-home-sidebar-top {
3739
grid-column: 1;
3840
grid-row: 1;
3941
padding-left: 0;
4042
}
41-
.repo-grid-filelist-sidebar .repo-home-sidebar-bottom {
43+
.repo-home-sidebar-bottom {
4244
grid-column: 1;
4345
grid-row: 3;
4446
padding-left: 0;

‎web_src/js/features/repo-home.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@ export function initRepoTopicBar() {
1616
let lastErrorToast: Toast;
1717

1818
mgrBtn.addEventListener('click', () => {
19-
hideElem(viewDiv);
19+
hideElem([viewDiv, mgrBtn]);
2020
showElem(editDiv);
2121
topicDropdown.querySelector<HTMLInputElement>('input.search').focus();
2222
});
2323

2424
document.querySelector('#cancel_topic_edit').addEventListener('click', () => {
2525
lastErrorToast?.hideToast();
2626
hideElem(editDiv);
27-
showElem(viewDiv);
27+
showElem([viewDiv, mgrBtn]);
2828
mgrBtn.focus();
2929
});
3030

@@ -55,7 +55,7 @@ export function initRepoTopicBar() {
5555
}
5656
}
5757
hideElem(editDiv);
58-
showElem(viewDiv);
58+
showElem([viewDiv, mgrBtn]);
5959
}
6060
} else if (response.status === 422) {
6161
// how to test: input topic like " invalid topic " (with spaces), and select it from the list, then "Save"

0 commit comments

Comments
 (0)