mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Tweak repo sidebar (#32847)

Browse Source 
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 <wxiaoguang@gmail.com>
pull/32852/head^2
silverwind 2 months ago committed by GitHub
parent 9264811217
commit df9a78cd04
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 141 additions and 131 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      options/locale/locale_en-US.ini
  2. 6
      templates/repo/home.tmpl
  3. 94
      templates/repo/home_sidebar_bottom.tmpl
  4. 124
      templates/repo/home_sidebar_top.tmpl
  5. 14
      templates/repo/release/label.tmpl
  6. 8
      templates/repo/release/list.tmpl
  7. 5
      web_src/css/repo.css
  8. 14
      web_src/css/repo/home.css
  9. 6
      web_src/js/features/repo-home.ts

1
options/locale/locale_en-US.ini
Unescape View File

@ -2632,6 +2632,7 @@ release.new_release = New Release
release.draft = Draft release.draft = Draft
release.prerelease = Pre-Release release.prerelease = Pre-Release
release.stable = Stable release.stable = Stable
release.latest = Latest
release.compare = Compare release.compare = Compare
release.edit = edit release.edit = edit
release.ahead.commits = <strong>%d</strong> commits release.ahead.commits = <strong>%d</strong> commits

6
templates/repo/home.tmpl
Unescape View File

@ -18,7 +18,7 @@
{{$treeNamesLen := len .TreeNames}} {{$treeNamesLen := len .TreeNames}}
{{$isTreePathRoot := eq $treeNamesLen 0}} {{$isTreePathRoot := eq $treeNamesLen 0}}
{{$showSidebar := $isTreePathRoot}} {{$showSidebar := and $isTreePathRoot (not .HideRepoInfo) (not .IsBlame)}}
<div class="{{Iif $showSidebar "repo-grid-filelist-sidebar" "repo-grid-filelist-only"}}"> <div class="{{Iif $showSidebar "repo-grid-filelist-sidebar" "repo-grid-filelist-only"}}">
<div class="repo-home-filelist"> <div class="repo-home-filelist">
{{template "repo/sub_menu" .}} {{template "repo/sub_menu" .}}
@ -130,8 +130,8 @@
</div> </div>
{{if $showSidebar}} {{if $showSidebar}}
<div class="repo-home-sidebar-top">{{template "repo/home_sidebar_top" .}}</div> {{template "repo/home_sidebar_top" .}}
<div class="repo-home-sidebar-bottom">{{template "repo/home_sidebar_bottom" .}}</div> {{template "repo/home_sidebar_bottom" .}}
{{end}} {{end}}
</div> </div>
</div> </div>

94
templates/repo/home_sidebar_bottom.tmpl
Unescape View File

@ -1,59 +1,61 @@
<div class="flex-list"> <div class="repo-home-sidebar-bottom">
{{if .LatestRelease}} <div class="flex-list">
<div class="flex-item"> {{if .LatestRelease}}
<div class="flex-item-main"> <div class="flex-item">
<div class="flex-item-title"> <div class="flex-item-main">
<a class="item muted" href="{{.Link}}/releases"> <div class="flex-item-title">
{{ctx.Locale.Tr "repo.releases"}} <a class="item muted" href="{{.Link}}/releases">
<span class="ui small label">{{.NumReleases}}</span> {{ctx.Locale.Tr "repo.releases"}}
</a> <span class="ui small label">{{.NumReleases}}</span>
</div> </a>
<div class="flex-item">
<div class="flex-item-icon">
{{svg "octicon-tag" 16}}
</div> </div>
<div class="flex-item-main"> <div class="flex-item">
<div class="flex-item-header"> <div class="flex-item-icon">
<div class="flex-item-title tw-gap-2"> {{svg "octicon-tag" 16}}
<a class="gt-ellipsis muted" href="{{.LatestRelease.Link}}" title="{{.LatestRelease.Title}}">{{.LatestRelease.Title}}</a>
<span class="ui basic green label tw-h-100">{{ctx.Locale.Tr "latest"}}</span>
</div>
</div> </div>
<div class="flex-item-body"> <div class="flex-item-main">
<span class="time">{{DateUtils.TimeSince .LatestRelease.CreatedUnix}}</span> <div class="flex-item-header">
<div class="flex-item-title tw-gap-2">
<a class="gt-ellipsis muted" href="{{.LatestRelease.Link}}" title="{{.LatestRelease.Title}}">{{.LatestRelease.Title}}</a>
{{template "repo/release/label" (dict "Release" .LatestRelease "IsLatest" true)}}
</div>
</div>
<div class="flex-item-body">
<span class="time">{{DateUtils.TimeSince .LatestRelease.CreatedUnix}}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> {{end}}
{{end}}
{{if and (not .IsEmptyRepo) .LanguageStats}} {{if and (not .IsEmptyRepo) .LanguageStats}}
<div class="flex-item"> <div class="flex-item">
<div class="flex-item-main"> <div class="flex-item-main">
<div class="flex-item-title"> <div class="flex-item-title">
{{ctx.Locale.Tr "repo.repo_lang"}} {{ctx.Locale.Tr "repo.repo_lang"}}
</div>
<div class="flex-item-body">
<div class="language-stats">
{{range .LanguageStats}}
<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
{{end}}
</div> </div>
<div class="language-stats-details">
{{range .LanguageStats}} <div class="flex-item-body">
<div class="item"> <div class="language-stats">
<i class="color-icon" style="background-color: {{.Color}}"></i> {{range .LanguageStats}}
<span class="tw-font-semibold"> <div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
{{Iif (eq .Language "other") (ctx.Locale.Tr "repo.language_other") .Language}} {{end}}
</span> </div>
{{.Percentage}}% <div class="language-stats-details">
</div> {{range .LanguageStats}}
{{end}} <div class="item">
<i class="color-icon" style="background-color: {{.Color}}"></i>
<span class="tw-font-semibold">
{{Iif (eq .Language "other") (ctx.Locale.Tr "repo.language_other") .Language}}
</span>
{{.Percentage}}%
</div>
{{end}}
</div>
</div> </div>
</div> </div>
</div> </div>
{{end}}
</div> </div>
{{end}}
</div> </div>

124
templates/repo/home_sidebar_top.tmpl
Unescape View File

@ -1,68 +1,70 @@
<form class="ignore-dirty tw-flex tw-flex-1 tw-mt-1" action="{{.RepoLink}}/search" method="get"> <div class="repo-home-sidebar-top">
<div class="ui small action input tw-flex-1"> <form class="ignore-dirty tw-flex tw-flex-1 tw-mt-1" action="{{.RepoLink}}/search" method="get">
<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}"> <div class="ui small action input tw-flex-1">
{{template "shared/search/button"}} <input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}"> {{template "shared/search/button"}}
</div> </div>
</form> </form>
<div class="flex-list"> <div class="flex-list">
<div class="flex-item"> <div class="flex-item">
<div class="flex-item-main"> <div class="flex-item-main">
<div class="flex-item-title"> <div class="flex-item-title">{{ctx.Locale.Tr "repo.repo_desc"}}</div>
{{ctx.Locale.Tr "repo.repo_desc"}} <div class="flex-item-body tw-text-16">
</div> <div class="tw-flex tw-flex-col tw-gap-2 tw-mt-2">
{{if and (not .HideRepoInfo) (not .IsBlame)}} <div class="repo-description tw-break-anywhere tw-gap-2">
<div class="flex-item-body repo-description tw-break-anywhere tw-gap-2 tw-mt-2"> {{- $description := .Repository.DescriptionHTML ctx -}}
{{- $description := .Repository.DescriptionHTML ctx -}} {{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}}
{{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}} </div>
{{if .Repository.Website}}{{svg "octicon-link"}}<a href="{{.Repository.Website}}">{{.Repository.Website}}</a>{{end}}
</div> {{if .Repository.Website}}
<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-my-2" id="repo-topics"> <a class="flex-text-block" href="{{.Repository.Website}}">
{{/* !!!! it SHOULD and MUST match the code in issue-home.js */}} {{svg "octicon-link" 16 "tw-text-text"}} <span class="tw-text-primary">{{.Repository.Website}}</span>
{{range .Topics}}<a class="repo-topic ui large label gt-ellipsis" title={{.Name}} href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}} </a>
</div> {{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
<button id="manage_topic" class="btn interact-fg tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button> <div id="repo-topics" class="flex-text-block tw-flex-wrap tw-gap-1 tw-my-1 tw-text-text">
{{end}} {{/* !!!! it SHOULD and MUST match the code in repo-home.ts */}}
{{end}} {{range .Topics}}<a class="repo-topic ui large label gt-ellipsis" title={{.Name}} href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}} </div>
<div class="ui form tw-hidden flex-item-body tw-gap-2 tw-my-2" id="topic_edit"> {{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1"> <button id="manage_topic" class="btn interact-fg tw-mb-2 tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>
<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}"> <div class="ui form tw-hidden tw-my-2" id="topic_edit">
{{range .Topics}} <div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
{{/* keep the same layout as Fomantic UI generated labels */}} <input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
<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> {{range .Topics}}
{{/* keep the same layout as Fomantic UI generated labels */}}
<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>
{{end}}
<div class="text"></div>
</div>
<div class="tw-my-2">
<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
</div>
</div>
{{end}}
{{if .ReadmeExist}}
<a class="flex-text-block muted" href="{{.TreeLink}}/{{.FileName}}">
{{svg "octicon-book"}} {{ctx.Locale.Tr "readme"}}
</a>
{{end}}
{{if .DetectedRepoLicenses}}
<a class="flex-text-block muted" href="{{.RepoLink}}/src/{{.Repository.DefaultBranch}}/{{PathEscapeSegments .LicenseFileName}}" title="{{StringUtils.Join .DetectedRepoLicenses ", "}}">
{{svg "octicon-law"}} {{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}}
</a>
{{end}}
{{if .CitiationExist}}
{{template "repo/cite/cite_modal" .}}
<a class="flex-text-block muted" id="cite-repo-button">
{{svg "octicon-cross-reference"}} {{ctx.Locale.Tr "repo.cite_this_repo"}}
</a>
{{end}} {{end}}
<div class="text"></div>
</div>
<div>
<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{ctx.Locale.Tr "save"}}</button>
<button class="ui basic button" id="cancel_topic_edit">{{ctx.Locale.Tr "cancel"}}</button>
</div> </div>
</div> </div>
{{end}} </div>
{{if .ReadmeExist}}
<div class="flex-item-body tw-mt-2">
<a class="flex-text-block muted" href="{{.TreeLink}}/{{.FileName}}">
{{svg "octicon-book"}} {{ctx.Locale.Tr "readme"}}
</a>
</div>
{{end}}
{{if .DetectedRepoLicenses}}
<div class="flex-item-body">
<a class="flex-text-block muted" href="{{.RepoLink}}/src/{{.Repository.DefaultBranch}}/{{PathEscapeSegments .LicenseFileName}}" title="{{StringUtils.Join .DetectedRepoLicenses ", "}}">
{{svg "octicon-law"}} {{if eq (len .DetectedRepoLicenses) 1}}{{index .DetectedRepoLicenses 0}}{{else}}{{ctx.Locale.Tr "repo.multiple_licenses"}}{{end}}
</a>
</div>
{{end}}
{{if .CitiationExist}}
<div class="flex-item-body">
{{template "repo/cite/cite_modal" .}}
<a class="flex-text-block muted" id="cite-repo-button">
{{svg "octicon-cross-reference"}} {{ctx.Locale.Tr "repo.cite_this_repo"}}
</a>
</div>
{{end}}
</div> </div>
</div> </div>
</div> </div>

