forks/forgejo
1
0
Fork 0
Code Releases Activity

[BUG] Center icon and callout text

Browse source 
- Wrap the icon and callout into a seperate `<p>` which has `display:
flex; align-items: center` set. To center the icon with the callout text.
- Resolves #3006
This commit is contained in:
Gusted 2024-04-03 21:52:30 +02:00
parent c360b630e3
commit 6ffae461d4
No known key found for this signature in database
GPG key ID: FD821B732837125F
4 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
modules/markup/markdown/callout/github.go
View file

@ -72,6 +72,7 @@ func (g *GitHubCalloutTransformer) Transform(node *ast.Document, reader text.Rea
// create an emphasis to make it bold // create an emphasis to make it bold
attentionParagraph := ast.NewParagraph() attentionParagraph := ast.NewParagraph()
attentionParagraph.SetAttributeString("class", []byte("attention-title"))
emphasis := ast.NewEmphasis(2) emphasis := ast.NewEmphasis(2)
emphasis.SetAttributeString("class", []byte("attention-"+attentionType)) emphasis.SetAttributeString("class", []byte("attention-"+attentionType))
firstParagraph.InsertBefore(firstParagraph, firstTextNode, emphasis) firstParagraph.InsertBefore(firstParagraph, firstTextNode, emphasis)

11
modules/markup/markdown/callout/github_legacy.go
View file

@ -51,8 +51,15 @@ func (g *GitHubLegacyCalloutTransformer) Transform(node *ast.Document, reader te
// color the blockquote // color the blockquote
v.SetAttributeString("class", []byte("attention-header attention-"+calloutType)) v.SetAttributeString("class", []byte("attention-header attention-"+calloutType))
// Prepend callout icon before the callout node itself // Create new parargaph.
firstParagraph.InsertBefore(firstParagraph, calloutNode, NewAttention(calloutType)) 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 return ast.WalkContinue, nil

1
modules/markup/sanitizer.go
View file

@ -64,6 +64,7 @@ func createDefaultPolicy() *bluemonday.Policy {
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^color-preview$`)).OnElements("span") policy.AllowAttrs("class").Matching(regexp.MustCompile(`^color-preview$`)).OnElements("span")
// For attention // 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-header attention-\w+$`)).OnElements("blockquote")
policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-\w+$`)).OnElements("strong") 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") policy.AllowAttrs("class").Matching(regexp.MustCompile(`^attention-icon attention-\w+ svg octicon-[\w-]+$`)).OnElements("svg")

5
web_src/css/base.css
View file

@ -1127,6 +1127,11 @@ input:-webkit-autofill:active,
margin: auto 0.5em auto 0; margin: auto 0.5em auto 0;
} }
.attention-title {
align-items: center;
display: flex;
}
blockquote.attention-note { blockquote.attention-note {
border-left-color: var(--color-blue-dark-1); border-left-color: var(--color-blue-dark-1);
} }