From cbc95679667bdf86968678fdbc7641f05ceaf20b Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Fri, 21 Mar 2025 14:54:26 -0500 Subject: [PATCH] Smaller tray cards --- app/assets/stylesheets/pins.css | 10 +++++----- app/assets/stylesheets/trays.css | 6 +++--- app/assets/stylesheets/utilities.css | 2 ++ app/helpers/notifications_helper.rb | 2 +- app/views/bubbles/pins/_pin.html.erb | 12 ++++++------ app/views/notifications/_notification.html.erb | 4 ++-- app/views/notifications/_tray.html.erb | 8 ++++---- 7 files changed, 23 insertions(+), 21 deletions(-) diff --git a/app/assets/stylesheets/pins.css b/app/assets/stylesheets/pins.css index a8aab740b..96eeed40e 100644 --- a/app/assets/stylesheets/pins.css +++ b/app/assets/stylesheets/pins.css @@ -16,15 +16,15 @@ .pin__bucket { background-color: var(--bubble-color); font-weight: 800; - letter-spacing: 0.5ch; - padding: 0.3em 0.9em 0.3em 1em; + letter-spacing: 0.3ch; + padding: 0.3em 0.3em 0.3em 0.85em; } .pin__content { --border-color: transparent; --border-radius: 0.3em; - padding: 1em 1em 1.2em; + padding: 0.85em 0.85em 1em; @media (prefers-color-scheme: dark) { --border-color: var(--color-subtle-dark); @@ -32,8 +32,8 @@ } .pin__header { - margin: -1em -1em auto; - padding: 0 0.3em 0 0; + margin: -0.85em -0.85em auto; + padding: 0 0.2em 0 0; } .pin__stage { diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index b8158a7f1..063514808 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -1,6 +1,6 @@ .tray { - --size: 38ch; - --height: calc(5ch + 1lh + var(--block-space)); + --size: 30ch; + --height: calc(2.81lh + var(--block-space)); block-size: var(--height); inline-size: var(--size); @@ -87,7 +87,7 @@ } .tray__item-meta { - font-size: 0.9em; + font-size: var(--text-small); font-weight: 500; } diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css index fab157427..888884593 100644 --- a/app/assets/stylesheets/utilities.css +++ b/app/assets/stylesheets/utilities.css @@ -8,6 +8,7 @@ --block-space-double: calc(var(--block-space) * 2); /* Text sizes */ + --text-xx-small: 0.6rem; --text-x-small: 0.7rem; --text-small: 0.8rem; --txt-normal: 1rem; @@ -18,6 +19,7 @@ } /* Text */ +.txt-xx-small { font-size: var(--text-xx-small); } .txt-x-small { font-size: var(--text-x-small); } .txt-small { font-size: var(--text-small); } .txt-medium { font-size: var(--text-medium); } diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb index 0641fa0db..2c8950e31 100644 --- a/app/helpers/notifications_helper.rb +++ b/app/helpers/notifications_helper.rb @@ -22,7 +22,7 @@ module NotificationsHelper end def notification_tag(notification, &) - tag.div id: dom_id(notification), class: "notification tray__item border-radius flex position-relative" do + tag.div id: dom_id(notification), class: "notification tray__item border-radius flex position-relative txt-normal" do concat( link_to(notification.resource, class: "notification__content border-radius pad shadow fill-white flex align-start txt-align-start gap flex-item-grow max-width border txt-ink", diff --git a/app/views/bubbles/pins/_pin.html.erb b/app/views/bubbles/pins/_pin.html.erb index 40e7a4fcc..b03af7858 100644 --- a/app/views/bubbles/pins/_pin.html.erb +++ b/app/views/bubbles/pins/_pin.html.erb @@ -1,17 +1,17 @@ <% cache pin do %> - <%= tag.div id: dom_id(pin), class: "pin tray__item flex position-relative" do %> + <%= tag.div id: dom_id(pin), class: "pin tray__item flex position-relative txt-normal" do %> <%= link_to bucket_bubble_path(pin.bubble.bucket, pin.bubble), class: "pin__content shadow fill-white flex align-start txt-align-start gap flex-item-grow max-width border border-radius txt-ink overflow-clip", data: { action: "click->dialog#close", turbo_frame: "_top" }, style: "--bubble-color: #{ pin.bubble.color };" do %> -
-
+
+
- <%= pin.bubble.bucket.name %> + <%= pin.bubble.bucket.name %>
<% if pin.bubble&.stage %> - + <%= pin.bubble&.stage&.name %> <% end %> @@ -19,7 +19,7 @@ <%= bubble_title(pin.bubble) %> -
+
Updated <%= local_datetime_tag(pin.bubble.updated_at, style: :ago) -%>
diff --git a/app/views/notifications/_notification.html.erb b/app/views/notifications/_notification.html.erb index 6f3253b1c..c1a19540b 100644 --- a/app/views/notifications/_notification.html.erb +++ b/app/views/notifications/_notification.html.erb @@ -1,10 +1,10 @@ <% cache [notification, "2025-03-20"] do %> <%= notification_tag notification do %> -
+
<%= avatar_image_tag(notification.creator) %>
-
+
<%= notification_title(notification) %>
<% if notification.event.action == "commented" %> diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb index 8d7ab7aa1..421ca03c8 100644 --- a/app/views/notifications/_tray.html.erb +++ b/app/views/notifications/_tray.html.erb @@ -4,8 +4,8 @@ data: { controller: "dialog", turbo_permanent: true, dialog_modal_value: false, dialog_target: "dialog", action: "keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside" } do %> <%= turbo_frame_tag("notifications", src: notifications_tray_path) -%> - <%= link_to notifications_path, class: "tray__overflow border-radius", data: { action: "click->dialog#close"} do %> -
+ <%= link_to notifications_path, class: "tray__overflow border-radius txt-normal", data: { action: "click->dialog#close"} do %> +
+ More…
@@ -14,12 +14,12 @@
<%= button_to notifications_mark_all_read_path, class: "notification-tray__read_action btn flex-item-justify-start shadow", data: { action: "click->dialog#close", turbo_frame: "notifications" } do %> - Mark all as read + Mark all read <% end %> <%= link_to notifications_path, class: "notification-tray__all_action btn flex-item-justify-end shadow", data: { action: "click->dialog#close"} do %> <%= image_tag "bell.svg", aria: { hidden: true }, size: 24 %> - See all notifications + See all <% end %>