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 @@ -
- -