From 925247acfccbf0bd116f4b88e4668922dc10e170 Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Mon, 9 Sep 2024 17:53:13 -0500 Subject: [PATCH] Rework main layout, comments layout, and list layout --- app/assets/stylesheets/bubbles.css | 2 + app/assets/stylesheets/comments.css | 77 ++++++++++++++-------------- app/assets/stylesheets/layout.css | 4 +- app/views/bubbles/show.html.erb | 4 +- app/views/comments/_comment.html.erb | 9 ++-- app/views/comments/_new.html.erb | 9 ++-- app/views/sessions/new.html.erb | 2 +- 7 files changed, 56 insertions(+), 51 deletions(-) diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index 8631f87a2..26c9d3d81 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -263,6 +263,8 @@ .bubbles-list { --hover-size: 0; + max-inline-size: 90ch; + .bubble__title-link { color: var(--color-txt); text-decoration: none; diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 993acc01b..ad2db03b7 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -1,37 +1,17 @@ -.comment { - margin-inline-end: calc(var(--block-space) * 1.5); - padding: - calc(var(--block-space) * 1.5) - calc(var(--inline-space) * 2) - calc(var(--block-space) * 2) - var(--inline-space); +.comments { + --avatar-size: 2.33em; - &:target { - background-color: var(--color-selected); - } + max-inline-size: 90ch; +} - .avatar { - margin-block-start: -0.5em; - margin-inline-start: calc(-2.65em + var(--inline-space)); - } +.comment__avatar { + margin-block-start: var(--block-space-half); + margin-inline: auto calc(var(--block-space) * -0.5); + position: relative; + z-index: 1; - &:is(.comment--mine) { - background-color: var(--color-selected); - flex-direction: row-reverse; - margin-inline: calc(var(--block-space) * 1.5) auto; - padding: - calc(var(--block-space) * 1.5) - var(--inline-space) - calc(var(--block-space) * 2) - calc(var(--inline-space) * 2); - - .avatar { - margin-inline: auto calc(-2.65em + var(--inline-space)); - } - - .comment__author { - flex-direction: row-reverse; - } + .comment--mine & { + margin-inline: calc(var(--block-space) * -0.5) auto; } } @@ -47,13 +27,34 @@ } } -.boost { - margin-block: calc(var(--block-space) * -2); - padding: var(--block-space) var(--block-space-double); - z-index: 1; +.comment__content { + margin-inline: 0 var(--avatar-size); + padding: var(--block-space); - + .boost, - &:has( + .boost) { - margin-block: 0; + .comment--mine & { + background-color: var(--color-selected); + margin-inline: var(--avatar-size) 0; + } + + .comment:has(+ .comment--upvotes) & { + padding-block-end: calc(var(--block-space) * 1.33); } } + +.comment--mine { + flex-direction: row-reverse; + + .comment__author { + flex-direction: row-reverse; + } +} + +.comment__timestamp { + color: var(--color-ink); + opacity: 0.5; +} + +.comment--upvotes{ + margin-block: calc(var(--block-space) * -1.33); + padding: var(--block-space-half) var(--inline-space-double); +} diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index c3228e176..80029ad35 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -8,11 +8,11 @@ body { margin-inline: auto; max-inline-size: 100vw; padding-block-end: clamp(var(--block-space), 5%, calc(var(--block-space) * 3)); - padding-inline: clamp(var(--inline-space), 5%, calc(var(--inline-space) * 3)); + padding-inline: clamp(var(--inline-space), 10%, calc(var(--inline-space) * 3)); text-align: center; @media (max-width: 70ch) { - padding-inline: var(--inline-space); + padding-inline: calc(var(--inline-space) * 2); } @media print { diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb index 58998cf58..488765931 100644 --- a/app/views/bubbles/show.html.erb +++ b/app/views/bubbles/show.html.erb @@ -24,7 +24,7 @@ <%= render @bubble %> -
+
<% comments = (@bubble.comments + @bubble.boosts).sort_by(&:updated_at) %> <% boosts = [] %> @@ -33,7 +33,7 @@ <% boosts << comment %> <% if comments[index + 1].nil? || !comments[index + 1].is_a?(Boost) %> <% user_boosts = boosts.group_by(&:creator).transform_values(&:count) %> -
+
<%= user_boosts.map { |user, count| "#{user.name} +#{count}" }.to_sentence %>
<% boosts.clear %> diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 4cf3c5ef5..ad0529cf1 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -1,10 +1,11 @@ -
" id="<%= dom_id(comment) %>"> - <%= comment.creator.initials %> -
+
" id="<%= dom_id(comment) %>"> +
<%= comment.creator.initials %>
+ +
<%= comment.creator.name %> <%= link_to bubble_path(@bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %> - + <% end %>
diff --git a/app/views/comments/_new.html.erb b/app/views/comments/_new.html.erb index 24e59dfc9..aa79b040c 100644 --- a/app/views/comments/_new.html.erb +++ b/app/views/comments/_new.html.erb @@ -1,10 +1,11 @@ -
- <%= Current.user.initials %> -
+
+
<%= Current.user.initials %>
+ +
<%= Current.user.name %>
-
+
<%= form_with model: Comment.new, url: bubble_comments_path(@bubble), class: "flex flex-column gap full-width" do | form | %> <%= form.text_area :body, class: "input", required: true, rows: 4, placeholder: (@bubble.comments.empty? && @bubble.creator == Current.user) ? "Add some notes…" : "Type your comment…" %> diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb index 7bf3e4c96..ee9ce2390 100644 --- a/app/views/sessions/new.html.erb +++ b/app/views/sessions/new.html.erb @@ -1,6 +1,6 @@ <% @page_title = "Sign in" %> -
" style="--panel-size: 40ch;"> +
"> <%#= image_tag "blob.svg", class: "product__logo center colorize--black", size: 130 %>