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

Duh! We can just do this with CSS

Browse Source
This commit is contained in:
Jason Zimdars
2024-09-20 15:51:19 -05:00
parent a356a2f0c0
commit 3e4a469dcb
3 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/bubbles.css
+14
View File
@@ -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;
app/views/bubbles/index.html.erb
+2 -4
View File
@@ -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">
app/views/projects/index.html.erb
+1 -1
View File
@@ -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" />