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. 4
      templates/repo/home_sidebar_bottom.tmpl
  4. 46
      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.prerelease = Pre-Release
release.stable = Stable
release.latest = Latest
release.compare = Compare
release.edit = edit
release.ahead.commits = <strong>%d</strong> commits

6
templates/repo/home.tmpl
Unescape View File

@ -18,7 +18,7 @@
{{$treeNamesLen := len .TreeNames}}
{{$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="repo-home-filelist">
{{template "repo/sub_menu" .}}
@ -130,8 +130,8 @@
</div>
{{if $showSidebar}}
<div class="repo-home-sidebar-top">{{template "repo/home_sidebar_top" .}}</div>
<div class="repo-home-sidebar-bottom">{{template "repo/home_sidebar_bottom" .}}</div>
{{template "repo/home_sidebar_top" .}}
{{template "repo/home_sidebar_bottom" .}}
{{end}}
</div>
</div>

4
templates/repo/home_sidebar_bottom.tmpl
Unescape View File

@ -1,3 +1,4 @@
<div class="repo-home-sidebar-bottom">
<div class="flex-list">
{{if .LatestRelease}}
<div class="flex-item">
@ -16,7 +17,7 @@
<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>
<span class="ui basic green label tw-h-100">{{ctx.Locale.Tr "latest"}}</span>
{{template "repo/release/label" (dict "Release" .LatestRelease "IsLatest" true)}}
</div>
</div>
<div class="flex-item-body">
@ -57,3 +58,4 @@
</div>
{{end}}
</div>
</div>

46
templates/repo/home_sidebar_top.tmpl
Unescape View File

@ -1,32 +1,34 @@
<div class="repo-home-sidebar-top">
<form class="ignore-dirty tw-flex tw-flex-1 tw-mt-1" action="{{.RepoLink}}/search" method="get">
<div class="ui small action input tw-flex-1">
<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
{{template "shared/search/button"}}
<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}"> {{template "shared/search/button"}}
</div>
</form>
<div class="flex-list">
<div class="flex-item">
<div class="flex-item-main">
<div class="flex-item-title">
{{ctx.Locale.Tr "repo.repo_desc"}}
</div>
{{if and (not .HideRepoInfo) (not .IsBlame)}}
<div class="flex-item-body repo-description tw-break-anywhere tw-gap-2 tw-mt-2">
<div class="flex-item-title">{{ctx.Locale.Tr "repo.repo_desc"}}</div>
<div class="flex-item-body tw-text-16">
<div class="tw-flex tw-flex-col tw-gap-2 tw-mt-2">
<div class="repo-description tw-break-anywhere tw-gap-2">
{{- $description := .Repository.DescriptionHTML ctx -}}
{{if $description}}{{$description | RenderCodeBlock}}{{else}}{{ctx.Locale.Tr "repo.repo_no_desc"}}{{end}}
{{if .Repository.Website}}{{svg "octicon-link"}}<a href="{{.Repository.Website}}">{{.Repository.Website}}</a>{{end}}
</div>
<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-my-2" id="repo-topics">
{{/* !!!! it SHOULD and MUST match the code in issue-home.js */}}
{{if .Repository.Website}}
<a class="flex-text-block" href="{{.Repository.Website}}">
{{svg "octicon-link" 16 "tw-text-text"}} <span class="tw-text-primary">{{.Repository.Website}}</span>
</a>
{{end}}
<div id="repo-topics" class="flex-text-block tw-flex-wrap tw-gap-1 tw-my-1 tw-text-text">
{{/* !!!! it SHOULD and MUST match the code in repo-home.ts */}}
{{range .Topics}}<a class="repo-topic ui large label gt-ellipsis" title={{.Name}} href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
</div>
{{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>
{{end}}
{{end}}
{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
<div class="ui form tw-hidden flex-item-body tw-gap-2 tw-my-2" id="topic_edit">
<button id="manage_topic" class="btn interact-fg tw-mb-2 tw-text-12">{{ctx.Locale.Tr "repo.topic.manage_topics"}}</button>
<div class="ui form tw-hidden tw-my-2" id="topic_edit">
<div class="ui fluid multiple search selection dropdown tw-flex-wrap tw-flex-1">
<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if Eval $i "+" 1 "<" (len $.Topics)}},{{end}}{{end}}">
{{range .Topics}}
@ -35,34 +37,34 @@
{{end}}
<div class="text"></div>
</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}}
<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">
{{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"}}
{{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}}
{{template "repo/release/label" (dict "Release" $release)}}
</h4>
<div>
{{if and $.CanCreateRelease (not $.PageIsSingleTag)}}

5
web_src/css/repo.css
Unescape View File

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

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

@ -4,22 +4,24 @@
grid-template-rows: auto auto 1fr;
}
.repo-grid-filelist-sidebar .repo-home-filelist {
.repo-home-filelist {
min-width: 0;
grid-column: 1;
grid-row: 1 / 4;
}
.repo-grid-filelist-sidebar .repo-home-sidebar-top {
.repo-home-sidebar-top {
grid-column: 2;
grid-row: 1;
padding-left: 1em;
}
.repo-grid-filelist-sidebar .repo-home-sidebar-bottom {
.repo-home-sidebar-bottom {
grid-column: 2;
grid-row: 2;
padding-left: 1em;
}
.repo-home-sidebar-bottom .flex-list > :first-child {
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-rows: auto auto auto;
}
.repo-grid-filelist-sidebar .repo-home-filelist {
.repo-home-filelist {
grid-column: 1;
grid-row: 2;
}
.repo-grid-filelist-sidebar .repo-home-sidebar-top {
.repo-home-sidebar-top {
grid-column: 1;
grid-row: 1;
padding-left: 0;
}
.repo-grid-filelist-sidebar .repo-home-sidebar-bottom {
.repo-home-sidebar-bottom {
grid-column: 1;
grid-row: 3;
padding-left: 0;

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

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

Write Preview
Loading…
Cancel
Save