Popped effect
This commit is contained in:
Jason Zimdars
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h24v24h-24z"/></clipPath><g clip-path="url(#a)"><path d="m1.5 10.5h1.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5zm9-9c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5v1.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5zm12 12h-1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5h1.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5zm-9 9c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5v-1.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5zm-7.9-19 1.1 1.1c.6.6.6 1.5 0 2.1s-1.5.6-2.1 0l-1.1-1.1c-.6-.6-.6-1.5 0-2.1s1.5-.6 2.1 0zm12.8 0c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1l-1.1 1.1c-.6.6-1.5.6-2.1 0s-.6-1.5 0-2.1zm0 17-1.1-1.1c-.6-.6-.6-1.5 0-2.1s1.5-.6 2.1 0l1.1 1.1c.6.6.6 1.5 0 2.1s-1.5.6-2.1 0zm-12.8 0c-.6.6-1.5.6-2.1 0s-.6-1.5 0-2.1l1.1-1.1c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1z" fill-rule="evenodd"/></g></svg>
|
||||
|
After Width: | Height: | Size: 894 B |
@@ -8,17 +8,41 @@
|
||||
<% end %>
|
||||
</h1>
|
||||
|
||||
<svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 0h990v990h-990z" fill="none" stroke="none" />
|
||||
<path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/>
|
||||
</svg>
|
||||
<% if bubble.popped? %>
|
||||
<svg viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 0h990v990h-990z" fill="none"/>
|
||||
<path d="m.6.6h990v990h-990z" fill="none"/>
|
||||
<g fill-rule="evenodd" fill="<%= bubble.color %>">
|
||||
<path d="m447.5 61.1c-.5-17.6 13.8-33.4 30.8-34 17-.5 32.3 14.4 32.8 32l1 33c.5 17.6-13.8 33.4-30.8 34-17 .5-32.3-14.4-32.8-32z"/>
|
||||
<path d="m598.7 76.1c7.5-15.9 27.5-23.5 42.9-16.2s22.2 27.5 14.7 43.4l-14.1 29.8c-7.5 15.9-27.5 23.5-42.9 16.2-15.3-7.2-22.2-27.5-14.7-43.4z"/>
|
||||
<path d="m729.1 152.5c10.3-14.3 31.3-18.1 45.1-8.2s16.8 31.1 6.6 45.4l-19.3 26.8c-10.3 14.3-31.3 18.1-45.1 8.2s-16.8-31.1-6.6-45.4z"/>
|
||||
<path d="m843.6 248.5c13.5-11.3 34.8-9.8 45.7 3.3s8.6 34.3-4.9 45.6l-25.3 21.2c-13.5 11.3-34.8 9.8-45.7-3.3s-8.6-34.3 4.9-45.6z"/>
|
||||
<path d="m936.2 380.1c16.8-5.1 35.9 4.6 40.8 20.9 4.9 16.2-5.5 34.9-22.4 40l-31.6 9.6c-16.8 5.1-35.9-4.6-40.8-20.9-4.9-16.2 5.5-34.9 22.4-40z"/>
|
||||
<path d="m952.2 530.1c17.6-.4 33.3 14.1 33.7 31s-14.7 32.2-32.3 32.6l-33 .8c-17.6.4-33.3-14.1-33.7-31-.4-17 14.7-32.2 32.3-32.6z"/>
|
||||
<path d="m900.2 720.6c-15.6-8.2-22.3-28.5-14.4-43.5s28.5-21 44-12.8l29.2 15.4c15.6 8.2 22.3 28.5 14.4 43.5s-28.5 21-44 12.8z"/>
|
||||
<path d="m783.8 801.8c-9.2-15-4.7-35.9 9.7-44.8s35.2-3.6 44.4 11.4l17.3 28.1c9.2 15 4.7 35.9-9.7 44.8s-35.2 3.6-44.4-11.4z"/>
|
||||
<path d="m648.2 846.4c-7.1-16.1.3-36.2 15.8-43s35.3 1.3 42.4 17.4l13.3 30.2c7.1 16.1-.3 36.2-15.8 43s-35.3-1.3-42.4-17.4z"/>
|
||||
<path d="m358.1 864.1c2.7-17.4 19.7-30.3 36.5-27.7s29.1 20.1 26.3 37.5l-5.1 32.6c-2.7 17.4-19.7 30.3-36.5 27.7s-29.1-20.1-26.3-37.5z"/>
|
||||
<path d="m229.9 795.5c8-15.7 28.3-22.6 43.4-14.9s21.3 28.2 13.2 43.9l-15.1 29.4c-8 15.7-28.3 22.6-43.4 14.9s-21.3-28.2-13.2-43.9z"/>
|
||||
<path d="m140.3 690.3c14.1-10.5 35.3-7.9 45.5 5.7s6.7 34.7-7.4 45.2l-26.4 19.8c-14.1 10.5-35.3 7.9-45.5-5.7s-6.7-34.7 7.4-45.2z"/>
|
||||
<path d="m100 547.5c16-7.4 36.2-.5 43.4 14.9s-.5 35.3-16.5 42.8l-29.9 13.9c-16 7.4-36.2.5-43.4-14.9s.5-35.3 16.5-42.8z"/>
|
||||
<path d="m115 409c17.6 0 33 14.8 33 31.8s-15.4 31.8-33 31.8h-33c-17.6 0-33-14.8-33-31.8s15.4-31.8 33-31.8z"/>
|
||||
<path d="m107.9 318c-15.3-8.7-21.4-29.2-13-43.9 8.4-14.8 29.1-20.1 44.4-11.4l28.7 16.3c15.3 8.7 21.4 29.2 13 43.9-8.4 14.8-29.1 20.1-44.4 11.4z"/>
|
||||
<path d="m183.7 182.7c-11-13.7-9.1-35 4.1-45.7 13.2-10.6 34.4-7.9 45.5 5.8l20.7 25.7c11 13.7 9.1 35-4.1 45.7s-34.4 7.9-45.5-5.8z"/>
|
||||
<path d="m305.9 85.7c-3.9-17.2 7.3-35.5 23.8-39.2 16.6-3.7 34.4 8.1 38.3 25.2l7.2 32.2c3.9 17.2-7.3 35.5-23.8 39.2-16.6 3.7-34.4-8.1-38.3-25.2z"/>
|
||||
<path d="m504.4 876.2c-3.9-17.2 7.3-35.5 23.8-39.2 16.6-3.7 34.4 8.1 38.3 25.2l7.2 32.2c3.9 17.2-7.3 35.5-23.8 39.2-16.6 3.7-34.4-8.1-38.3-25.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<% else %>
|
||||
<svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 0h990v990h-990z" fill="none" stroke="none" />
|
||||
<path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/>
|
||||
</svg>
|
||||
<% end %>
|
||||
|
||||
<%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__link" do %>
|
||||
<span class="for-screen-reader"><%= bubble.title %></span>
|
||||
<% end %>
|
||||
<% if bubble.popped? %>
|
||||
<span class="bubble__popped">POPPED!</span>
|
||||
<% end %>
|
||||
|
||||
<%= render "bubbles/assignments", bubble: bubble %>
|
||||
<%= render "bubbles/boosts", bubble: bubble %>
|
||||
|
||||
@@ -6,7 +6,19 @@
|
||||
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span class="for-screen-reader">All Bubbles</span>
|
||||
<% end %>
|
||||
</nav>
|
||||
|
||||
<% if @bubble.popped? %>
|
||||
<%= button_to bucket_bubble_pop_path(@bubble.bucket, @bubble), method: :delete, class: "btn" do %>
|
||||
<%= image_tag "pop.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span>Un-pop</span>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= button_to bucket_bubble_pop_path(@bubble.bucket, @bubble), class: "btn" do %>
|
||||
<%= image_tag "pop.svg", aria: { hidden: true }, size: 24 %>
|
||||
<span>Pop</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</nav>
|
||||
<% end %>
|
||||
|
||||
<div class="bubble__perma flex justify-center center margin-block-end-double">
|
||||
@@ -17,11 +29,3 @@
|
||||
<%= render_comments_and_boosts(@bubble) %>
|
||||
<%= render "comments/new", bubble: @bubble %>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<% if @bubble.popped? %>
|
||||
<%= button_to "Restore", bucket_bubble_pop_path(@bubble.bucket, @bubble), method: :delete, class: "btn" %>
|
||||
<% else %>
|
||||
<%= button_to "Pop", bucket_bubble_pop_path(@bubble.bucket, @bubble), class: "btn" %>
|
||||
<% end %>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user