From c2112735f8ab7d2cc99d55feac1661554a3d0841 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 12 Feb 2025 15:54:38 -0600
Subject: [PATCH] Try a simpler popped treatment, consistency for small bubbles

---
 app/assets/stylesheets/bubbles.css      | 38 ++++++-------------------
 app/views/bubbles/_bubble.html.erb      |  3 +-
 app/views/bubbles/_burst.html.erb       | 27 ------------------
 app/views/bubbles/list/_bubble.html.erb |  2 +-
 4 files changed, 10 insertions(+), 60 deletions(-)
 delete mode 100644 app/views/bubbles/_burst.html.erb

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index bfc33fd2a..ab390d71e 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -393,8 +393,9 @@
 }
 
 .bubbles-list {
-  --bubble-size: 1.8em;
+  --bubble-border-width: 0.15rem;
   --bubble-shift: 15deg;
+  --bubble-size: 1.8em;
   --divider-offset: 1.2em;
   --hover-size: 0;
 
@@ -502,12 +503,12 @@
 }
 
 .bubble__shape {
-  background-color: var(--bubble-background-color, var(--bubble-color));
+  background: var(--bubble-background, color(from var(--bubble-color) srgb r g b / 0.15));
   block-size: var(--bubble-size, 1.2em);
   border-color: var(--bubble-border-color, var(--bubble-color));
   border-radius: var(--bubble-shape);
   border-style: var(--bubble-border-style, solid);
-  border-width: var(--bubble-border-width, 0);
+  border-width: var(--bubble-border-width);
   inline-size: var(--bubble-size, 1.2em);
   pointer-events: none;
   position: relative;
@@ -517,17 +518,15 @@
 
   .bubble & {
     --bubble-size: 100%;
-    --bubble-background-color: color(from var(--bubble-color) srgb r g b / 0.15);
   }
 
   .drafted & {
     --bubble-border-style: dashed;
+  }
 
-    .bubbles-list & {
-      --bubble-background-color: color(from var(--bubble-color) srgb r g b / 0.15);
-      --bubble-border-color: var(--bubble-color);
-      --bubble-border-width: 0.15rem;
-    }
+  .popped & {
+    --bubble-background: radial-gradient(circle at center, color(from var(--bubble-color) srgb r g b / 0.3), transparent);
+    --bubble-border-width: 0;
   }
 
   .bubble:has(.bubble__link) & {
@@ -544,27 +543,6 @@
   }
 }
 
