From 3e4a469dcbd4fa16d4c441b3312a793f8ac7cfa1 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 20 Sep 2024 15:51:19 -0500
Subject: [PATCH] Duh! We can just do this with CSS

---
 app/assets/stylesheets/bubbles.css | 14 ++++++++++++++
 app/views/bubbles/index.html.erb   |  6 ++----
 app/views/projects/index.html.erb  |  2 +-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index c5129a6b9..de5355c49 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -8,6 +8,9 @@
 }
 
 .windshield {
+  --column-gap: 1cqi;
+  --row-gap: 1cqi;
+
   margin-block: clamp(var(--block-space), 3%, calc(var(--block-space) * 2));
 
   > * {
@@ -29,6 +32,17 @@
   position: relative;
   transition: all 0.2s ease;
 
+  &:nth-child(1)  { order: 5; }
+  &:nth-child(2)  { order: 3; }
+  &:nth-child(3)  { order: 3; }
+  &:nth-child(4)  { order: 7; }
+  &:nth-child(5)  { order: 9; }
+  &:nth-child(6)  { order: 5; }
+  &:nth-child(7)  { order: 4; }
+  &:nth-child(8)  { order: 9; }
+  &:nth-child(9)  { order: 3; }
+  &:nth-child(10) { order: 7; }
+
   .windshield & {
     animation: float-up-left 400ms normal forwards ease-out;
 
diff --git a/app/views/bubbles/index.html.erb b/app/views/bubbles/index.html.erb
index 7f36d4e6b..0721a998d 100644
--- a/app/views/bubbles/index.html.erb
+++ b/app/views/bubbles/index.html.erb
@@ -27,10 +27,8 @@
   </nav>
 <% end %>
 
-<section class="windshield flex-inline flex-wrap gap-half justify-center align-end" style="view-transition-name: windshield_<%= @project.id %>">
-  <% cache([@most_active_bubbles, 'stable_shuffle']) do %>
-    <%= render @most_active_bubbles.sort_by { |bubble| Digest::MD5.hexdigest("#{bubble.id}#{@most_active_bubbles.cache_key}") } %>
-  <% end %>
+<section class="windshield flex-inline flex-wrap gap justify-center align-end" style="view-transition-name: windshield_<%= @project.id %>">
+  <%= render @most_active_bubbles %>
 </section>
 
 <section class="bubbles-list unpad-inline center margin-block-start">
diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb
index 5ae73d9d2..bff0ebb6f 100644
--- a/app/views/projects/index.html.erb
+++ b/app/views/projects/index.html.erb
@@ -18,7 +18,7 @@
   <% @projects.each do |project| %>
     <li class="project flex flex-column txt-align-center gap-half max-width">
       <div class="project__windshield position-relative flex flex-wrap gap justify-center align-center border-radius border"  style="view-transition-name: windshield_<%= project.id %>">
-        <% project.bubbles.left_joins(:comments, :boosts).group(:id).order(Arel.sql("COUNT(comments.id) + COUNT(boosts.id) DESC")).limit(10).shuffle.each do |bubble| %>
+        <% project.bubbles.left_joins(:comments, :boosts).group(:id).order(Arel.sql("COUNT(comments.id) + COUNT(boosts.id) DESC")).limit(10).each do |bubble| %>
           <div class="bubble" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %> <%= bubble_size(bubble) %>">
             <svg class="bubble__svg" style="fill: <%= bubble.color %>; stroke: <%= bubble.color %>;" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg">
               <path d="m0 0h990v990h-990z" fill="none" stroke="none" />