From 572428bfbce3b467d6fd979b23501cab67caf044 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Wed, 19 Mar 2025 16:33:03 -0500 Subject: [PATCH] Improved comments and events layout --- app/assets/stylesheets/cards.css | 2 +- app/assets/stylesheets/comments.css | 57 +++++++++++-------- app/assets/stylesheets/house.css | 1 - app/helpers/messages_helper.rb | 2 +- app/models/event_summary.rb | 6 +- app/views/bubbles/_messages.html.erb | 22 ++++--- app/views/bubbles/show.html.erb | 44 ++++++++------ app/views/comments/_body.html.erb | 4 +- app/views/comments/_new.html.erb | 19 ++++--- app/views/comments/edit.html.erb | 42 +++++++------- .../event_summaries/_event_summary.html.erb | 7 ++- 11 files changed, 120 insertions(+), 86 deletions(-) diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 1f7243315..b0e7ee481 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -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; diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index ba89c6db6..58d6cd5df 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -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; } diff --git a/app/assets/stylesheets/house.css b/app/assets/stylesheets/house.css index aa959a4bf..c1ebba2b1 100644 --- a/app/assets/stylesheets/house.css +++ b/app/assets/stylesheets/house.css @@ -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; diff --git a/app/helpers/messages_helper.rb b/app/helpers/messages_helper.rb index bac9af789..d66756318 100644 --- a/app/helpers/messages_helper.rb +++ b/app/helpers/messages_helper.rb @@ -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: { diff --git a/app/models/event_summary.rb b/app/models/event_summary.rb index 6891da43d..221e78d2e 100644 --- a/app/models/event_summary.rb +++ b/app/models/event_summary.rb @@ -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" diff --git a/app/views/bubbles/_messages.html.erb b/app/views/bubbles/_messages.html.erb index 1e72e908d..f8b656034 100644 --- a/app/views/bubbles/_messages.html.erb +++ b/app/views/bubbles/_messages.html.erb @@ -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 %> -
- Subscribers -

<%= pluralize(bubble.watchers.count, "person") %> will be notified when someone comments on this.

-
- <%= render partial: "bubbles/watches/watcher", collection: bubble.watchers.sorted_with_user_first(Current.user) %> +
+ <%= render bubble.messages.comments %> + <%= render "comments/new", bubble: bubble, cached: true %> + +
+ Subscribers +

<%= pluralize(@bubble.watchers.count, "person") %> will be notified when someone comments on this.

+
+ <%= render partial: "bubbles/watches/watcher", collection: @bubble.watchers.sorted_with_user_first(Current.user) %> +
+ +
+ <%= render bubble.messages.event_summaries, bubble: bubble, cached: true %> +
<% end %> diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb index 30ea7e3f5..78cd0d40c 100644 --- a/app/views/bubbles/show.html.erb +++ b/app/views/bubbles/show.html.erb @@ -67,25 +67,33 @@ <% if @bubble.published? %> <%= render "bubbles/messages", bubble: @bubble %> <% else %> -
-
-
- <%= 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") } %> -
-
-
- <% end %> - - <% if @bubble.creating? %>
- <%= 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" %> +
+ + +
+
+
+ <%= 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") } %> +
+ + <% if @bubble.creating? %> +
+ <%= 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" %> +
+ <% end %> +
+
+
<% end %>
diff --git a/app/views/comments/_body.html.erb b/app/views/comments/_body.html.erb index 37d30211c..b6e63228b 100644 --- a/app/views/comments/_body.html.erb +++ b/app/views/comments/_body.html.erb @@ -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" %> Edit <% end %> diff --git a/app/views/comments/_new.html.erb b/app/views/comments/_new.html.erb index 848d6c927..6c0d9d54a 100644 --- a/app/views/comments/_new.html.erb +++ b/app/views/comments/_new.html.erb @@ -1,15 +1,18 @@ -
-
-
+
+ + +
+
<%= 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 %> - Save + <%= form.button class: "comment__submit btn btn--reversed flex-item-justify-start" do %> + Post this comment <% end %> <% end %> diff --git a/app/views/comments/edit.html.erb b/app/views/comments/edit.html.erb index 3a8338d13..931e7886b 100644 --- a/app/views/comments/edit.html.erb +++ b/app/views/comments/edit.html.erb @@ -1,26 +1,26 @@ <%= turbo_frame_tag dom_id(@comment) do %> -
- <%= 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) %> -
- <%= form.button class: "btn btn--reversed txt-small", type: :submit do %> - <%= image_tag "check.svg", aria: { hidden: true }, size: 16 %> - Save - <% 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 %> - Cancel - <% end %> +
+
+ <%= 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) %> +
+ <%= form.button class: "btn btn--reversed", type: :submit do %> + Save changes + <% end %> + <%= link_to bucket_bubble_comment_path(@bubble.bucket, @bubble, @comment), class: "btn", data: { form_target: "cancel" } do %> + Cancel + <% 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 %> - Delete - <% end %> -
- <% 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 %> + Delete + <% end %> +
+ <% 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" } %> +
<% end %> diff --git a/app/views/event_summaries/_event_summary.html.erb b/app/views/event_summaries/_event_summary.html.erb index 4c54c62f4..8f3b642cd 100644 --- a/app/views/event_summaries/_event_summary.html.erb +++ b/app/views/event_summaries/_event_summary.html.erb @@ -1,5 +1,8 @@ <% unless event_summary.body.blank? %> -
- <%= event_summary.body %> +
+ <%= local_datetime_tag event_summary.created_at, style: :shortdate %> +
+ <%= event_summary.body %> +
<% end %>