diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 1f8c4611e..77718633a 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -79,8 +79,31 @@ &.drag-and-drop__hover-container { --dnd-bg-color: transparent; --dnd-border-color: transparent; + + &.show-column-name-on-hover { + &:after { + color: var(--card-color); + content: attr(data-column-name); + font-size: var(--text-x-small); + font-weight: 500; + line-height: var(--column-width-collapsed); + padding-inline: 1ch; + position: fixed; + text-transform: uppercase; + top: 0; + translate: -50%; + border-radius: 99rem; + } + + &.is-collapsed { + &:after { + writing-mode: vertical-rl; + } + } + } } + @media (any-hover: hover) { .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) { filter: blur(3px) brightness(1.2); diff --git a/app/views/collections/show/_closed.html.erb b/app/views/collections/show/_closed.html.erb index 98fa7e22b..97a67698f 100644 --- a/app/views/collections/show/_closed.html.erb +++ b/app/views/collections/show/_closed.html.erb @@ -2,6 +2,7 @@ data-drag-and-drop-target="container" data-drag-and-strum-target="container" data-collapsible-columns-target="column" + data-column-name="Done" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>" > diff --git a/app/views/collections/show/_column.html.erb b/app/views/collections/show/_column.html.erb index 32d3d6a39..7cb1642bb 100644 --- a/app/views/collections/show/_column.html.erb +++ b/app/views/collections/show/_column.html.erb @@ -4,6 +4,7 @@ data-drag-and-strum-target="container" data-collapsible-columns-target="column" data-controller="clicker" + data-column-name="<%= column.name %>" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle turbo:before-stream-render@document->collapsible-columns#restoreState" data-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>" > diff --git a/app/views/collections/show/_not_now.html.erb b/app/views/collections/show/_not_now.html.erb index f98a6ba38..a5fe53d05 100644 --- a/app/views/collections/show/_not_now.html.erb +++ b/app/views/collections/show/_not_now.html.erb @@ -2,6 +2,7 @@ data-collapsible-columns-target="column" data-drag-and-drop-target="container" data-drag-and-strum-target="container" + data-column-name="Not Now" data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" data-drag-and-drop-url="<%= columns_card_drops_not_now_path("__id__") %>" > diff --git a/app/views/collections/show/_stream.html.erb b/app/views/collections/show/_stream.html.erb index 253dcb82d..93980b991 100644 --- a/app/views/collections/show/_stream.html.erb +++ b/app/views/collections/show/_stream.html.erb @@ -1,5 +1,6 @@
">