Add name and update styling to chat block extension

This commit is contained in:
Gabriel Arazas 2023-04-17 16:22:03 +08:00
parent 2bd03f9226
commit 468ab1f841
No known key found for this signature in database
GPG Key ID: ADE0C41DAB221FCC
2 changed files with 7 additions and 2 deletions

View File

@ -241,6 +241,7 @@ p {
gap: 1em;
padding: 0.5em;
max-width: 55ch;
width: fit-content;
}
&__avatar {
@ -262,7 +263,6 @@ p {
&__text {
display: block;
max-width: 50ch;
margin: 0;
> :first-child {
@ -270,6 +270,10 @@ p {
}
}
&__avatar-name {
font-weight: bolder;
}
// Roles/modifiers.
&.reversed {
flex-direction: row-reverse;

View File

@ -18,7 +18,7 @@ class ChatBlock < Asciidoctor::Extensions::BlockProcessor
attrs['name'] ||= attrs['avatar']
block << (create_html_fragment block, %(
<div class="dialogblock dialogblock__box dialogblock__avatar--#{attrs['avatar']} #{attrs['role']}" title="#{attrs['avatar']}">
<div role="figure" class="dialogblock dialogblock__box dialogblock__avatar--#{attrs['avatar']} #{attrs['role']}" title="#{attrs['avatar']}">
<div class="dialogblock dialogblock__avatar">
))
@ -35,6 +35,7 @@ class ChatBlock < Asciidoctor::Extensions::BlockProcessor
block << (create_html_fragment block, %(
</div>
<div class="dialogblock dialogblock__text">
<small class="dialogblock dialogblock__avatar-name">#{attrs['name']}</small>
))
parse_content block, reader