From 4beeb6048442d4a549a56dc9c230cb54fe4c3e57 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 11 Jun 2025 11:42:36 -0500 Subject: [PATCH 1/4] Closing cards on mobile --- app/assets/stylesheets/card-columns.css | 57 +++++++++++------------ app/assets/stylesheets/cards.css | 2 + app/views/cards/display/_preview.html.erb | 2 +- 3 files changed, 30 insertions(+), 31 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 15e8f03b0..3e6bbe5ab 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -1,6 +1,6 @@ @layer components { /* Coluns - /* -------------------------------------------------------------------------- */ + /* ------------------------------------------------------------------------ */ /* Card contents are resized via container queries. We're using #main here as the primary container so all cards have the same container reference */ @@ -12,11 +12,12 @@ .card-columns { --bubble-size: 4rem; --bubble-gap: 0.5rem; + --reserved-bubble-space: calc(var(--bubble-size) + var(--bubble-gap)); display: grid; grid-template-columns: repeat(2, 50%); margin: auto; - max-inline-size: calc(100% - (var(--bubble-size) + var(--bubble-gap)) * 2); + max-inline-size: 100%; position: relative; &:before { @@ -28,39 +29,29 @@ inset: 0 -0.6em 100% -0.6em; position: absolute; } - - .cards:first-child { - padding-inline-end: var(--cards-gap); - position: relative; - - &:after { - background: linear-gradient(var(--color-canvas), var(--color-ink-lighter) 1%, var(--color-ink-lighter) 99%, var(--color-canvas)); - block-size: calc(100% + 1.2em); - content: ""; - display: block; - inline-size: 1px; - inset: -0.6em 0 -0.6em 100%; - position: absolute; - } - } - - .cards:last-child { - padding-inline-start: var(--cards-gap); - } } /* Cards - /* -------------------------------------------------------------------------- */ + /* ------------------------------------------------------------------------ */ .cards { - --cards-gap: 2cqi; + --cards-gap: min(2cqi, 1rem); align-items: center; display: flex; flex-direction: column; gap: var(--cards-gap); justify-content: start; - padding-block: calc(var(--cards-gap) * 0.75); + padding: var(--cards-gap); + + &:first-child { + border-inline-end: 1px solid var(--color-ink-lighter); + padding-inline-start: var(--reserved-bubble-space); + } + + &:last-child { + padding-inline-end: var(--reserved-bubble-space); + } .card { --block-space: 1em; @@ -90,7 +81,7 @@ .workflow-stage:not(.workflow-stage--current) { opacity: 0; transition: opacity 0.2s ease-in-out; - + @media (any-hover: hover) { .card:hover & { opacity: 1; @@ -98,7 +89,7 @@ } } } - + @media (any-hover: hover) { .card:hover & { img:not([src=""]) { @@ -176,7 +167,7 @@ } /* Closed - /* -------------------------------------------------------------------------- */ + /* ------------------------------------------------------------------------ */ .cards--closed { justify-content: center; @@ -196,13 +187,19 @@ position: absolute; } - .card { - inline-size: calc((100% - var(--cards-gap) * 2) / 3); + @media (max-width: 639px) { + flex-direction: column; + } - @media (max-width: 960px) { + .card { + @media (min-width: 640px) { inline-size: calc((100% - var(--cards-gap)) / 2); } + @media (min-width: 960px) { + inline-size: calc((100% - var(--cards-gap) * 2) / 3); + } + &:nth-of-type(7) { margin-block-start: var(--cards-gap); } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 01f4883ba..7981cf132 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -66,7 +66,9 @@ gap: var(--inline-space-half); margin-block-start: calc(-1 * var(--card-padding-block)); margin-inline-start: calc(-1 * var(--card-padding-inline)); + max-inline-size: 100%; min-inline-size: 0; + overflow: hidden; } .card__collection { diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb index 4590b5e99..40f34c9ed 100644 --- a/app/views/cards/display/_preview.html.erb +++ b/app/views/cards/display/_preview.html.erb @@ -1,7 +1,7 @@ <% cache cacheable_preview_parts_for(card) do %> <%= card_article_tag card, class: "card" do %>
-
+
<%= render "cards/display/preview/collection", card: card %> <%= render "cards/display/preview/tags", card: card %> From cce29dc3bd1507ae7dca54583afea71e4ed24bce Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Wed, 11 Jun 2025 13:33:50 -0500 Subject: [PATCH 2/4] Stack columns and make headers sticky --- app/assets/stylesheets/card-columns.css | 105 ++++++++++++++---- app/assets/stylesheets/card-filters.css | 34 ------ app/models/card/entropy.rb | 1 + .../cards/index/_closure_filter.html.erb | 8 +- .../cards/index/_workflow_filter.html.erb | 16 ++- 5 files changed, 94 insertions(+), 70 deletions(-) delete mode 100644 app/assets/stylesheets/card-filters.css diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 3e6bbe5ab..262bd4570 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -1,56 +1,66 @@ @layer components { - /* Coluns + /* Columns /* ------------------------------------------------------------------------ */ /* Card contents are resized via container queries. We're using #main here as the primary container so all cards have the same container reference */ #main:has(.card-columns) { + --cards-gap: min(2cqi, 1rem); + --gradient-border: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas)); + container-type: inline-size; max-inline-size: 1400px; } .card-columns { - --bubble-size: 4rem; --bubble-gap: 0.5rem; + --bubble-size: 4rem; --reserved-bubble-space: calc(var(--bubble-size) + var(--bubble-gap)); - display: grid; - grid-template-columns: repeat(2, 50%); margin: auto; max-inline-size: 100%; position: relative; &:before { - background: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas)); + background: var(--gradient-border); block-size: 1px; content: ""; - display: block; - inline-size: calc(100% + 1.2em); inset: 0 -0.6em 100% -0.6em; position: absolute; } + + @media (min-width: 640px) { + display: grid; + grid-template-columns: repeat(2, 50%); + } } /* Cards /* ------------------------------------------------------------------------ */ .cards { - --cards-gap: min(2cqi, 1rem); - - align-items: center; + align-items: stretch; display: flex; flex-direction: column; gap: var(--cards-gap); justify-content: start; - padding: var(--cards-gap); + padding: 0 var(--reserved-bubble-space) var(--cards-gap) var(--cards-gap); - &:first-child { - border-inline-end: 1px solid var(--color-ink-lighter); - padding-inline-start: var(--reserved-bubble-space); + /* Make sure filter dialogs don't end up behind sticky headers */ + &:has([open]) { + position: relative; + z-index: 3; } - &:last-child { - padding-inline-end: var(--reserved-bubble-space); + &:first-child { + @media (min-width: 640px) { + border-inline-end: 1px solid var(--color-ink-lighter); + padding-inline: var(--reserved-bubble-space) var(--cards-gap); + } + } + + @media (max-width: 639px) { + padding-inline-start: 0; } .card { @@ -101,12 +111,42 @@ } } + /* Column elements + /* ------------------------------------------------------------------------ */ + .cards__heading { - display: inline-flex; + background-color: var(--color-canvas); + display: flex; font-size: var(--text-medium); - inline-size: 100%; + inset-block-start: 0; justify-content: center; - text-transform: uppercase; + margin-block-start: 1px; + margin-inline: calc(-1 * var(--cards-gap) + 1px); + padding-block: var(--cards-gap); + position: sticky; + z-index: 2; + + &, button { + font-weight: bold; + text-transform: uppercase; + } + + button { + --hover-size: 0; + + inline-size: auto; + margin-inline-start: 2em; + padding: 0 2em 0 0; + } + + dialog { + font-weight: normal; + text-transform: none; + } + + @media (max-width: 639px) { + margin-inline-end: calc(-1 * var(--reserved-bubble-space) - var(--cards-gap)); + } } /* Considering @@ -166,6 +206,21 @@ } } + /* Doing + /* ------------------------------------------------------------------------ */ + + @media (max-width: 639px) { + .cards--doing { + .cards__heading:before { + background: var(--gradient-border); + block-size: 1px; + content: ""; + inset: 0 0 auto; + position: absolute; + } + } + } + /* Closed /* ------------------------------------------------------------------------ */ @@ -178,11 +233,9 @@ position: relative; &:before { - background: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas)); + background: var(--gradient-border); block-size: 1px; content: ""; - display: block; - inline-size: calc(100% + 1.2em); inset: 0 -0.6em 100% -0.6em; position: absolute; } @@ -191,6 +244,14 @@ flex-direction: column; } + .cards__heading { + min-inline-size: 100%; + + @media (max-width: 639px) { + margin-inline-end: calc(-1 * var(--cards-gap)); + } + } + .card { @media (min-width: 640px) { inline-size: calc((100% - var(--cards-gap)) / 2); diff --git a/app/assets/stylesheets/card-filters.css b/app/assets/stylesheets/card-filters.css deleted file mode 100644 index f7ea3605c..000000000 --- a/app/assets/stylesheets/card-filters.css +++ /dev/null @@ -1,34 +0,0 @@ -@layer components { - .card-filter--column { - > button { - --hover-size: 0; - - inline-size: auto; - padding: 0 2em 0 0; - margin-inline-start: 2em; - } - } - - .card-filter--sorting { - inset: auto 50% -4em; - margin-inline-start: -1em; - position: absolute; - transform: translateX(-50%); - - #header:has(&) { - position: relative; - z-index: 1; - } - } - - .card-count__selector { - inset: 0.5cqi 0.5cqi auto auto; - position: absolute; - text-align: start; - z-index: 1; - - .popup { - inset: 1em 1em auto auto; - } - } -} diff --git a/app/models/card/entropy.rb b/app/models/card/entropy.rb index 51b1e54a4..839f4c960 100644 --- a/app/models/card/entropy.rb +++ b/app/models/card/entropy.rb @@ -24,5 +24,6 @@ class Card::Entropy def days_before_reminder (auto_clean_period * 0.25).seconds.in_days.round + 30 end end diff --git a/app/views/cards/index/_closure_filter.html.erb b/app/views/cards/index/_closure_filter.html.erb index 120519c2f..7615725be 100644 --- a/app/views/cards/index/_closure_filter.html.erb +++ b/app/views/cards/index/_closure_filter.html.erb @@ -1,8 +1,6 @@ -
- - Date: Wed, 11 Jun 2025 13:44:10 -0500 Subject: [PATCH 3/4] Equalize padding --- app/assets/stylesheets/card-columns.css | 31 +++++++++++-------------- app/models/card/entropy.rb | 1 - 2 files changed, 13 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 262bd4570..3507ea16c 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -7,16 +7,15 @@ #main:has(.card-columns) { --cards-gap: min(2cqi, 1rem); --gradient-border: linear-gradient(to right,var(--color-canvas), var(--color-ink-lighter) 3%, var(--color-ink-lighter) 97%, var(--color-canvas)); + --reserved-bubble-space: calc(var(--bubble-size) + var(--bubble-gap)); + --bubble-gap: 0.5rem; + --bubble-size: 4rem; container-type: inline-size; max-inline-size: 1400px; } .card-columns { - --bubble-gap: 0.5rem; - --bubble-size: 4rem; - --reserved-bubble-space: calc(var(--bubble-size) + var(--bubble-gap)); - margin: auto; max-inline-size: 100%; position: relative; @@ -45,10 +44,10 @@ gap: var(--cards-gap); justify-content: start; padding: 0 var(--reserved-bubble-space) var(--cards-gap) var(--cards-gap); + position: relative; /* Make sure filter dialogs don't end up behind sticky headers */ &:has([open]) { - position: relative; z-index: 3; } @@ -60,7 +59,8 @@ } @media (max-width: 639px) { - padding-inline-start: 0; + padding-block-end: calc(var(--cards-gap) * 2); + padding-inline-start: var(--reserved-bubble-space); } .card { @@ -143,10 +143,6 @@ font-weight: normal; text-transform: none; } - - @media (max-width: 639px) { - margin-inline-end: calc(-1 * var(--reserved-bubble-space) - var(--cards-gap)); - } } /* Considering @@ -210,14 +206,12 @@ /* ------------------------------------------------------------------------ */ @media (max-width: 639px) { - .cards--doing { - .cards__heading:before { - background: var(--gradient-border); - block-size: 1px; - content: ""; - inset: 0 0 auto; - position: absolute; - } + .cards--doing:before { + background: var(--gradient-border); + block-size: 1px; + content: ""; + inset: 0 0 auto; + position: absolute; } } @@ -242,6 +236,7 @@ @media (max-width: 639px) { flex-direction: column; + padding-inline: var(--reserved-bubble-space); } .cards__heading { diff --git a/app/models/card/entropy.rb b/app/models/card/entropy.rb index 839f4c960..51b1e54a4 100644 --- a/app/models/card/entropy.rb +++ b/app/models/card/entropy.rb @@ -24,6 +24,5 @@ class Card::Entropy def days_before_reminder (auto_clean_period * 0.25).seconds.in_days.round - 30 end end From 2f8b929702f0e32c0ebb85ea2d4903ec21f7db3c Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 12 Jun 2025 10:59:29 -0500 Subject: [PATCH 4/4] Tighter bubbles on small screens --- app/assets/stylesheets/card-columns.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 3507ea16c..c2ddc7389 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -13,6 +13,12 @@ container-type: inline-size; max-inline-size: 1400px; + + @media (max-width: 639px) { + --bubble-gap: -0.5rem; + --bubble-size: 3rem; + --reserved-bubble-space: calc(var(--bubble-size) / 2 + var(--bubble-gap)); + } } .card-columns {