Merge pull request #1419 from basecamp/column-transitions-alt

Column transitions alt

app/assets/stylesheets/card-columns.css

@@ -7,6 +7,7 @@
     --cards-gap: min(1.2cqi, 1.7rem);
     --column-gap: 8px;
     --column-padding-expanded: calc(var(--column-gap) * 2);
+    --column-transition-duration: 300ms;
     --column-width-collapsed: 40px;
     --column-width-expanded: 450px;
     --progress-increment: var(--progress-max-height) / var(--progress-max-cards);
@@ -66,8 +67,6 @@
     inline-size: var(--column-width-expanded);
     position: relative;
     scroll-snap-align: start;
-    transition: inline-size 300ms ease-out;
-    will-change: inline-size;
 
     .no-transitions & {
       transition: none;
@@ -80,7 +79,6 @@
     &.is-collapsed {
       inline-size: var(--column-width-collapsed);
 
-      .blank-slate,
       .pagination-link.pagination-link--active-when-observed,
       .card {
         display: none;
@@ -108,10 +106,16 @@
     gap: var(--cards-gap);
     margin-block-start: -1ch;
     margin-inline: -1ch;
+    opacity: 0;
     overflow: hidden;
+    translate: 0 -1ch;
+    transition: var(--column-transition-duration) var(--ease-out-overshoot);
+    transition-property: opacity, translate;
 
     .cards:not(.is-collapsed) & {
+      opacity: 1;
       padding: 1ch;
+      translate: 0 0;
     }
 
     .card {
@@ -127,7 +131,9 @@
     margin-block-start: var(--column-width-collapsed);
   }
 
-  /* Used when filtering */
+  /* Cards grid; used when filtering
+  /* -------------------------------------------------------------------------- */
+
   .cards--grid {
     --cards-gap: 1rem;
     --card-grid-columns: 1;
@@ -187,6 +193,25 @@
       }
     }
 
+    /* Progress */
+    &:after {
+      background: linear-gradient(to bottom, var(--card-color), var(--column-color) 80%);
+      block-size: var(--column-width-collapsed);
+      border-radius: 99rem;
+      content: "";
+      inset: 0 0 auto;
+      margin-inline: auto;
+      max-block-size: var(--progress-max-height);
+      min-block-size: var(--column-width-collapsed);
+      opacity: 0;
+      position: absolute;
+      transition:
+        block-size 500ms var(--ease-out-overshoot),
+        inline-size var(--column-transition-duration) ease-out,
+        opacity var(--column-transition-duration) ease-out;
+      z-index: -1;
+    }
+
     .cards.is-collapsed & {
       block-size: 100%;
       flex-direction: column;
@@ -205,19 +230,10 @@
         z-index: -2;
       }
 
-      /* Progress */
       &:after {
-        background: linear-gradient(to bottom, var(--card-color), var(--column-color) 80%);
         block-size: calc(var(--column-width-collapsed) + 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(--column-width-collapsed);
-        position: absolute;
-        transition: block-size 500ms var(--ease-out-overshoot);
-        z-index: -1;
+        opacity: 1;
+        inline-size: var(--column-width-collapsed);
       }
     }
 

app/assets/stylesheets/drag_and_drop.css

@@ -9,6 +9,7 @@
   .drag-and-drop__hover-container {
     background-color: var(--color-selected-light);
     outline: 2px dashed var(--color-selected-dark);
+    outline-offset: -2px;
     transition: background-color 200ms;
     z-index: 1;
 

app/views/collections/columns/closeds/show.html.erb

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

app/views/collections/columns/not_nows/show.html.erb

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

app/views/collections/columns/show.html.erb

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