diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index be049c19c..de52fe37c 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -567,14 +567,21 @@ } } - .card.card--new { + /* Collection tools + /* -------------------------------------------------------------------------- */ + + .collection-tools.card { --border-color: var(--color-selected-dark); --border-size: 1px; --card-padding-block: var(--block-space); - border: 1px solid var(--color-selected-dark); + border: 1px solid var(--border-color); text-align: center; + .separator--horizontal { + margin-block: var(--block-space); + } + .btn--link { font-size: 1.2em; } @@ -596,6 +603,35 @@ } } + .collection-tools__watching { + display: flex; + gap: 0.5ch; + 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; + } + + &:before { + inset-inline-start: 0; + } + + &:after { + inset-inline-end: 0; + rotate: 180deg; + } + } + /* On Deck (Not Now) /* ------------------------------------------------------------------------ */ diff --git a/app/assets/stylesheets/separators.css b/app/assets/stylesheets/separators.css index 4e3d98241..68b797b58 100644 --- a/app/assets/stylesheets/separators.css +++ b/app/assets/stylesheets/separators.css @@ -14,5 +14,6 @@ border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor); border-inline: 0; display: flex; + inline-size: 100%; } } diff --git a/app/helpers/accesses_helper.rb b/app/helpers/accesses_helper.rb index c446dc5a2..0248e25af 100644 --- a/app/helpers/accesses_helper.rb +++ b/app/helpers/accesses_helper.rb @@ -35,7 +35,7 @@ module AccessesHelper displayed_watchers = watchers.limit(MAX_DISPLAYED_WATCHERS) overflow_count = watchers.count - MAX_DISPLAYED_WATCHERS - tag.div(class: "flex gap-half justify-center") do + 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) diff --git a/app/views/columns/show/_add_card_button.html.erb b/app/views/columns/show/_add_card_button.html.erb index 86e926195..4d6d4e50d 100644 --- a/app/views/columns/show/_add_card_button.html.erb +++ b/app/views/columns/show/_add_card_button.html.erb @@ -1,12 +1,12 @@ -