diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 1f1c7dd68..241cb364b 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -273,12 +273,22 @@ &:not(.btn--link) { border: 0; color: var(--color-link); + margin-block: calc(var(--block-space) * -0.5) calc(var(--block-space) * 0.25); } } footer { font-size: var(--text-x-small); - margin-block-end: calc(var(--block-space) / -2); + margin-block-end: calc(var(--block-space) * -1); + } + + .separator--horizontal { + margin-block: 0.7em 0.7em; + } + + .overflow-count { + font-size: 1.2em; + padding: 0.2em; } } diff --git a/app/helpers/accesses_helper.rb b/app/helpers/accesses_helper.rb index 9a59643d3..ccb39a5c8 100644 --- a/app/helpers/accesses_helper.rb +++ b/app/helpers/accesses_helper.rb @@ -25,14 +25,19 @@ module AccessesHelper end def collection_watchers_list(collection) - tag.div(class: "flex flex-wrap gap-half justify-center") do - safe_join( - collection.users - .without(User.system) - .where(accesses: { involvement: :watching }) - .distinct - .map { |watcher| avatar_tag(watcher) } - ) + watchers = collection.users + .without(User.system) + .where(accesses: { involvement: :watching }) + .distinct + + displayed_watchers = watchers.limit(8) + overflow_count = watchers.count - 8 + + tag.div(class: "flex gap-half justify-center") do + safe_join([ + safe_join(displayed_watchers.map { |watcher| avatar_tag(watcher) }), + (tag.span("+#{overflow_count}", class: "overflow-count") if overflow_count > 0) + ].compact) end end diff --git a/app/views/cards/index/_add_card_button.html.erb b/app/views/cards/index/_add_card_button.html.erb index 196af6bab..8303a4887 100644 --- a/app/views/cards/index/_add_card_button.html.erb +++ b/app/views/cards/index/_add_card_button.html.erb @@ -1,6 +1,6 @@ <% if collection = user_filtering.single_collection %>