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

Adjust column colors, alignment, transitions

Browse Source
This commit is contained in:
Jason Zimdars
2025-09-19 11:56:05 -05:00
parent 03ad5f26db
commit a5b2285f30
4 changed files with 46 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-columns.css
+40 -23
View File
@@ -60,6 +60,8 @@
/* ------------------------------------------------------------------------ */
.cards {
--column-color: color-mix(in srgb, var(--card-color) 15%, var(--color-canvas));
align-items: stretch;
display: flex;
flex: 1 0 var(--expanded-min);
@@ -70,7 +72,7 @@
min-inline-size: var(--expanded-min);
position: relative;
scroll-snap-align: start;
transition: inline-size 300ms ease;
transition: all 300ms var(--ease-out-expo);
/* Make sure filter dialogs don't end up behind sticky headers */
&:has([open]) {
@@ -81,7 +83,7 @@
border-radius: 0.2em;
flex: 0 0 var(--collapsed);
inline-size: var(--collapsed);
min-inline-size: auto;
min-inline-size: 0;
.blank-slate,
.card {
@@ -106,11 +108,11 @@
justify-content: start;
&:after {
background-color: color-mix(in srgb, var(--card-color) 20%, var(--color-canvas));
background-color: var(--column-color);
block-size: 100%;
content: " ";
inline-size: 1px;
inset: 0 0 0 0;
inset: 0 auto;
position: absolute;
z-index: -2;
}
@@ -118,27 +120,48 @@
}
.cards__expander-button {
--btn-border-radius: 0.2em;
--btn-border-radius: 2em;
--btn-padding: 1em 0.5em;
--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;
}
.cards:not(.is-collapsed) & {
--btn-padding: 0.5em 1em;
--btn-padding: 0;
background-color: color-mix(in srgb, var(--card-color) 30%, var(--color-canvas));
margin-block-start: calc(var(--collapsed) / 5);
}
}
.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: 360px;
background-color: color-mix(in srgb, var(--card-color) 30%, var(--color-canvas));
border-radius: 0.2em;
background-color: var(--column-color);
border-radius: 2em;
inline-size: var(--collapsed);
margin-block-start: 2.5em;
position: absolute;
@@ -170,20 +193,6 @@
.progress-19 { block-size: calc(var(--max-height) * 0.95); }
.progress-20 { block-size: calc(var(--max-height) * 1.00); }
.cards__expander-count {
background-color: color-mix(in srgb, var(--card-color) 30%, var(--color-canvas));
block-size: var(--collapsed);
border-radius: 0.2em;
display: none;
font-size: var(--text-x-small);
inline-size: var(--collapsed);
line-height: var(--collapsed);
.cards.is-collapsed & {
display: initial;
}
}
.blank-slate--card {
box-shadow: none !important;
border: 2px dashed color-mix(in srgb, var(--card-color) 40%, var(--color-canvas));;
@@ -456,7 +465,13 @@
/* ------------------------------------------------------------------------ */
.cards--on-deck {
--column-color: var(--color-ink-lighter);
margin-block: var(--cards-gap);
.card {
--card-color: var(--color-card-complete) !important;
}
@media (min-width: 640px) {
padding-inline: var(--cards-gap);
@@ -478,6 +493,8 @@
/* ------------------------------------------------------------------------ */
.cards--closed {
--column-color: var(--color-ink-lighter);
margin-block: var(--cards-gap);
margin-inline-start: var(--cards-gap);
app/views/cards/index/engagement/_closed.html.erb
+3 -3
View File
@@ -1,7 +1,7 @@
<section id="closed-cards" class="cards cards--closed is-collapsed" style="--card-color: var(--color-ink-light);"
<section id="closed-cards" class="cards cards--closed is-collapsed" style="--card-color: var(--color-card-complete);"
data-collapsible-columns-target="column">
<div class="cards__expander btn btn--plain" data-action="click->collapsible-columns#toggle">
<strong class="font-weight-black cards__expander-count"><%= page.records.count > 99 ? "99+" : page.records.count %></strong>
<strong class="cards__expander-count"><%= page.records.count > 99 ? "99+" : page.records.count %></strong>
<button class="btn btn--plain cards__expander-button txt-uppercase">Done</button>
<div class="progress progress-<%= [page.records.count, 20].min %>"></div>
</div>
@@ -15,6 +15,6 @@
</div>
<% end %>
<% else %>
<p class="txt-normal translucent"><%= user_filtering.any? ? "No matches" : "Nothing here" %></p>
<p class="txt-normal translucent blank-slate"><%= user_filtering.any? ? "No matches" : "Nothing here" %></p>
<% end %>
</section>
app/views/cards/index/engagement/_doing.html.erb
+1 -1
View File
@@ -11,7 +11,7 @@
%>
<div class="cards__expander btn btn--plain" data-action="click->collapsible-columns#toggle">
<strong class="font-weight-black cards__expander-count"><%= filtered_records.count > 99 ? "99+" : filtered_records.count %></strong>
<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>
app/views/cards/index/engagement/_on_deck.html.erb
+2 -2
View File
@@ -1,9 +1,9 @@
<section id="on-deck-cards" class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-ink-light);"
<section id="on-deck-cards" class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-card-complete);"
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="font-weight-black cards__expander-count"><%= page.records.count > 99 ? "99+" : page.records.count %></strong>
<strong class="cards__expander-count"><%= page.records.count > 99 ? "99+" : page.records.count %></strong>
<button class="btn btn--plain cards__expander-button txt-uppercase">Not Now</button>
<div class="progress progress-<%= [page.records.count, 20].min %>"></div>
</div>