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

View File

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