From a701cf4324c8612067690b1ab532bf88e5289651 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 8 Oct 2025 12:59:08 -0500 Subject: [PATCH 1/4] WIP --- app/assets/stylesheets/card-columns.css | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index da138aac1..fc80baa05 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -2,6 +2,16 @@ /* Column container /* ------------------------------------------------------------------------ */ + #main:has(.card-columns) { + padding-inline: 0; + } + + [data-controller="drag-and-drop drag-and-strum"] { + background: thistle; + max-inline-size: 100vw; + overflow-x: auto; + } + .card-columns { --bubble-size: 3.5rem; --cards-gap: min(1.2cqi, 1.7rem); @@ -14,13 +24,14 @@ --progress-max-height: 50dvh; align-items: stretch; + background-color: gold; container-type: inline-size; display: grid; gap: var(--column-gap); - grid-template-columns: 1fr var(--column-width-expanded) 1fr; + grid-template-columns: minmax(min-content, 1fr) var(--column-width-expanded) minmax(min-content, 1fr); justify-content: center; margin: var(--cards-gap) auto 0; - max-inline-size: var(--main-width); + /* max-inline-size: var(--main-width); */ position: relative; &:has(.card-columns__left .cards:not(.is-collapsed), .card-columns__right .cards:not(.is-collapsed)) { @@ -41,6 +52,7 @@ align-items: stretch; display: flex; gap: var(--column-gap); + background: orange; } .card-columns__left { From 86b458bad09d45e8a97853c10d84731af5bc4462 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 8 Oct 2025 13:54:24 -0500 Subject: [PATCH 2/4] Sorta working x-scroll --- app/assets/stylesheets/card-columns.css | 17 ++++------- app/views/collections/show/_columns.html.erb | 30 ++++++++++++++++++++ 2 files changed, 36 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index fc80baa05..6e499e518 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -6,12 +6,6 @@ padding-inline: 0; } - [data-controller="drag-and-drop drag-and-strum"] { - background: thistle; - max-inline-size: 100vw; - overflow-x: auto; - } - .card-columns { --bubble-size: 3.5rem; --cards-gap: min(1.2cqi, 1.7rem); @@ -24,16 +18,18 @@ --progress-max-height: 50dvh; align-items: stretch; - background-color: gold; container-type: inline-size; display: grid; gap: var(--column-gap); - grid-template-columns: minmax(min-content, 1fr) var(--column-width-expanded) minmax(min-content, 1fr); - justify-content: center; + grid-template-columns: 1fr var(--column-width-expanded) 1fr; margin: var(--cards-gap) auto 0; - /* max-inline-size: var(--main-width); */ + max-inline-size: var(--main-width); position: relative; + box-shadow: inset 0 0 0 2px red; + justify-content: start; + overflow-x: auto; + /* When it has something expanded */ &:has(.card-columns__left .cards:not(.is-collapsed), .card-columns__right .cards:not(.is-collapsed)) { grid-template-columns: auto auto auto; } @@ -52,7 +48,6 @@ align-items: stretch; display: flex; gap: var(--column-gap); - background: orange; } .card-columns__left { diff --git a/app/views/collections/show/_columns.html.erb b/app/views/collections/show/_columns.html.erb index a290cf221..819e3c651 100644 --- a/app/views/collections/show/_columns.html.erb +++ b/app/views/collections/show/_columns.html.erb @@ -9,6 +9,36 @@ drop->drag-and-drop#drop dragend->drag-and-drop#dragEnd" } do %> + + + + +
<%= render "collections/show/not_now", collection: collection %> From 64175f040aed71909681ed6f0908417a37edd7b6 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 8 Oct 2025 14:34:56 -0500 Subject: [PATCH 3/4] Properly scroll and center content --- app/assets/stylesheets/card-columns.css | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 6e499e518..3a8a888c0 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -3,10 +3,6 @@ /* ------------------------------------------------------------------------ */ #main:has(.card-columns) { - padding-inline: 0; - } - - .card-columns { --bubble-size: 3.5rem; --cards-gap: min(1.2cqi, 1.7rem); --column-gap: 8px; @@ -17,21 +13,23 @@ --progress-max-cards: 20; --progress-max-height: 50dvh; - align-items: stretch; + padding-inline: var(--column-gap); + } + + .card-columns { + container-type: inline-size; display: grid; gap: var(--column-gap); grid-template-columns: 1fr var(--column-width-expanded) 1fr; - margin: var(--cards-gap) auto 0; + margin-inline: auto; max-inline-size: var(--main-width); - position: relative; - box-shadow: inset 0 0 0 2px red; - justify-content: start; overflow-x: auto; + position: relative; /* When it has something expanded */ &:has(.card-columns__left .cards:not(.is-collapsed), .card-columns__right .cards:not(.is-collapsed)) { - grid-template-columns: auto auto auto; + grid-template-columns: auto var(--column-width-expanded) auto; } &:has(.cards) { From 4638237889aed9fef73d32263fa897965dc5aa6b Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 8 Oct 2025 14:45:02 -0500 Subject: [PATCH 4/4] Cleanup prototyping --- app/assets/stylesheets/card-columns.css | 1 - app/views/collections/show/_columns.html.erb | 31 -------------------- 2 files changed, 32 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 3a8a888c0..2bf2b6729 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -17,7 +17,6 @@ } .card-columns { - container-type: inline-size; display: grid; gap: var(--column-gap); diff --git a/app/views/collections/show/_columns.html.erb b/app/views/collections/show/_columns.html.erb index 819e3c651..06862a158 100644 --- a/app/views/collections/show/_columns.html.erb +++ b/app/views/collections/show/_columns.html.erb @@ -8,37 +8,6 @@ dragenter->drag-and-strum#dragEnter drop->drag-and-drop#drop dragend->drag-and-drop#dragEnd" } do %> - - - - - -
<%= render "collections/show/not_now", collection: collection %>