bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tidy up the expander

Browse Source
This commit is contained in:
Andy Smith
2025-09-23 15:15:41 -05:00
parent 043421a1a0
commit 82bac33f41
8 changed files with 82 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+2
View File
@@ -58,6 +58,8 @@
/* Easing functions from https://easingwizard.com/ */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1);
--ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);
@media (max-width: 799px) {
--tray-size: var(--footer-height);
app/assets/stylesheets/card-columns.css
+57 -84
View File
@@ -1,5 +1,5 @@
@layer components {
/* Columns
/* Column container
/* ------------------------------------------------------------------------ */
/* Card contents are resized via container queries. We're using #main here as
@@ -21,7 +21,7 @@
}
.card-columns {
--collapsed: 40px;
--collapsed-width: 40px;
--expanded-min: 450px;
display: grid;
@@ -51,11 +51,14 @@
}
}
/* Cards
/* Column
/* ------------------------------------------------------------------------ */
.cards {
--column-color: color-mix(in srgb, var(--card-color) 15%, var(--color-canvas));
--progress-max-cards: 20;
--progress-max-height: 50dvh;
--progress-increment: var(--progress-max-height) / var(--progress-max-cards);
align-items: stretch;
display: flex;
@@ -75,9 +78,9 @@
}
&.is-collapsed {
border-radius: 0.2em;
flex: 0 0 var(--collapsed);
inline-size: var(--collapsed);
border-radius: 99rem;
flex: 0 0 var(--collapsed-width);
inline-size: var(--collapsed-width);
min-inline-size: 0;
.blank-slate,
@@ -91,103 +94,78 @@
padding-inline-start: var(--cards-gap);
}
/* Expander
/* ---------------------------------------------------------------------- */
.cards__expander {
align-items: center;
border-radius: 99rem;
display: flex;
flex-direction: row-reverse;
gap: 0.5ch;
position: relative;
font-size: var(--text-x-small);
font-weight: 600;
letter-spacing: 0.05em;
line-height: var(--collapsed-width);
text-transform: uppercase;
.cards.is-collapsed & {
block-size: 100%;
display: flex;
flex-direction: column;
justify-content: start;
&:after {
/* Guitar string */
&:before {
background-color: var(--column-color);
block-size: 100%;
content: " ";
content: "";
inline-size: 1px;
inset: 0 auto;
position: absolute;
z-index: -2;
}
}
}
.cards__expander-button {
--btn-border-radius: 2em;
--btn-padding: 0;
--focus-ring-size: 0;
font-size: var(--text-x-small);
font-weight: 500;
letter-spacing: 0.05em;
line-height: var(--collapsed);
.cards.is-collapsed & {
flex-grow: 1;
justify-content: start;
writing-mode: vertical-rl;
/* Progress */
&:after {
background: var(--column-color);
block-size: calc(var(--collapsed-width) + var(--card-count) * var(--progress-increment));
border-radius: 99rem;
content: "";
inline-size: 100%;
inset: 0 0 auto;
max-block-size: var(--progress-max-height);
min-block-size: var(--collapsed-width);
position: absolute;
transition: block-size 500ms var(--ease-out-overshoot);
z-index: -1;
}
}
.cards:not(.is-collapsed) & {
--btn-padding: 0;
line-height: 1;
margin-block-start: 0.5em;
background-color: var(--color-canvas);
margin-block-end: calc(-0.5 * var(--cards-gap));
}
}
.cards__expander-count {
background-color: var(--column-color);
block-size: var(--collapsed);
border-radius: 2em;
display: none;
font-size: var(--text-x-small);
font-weight: 500;
inline-size: var(--collapsed);
line-height: var(--collapsed);
.cards.is-collapsed & {
display: initial;
}
}
.progress {
--max-height: 540px;
background-color: var(--column-color);
border-radius: 0 0 2em 2em;
font-size: var(--text-x-small);
inline-size: var(--collapsed);
margin-block-start: calc(var(--btn-size) / 2);
position: absolute;
z-index: -1;
.cards:not(.is-collapsed) & {
display: none;
}
}
.progress-1 { block-size: calc(var(--max-height) * 0.05); }
.progress-2 { block-size: calc(var(--max-height) * 0.10); }
.progress-3 { block-size: calc(var(--max-height) * 0.15); }
.progress-4 { block-size: calc(var(--max-height) * 0.20); }
.progress-5 { block-size: calc(var(--max-height) * 0.25); }
.progress-6 { block-size: calc(var(--max-height) * 0.30); }
.progress-7 { block-size: calc(var(--max-height) * 0.35); }
.progress-8 { block-size: calc(var(--max-height) * 0.40); }
.progress-9 { block-size: calc(var(--max-height) * 0.45); }
.progress-10 { block-size: calc(var(--max-height) * 0.50); }
.progress-11 { block-size: calc(var(--max-height) * 0.55); }
.progress-12 { block-size: calc(var(--max-height) * 0.60); }
.progress-13 { block-size: calc(var(--max-height) * 0.65); }
.progress-14 { block-size: calc(var(--max-height) * 0.70); }
.progress-15 { block-size: calc(var(--max-height) * 0.75); }
.progress-16 { block-size: calc(var(--max-height) * 0.80); }
.progress-17 { block-size: calc(var(--max-height) * 0.85); }
.progress-18 { block-size: calc(var(--max-height) * 0.90); }
.progress-19 { block-size: calc(var(--max-height) * 0.95); }
.progress-20 { block-size: calc(var(--max-height) * 1.00); }
.cards__expander-title {
font-weight: inherit;
font-size: inherit;
.cards.is-collapsed & {
writing-mode: vertical-rl;
}
}
/* Card styles
/* ---------------------------------------------------------------------- */
.blank-slate--card {
box-shadow: none !important;
@@ -471,7 +449,6 @@
.cards--on-deck {
--column-color: var(--color-ink-lighter);
margin-block: var(--cards-gap);
margin-inline-start: auto;
.card {
@@ -480,20 +457,18 @@
.bubble { display: none !important; }
@media (min-width: 640px) {
/* @media (min-width: 640px) {
padding-inline: var(--cards-gap);
}
} */
}
/* Doing
/* ------------------------------------------------------------------------ */
.cards--doing {
margin-block: var(--cards-gap);
@media (min-width: 640px) {
/* @media (min-width: 640px) {
padding-inline: var(--cards-gap);
}
} */
}
/* Closed
@@ -502,10 +477,8 @@
.cards--closed {
--column-color: var(--color-ink-lighter);
margin-block: var(--cards-gap);
@media (min-width: 640px) {
/* @media (min-width: 640px) {
padding-inline: var(--cards-gap);
}
} */
}
}
app/assets/stylesheets/trays.css
+3 -4
View File
@@ -6,7 +6,6 @@
--tray-duration: 350ms;
--tray-margin: 0.5rem;
--tray-radius: 0.25rem;
--tray-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1);
align-items: end;
block-size: var(--footer-height);
@@ -14,7 +13,7 @@
inset-block: auto env(safe-area-inset-bottom);
inline-size: var(--tray-size);
position: fixed;
transition: inset var(--tray-duration) var(--tray-timing-function);
transition: inset var(--tray-duration) var(--ease-out-overshoot-subtle);
z-index: var(--z-tray);
/* Make the dialog, expander, and actions inhabit the same space */
@@ -43,7 +42,7 @@
inline-size: auto;
inset: auto 0 0 0;
position: absolute;
transition: var(--tray-duration) var(--tray-timing-function);
transition: var(--tray-duration) var(--ease-out-overshoot-subtle);
transition-property: background-color, box-shadow, inset-block-end;
&[open] {
@@ -159,7 +158,7 @@
.tray__dialog & {
font-size: 10px;
margin-block-end: var(--tray-item-margin);
transition: var(--tray-duration) var(--tray-timing-function);
transition: var(--tray-duration) var(--ease-out-overshoot-subtle);
transition-delay: var(--tray-item-delay);
transition-property: margin, opacity, scale;
app/helpers/cards_helper.rb
+7
View File
@@ -69,4 +69,11 @@ module CardsHelper
def cacheable_preview_parts_for(card, *options)
[ card, card.workflow, card.collection.entropy_configuration, card.collection.publication, *options ]
end
def cards_expander(title, count)
tag.header class: "cards__expander btn btn--plain", data: { action: "click->collapsible-columns#toggle" }, style: "--card-count: #{[count, 20].min}", aria: { role: "button" } do
concat(tag.span count > 99 ? "99+" : count, class: "cards__expander-count")
concat(tag.h2 title, class: "cards__expander-title")
end
end
end
app/views/cards/index/_columns.html.erb
+1 -1
View File
@@ -16,7 +16,7 @@
<%= render "cards/index/engagement/closed", user_filtering: user_filtering, **closed.to_h %>
<button class="btn btn--circle txt-xx-small borderless" style="margin-block: 2.3em;">
<button class="btn btn--circle txt-xx-small borderless">
<%= icon_tag "menu-dots-horizontal" %>
<span class="for-screen-reader">Add a new column, etc.</span>
</button>
app/views/cards/index/engagement/_closed.html.erb
+8 -10
View File
@@ -1,17 +1,15 @@
<%
total_closed_count = filter.collections.any? ?
filter.collections.joins(:cards).merge(Card.closed).count :
filter.cards.count
%>
<section id="closed-cards" class="cards cards--closed is-collapsed" style="--card-color: var(--color-card-complete);"
data-drag-and-drop-target="container"
data-drop-target="closed"
data-collapsible-columns-target="column">
<div class="cards__expander btn btn--plain" data-action="click->collapsible-columns#toggle">
<%
total_closed_count = filter.collections.any? ?
filter.collections.joins(:cards).merge(Card.closed).count :
filter.cards.count
%>
<strong class="cards__expander-count"><%= total_closed_count > 99 ? "99+" : total_closed_count %></strong>
<button class="btn btn--plain cards__expander-button txt-uppercase">Done</button>
<div class="progress progress-<%= [total_closed_count, 20].min %>"></div>
</div>
<%= cards_expander "Done", total_closed_count %>
<% if page.used? %>
<%= render partial: "cards/display/preview", collection: page.records, as: :card, locals: { draggable: true }, cached: true %>
app/views/cards/index/engagement/_doing.html.erb
+2 -5
View File
@@ -11,11 +11,8 @@
page.records
end
%>
<div class="cards__expander btn btn--plain" data-action="click->collapsible-columns#toggle">
<strong class="cards__expander-count"><%= filtered_records.count > 99 ? "99+" : filtered_records.count %></strong>
<button class="btn btn--plain cards__expander-button txt-uppercase"><%= stage.name if defined?(stage) && stage %></button>
<div class="progress progress-<%= [filtered_records.count, 20].min %>"></div>
</div>
<%= cards_expander "#{stage.name if defined?(stage) && stage}", filtered_records.count %>
<% if filtered_records.any? %>
<%= render partial: "cards/display/preview", collection: filtered_records, as: :card, locals: { draggable: true }, cached: ->(card) { cacheable_preview_parts_for(card) } %>
app/views/cards/index/engagement/_on_deck.html.erb
+2 -5
View File
@@ -2,11 +2,8 @@
data-collapsible-columns-target="column"
data-drag-and-drop-target="container"
data-drop-target="on_deck">
<div class="cards__expander btn btn--plain" data-action="click->collapsible-columns#toggle">
<strong class="cards__expander-count"><%= filter.cards.count > 99 ? "99+" : filter.cards.count %></strong>
<button class="btn btn--plain cards__expander-button txt-uppercase">Not Now</button>
<div class="progress progress-<%= [filter.cards.count, 20].min %>"></div>
</div>
<%= cards_expander "Not Now", filter.cards.count %>
<% if page.used? %>
<%= render partial: "cards/display/preview", collection: page.records, as: :card, locals: { draggable: true }, cached: true %>