14
templates/repo/release/label.tmpl
Unescape View File

@ -0,0 +1,14 @@
{{/*
Template Attributes:
* Release: the release
* IsLatest: boolean indicating whether this is the latest release, optional
*/}}
{{if .IsLatest}}
<span class="ui green label">{{ctx.Locale.Tr "repo.release.latest"}}</span>
{{else if .Release.IsDraft}}
<span class="ui yellow label">{{ctx.Locale.Tr "repo.release.draft"}}</span>
{{else if .Release.IsPrerelease}}
<span class="ui orange label">{{ctx.Locale.Tr "repo.release.prerelease"}}</span>
{{else if (not .Release.IsTag)}}
<span class="ui green label">{{ctx.Locale.Tr "repo.release.stable"}}</span>
{{end}}

8
templates/repo/release/list.tmpl
Unescape View File

@ -33,13 +33,7 @@
<h4 class="release-list-title tw-break-anywhere"> <h4 class="release-list-title tw-break-anywhere">
{{if $.PageIsSingleTag}}{{$release.Title}}{{else}}<a class="muted" href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>{{end}} {{if $.PageIsSingleTag}}{{$release.Title}}{{else}}<a class="muted" href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>{{end}}
{{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "tw-flex"}} {{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "tw-flex"}}
{{if $release.IsDraft}} {{template "repo/release/label" (dict "Release" $release)}}
<span class="ui yellow label">{{ctx.Locale.Tr "repo.release.draft"}}</span>
{{else if $release.IsPrerelease}}
<span class="ui orange label">{{ctx.Locale.Tr "repo.release.prerelease"}}</span>
{{else if (not $release.IsTag)}}
<span class="ui green label">{{ctx.Locale.Tr "repo.release.stable"}}</span>
{{end}}
</h4> </h4>
<div> <div>
{{if and $.CanCreateRelease (not $.PageIsSingleTag)}} {{if and $.CanCreateRelease (not $.PageIsSingleTag)}}

