bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve comments style

Browse Source
This commit is contained in:
Jason Zimdars
2024-08-20 16:45:02 -05:00
parent 97b7c6e212
commit f48df75c9c
3 changed files with 39 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/comments.css
+18 -38
View File
@@ -1,52 +1,32 @@
.comments {
hr {
block-size: 6cqi;
border-inline-start: 1px solid var(--splat-color);
display: block;
inline-size: 2px;
margin: auto;
overflow: initial;
position: relative;
&::after {
background: var(--color-bg);
border: 2px solid var(--splat-color);
border-radius: 50%;
content: "";
display: block;
height: 1cqi;
inline-size: 1cqi;
inset: auto auto -0.5cqi auto;
margin-inline-start: -0.5cqi;
position: absolute;
}
&::before {
background: var(--color-bg);
border: 2px solid var(--splat-color);
border-radius: 50%;
content: "";
display: block;
height: 1cqi;
inline-size: 1cqi;
inset: -0.5cqi auto auto auto;
margin-inline-start: -0.5cqi;
position: absolute;
}
}
}
.comment {
inline-size: 100%;
flex-wrap: wrap;
padding:
calc(var(--block-space) * 1.5)
calc(var(--inline-space) * 2)
calc(var(--block-space) * 2)
var(--inline-space);
&:target {
background-color: var(--color-selected);
}
.avatar {
margin-block-start: -0.5em;
margin-inline-start: calc(-2.65em + var(--inline-space));
}
}
.comment__body {
p:first-child {
margin-block-start: 0;
p {
&:first-child {
margin-block-start: 0;
}
&:last-child {
margin-block-end: 0;
}
}
}
app/views/comments/_comment.html.erb
+11 -10
View File
@@ -1,13 +1,14 @@
<div class="comment flex align-start gap" id="<%= dom_id(comment) %>">
<div class="flex align-center gap full-width">
<span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= comment.creator.initials %></strong></span>
<header class="full-width flex align-center gap">
<div class="comment flex align-start gap fill-shade border-radius full-width" id="<%= dom_id(comment) %>">
<span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= comment.creator.initials %></strong></span>
<div class="flex flex-column full-width">
<div class="flex align-center gap-half">
<strong><%= comment.creator.name %></strong>
</header>
</div>
<div class="comment__body txt-align-start">
<%= simple_format comment.body %>
<%= link_to splat_path(@splat, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %>
<time class="txt-subtle"><%= comment.created_at.strftime("%b %d").html_safe %></time>
<% end %>
</div>
<div class="comment__body txt-align-start">
<%= simple_format comment.body %>
</div>
</div>
</div>
<hr />
app/views/comments/_new.html.erb
+10 -10
View File
@@ -1,18 +1,18 @@
<div class="comment flex align-start gap">
<div class="flex align-center gap full-width">
<span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= Current.user.initials %></strong></span>
<header class="full-width flex align-center gap">
<div class="comment flex align-start gap fill-shade border-radius full-width">
<span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= Current.user.initials %></strong></span>
<div class="flex flex-column full-width gap-half">
<div class="flex align-center gap-half">
<strong><%= Current.user.name %></strong>
</header>
</div>
<div class="comment__body txt-align-start full-width">
<%= form_with model: [@splat, @splat.comments.build], class: "flex flex-column gap full-width" do | form | %>
<%= form.text_area :body, class: "input full-width", required: true, placeholder: "Type your comment…", rows: 4 %>
</div>
<div class="comment__body txt-align-start">
<%= form_with model: [@splat, @splat.comments.build], class: "flex flex-column gap full-width" do | form | %>
<%= form.text_area :body, class: "input", required: true, placeholder: "Type your comment…", rows: 4 %>
<%= form.button class: "btn btn--reversed center" do %>
<%= image_tag "check.svg", aria: { hidden: "true" }, size: 24%>
<%= image_tag "check.svg", aria: { hidden: "true" }, size: 24 %>
<span class="for-screen-reader">Save</span>
<% end %>
<% end %>
</div>
</div>
</div>