From 6ffae461d43b649ebdc247f63bfd5a9b63563c04 Mon Sep 17 00:00:00 2001 From: Gusted Date: Wed, 3 Apr 2024 21:52:30 +0200 Subject: [PATCH] [BUG] Center icon and callout text - Wrap the icon and callout into a seperate `

` which has `display: flex; align-items: center` set. To center the icon with the callout text. - Resolves #3006 --- modules/markup/markdown/callout/github.go | 1 + modules/markup/markdown/callout/github_legacy.go | 11 +++++++++-- modules/markup/sanitizer.go | 1 + web_src/css/base.css | 5 +++++ 4 files changed, 16 insertions(+), 2 deletions(-) diff --git a/modules/markup/markdown/callout/github.go b/modules/markup/markdown/callout/github.go index 0a6ab10cac..443f6fe2a3 100644 --- a/modules/markup/markdown/callout/github.go +++ b/modules/markup/markdown/callout/github.go @@ -72,6 +72,7 @@ func (g *GitHubCalloutTransformer) Transform(node *ast.Document, reader text.Rea // create an emphasis to make it bold attentionParagraph := ast.NewParagraph() + attentionParagraph.SetAttributeString("class", []byte("attention-title")) emphasis := ast.NewEmphasis(2) emphasis.SetAttributeString("class", []byte("attention-"+attentionType)) firstParagraph.InsertBefore(firstParagraph, firstTextNode, emphasis) diff --git a/modules/markup/markdown/callout/github_legacy.go b/modules/markup/markdown/callout/github_legacy.go index 080cbe625c..ce86c10356 100644 --- a/modules/markup/markdown/callout/github_legacy.go +++ b/modules/markup/markdown/callout/github_legacy.go @@ -51,8 +51,15 @@ func (g *GitHubLegacyCalloutTransformer) Transform(node *ast.Document, reader te // color the blockquote v.SetAttributeString("class", []byte("attention-header attention-"+calloutType)) - // Prepend callout icon before the callout node itself - firstParagraph.InsertBefore(firstParagraph, calloutNode, NewAttention(calloutType)) + // Create new parargaph. + attentionParagraph := ast.NewParagraph() + attentionParagraph.SetAttributeString("class", []byte("attention-title")) + + // Move the callout node to the paragraph and insert the paragraph. + attentionParagraph.AppendChild(attentionParagraph, NewAttention(calloutType)) + attentionParagraph.AppendChild(attentionParagraph, calloutNode) + firstParagraph.Parent().InsertBefore(firstParagraph.Parent(), firstParagraph, attentionParagraph) + firstParagraph.RemoveChild(firstParagraph, calloutNode) } return ast.WalkContinue, nil diff --git a/modules/markup/sanitizer.go b/modules/markup/sanitizer.go index cdbb1f7d97..c0b449ea5b 100644 --- a/modules/markup/sanitizer.go +++ b/modules/markup/sanitizer.go @@ -64,6 +64,7 @@ func createDefaultPolicy() *bluemonday.Policy { policy.AllowAttrs("class").Matching(regexp.MustCompile(`^color-preview$`)).OnElements("span") // For attention + policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-title$`)).OnElements("p") policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-header attention-\w+$`)).OnElements("blockquote") policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-\w+$`)).OnElements("strong") policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-icon attention-\w+ svg octicon-[\w-]+$`)).OnElements("svg") diff --git a/web_src/css/base.css b/web_src/css/base.css index 05ab0255e8..594615fdb1 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1127,6 +1127,11 @@ input:-webkit-autofill:active, margin: auto 0.5em auto 0; } +.attention-title { + align-items: center; + display: flex; +} + blockquote.attention-note { border-left-color: var(--color-blue-dark-1); }