5
web_src/css/repo.css
Unescape View File

@ -101,11 +101,6 @@
margin-bottom: 12px; margin-bottom: 12px;
} }
.repository .repo-description {
font-size: 16px;
margin-bottom: 5px;
}
.commit-summary { .commit-summary {
flex: 1; flex: 1;
overflow-wrap: anywhere; overflow-wrap: anywhere;

14
web_src/css/repo/home.css
Unescape View File

@ -4,22 +4,24 @@
grid-template-rows: auto auto 1fr; grid-template-rows: auto auto 1fr;
} }
.repo-grid-filelist-sidebar .repo-home-filelist { .repo-home-filelist {
min-width: 0; min-width: 0;
grid-column: 1; grid-column: 1;
grid-row: 1 / 4; grid-row: 1 / 4;
} }
.repo-grid-filelist-sidebar .repo-home-sidebar-top { .repo-home-sidebar-top {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
padding-left: 1em; padding-left: 1em;
} }
.repo-grid-filelist-sidebar .repo-home-sidebar-bottom {
.repo-home-sidebar-bottom {
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
padding-left: 1em; padding-left: 1em;
} }
.repo-home-sidebar-bottom .flex-list > :first-child { .repo-home-sidebar-bottom .flex-list > :first-child {
border-top: 1px solid var(--color-secondary); /* same to .flex-list > .flex-item + .flex-item */ border-top: 1px solid var(--color-secondary); /* same to .flex-list > .flex-item + .flex-item */
} }
@ -29,16 +31,16 @@
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
} }
.repo-grid-filelist-sidebar .repo-home-filelist { .repo-home-filelist {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
} }
.repo-grid-filelist-sidebar .repo-home-sidebar-top { .repo-home-sidebar-top {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
padding-left: 0; padding-left: 0;
} }
.repo-grid-filelist-sidebar .repo-home-sidebar-bottom { .repo-home-sidebar-bottom {
grid-column: 1; grid-column: 1;
grid-row: 3; grid-row: 3;
padding-left: 0; padding-left: 0;

6
web_src/js/features/repo-home.ts
Unescape View File

@ -16,7 +16,7 @@ export function initRepoTopicBar() {
let lastErrorToast: Toast; let lastErrorToast: Toast;
mgrBtn.addEventListener('click', () => { mgrBtn.addEventListener('click', () => {
hideElem(viewDiv); hideElem([viewDiv, mgrBtn]);
showElem(editDiv); showElem(editDiv);
topicDropdown.querySelector<HTMLInputElement>('input.search').focus(); topicDropdown.querySelector<HTMLInputElement>('input.search').focus();
}); });
@ -24,7 +24,7 @@ export function initRepoTopicBar() {
document.querySelector('#cancel_topic_edit').addEventListener('click', () => { document.querySelector('#cancel_topic_edit').addEventListener('click', () => {
lastErrorToast?.hideToast(); lastErrorToast?.hideToast();
hideElem(editDiv); hideElem(editDiv);
showElem(viewDiv); showElem([viewDiv, mgrBtn]);
mgrBtn.focus(); mgrBtn.focus();
}); });
@ -55,7 +55,7 @@ export function initRepoTopicBar() {
} }
} }
hideElem(editDiv); hideElem(editDiv);
showElem(viewDiv); showElem([viewDiv, mgrBtn]);
} }
} else if (response.status === 422) { } else if (response.status === 422) {
// how to test: input topic like " invalid topic " (with spaces), and select it from the list, then "Save" // how to test: input topic like " invalid topic " (with spaces), and select it from the list, then "Save"

Write Preview
Loading…
Cancel
Save