021213b841
* new badge display * fix cypress * fix cypress * Fit grid to exact number * change point at which badges shown on profile header to 7 * remove accidentally added objects * remove accidentally added objects --------- Co-authored-by: Ben Halpern <bendhalpern@gmail.com>
37 lines
1.9 KiB
Text
37 lines
1.9 KiB
Text
<div class="crayons-card crayons-card--secondary">
|
|
<% if defined?(show_heading) ? show_heading : true %>
|
|
<header class="crayons-card__header">
|
|
<h3 class="crayons-subtitle-3"><%= t("views.badges.heading") %></h3>
|
|
</header>
|
|
<% end %>
|
|
|
|
<div class="crayons-card__body">
|
|
<% grid_class ||= "grid-cols-3 s:grid-cols-4 m:grid-cols-2" %>
|
|
<div class="grid gap-4 <%= grid_class %> align-center items-center js-profile-badges">
|
|
<% grouped_badges.each_with_index do |(badge_id, badge_achievements), i| %>
|
|
<% achievement = badge_achievements.first %>
|
|
<div role="button" onclick="window.Forem.showModal({size: 'medium', showHeader: false, contentSelector: '#badge-<%= achievement.badge_id %>', overlay: true})"
|
|
title="<%= achievement.badge_title %>"
|
|
class="js-profile-badge <% if i >= limit %>hidden<% end %> relative">
|
|
<img src="<%= optimized_image_url(achievement.badge_image_url, width: 180) %>"
|
|
alt="<%= achievement.badge_title %>"
|
|
class="mx-auto w-75 h-auto align-middle"
|
|
style="object-fit: contain; cursor: pointer; width: 100%; aspect-ratio: 1 / 1; max-width: 80px;"
|
|
loading="lazy" />
|
|
<% if badge_achievements.length > 1 %><div class="badge-indicator" title="<%= t("views.badges.indicator", user: @user.name, number: badge_achievements.length) %>"><%= badge_achievements.length %></div><% end %>
|
|
</div>
|
|
|
|
<div id="badge-<%= achievement.badge_id %>" class="hidden">
|
|
<%= render partial: "badges/badge_detail", locals: { badge: achievement.badge } %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% if limit > 1 && grouped_badges.size > limit %>
|
|
<button type="button"
|
|
class="crayons-btn crayons-btn--ghost-brand crayons-btn--s w-100 mt-3 js-profile-badges-trigger">
|
|
<%= t("views.badges.all", count: count) %>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|