Skip to content

Added interactions to all the three cards #944

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
withinJoel wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added interactions to all the three cards #944

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e53941c
Added interactions to all the three cards
withinJoel Feb 23, 2026
7ca53fd
Enhance quiz card styles with focus states
withinJoel Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions web/templates/web/quiz/quiz_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Quizzes</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left column - My Quizzes -->
<div class="lg:col-span-1">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden
transition duration-300 hover:-translate-y-1 hover:shadow-2xl
focus-within:-translate-y-1 focus-within:shadow-2xl">
Comment on lines +27 to +29
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Translate animation is not gated on prefers-reduced-motion.

The hover:-translate-y-1 and focus-within:-translate-y-1 transforms are applied unconditionally. Users who have enabled the OS-level "reduce motion" preference will still see the lift animation. Tailwind's motion-safe: prefix gates these transforms only when the user has not requested reduced motion, keeping the shadow-only effect as the fallback.

♻️ Proposed fix (same pattern for all three cards) 
-                    transition duration-300 hover:-translate-y-1 hover:shadow-2xl
-                    focus-within:-translate-y-1 focus-within:shadow-2xl">
+                    transition duration-300 motion-safe:hover:-translate-y-1 hover:shadow-2xl
+                    motion-safe:focus-within:-translate-y-1 focus-within:shadow-2xl">

Also applies to: 77-79, 120-122

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@web/templates/web/quiz/quiz_list.html` around lines 27 - 29, The card
transform classes (hover:-translate-y-1 and focus-within:-translate-y-1) are
applied unconditionally; update the card container class strings (the div with
classes starting "bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden
...") to prefix those transform utilities with Tailwind's motion-safe: so use
motion-safe:hover:-translate-y-1 and motion-safe:focus-within:-translate-y-1
(apply the same change to the other two card blocks with the identical class
pattern).

⚠️ Potential issue | 🟡 Minor

Card 1 is missing h-full, causing potential height inconsistency with the other two cards.

Cards 2 (line 78) and 3 (line 121) both include h-full, but the My Quizzes card does not. In a CSS grid with align-items: stretch (the default), the inner card <div> needs h-full to fill the full row height when sibling cells are taller. Without it, this card may visually appear shorter when the other columns contain more quiz entries.

🐛 Proposed fix 
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden 
-                    transition duration-300 hover:-translate-y-1 hover:shadow-2xl
-                    focus-within:-translate-y-1 focus-within:shadow-2xl">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden
+                    h-full transition duration-300 hover:-translate-y-1 hover:shadow-2xl
+                    focus-within:-translate-y-1 focus-within:shadow-2xl">
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@web/templates/web/quiz/quiz_list.html` around lines 27 - 29, The "My Quizzes"
card's outer div (the element starting with class "bg-white dark:bg-gray-800
rounded-lg shadow-lg overflow-hidden transition...") is missing the h-full
utility, causing inconsistent heights with the other cards; update that div's
class list to include "h-full" so it stretches to match sibling cards (same fix
applied for the card elements on lines where Cards 2 and 3 already use h-full).

<div class="bg-teal-600 p-4">
<h2 class="text-xl font-bold text-white flex items-center">
<i class="fas fa-book mr-2"></i> My Quizzes
Expand Down Expand Up @@ -72,7 +74,9 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-1">{{ quiz.tit
</div>
<!-- Middle column - Shared Quizzes -->
<div class="lg:col-span-1">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden
h-full transition duration-300 hover:-translate-y-1 hover:shadow-2xl
focus-within:-translate-y-1 focus-within:shadow-2xl">
<div class="bg-blue-600 p-4">
<h2 class="text-xl font-bold text-white flex items-center">
<i class="fas fa-share-alt mr-2"></i> Shared With Me
Expand Down Expand Up @@ -113,7 +117,9 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-1">{{ quiz.tit
</div>
<!-- Right column - Public Quizzes -->
<div class="lg:col-span-1">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden
h-full transition duration-300 hover:-translate-y-1 hover:shadow-2xl
focus-within:-translate-y-1 focus-within:shadow-2xl">
<div class="bg-purple-600 p-4">
<h2 class="text-xl font-bold text-white flex items-center">
<i class="fas fa-globe mr-2"></i> Public Quizzes
Expand Down