Fix UI regression (#37218)

Fix  #37213

Also fix the misaligned tags, remove unused classes, etc.
This commit is contained in:
wxiaoguang
2026-04-14 23:24:44 +08:00
committed by GitHub
parent b9961e193d
commit 893df6b265
4 changed files with 49 additions and 52 deletions

View File

@@ -93,6 +93,9 @@ export default {
return [`${i}`, `${i === 0 ? '0' : `${i}px`}`]; return [`${i}`, `${i === 0 ? '0' : `${i}px`}`];
})), })),
}, },
extend: {
zIndex: {'1': '1'},
},
}, },
plugins: [ plugins: [
plugin(({addUtilities}) => { plugin(({addUtilities}) => {

View File

@@ -25,49 +25,49 @@
</div> </div>
</div> </div>
<div class="flex-container-main"> <div class="flex-container-main">
<div class="ui top attached header tw-flex tw-items-center tw-justify-between"> <div class="ui top attached header flex-text-block tw-flex-wrap tw-justify-between">
<span class="tw-text-base tw-font-semibold">{{ctx.Locale.TrN .Page.Paginater.Total "actions.runs.workflow_run_count_1" "actions.runs.workflow_run_count_n" .Page.Paginater.Total}}</span> <strong>{{ctx.Locale.TrN .Page.Paginater.Total "actions.runs.workflow_run_count_1" "actions.runs.workflow_run_count_n" .Page.Paginater.Total}}</strong>
<div class="ui secondary filter menu tw-flex tw-items-center tw-m-0"> <div class="ui secondary filter menu flex-text-block tw-m-0">
<!-- Actor --> <!-- Actor -->
<div class="ui{{if not .Actors}} disabled{{end}} dropdown jump item"> <div class="ui{{if not .Actors}} disabled{{end}} dropdown jump item">
<span class="text">{{ctx.Locale.Tr "actions.runs.actor"}}</span> <span class="text">{{ctx.Locale.Tr "actions.runs.actor"}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu"> <div class="menu">
<div class="ui icon search input"> <div class="ui icon search input">
<i class="icon">{{svg "octicon-search"}}</i> <i class="icon">{{svg "octicon-search"}}</i>
<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.actor"}}"> <input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.actor"}}">
</div> </div>
<a class="item{{if not $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&status={{$.CurStatus}}&actor=0"> <a class="item{{if not $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&status={{$.CurStatus}}&actor=0">
{{ctx.Locale.Tr "actions.runs.actors_no_select"}} {{ctx.Locale.Tr "actions.runs.actors_no_select"}}
</a>
{{range .Actors}}
<a class="item{{if eq .ID $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{.ID}}&status={{$.CurStatus}}">
{{ctx.AvatarUtils.Avatar . 20}} {{.GetDisplayName}}
</a> </a>
{{end}} {{range .Actors}}
</div> <a class="item{{if eq .ID $.CurActor}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{.ID}}&status={{$.CurStatus}}">
</div> {{ctx.AvatarUtils.Avatar . 20}} {{.GetDisplayName}}
<!-- Status --> </a>
<div class="ui dropdown jump item"> {{end}}
<span class="text">{{ctx.Locale.Tr "actions.runs.status"}}</span> </div>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} </div>
<div class="menu"> <!-- Status -->
<div class="ui icon search input"> <div class="ui dropdown jump item">
<i class="icon">{{svg "octicon-search"}}</i> <span class="text">{{ctx.Locale.Tr "actions.runs.status"}}</span>
<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.status"}}"> {{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="ui icon search input">
<i class="icon">{{svg "octicon-search"}}</i>
<input type="text" placeholder="{{ctx.Locale.Tr "actions.runs.status"}}">
</div>
<a class="item{{if not $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status=0">
{{ctx.Locale.Tr "actions.runs.status_no_select"}}
</a>
{{range .StatusInfoList}}
<a class="item{{if eq .Status $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status={{.Status}}">
{{.DisplayedStatus}}
</a>
{{end}}
</div> </div>
<a class="item{{if not $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status=0">
{{ctx.Locale.Tr "actions.runs.status_no_select"}}
</a>
{{range .StatusInfoList}}
<a class="item{{if eq .Status $.CurStatus}} active{{end}}" href="?workflow={{$.CurWorkflow}}&actor={{$.CurActor}}&status={{.Status}}">
{{.DisplayedStatus}}
</a>
{{end}}
</div> </div>
</div>
{{if .AllowDisableOrEnableWorkflow}} {{if .AllowDisableOrEnableWorkflow}}
<button class="ui jump dropdown btn interact-bg tw-p-2"> <button class="ui jump dropdown btn interact-bg tw-p-2">
{{svg "octicon-kebab-horizontal"}} {{svg "octicon-kebab-horizontal"}}
<div class="menu"> <div class="menu">
@@ -76,7 +76,7 @@
</a> </a>
</div> </div>
</button> </button>
{{end}} {{end}}
</div> </div>
</div> </div>

View File

@@ -1,6 +1,9 @@
<div class="ui blue info attached message tw-relative tw-z-10 tw-flex tw-justify-between tw-items-center"> {{/* "z-index" is used to maintain continuous attached styling and keep the colored border-bottom visible (pre-existing fomantic issue with negative margins) */}}
<span class="ui text middle">{{ctx.Locale.Tr "actions.workflow.has_workflow_dispatch"}}</span> <div class="ui blue info attached message flex-text-block tw-flex-wrap tw-justify-between tw-z-1">
<button class="ui mini button show-modal" data-modal="#runWorkflowDispatchModal">{{ctx.Locale.Tr "actions.workflow.run"}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}</button> <span>{{ctx.Locale.Tr "actions.workflow.has_workflow_dispatch"}}</span>
<div class="flex-text-block tw-bg-box-body tw-rounded">{{/*make the button have correct hovered color */}}
<button class="ui mini button show-modal" data-modal="#runWorkflowDispatchModal">{{ctx.Locale.Tr "actions.workflow.run"}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}</button>
</div>
</div> </div>
<div id="runWorkflowDispatchModal" class="ui tiny modal"> <div id="runWorkflowDispatchModal" class="ui tiny modal">
<div class="content"> <div class="content">

View File

@@ -84,15 +84,6 @@
border-color: var(--color-warning-border); border-color: var(--color-warning-border);
} }
/* use opaque colors for buttons inside colored messages */
.ui.message .ui.button:hover {
background: var(--color-secondary);
}
.ui.message .ui.button:active {
background: var(--color-secondary-hover);
}
.ui.message > .close.icon { .ui.message > .close.icon {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;