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

Improved comments and events layout

Browse Source
This commit is contained in:
Jason Zimdars
2025-03-19 16:33:03 -05:00
parent 91e2b8654b
commit 572428bfbc
11 changed files with 120 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/cards.css
+1 -1
View File
@@ -63,7 +63,7 @@
.card__actions-container {
background-color: var(--color-bg);
margin-block: -1em 1em;
margin-block-start: -1em;
padding: 1em 2em;
position: relative;
z-index: 0;
app/assets/stylesheets/comments.css
+34 -23
View File
@@ -1,20 +1,31 @@
.comments {
--avatar-size: 2.33em;
--comment-padding-block: 0.25lh;
--comment-padding-inline: 3ch;
--comment-padding-block: 0.33lh;
--comment-padding-inline: 2ch;
display: flex;
font-size: 1.33cqi;
inline-size: min(67ch, 100dvw);
max-inline-size: 100dvw;
row-gap: var(--comment-padding-block);
gap: var(--comment-padding-block);
inline-size: 100%;
max-inline-size: 60cqi;
@media (max-width: 70ch) {
inline-size: 100%;
max-inline-size: 100%;
}
}
> :first-child {
/* margin-block-start: var(--comment-padding-block); */
}
.comments__column {
display: flex;
flex-direction: column;
flex: 4 1 80%;
gap: var(--comment-padding-block);
}
.events__column {
display: flex;
flex-direction: column;
flex: 1 0 20%;
gap: 1lh;
}
.comment {
@@ -23,8 +34,16 @@
position: relative;
}
.comment--new {
border-block: 1px solid var(--color-subtle-dark);
.comment--new,
.comment--edit {
house-md-toolbar {
border-block-end: 1px solid var(--color-subtle-dark);
}
house-md {
border-block: 1px solid var(--color-subtle-dark);
border-radius: 0;
}
}
.comment__avatar {
@@ -59,15 +78,12 @@
.comment__content {
margin-inline: auto 0 auto var(--avatar-size);
max-inline-size: 100%;
padding: var(--comment-padding-block) var(--comment-padding-inline);
.comment--mine_ & {
margin-inline: var(--avatar-size) auto;
}
.comment:has(+ .event-summary) & {
padding-block-end: calc(var(--comment-padding-block) * 1.5);
}
}
.comment__input {
@@ -98,20 +114,15 @@
margin-block-end: 0.3lh;
}
.comment__submit {
inset: auto 0.5em 0.5em auto;
position: absolute;
z-index: 0;
}
.comment__timestamp {
color: var(--color-subtle-dark);
}
.event-summary {
color: var(--bubble-color);
font-weight: normal;
font-size: 0.8em;
font-weight: 500;
gap: 0.5ch;
opacity: 0.7;
padding: calc(var(--comment-padding-block) * 0.3) var(--comment-padding-inline);
text-align: start;
}
app/assets/stylesheets/house.css
-1
View File
@@ -13,7 +13,6 @@ house-md {
/* Toolbar */
house-md-toolbar {
background-color: inherit;
border-block-end: 1px solid var(--color-subtle-dark);
border-radius: 0;
color: currentColor;
display: inline-flex;
app/helpers/messages_helper.rb
+1 -1
View File
@@ -1,7 +1,7 @@
module MessagesHelper
def messages_tag(bubble, &)
turbo_frame_tag dom_id(bubble, :messages),
class: "comments align-center center borderless margin flex flex-column gap-half",
class: "comments center borderless gap-half",
style: "--bubble-color: <%= bubble.color %>",
role: "group", aria: { label: "Messages" },
data: {
app/models/event_summary.rb
+3 -3
View File
@@ -18,11 +18,11 @@ class EventSummary < ApplicationRecord
def summarize(event)
case event.action
when "published"
"Added by #{event.creator.name} #{time_ago_in_words(event.created_at)} ago."
"Added by #{event.creator.name}."
when "assigned"
"Assigned to #{event.assignees.pluck(:name).to_sentence} #{time_ago_in_words(event.created_at)} ago."
"Assigned to #{event.assignees.pluck(:name).to_sentence}."
when "unassigned"
"Unassigned from #{event.assignees.pluck(:name).to_sentence} #{time_ago_in_words(event.created_at)} ago."
"Unassigned from #{event.assignees.pluck(:name).to_sentence}."
when "staged"
"#{event.creator.name} moved this to '#{event.stage_name}'."
when "popped"
app/views/bubbles/_messages.html.erb
+15 -7
View File
@@ -1,14 +1,22 @@
<%= messages_tag(bubble) do %>
<%# Template Dependency: comments/comment %>
<%# Template Dependency: event_summaries/event_summary %>
<%= render bubble.messages, cached: true %>
<%= render "comments/new", bubble: bubble %>
<%#= render bubble.messages, cached: true %>
<div class="flex flex-column justify-start full-width txt-align-start">
<strong class="txt-uppercase">Subscribers</strong>
<p class="margin-none-block-start margin-block-end-half"><%= pluralize(bubble.watchers.count, "person") %> will be notified when someone comments on this.</p>
<div class="flex align-center flex-wrap gap-half max-width" style="font-size: 0.8em;">
<%= render partial: "bubbles/watches/watcher", collection: bubble.watchers.sorted_with_user_first(Current.user) %>
<div class="comments__column">
<%= render bubble.messages.comments %>
<%= render "comments/new", bubble: bubble, cached: true %>
<div class="flex flex-column margin-block-start-double txt-align-start" style="margin-inline-start: calc(var(--avatar-size) + var(--inline-space));">
<strong class="txt-uppercase">Subscribers</strong>
<p class="margin-none-block-start margin-block-end-half"><%= pluralize(@bubble.watchers.count, "person") %> will be notified when someone comments on this.</p>
<div class="flex align-center flex-wrap gap-half max-width" style="font-size: 0.8em;">
<%= render partial: "bubbles/watches/watcher", collection: @bubble.watchers.sorted_with_user_first(Current.user) %>
</div>
</div>
</div>
<div class="events__column">
<%= render bubble.messages.event_summaries, bubble: bubble, cached: true %>
</div>
<% end %>
app/views/bubbles/show.html.erb
+26 -18
View File
@@ -67,25 +67,33 @@
<% if @bubble.published? %>
<%= render "bubbles/messages", bubble: @bubble %>
<% else %>
<div class="comments align-center center borderless margin-block-start flex flex-column gap-half">
<div class="comment comment--new flex align-start full-width">
<form data-controller="outlet-auto-save paste"
class="flex flex-column gap full-width"
data-outlet-auto-save-auto-save-outlet="#bubble_form"
data-action="paste->paste#pasteFiles">
<%= tag.house_md @bubble.draft_comment, name: "bubble[draft_comment]", class: "input comment__input",
form: "bubble_form",
placeholder: new_comment_placeholder(@bubble),
data: { action: "house-md:change->outlet-auto-save#change focusout->outlet-auto-save#submit", uploads_url: uploads_url(format: "json") } %>
</form>
</div>
</div>
<% end %>
<% if @bubble.creating? %>
<div class="comments center pad-block flex align-center gap">
<%= button_to "Create card", bucket_bubble_publish_path(@bubble.bucket, @bubble), class: "btn btn--reversed" %>
<%= button_to "Save as draft", bucket_bubble_path(@bubble.bucket, @bubble), name: "bubble[status]", value: "drafted", method: :put, class: "btn" %>
<div class="comment comment--new flex-inline align-start full-width">
<figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">
<%= avatar_tag Current.user, hidden_for_screen_reader: true, loading: :lazy %>
</figure>
<div class="comment__content flex-inline flex-column full-width">
<div class="comment__body txt-align-start">
<form data-controller="outlet-auto-save paste"
class="flex flex-column gap full-width"
data-outlet-auto-save-auto-save-outlet="#bubble_form"
data-action="paste->paste#pasteFiles">
<%= tag.house_md @bubble.draft_comment, name: "bubble[draft_comment]", class: "input comment__input",
form: "bubble_form",
placeholder: new_comment_placeholder(@bubble),
data: { action: "house-md:change->outlet-auto-save#change focusout->outlet-auto-save#submit", uploads_url: uploads_url(format: "json") } %>
</form>
<% if @bubble.creating? %>
<div class="margin-block-start flex align-center gap">
<%= button_to "Create card", bucket_bubble_publish_path(@bubble.bucket, @bubble), class: "btn btn--reversed" %>
<%= button_to "Save as draft", bucket_bubble_path(@bubble.bucket, @bubble), name: "bubble[status]", value: "drafted", method: :put, class: "btn" %>
</div>
<% end %>
</div>
</div>
</div>
</div>
<% end %>
</div>
app/views/comments/_body.html.erb
+3 -1
View File
@@ -7,7 +7,9 @@
<%= local_datetime_tag comment.created_at, style: :shortdate, class: "comment__timestamp" %>
<% end %>
<%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment), class: "btn txt-small btn--plain fill-transparent comment__edit", style: "font-size: 0.4em; opacity: 0.5;" do %>
<%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment),
class: "btn txt-small btn--plain fill-transparent comment__edit flex-item-justify-end",
style: "font-size: 0.4em; opacity: 0.5;" do %>
<%= image_tag "menu-dots-horizontal.svg", class: "icon colorize--black" %>
<span class="for-screen-reader">Edit</span>
<% end %>
app/views/comments/_new.html.erb
+11 -8
View File
@@ -1,15 +1,18 @@
<div class="comment comment--new flex align-start full-width margin-block-end-double">
<div class="flex flex-column full-width">
<div class="position-relative">
<div class="comment comment--new flex-inline align-start full-width">
<figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">
<%= avatar_tag Current.user, hidden_for_screen_reader: true, loading: :lazy %>
</figure>
<div class="comment__content flex-inline flex-column full-width">
<div class="comment__body txt-align-start">
<%= form_with model: Comment.new, url: bucket_bubble_comments_path(bubble.bucket, bubble), class: "flex flex-column gap full-width",
data: { controller: "form paste local-save",
local_save_key_value: "comment-#{bubble.id}",
action: "turbo:submit-end->local-save#submit keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } do |form| %>
local_save_key_value: "comment-#{bubble.id}",
action: "turbo:submit-end->local-save#submit keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } do |form| %>
<%= form.markdown_area :body, class: "input comment__input", required: true, placeholder: new_comment_placeholder(bubble),
data: { local_save_target: "input", action: "house-md:change->local-save#save" } %>
<%= form.button class: "comment__submit btn btn--reversed flex-item-justify-end txt-small" do %>
<%= image_tag "check.svg", aria: { hidden: "true" }, size: 24 %>
<span class="for-screen-reader">Save</span>
<%= form.button class: "comment__submit btn btn--reversed flex-item-justify-start" do %>
<span>Post this comment</span>
<% end %>
<span data-form-target="cancel" hidden></span>
<% end %>
app/views/comments/edit.html.erb
+21 -21
View File
@@ -1,26 +1,26 @@
<%= turbo_frame_tag dom_id(@comment) do %>
<div class="comment__content flex-inline flex-column full-width border border-radius">
<%= form_with model: [@bubble.bucket, @bubble, @comment], class: "flex flex-column gap full-width",
data: { controller: "form paste", action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } do |form| %>
<%= form.markdown_area :body, class: "input comment__input", required: true, autofocus: true, placeholder: new_comment_placeholder(@bubble) %>
<div class="flex gap-half justify-start">
<%= form.button class: "btn btn--reversed txt-small", type: :submit do %>
<%= image_tag "check.svg", aria: { hidden: true }, size: 16 %>
<span class="for-screen-reader">Save</span>
<% end %>
<%= link_to bucket_bubble_comment_path(@bubble.bucket, @bubble, @comment), class: "btn btn--small", data: { form_target: "cancel" } do %>
<%= image_tag "remove-med.svg", aria: { hidden: true }, size: 16 %>
<span class="for-screen-reader">Cancel</span>
<% end %>
<div class="comment__content comment--edit flex-inline flex-column full-width">
<div class="comment__body txt-align-start">
<%= form_with model: [@bubble.bucket, @bubble, @comment], class: "flex flex-column gap full-width",
data: { controller: "form paste", action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } do |form| %>
<%= form.markdown_area :body, class: "input comment__input", required: true, autofocus: true, placeholder: new_comment_placeholder(@bubble) %>
<div class="flex gap-half justify-start">
<%= form.button class: "btn btn--reversed", type: :submit do %>
<span>Save changes</span>
<% end %>
<%= link_to bucket_bubble_comment_path(@bubble.bucket, @bubble, @comment), class: "btn", data: { form_target: "cancel" } do %>
<span">Cancel</span>
<% end %>
<%= tag.button type: :submit, class: "btn btn--small btn--negative flex-item-justify-end", form: dom_id(@comment, :delete_form),
data: { turbo_confirm: "Are you sure you want to delete this comment?" } do %>
<%= image_tag "trash.svg", aria: { hidden: true }, size: 16 %>
<span class="for-screen-reader">Delete</span>
<% end %>
</div>
<% end %>
<%= tag.button type: :submit, class: "btn btn--negative flex-item-justify-end", form: dom_id(@comment, :delete_form),
data: { turbo_confirm: "Are you sure you want to delete this comment?" } do %>
<%= image_tag "trash.svg", aria: { hidden: true }, size: 16 %>
<span class="for-screen-reader">Delete</span>
<% end %>
</div>
<% end %>
<%= form_with url: bucket_bubble_comment_path(@bubble.bucket, @bubble, @comment), method: :delete, id: dom_id(@comment, :delete_form), data: { turbo_frame: "_top" } %>
<%= form_with url: bucket_bubble_comment_path(@bubble.bucket, @bubble, @comment), method: :delete, id: dom_id(@comment, :delete_form), data: { turbo_frame: "_top" } %>
</div>
</div>
<% end %>
app/views/event_summaries/_event_summary.html.erb
+5 -2
View File
@@ -1,5 +1,8 @@
<% unless event_summary.body.blank? %>
<div class="event-summary flex flex-wrap align-start center" data-controller="event-summary">
<%= event_summary.body %>
<div class="event-summary flex flex-column justify-start txt-tight-lines">
<strong><%= local_datetime_tag event_summary.created_at, style: :shortdate %></strong>
<div class="flex flex-wrap" data-controller="event-summary">
<%= event_summary.body %>
</div>
</div>
<% end %>