Pull back comment decoration

This commit is contained in:
Jason Zimdars
2024-11-22 13:51:46 -06:00
parent df0813b8d6
commit 8d41b3e410
4 changed files with 7 additions and 8 deletions
+4 -5
View File
@@ -1,9 +1,9 @@
.comments {
--avatar-size: 2.33em;
--comment-padding-block: 1.2em;
--comment-padding-inline: 1.5em;
--comment-padding-block: 1lh;
--comment-padding-inline: 2ch;
max-inline-size: 70ch;
max-inline-size: 80ch;
row-gap: var(--comment-padding-block);
> :first-child {
@@ -39,7 +39,6 @@
padding: var(--comment-padding-block) var(--comment-padding-inline);
.comment--mine & {
background-color: var(--color-selected);
margin-inline: var(--avatar-size) 0;
}
@@ -74,7 +73,7 @@
.event-summary {
font-weight: 600;
gap: 0.5ch;
margin-block: calc(var(--comment-padding-block) * -1);
padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
gap: 0.5ch;
}
+1 -1
View File
@@ -3,7 +3,7 @@
<%= avatar_tag comment.creator, loading: :lazy %>
</figure>
<div class="comment__content flex flex-column full-width fill-shade border-radius">
<div class="comment__content flex flex-column full-width">
<div class="comment__author flex align-center gap-half">
<strong><%= comment.creator.name %></strong>
<%= link_to bucket_bubble_path(comment.bubble.bucket, comment.bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %>
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="comment flex align-start full-width comment--mine">
<figure class="comment__avatar avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= Current.user.initials %></strong></figure>
<div class="comment__content flex flex-column full-width fill-shade border-radius">
<div class="comment__content flex flex-column full-width">
<div class="comment__author flex align-center gap-half">
<strong><%= Current.user.name %></strong>
</div>
@@ -1,3 +1,3 @@
<div class="event-summary flex-inline flex-wrap align-start fill-white border-radius center position-relative" data-controller="event-summary">
<div class="event-summary flex flex-wrap align-start center" data-controller="event-summary">
<%= event_summary.body %>
</div>