Add bounce to cards

This commit is contained in:
Andy Smith
2025-10-29 11:02:47 -05:00
parent ff5e1fb80a
commit 9f61907eb8
4 changed files with 18 additions and 9 deletions
+3
View File
@@ -106,9 +106,12 @@
margin-block-start: -1ch;
margin-inline: -1ch;
overflow: hidden;
translate: 0 -1ch;
transition: translate 300ms var(--ease-out-overshoot);
.cards:not(.is-collapsed) & {
padding: 1ch;
translate: 0 0;
}
.card {
@@ -24,9 +24,11 @@
<%= render "collections/columns/list", cards: @page.records, draggable: true %>
<% end %>
<% else %>
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center">Drag cards here</p>
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
<div class="cards__list">
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center">Drag cards here</p>
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
</div>
</div>
<% end %>
<% end %>
@@ -24,9 +24,11 @@
<%= render "collections/columns/list", cards: @page.records, draggable: true %>
<% end %>
<% else %>
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center">Drag cards here</p>
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
<div class="cards__list">
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center">Drag cards here</p>
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
</div>
</div>
<% end %>
<% end %>
+5 -3
View File
@@ -24,9 +24,11 @@
<%= render "collections/columns/list", cards: @page.records, draggable: true %>
<% end %>
<% else %>
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center">Drag cards here</p>
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
<div class="cards__list">
<div class="card blank-slate blank-slate--card">
<p class="txt-align-center">Drag cards here</p>
<p class="txt-align-center blank-slate-for-grid">Nothing here</p>
</div>
</div>
<% end %>
<% end %>