diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 2ed961d7b..6cf7bd27e 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -591,6 +591,7 @@ border: 1px solid var(--border-color); text-align: center; + z-index: 5; .separator--horizontal { margin-block: var(--block-space); @@ -618,32 +619,28 @@ } .collection-tools__watching { + --btn-size: 32px; + --gap: 0.5ch; + display: flex; - gap: 0.5ch; + gap: var(--gap); inline-size: 100%; margin-block: var(--block-space-half); - overflow: hidden; place-content: center; position: relative; + } - &:before, - &:after { - aspect-ratio: 0.5; - background: linear-gradient(to right, var(--color-canvas), transparent); - content: ""; - inset-block: 0; - position: absolute; - z-index: 1; - } + .collection-tools__watching-dialog { + --panel-padding: 2ch; + --panel-size: 100%; - &:before { - inset-inline-start: 0; - } - - &:after { - inset-inline-end: 0; - rotate: 180deg; - } + display: flex; + flex-wrap: wrap; + gap: var(--gap); + inset-block-start: 0; + justify-content: center; + position: absolute; + z-index: 1; } /* On Deck (Not Now) diff --git a/app/helpers/accesses_helper.rb b/app/helpers/accesses_helper.rb index 9e265cb23..103df67bb 100644 --- a/app/helpers/accesses_helper.rb +++ b/app/helpers/accesses_helper.rb @@ -35,7 +35,12 @@ module AccessesHelper tag.div(class: "collection-tools__watching") do safe_join([ safe_join(displayed_watchers.map { |watcher| avatar_tag(watcher) }), - (tag.span("+#{overflow_count}", class: "overflow-count") if overflow_count > 0) + (tag.div(data: { controller: "dialog", action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" }) do + concat tag.button("+#{overflow_count}", class: "overflow-count btn btn--circle borderless", data: { action: "dialog#open" }, aria: { label: "Show #{overflow_count} more watchers" }) + concat(tag.dialog(class: "collection-tools__watching-dialog dialog panel", data: { dialog_target: "dialog" }, aria: { hidden: "true" }) do + safe_join(watchers.map { |watcher| avatar_tag(watcher) }) + end) + end if overflow_count > 0) ].compact) end end