Fix table misalignments and tweak webhook and githook lists (#21917)

- Fix regression from #21893 which had misaligned a few tables like repo
lists and e-mails
- Bring githooks list in line with webhooks list for styling
- Change webhook list icons to just colored dots, like githook list
- Increase size of dot in webhook and githook list from 16 to 22px
silverwind 2 months ago committed by GitHub
parent 09b7d8198c
commit b97548a2ee
No known key found for this signature in database

@ -13,10 +13,10 @@
{{.locale.Tr "repo.settings.githooks_desc" | Str2html}}
{{range .Hooks}}
<div class="item">
<span class="text {{if .IsActive}}green{{else}}grey{{end}}">{{svg "octicon-dot-fill"}}</span>
<a class="text blue ui right" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
<div class="item truncated-item-container">
<span class="text {{if .IsActive}}green{{else}}grey{{end}} mr-3">{{svg "octicon-dot-fill" 22}}</span>
<span class="text truncate f1 mr-3">{{.Name}}</span>
<a class="muted ui right p-3" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
{{svg "octicon-pencil"}}

@ -48,13 +48,7 @@
{{range .Webhooks}}
<div class="item truncated-item-container">
{{if eq .LastStatus 1}}
<span class="text green mr-3">{{svg "octicon-check"}}</span>
{{else if eq .LastStatus 2}}
<span class="text red mr-3">{{svg "octicon-alert"}}</span>
<span class="text grey mr-3">{{svg "octicon-dot-fill"}}</span>
<span class="text {{if eq .LastStatus 1}}green{{else if eq .LastStatus 2}}red{{else}}grey{{end}} mr-3">{{svg "octicon-dot-fill" 22}}</span>
<a class="text truncate f1 mr-3" title="{{.URL}}" href="{{$.BaseLink}}/{{.ID}}">{{.URL}}</a>
<a class="muted p-3" href="{{$.BaseLink}}/{{.ID}}">{{svg "octicon-pencil"}}</a></span>
<a class="delete-button p-3" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}}</a>

@ -2612,12 +2612,18 @@
&.webhooks .list > .item:not(:first-child),
&.githooks .list > .item:not(:first-child) {
padding: .25rem 1rem;
margin: 12px -1rem -1rem;
.list {
> .item {
&:not(:first-child) {
border-top: 1px solid var(--color-secondary);
padding: .25rem 1rem;
margin: 12px -1rem -1rem;
padding: 1rem;
margin: 16px -1rem -1rem;
> .svg {