-.bubble__burst {
-  --bubble-border-width: 0.6rem;
-
-  block-size: 55cqi;
-  inline-size: 55cqi;
-  position: absolute;
-  inset: auto -2cqi -6cqi auto;
-  transition: transform 200ms ease-out;
-  z-index: 0;
-
-  .bubble__perma & {
-    --bubble-border-width: 0.3rem;
-  }
-
-  @media (hover: hover) {
-    .windshield .bubble:hover & {
-      transform: translate(-1rem, 1rem) rotate(20deg);
-    }
-  }
-}
-
 .bubble__actions-container {
   background-color: color(from var(--bubble-color) srgb r g b / 0.15);
   margin-block-start: -0.7em;
diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb
index b647bbd51..f45b98c41 100644
--- a/app/views/bubbles/_bubble.html.erb
+++ b/app/views/bubbles/_bubble.html.erb
@@ -1,5 +1,5 @@
 <% cache bubble do %>
-  <div class="<%= class_names("bubble", drafted: bubble.drafted?) %>"
+  <div class="<%= class_names("bubble", drafted: bubble.drafted?, popped: bubble.popped?) %>"
     style="view-transition-name: bubble-<%= bubble.id -%>; --bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %> <%= bubble_size(bubble) %>"
     data-controller="animation upload-preview"
     data-animation-play-class="bubble--wobble"
@@ -32,7 +32,6 @@
 
     <%= render "bubbles/assignments", bubble: bubble %>
     <%= render "bubbles/boosts", bubble: bubble %>
-    <%= render "bubbles/burst", bubble: bubble %>
     <%= render "bubbles/comments", bubble: bubble %>
     <%= render "bubbles/date", bubble: bubble %>
     <%= render "bubbles/image", bubble: bubble %>
diff --git a/app/views/bubbles/_burst.html.erb b/app/views/bubbles/_burst.html.erb
deleted file mode 100644
index b41fe028d..000000000
--- a/app/views/bubbles/_burst.html.erb
+++ /dev/null
@@ -1,27 +0,0 @@
-<% if bubble.popped? %>
-  <div class="bubble__burst">
-      <svg viewBox="0 0 310.61 281.75" xmlns="http://www.w3.org/2000/svg">
-      <path d="m19.93 272.09c-3.59-10.81-2.95-27.42 3.76-36.86 6.59-9.27 18.97-12.6 30.34-12.3s22.46 3.52 33.78 4.45c3.95.33 8.11.33 11.63-1.48 3.21-1.65 5.42-4.63 8.5-6.44 3.5-2.06 7.95-3.38 11.92-4.12 5.36-1 11.73-.03 16.99 1.16 4.8 1.09 10.23 2.73 14.31 0 2.29-1.54 3.59-4.15 4.67-6.69 1.68-3.96 1.08-9.09 1.64-13.37.71-5.41 1.79-10.77 3.23-16.04 1.16-4.23 2.86-8.78 6.71-10.87 4.16-2.26 9.25-.84 13.88.12s10.32 1.03 13.12-2.79c2.71-3.69 1.17-8.86-.47-13.14-2.06-5.39-4.13-10.79-6.19-16.18-1.42-3.72-2.86-7.83-1.53-11.59 1.74-4.91 7.61-7.14 12.81-7.01 5.68.15 11.09 2.33 16.65 3.51s11.91 1.17 16.29-2.46c7.85-6.49 4.22-17.56 6.02-26.19 1.44-6.91 3.74-14.37 6.72-20.82 6.38-13.79 17.13-24.98 28.27-35.07 5.49-5.16 13.69-10.19 21.22-7.22 5.82 2.17 8.96 9.87 10.6 16.13 5.62 22.06 9.09 44.93 1.11 66.37-20.23 50.47-56.78 95.13-102.65 123.97-46.23 27.85-101.79 42.33-155.42 44.54-7.71.01-16.83.89-23.61-3.63-2.13-1.42-3.5-3.54-4.31-5.98z" fill="var(--color-bg)"/>
-      <g stroke="var(--bubble-color)" stroke-miterlimit="10" stroke-width="var(--bubble-border-width)">
-          <circle cx="109.95" cy="235.27" fill="var(--color-bg)" r="15.98"/>
-          <circle cx="159.65" cy="148.41" fill="none" r="15.53"/>
-          <circle cx="205.67" cy="113.68" fill="none" r="11.29"/>
-          <circle cx="200.45" cy="216.88" fill="var(--color-bg)" r="12.28"/>
-          <circle cx="69.15" cy="187.8" fill="none" r="11.44"/>
-          <circle cx="103.6" cy="205.59" fill="var(--color-bg)" r="6.35"/>
-          <circle cx="64.07" cy="232.27" fill="var(--color-bg)" r="6.35"/>
-          <circle cx="153.29" cy="219.28" fill="var(--color-bg)" r="6.35"/>
-          <circle cx="261.43" cy="128.79" fill="var(--color-bg)" r="10.02"/>
-          <circle cx="222.19" cy="140.93" fill="var(--color-bg)" r="5.22"/>
-          <circle cx="236.73" cy="187.8" fill="var(--color-bg)" r="5.22"/>
-          <circle cx="292.7" cy="61.47" fill="var(--color-bg)" r="5.22"/>
-          <circle cx="252.54" cy="61.47" fill="none" r="15.81"/>
-          <circle cx="292.7" cy="88.64" fill="var(--color-bg)" r="11.36"/>
-          <path d="m8.82 270.88c-3.15-8.15-.94-17.54 3.37-25.14s10.52-13.91 16.08-20.65c12-14.53 16.58-33.26 20.22-51.43.84-4.17 1.59-8.42 3.48-12.24 4.88-9.87 17.2-14.91 27.98-12.64s19.6 10.92 23.56 21.2c2.26 5.87 3.12 12.28 6.03 17.87s8.87 10.38 15.03 9.11c6.49-1.34 10.06-8.97 9.26-15.55s-4.75-12.3-8.56-17.73-7.72-11.18-8.43-17.78c-.99-9.28 4.93-18.37 12.98-23.09s17.82-5.68 27.12-4.9c6.21.52 13.48 1.4 17.73-3.15 5.15-5.52 1.88-14.38 2.65-21.89 1.32-12.95 15.25-21.16 28.21-22.37 2.29-.21 4.65-.29 6.78-1.16 6.09-2.48 8.01-10.2 7.84-16.78s-1.52-13.51 1.23-19.49c4.42-9.63 17.06-12.01 27.62-11.13s21.63 3.68 31.42-.37" fill="none"/>
-          <circle cx="288.05" cy="19.59" fill="var(--color-bg)" r="16.59"/>
-          <circle cx="18.98" cy="262.62" fill="var(--color-bg)" r="15.98"/>
-          <circle cx="205.67" cy="67.25" fill="var(--color-bg)" r="10.02"/>
-      </g>
-      </svg>
-  </div>
-<% end %>
\ No newline at end of file
diff --git a/app/views/bubbles/list/_bubble.html.erb b/app/views/bubbles/list/_bubble.html.erb
index bd49a7d11..6e066608b 100644
--- a/app/views/bubbles/list/_bubble.html.erb
+++ b/app/views/bubbles/list/_bubble.html.erb
@@ -1,4 +1,4 @@
-<li class="<%= class_names("flex align-center gap-half margin-none", drafted: bubble.drafted?) %>" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>"
+<li class="<%= class_names("flex align-center gap-half margin-none", drafted: bubble.drafted?, popped: bubble.popped?) %>" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>"
     data-controller="animation" data-animation-play-class="bubble--wobble" data-animation-play-on-load-value="true" data-action="mouseover->animation#play">
   <%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "flex-item-no-shrink" do %>
     <div class="bubble__shape flex-item-no-shrink"></div>