Files
gitea/templates/repo/issue/card.tmpl
T
silverwindandwxiaoguang 78eb95ab19 fix: enable more djlint rules and improve keyboard navigation (#40081)
Enable djlint's [H018](https://djlint.com/docs/linter/#h018),
[H046](https://djlint.com/docs/linter/#h046) and
[H054](https://djlint.com/docs/linter/#h054) rules, fix their findings
and the keyboard navigation problems around them. H054 found links
nested in `<button>` dropdowns and radio inputs nested in links, both
invalid HTML.

- "Add File" and "More Operations" in the repo file list become `div`
dropdowns, the disabled state stays unfocusable
- The diff whitespace menu marks the current option with a check and
`aria-current` instead of radios, which made our dropdown aria patch
announce it as a combobox
- Sign-in moves "Forgot password?" below "Sign In" and drops the
positive tabindexes from https://github.com/go-gitea/gitea/pull/31689,
so the tab order follows the DOM: username, password, remember, sign in,
forgot
- The focus ring on primary, red and green buttons is near-white on dark
themes and near-black on light ones, the primary-colored ring was
invisible on primary buttons

<img width="500" alt="Whitespace menu, before and after"
src="https://github.com/user-attachments/assets/d22a423d-95e5-434c-aec4-59264c7132b7"
/>

<img width="600" alt="Sign-in form, main and this PR"
src="https://github.com/user-attachments/assets/d6780690-d906-4791-8a2b-8d80fb03067a"
/>

<img width="215" height="132" alt="Keyboard-focused primary and red
buttons, dark and light theme"
src="https://github.com/user-attachments/assets/a2400b18-4802-4383-8560-7e8267a7f02f"
/>

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2026-11-03 15:30:59 +00:00

84 lines
3.2 KiB
Handlebars

{{with .Issue}}
{{if eq $.Page.Project.CardType 1}}{{/* Images and Text*/}}
{{$attachments := index $.Page.issuesAttachmentMap .ID}}
{{if $attachments}}
<div class="card-attachment-images">
{{range $att := $attachments}}
<img loading="lazy" src="{{$att.DownloadURL ctx}}" alt="{{$att.Name}}">
{{end}}
</div>
{{end}}
{{end}}
<div class="content tw-w-full">
<div class="tw-flex tw-items-start tw-gap-[5px]">
<div class="issue-card-icon">
{{template "shared/issueicon" .}}
</div>
<a class="issue-card-title muted issue-title tw-break-anywhere" href="{{.Link}}">{{.Title | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
{{if and $.isPinnedIssueCard $.Page.IsRepoAdmin}}
<a role="button" class="issue-card-unpin muted flex-text-inline" data-tooltip-content={{ctx.Locale.Tr "repo.issues.unpin"}} data-issue-id="{{.ID}}" data-unpin-url="{{$.Page.Link}}/unpin/{{.Index}}">
{{svg "octicon-x" 16}}
</a>
{{end}}
</div>
<div class="meta">
<span class="tw-text-grey-light muted-links">
{{if not $.Page.Repository}}{{.Repo.FullName}}{{end}}#{{.Index}}
{{$timeStr := DateUtils.TimeSince .GetLastEventTimestamp}}
{{if .OriginalAuthor}}
{{ctx.Locale.Tr .GetLastEventLabelFake $timeStr .OriginalAuthor}}
{{else if gt .Poster.ID 0}}
{{ctx.Locale.Tr .GetLastEventLabel $timeStr .Poster.HomeLink .Poster.GetDisplayName}}
{{else}}
{{ctx.Locale.Tr .GetLastEventLabelFake $timeStr .Poster.GetDisplayName}}
{{end}}
</span>
</div>
{{if .MilestoneID}}
<div class="meta tw-my-1">
<a class="milestone" href="{{.Repo.Link}}/milestone/{{.MilestoneID}}">
{{svg "octicon-milestone" 16 "tw-mr-1 tw-align-middle"}}
<span class="tw-align-middle">{{.Milestone.Name}}</span>
</a>
</div>
{{end}}
{{if $.Page.LinkedPRs}}
{{range index $.Page.LinkedPRs .ID}}
<div class="meta tw-my-1">
<a href="{{.Repo.Link}}/pulls/{{.Index}}">
<span class="tw-m-0 {{if .PullRequest.HasMerged}}tw-text-purple{{else if .IsClosed}}tw-text-red{{else}}tw-text-green{{end}}">{{svg "octicon-git-merge" 16 "tw-mr-1 tw-align-middle"}}</span>
<span class="tw-align-middle">{{.Title}} <span class="tw-text-grey-light">#{{.Index}}</span></span>
</a>
</div>
{{end}}
{{end}}
{{$tasks := .GetTasks}}
{{if gt $tasks 0}}
<div class="meta tw-my-1">
{{svg "octicon-checklist" 16 "tw-mr-1 tw-align-middle"}}
<span class="tw-align-middle">{{.GetTasksDone}} / {{$tasks}}</span>
</div>
{{end}}
</div>
{{if or .Labels .Assignees}}
<div class="issue-card-bottom">
{{/* the labels container must always be present, to help the assignees list right-aligned */}}
<div class="issue-card-bottom-part labels-list">
{{range $label := .Labels}}
{{$link := print $.Issue.Repo.Link "/issues"}}
{{$link = QueryBuild $link "labels" $label.ID}}
<a class="item" href="{{$link}}">{{ctx.RenderUtils.RenderLabel $label}}</a>
{{end}}
</div>
{{if .Assignees}}
<div class="issue-card-bottom-part tw-justify-end">
{{range .Assignees}}
<a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 24}}</a>
{{end}}
</div>
{{end}}
</div>
{{end}}
{{end}}