use a dl for achievement item list

somiaj · Aug 20, 2024 · d165dfe · d165dfe
1 parent e0cee3a
commit d165dfe
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 30 deletions.
diff --git a/htdocs/js/Achievements/achievements.scss b/htdocs/js/Achievements/achievements.scss
@@ -24,11 +24,6 @@
 	background-color: var(--ww-achievement-level-color, #88d);
 }
 
-.cheevoouterbox img {
-	height: 50px;
-	width: 50px;
-}
-
 .locked {
 	opacity: 0.65;
 
@@ -69,16 +64,3 @@
 		font-weight: bold;
 	}
 }
-
-.achievement-item {
-	margin-bottom: 15px;
-	margin-left: 15px;
-
-	h3 {
-		line-height: 15px;
-		font-size: 15px;
-		margin-bottom: 5px;
-		margin-top: 2px;
-		font-weight: bold;
-	}
-}
diff --git a/templates/ContentGenerator/Achievements/achievement_badges.html.ep b/templates/ContentGenerator/Achievements/achievement_badges.html.ep
@@ -10,12 +10,13 @@
 		% $previousCategory = $achievement->category;
 		%
 		% my $userAchievement = $userAchievements->{$achievement->achievement_id};
-		<div class="cheevoouterbox d-flex justify-content-start align-items-center mb-3 <%=
+		<div class="d-flex justify-content-start align-items-center mb-3 mx-4 <%=
 			$userAchievement->earned ? 'unlocked' : 'locked' %>">
 			<div>
 				<%= image $achievement->{icon}
 					? "$ce->{courseURLs}{achievements}/$achievement->{icon}"
 					: "$ce->{webworkURLs}{htdocs}/images/defaulticon.png",
+					width => 50,
 					alt => $userAchievement->earned ? 'Achievement Earned' : 'Achievement Unearned' =%>
 			</div>
 			<div class="ms-3">

diff --git a/templates/ContentGenerator/Achievements/achievement_items.html.ep b/templates/ContentGenerator/Achievements/achievement_items.html.ep
@@ -3,22 +3,26 @@
 % # Show any items the user may have.
 <h2 class="my-3"><%= maketext('Rewards') %></h2>
 % if (@$items) {
+	<dl class="mx-4">
 	% my $itemNumber = 0;
 	% for my $item (@$items) {
-		<div class="achievement-item">
-			% # Show each item's name, count, and description
+		% # Show each item's name, description, and reusability
+		<dt class="fs-4">
+			<%= maketext($item->name) %>
+		</dt>
+		<dd class="mb-4">
+			<p class="mb-1"><%= maketext($item->description) %></p>
+			% my $form = $item->print_form($sets, $setProblemIds, $c);
+			% # Print a modal popup for each item which contains the form necessary to get the data to use the item.
+			% my $button_text;
 			% if ($itemCounts->{ $item->id } > 1) {
-				<h3><%= maketext($item->name)
-					. ' (' . maketext('[_1] remaining', $itemCounts->{ $item->id }) . ')' %></h3>
+				% $button_text = maketext('[_1] ([_2] remaining)', maketext($item->name), $itemCounts->{ $item->id });
 			% } elsif ($itemCounts->{ $item->id } < 0) {
-				<h3><%= maketext($item->name) . ' (' . maketext('unlimited reusability') . ')' %></h3>
+				% $button_text = maketext('[_1] (unlimited reusability)', maketext($item->name));
 			% } else {
-				<h3><%= maketext($item->name) %></h3>
+				% $button_text = maketext($item->name);
 			% }
-			<p><%= maketext($item->description) %></p>
-			% my $form = $item->print_form($sets, $setProblemIds, $c);
-			% # Print a modal popup for each item which contains the form necessary to get the data to use the item.
-			<%= link_to maketext('Use Reward') => '#modal_' . $item->id,
+			<%= link_to maketext('Use [_1]', $button_text) => '#modal_' . $item->id,
 					role  => 'button',
 					class => 'btn btn-secondary' . ($form ? '' : ' disabled'),
 					id    => 'popup_' . $item->id,
@@ -47,9 +51,10 @@
 					</div>
 				</div>
 			% }
-		</div>
+		</dd>
 		% $itemNumber++;
 	% }
+	</dl>
 % } else {
 	<p><%= maketext(q{You don't have any rewards!}) %></p>
 % }