32 lines
1.4 KiB
Text
32 lines
1.4 KiB
Text
<div class="crayons-card crayons-card--secondary">
|
|
<header class="crayons-card__header">
|
|
<h3 class="crayons-subtitle-3"><%= t("views.badges.heading") %></h3>
|
|
</header>
|
|
|
|
<div class="crayons-card__body">
|
|
<div class="grid gap-4 grid-cols-3 s:grid-cols-4 m:grid-cols-2 align-center items-center js-profile-badges">
|
|
<% achievements.each_with_index do |achievement, i| %>
|
|
<div role="button" onclick="window.Forem.showModal({prompt: true, contentSelector: '#badge-<%= achievement.badge_id %>', overlay: true})"
|
|
title="<%= achievement.badge_title %>"
|
|
class="js-profile-badge <% if i >= limit %>hidden<% end %>">
|
|
<img src="<%= optimized_image_url(achievement.badge_image_url, width: 180) %>"
|
|
alt="<%= achievement.badge_title %>"
|
|
class="mx-auto max-w-75 h-auto align-middle"
|
|
style="transform: rotate(<%= rand(-10..10) %>deg);"
|
|
loading="lazy" />
|
|
</div>
|
|
|
|
<div id="badge-<%= achievement.badge_id %>" class="hidden">
|
|
<%= render partial: "badges/badge_detail", locals: { badge: achievement.badge } %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if limit > 1 && count > limit %>
|
|
<button type="button"
|
|
class="crayons-btn crayons-btn--ghost-brand crayons-btn--s w-100 js-profile-badges-trigger">
|
|
<%= t("views.badges.all", count: count) %>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|