0
0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-25 14:35:24 +02:00
xiaox 3b250ba04e
refactor: replace legacy tw-flex utility classes with flex-text-block/inline (#36778)
## Summary

Replace combinations of `tw-flex tw-items-center` (with optional
`tw-gap-*`) with semantic `flex-text-block` or `flex-text-inline`
classes across 15 template files.

This follows the refactoring direction outlined in #35015 ("Refactor
legacy `tw-flex tw-items-center tw-gap-xx` to `flex-text-block` or
`flex-text-inline`").

## Changes

### Replacement rules applied:
- `tw-flex tw-items-center tw-gap-2` → `flex-text-block` (both have
`gap: 0.5rem`)
- `tw-flex tw-items-center tw-gap-1` → `flex-text-inline` (both have
`gap: 0.25rem`)
- `tw-flex tw-items-center` (no explicit gap) → `flex-text-block` where
the element is block-level and children benefit from the default gap
- `tw-flex tw-items-center` (inline context, e.g. `<a>`, `<span>`) →
`flex-text-inline`

### Files modified (15):
- `templates/admin/config.tmpl` — config page dt elements
- `templates/admin/repo/unadopted.tmpl` — unadopted repo list items
- `templates/base/head_navbar.tmpl` — active stopwatch popup
- `templates/org/header.tmpl` — org header action buttons
- `templates/org/home.tmpl` — member/team count links
- `templates/org/settings/labels.tmpl` — labels page header
- `templates/repo/branch/list.tmpl` — branch list header
- `templates/repo/commits_table.tmpl` — commits table header
- `templates/repo/diff/box.tmpl` — diff detail box
- `templates/repo/diff/new_review.tmpl` — review form header
- `templates/repo/issue/card.tmpl` — issue card unpin button
- `templates/repo/issue/view_content/attachments.tmpl` — attachment file
size
- `templates/repo/migrate/migrate.tmpl` — migration service cards
- `templates/shared/user/org_profile_avatar.tmpl` — org profile header
- `templates/webhook/new.tmpl` — webhook type dropdown text

### What was NOT changed:
- Elements with `tw-justify-between` or `tw-justify-center` (these need
additional classes)
- Elements whose children use explicit margins (`tw-mr-*`, `tw-ml-*`)
that would conflict with the gap from flex-text classes
- Fomantic UI form elements with special layout requirements

## Notes
- This PR was created with AI assistance (Claude). All changes were
reviewed individually to ensure semantic correctness and zero unintended
visual changes.
- No functional changes — purely CSS class refactoring.

Closes: part of #35015

Signed-off-by: xiaox315 <xiaox315@users.noreply.github.com>
Co-authored-by: xiaox315 <xiaox315@users.noreply.github.com>
2026-02-28 14:03:25 +01:00

84 lines
3.1 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 $attachments}}
<img loading="lazy" src="{{.DownloadURL}}" alt="{{.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}}
{{ctx.RenderUtils.RenderLabelWithLink $label $link}}
{{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}}