Refactor text utility classes to Tailwind CSS (#36703)
Replace Fomantic/custom CSS text utility classes with their Tailwind equivalents: - `.text.<color>` compound classes → `tw-text-<color>` classes - `.text.small` (`font-size: 0.75em`) → `tw-text-xs` (11px) - `.text.truncate` (`overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block`) → `tw-inline-block tw-truncate` Remove the now-unused CSS rules from `base.css` and `dashboard.css`. --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
silverwind
GitHub
@@ -39,7 +39,7 @@ Still needs to figure out:
|
||||
<div class="branch-tag-divider"></div>
|
||||
<div id="branch-list" class="scrolling menu reference-list-menu">
|
||||
{{if or .Reference (not .Issue)}}
|
||||
<div class="item text small" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
|
||||
<div class="item tw-text-xs" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
|
||||
{{end}}
|
||||
{{range .Branches}}
|
||||
<div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector" title="{{.}}">{{.}}</div>
|
||||
@@ -49,7 +49,7 @@ Still needs to figure out:
|
||||
</div>
|
||||
<div id="tag-list" class="scrolling menu reference-list-menu tw-hidden">
|
||||
{{if or .Reference (not .Issue)}}
|
||||
<div class="item text small" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
|
||||
<div class="item tw-text-xs" data-id="" data-name="{{ctx.Locale.Tr "repo.issues.no_ref"}}" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
|
||||
{{end}}
|
||||
{{range .Tags}}
|
||||
<div class="item" data-id="refs/tags/{{.}}" data-name="tags/{{.}}" data-id-selector="#ref_selector">{{.}}</div>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="text light grey muted-links">
|
||||
<span class="tw-text-grey-light muted-links">
|
||||
{{if not $.Page.Repository}}{{.Repo.FullName}}{{end}}#{{.Index}}
|
||||
{{$timeStr := DateUtils.TimeSince .GetLastEventTimestamp}}
|
||||
{{if .OriginalAuthor}}
|
||||
@@ -46,8 +46,8 @@
|
||||
{{range index $.Page.LinkedPRs .ID}}
|
||||
<div class="meta tw-my-1">
|
||||
<a href="{{.Repo.Link}}/pulls/{{.Index}}">
|
||||
<span class="tw-m-0 text {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "tw-mr-1 tw-align-middle"}}</span>
|
||||
<span class="tw-align-middle">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
|
||||
<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}}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
{{else}}
|
||||
|
||||
{{if .Milestone.DeadlineString}}
|
||||
<span{{if .IsOverdue}} class="text red"{{end}}>
|
||||
<span{{if .IsOverdue}} class="tw-text-red"{{end}}>
|
||||
{{svg "octicon-calendar"}}
|
||||
{{DateUtils.AbsoluteShort (.Milestone.DeadlineString|DateUtils.ParseLegacy)}}
|
||||
</span>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
{{ctx.Locale.Tr "repo.milestones.closed" $closedDate}}
|
||||
{{else}}
|
||||
{{if .DeadlineString}}
|
||||
<span class="flex-text-inline {{if .IsOverdue}}text red{{end}}">
|
||||
<span class="flex-text-inline {{if .IsOverdue}}tw-text-red{{end}}">
|
||||
{{svg "octicon-calendar" 14}}
|
||||
{{DateUtils.AbsoluteShort (.DeadlineString|DateUtils.ParseLegacy)}}
|
||||
</span>
|
||||
@@ -76,7 +76,7 @@
|
||||
{{else}}
|
||||
<a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-x" 14}}{{ctx.Locale.Tr "repo.milestones.close"}}</a>
|
||||
{{end}}
|
||||
<a class="link-action flex-text-inline text red" href data-modal-confirm="#repo-milestone-delete-modal" data-url="{{$.RepoLink}}/milestones/delete?id={{.ID}}">{{svg "octicon-trash" 14}}{{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
|
||||
<a class="link-action flex-text-inline tw-text-red" href data-modal-confirm="#repo-milestone-delete-modal" data-url="{{$.RepoLink}}/milestones/delete?id={{.ID}}">{{svg "octicon-trash" 14}}{{ctx.Locale.Tr "repo.issues.label_delete"}}</a>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="ui form tw-mt-2">
|
||||
{{if .Issue.DeadlineUnix}}
|
||||
<div class="tw-flex tw-justify-between tw-items-center tw-gap-2">
|
||||
<div class="due-date {{if .Issue.IsOverdue}}text red{{end}}" {{if .Issue.IsOverdue}}data-tooltip-content="{{ctx.Locale.Tr "repo.issues.due_date_overdue"}}"{{end}}>
|
||||
<div class="due-date {{if .Issue.IsOverdue}}tw-text-red{{end}}" {{if .Issue.IsOverdue}}data-tooltip-content="{{ctx.Locale.Tr "repo.issues.due_date_overdue"}}"{{end}}>
|
||||
{{svg "octicon-calendar"}} {{DateUtils.AbsoluteLong .Issue.DeadlineUnix}}
|
||||
</div>
|
||||
<div class="flex-text-block">
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<a class="muted issue-dependency-title gt-ellipsis" href="{{.Issue.Link}}" data-tooltip-content="#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}">
|
||||
#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}
|
||||
</a>
|
||||
<div class="text small gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
|
||||
<div class="tw-text-xs gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
|
||||
{{.Repository.OwnerName}}/{{.Repository.Name}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,7 +59,7 @@
|
||||
<a class="muted issue-dependency-title gt-ellipsis" href="{{.Issue.Link}}" data-tooltip-content="#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}">
|
||||
#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}
|
||||
</a>
|
||||
<div class="text small gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
|
||||
<div class="tw-text-xs gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
|
||||
{{.Repository.OwnerName}}/{{.Repository.Name}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,7 +84,7 @@
|
||||
#{{.Issue.Index}} {{.Issue.Title | ctx.RenderUtils.RenderEmoji}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text small gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
|
||||
<div class="tw-text-xs gt-ellipsis" data-tooltip-content="{{.Repository.OwnerName}}/{{.Repository.Name}}">
|
||||
{{.Repository.OwnerName}}/{{.Repository.Name}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -82,7 +82,7 @@
|
||||
{{end}}
|
||||
{{end}}
|
||||
<span {{if .Review.TooltipContent}}data-tooltip-content="{{ctx.Locale.Tr .Review.TooltipContent}}"{{end}}>
|
||||
{{svg (printf "octicon-%s" .Review.Type.Icon) 16 (printf "text %s" (.Review.HTMLTypeColorName))}}
|
||||
{{svg (printf "octicon-%s" .Review.Type.Icon) 16 .Review.HTMLTypeColorClass}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,7 +98,7 @@
|
||||
</div>
|
||||
<div class="flex-text-inline">
|
||||
<span {{if .TooltipContent}}data-tooltip-content="{{ctx.Locale.Tr .TooltipContent}}"{{end}}>
|
||||
{{svg (printf "octicon-%s" .Type.Icon) 16 (printf "text %s" (.HTMLTypeColorName))}}
|
||||
{{svg (printf "octicon-%s" .Type.Icon) 16 .HTMLTypeColorClass}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,11 +16,11 @@
|
||||
<div class="comment-header avatar-content-left-arrow" role="heading" aria-level="3">
|
||||
<div class="comment-header-left">
|
||||
{{if .Issue.OriginalAuthor}}
|
||||
<span class="text black tw-font-semibold">
|
||||
<span class="tw-text-text tw-font-semibold">
|
||||
{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
|
||||
{{.Issue.OriginalAuthor}}
|
||||
</span>
|
||||
<span class="text grey muted-links">
|
||||
<span class="tw-text-text-light muted-links">
|
||||
{{ctx.Locale.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr}}
|
||||
</span>
|
||||
<span class="text migrate">
|
||||
@@ -30,7 +30,7 @@
|
||||
<a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
|
||||
{{ctx.AvatarUtils.Avatar .Issue.Poster 24}}
|
||||
</a>
|
||||
<span class="text grey muted-links">
|
||||
<span class="tw-text-text-light muted-links">
|
||||
{{template "shared/user/authorlink" .Issue.Poster}}
|
||||
{{ctx.Locale.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr}}
|
||||
</span>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="tw-p-2 tw-flex tw-items-center">
|
||||
<span class="ui text grey">{{.Size | FileSize}}</span>
|
||||
<span class="ui tw-text-text-light">{{.Size | FileSize}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{end -}}
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<div class="comment-header avatar-content-left-arrow" role="heading" aria-level="3">
|
||||
<div class="comment-header-left">
|
||||
{{if .OriginalAuthor}}
|
||||
<span class="text black tw-font-semibold tw-mr-1">
|
||||
<span class="tw-text-text tw-font-semibold tw-mr-1">
|
||||
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
|
||||
{{.OriginalAuthor}}
|
||||
</span>
|
||||
@@ -403,7 +403,7 @@
|
||||
{{end}}
|
||||
<span class="comment-text-line">
|
||||
{{if .OriginalAuthor}}
|
||||
<span class="text black tw-font-semibold">
|
||||
<span class="tw-text-text tw-font-semibold">
|
||||
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
|
||||
{{.OriginalAuthor}}
|
||||
</span>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{{if .comment.OriginalAuthor}}
|
||||
<span class="text black">
|
||||
<span class="tw-text-text">
|
||||
{{svg (MigrationIcon .ctxData.Repository.GetOriginalURLHostname)}}
|
||||
{{.comment.OriginalAuthor}}
|
||||
</span>
|
||||
|
||||
@@ -69,9 +69,9 @@ The variables in "ctx.Data" are different in each case, making this template fra
|
||||
{{ctx.AvatarUtils.Avatar .Poster 20}}
|
||||
</a>
|
||||
{{end}}
|
||||
<span class="text grey muted-links">
|
||||
<span class="tw-text-text-light muted-links">
|
||||
{{if .OriginalAuthor}}
|
||||
<span class="text black">
|
||||
<span class="tw-text-text">
|
||||
{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
|
||||
{{.OriginalAuthor}}
|
||||
</span>
|
||||
|
||||
@@ -10,23 +10,23 @@
|
||||
>
|
||||
{{$statusCheckData := .StatusCheckData}}
|
||||
{{$requiredStatusCheckState := $statusCheckData.RequiredChecksState}}
|
||||
<div class="timeline-avatar text {{if .Issue.PullRequest.HasMerged}}purple
|
||||
{{- else if .Issue.IsClosed}}grey
|
||||
{{- else if .IsPullWorkInProgress}}grey
|
||||
{{- else if .IsFilesConflicted}}grey
|
||||
{{- else if .IsPullRequestBroken}}red
|
||||
{{- else if .IsBlockedByApprovals}}red
|
||||
{{- else if .IsBlockedByRejection}}red
|
||||
{{- else if .IsBlockedByOfficialReviewRequests}}red
|
||||
{{- else if .IsBlockedByOutdatedBranch}}red
|
||||
{{- else if .IsBlockedByChangedProtectedFiles}}red
|
||||
{{- else if and .EnableStatusCheck (or $requiredStatusCheckState.IsFailure $requiredStatusCheckState.IsError)}}red
|
||||
{{- else if and .EnableStatusCheck (or (not $.LatestCommitStatus) $requiredStatusCheckState.IsPending $requiredStatusCheckState.IsWarning)}}yellow
|
||||
{{- else if and .AllowMerge .RequireSigned (not .WillSign)}}red
|
||||
{{- else if .Issue.PullRequest.IsChecking}}yellow
|
||||
{{- else if .Issue.PullRequest.IsEmpty}}grey
|
||||
{{- else if .Issue.PullRequest.CanAutoMerge}}green
|
||||
{{- else}}red{{end}}">{{svg "octicon-git-merge" 40}}</div>
|
||||
<div class="timeline-avatar {{if .Issue.PullRequest.HasMerged}}tw-text-purple
|
||||
{{- else if .Issue.IsClosed}}tw-text-text-light
|
||||
{{- else if .IsPullWorkInProgress}}tw-text-text-light
|
||||
{{- else if .IsFilesConflicted}}tw-text-text-light
|
||||
{{- else if .IsPullRequestBroken}}tw-text-red
|
||||
{{- else if .IsBlockedByApprovals}}tw-text-red
|
||||
{{- else if .IsBlockedByRejection}}tw-text-red
|
||||
{{- else if .IsBlockedByOfficialReviewRequests}}tw-text-red
|
||||
{{- else if .IsBlockedByOutdatedBranch}}tw-text-red
|
||||
{{- else if .IsBlockedByChangedProtectedFiles}}tw-text-red
|
||||
{{- else if and .EnableStatusCheck (or $requiredStatusCheckState.IsFailure $requiredStatusCheckState.IsError)}}tw-text-red
|
||||
{{- else if and .EnableStatusCheck (or (not $.LatestCommitStatus) $requiredStatusCheckState.IsPending $requiredStatusCheckState.IsWarning)}}tw-text-yellow
|
||||
{{- else if and .AllowMerge .RequireSigned (not .WillSign)}}tw-text-red
|
||||
{{- else if .Issue.PullRequest.IsChecking}}tw-text-yellow
|
||||
{{- else if .Issue.PullRequest.IsEmpty}}tw-text-text-light
|
||||
{{- else if .Issue.PullRequest.CanAutoMerge}}tw-text-green
|
||||
{{- else}}tw-text-red{{end}}">{{svg "octicon-git-merge" 40}}</div>
|
||||
<div class="content">
|
||||
{{if .LatestCommitStatus}}
|
||||
<div class="ui attached segment fitted">
|
||||
@@ -190,7 +190,7 @@
|
||||
{{end}}
|
||||
{{if .WillSign}}
|
||||
<div class="item">
|
||||
{{svg "octicon-lock" 16 "text green"}}
|
||||
{{svg "octicon-lock" 16 "tw-text-green"}}
|
||||
{{ctx.Locale.Tr "repo.signing.will_sign" .SigningKeyMergeDisplay}}
|
||||
</div>
|
||||
{{else if .IsSigned}}
|
||||
@@ -306,7 +306,7 @@
|
||||
{{else}}
|
||||
{{/* no merge style was set in repo setting: not or ($prUnit.PullRequestsConfig.AllowMerge ...) */}}
|
||||
<div class="divider"></div>
|
||||
<div class="item text red">
|
||||
<div class="item tw-text-red">
|
||||
{{svg "octicon-x"}}
|
||||
{{ctx.Locale.Tr "repo.pulls.no_merge_desc"}}
|
||||
</div>
|
||||
@@ -326,27 +326,27 @@
|
||||
{{else}}
|
||||
{{/* Merge conflict without specific file. Suggest manual merge, only if all reviews and status checks OK. */}}
|
||||
{{if .IsBlockedByApprovals}}
|
||||
<div class="item text red">
|
||||
<div class="item tw-text-red">
|
||||
{{svg "octicon-x"}}
|
||||
{{ctx.Locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
|
||||
</div>
|
||||
{{else if .IsBlockedByRejection}}
|
||||
<div class="item text red">
|
||||
<div class="item tw-text-red">
|
||||
{{svg "octicon-x"}}
|
||||
{{ctx.Locale.Tr "repo.pulls.blocked_by_rejection"}}
|
||||
</div>
|
||||
{{else if .IsBlockedByOfficialReviewRequests}}
|
||||
<div class="item text red">
|
||||
<div class="item tw-text-red">
|
||||
{{svg "octicon-x"}}
|
||||
{{ctx.Locale.Tr "repo.pulls.blocked_by_official_review_requests"}}
|
||||
</div>
|
||||
{{else if .IsBlockedByOutdatedBranch}}
|
||||
<div class="item text red">
|
||||
<div class="item tw-text-red">
|
||||
{{svg "octicon-x"}}
|
||||
{{ctx.Locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
|
||||
</div>
|
||||
{{else if .IsBlockedByChangedProtectedFiles}}
|
||||
<div class="item text red">
|
||||
<div class="item tw-text-red">
|
||||
{{svg "octicon-x"}}
|
||||
{{ctx.Locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n"}}
|
||||
</div>
|
||||
@@ -356,17 +356,17 @@
|
||||
{{end}}
|
||||
</ul>
|
||||
{{else if and .EnableStatusCheck (not $requiredStatusCheckState.IsSuccess)}}
|
||||
<div class="item text red">
|
||||
<div class="item tw-text-red">
|
||||
{{svg "octicon-x"}}
|
||||
{{ctx.Locale.Tr "repo.pulls.required_status_check_failed"}}
|
||||
</div>
|
||||
{{else if and .RequireSigned (not .WillSign)}}
|
||||
<div class="item text red">
|
||||
<div class="item tw-text-red">
|
||||
{{svg "octicon-x"}}
|
||||
{{ctx.Locale.Tr "repo.pulls.require_signed_wont_sign"}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="item text red">
|
||||
<div class="item tw-text-red">
|
||||
{{svg "octicon-x"}}
|
||||
{{ctx.Locale.Tr "repo.pulls.cannot_auto_merge_desc"}}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user