fix: Improve mobile layout for flashcards, splitting action rows
All checks were successful
Automated Container Build / build-and-push (push) Successful in 52s
All checks were successful
Automated Container Build / build-and-push (push) Successful in 52s
This commit is contained in:
parent
2457bfcb39
commit
454db7fb1d
3 changed files with 126 additions and 88 deletions
|
|
@ -110,7 +110,7 @@ export default function DeckStudyPage() {
|
|||
</div>
|
||||
|
||||
{/* View toggle & Share */}
|
||||
<div className="flex items-center gap-2 md:gap-4">
|
||||
<div className="flex items-center justify-between w-full md:w-auto gap-2 md:gap-4 self-end md:self-auto">
|
||||
{view === "study" && (
|
||||
<button
|
||||
onClick={handleRestart}
|
||||
|
|
@ -122,29 +122,32 @@ export default function DeckStudyPage() {
|
|||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<ShareMenu targetType="DECK" contentId={deck.id} classSlug={classSlug} />
|
||||
|
||||
<div className="flex bg-bg-surface-alt rounded-lg p-0.5 border border-border-light">
|
||||
<button
|
||||
onClick={() => setView("study")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
|
||||
view === "study"
|
||||
? "bg-bg-surface text-text-heading shadow-sm"
|
||||
: "text-text-muted hover:text-text-heading"
|
||||
}`}
|
||||
>
|
||||
Study
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setView("manage")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
|
||||
view === "manage"
|
||||
? "bg-bg-surface text-text-heading shadow-sm"
|
||||
: "text-text-muted hover:text-text-heading"
|
||||
}`}
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
<div className="flex items-center gap-2 md:gap-4 ml-auto">
|
||||
<ShareMenu targetType="DECK" contentId={deck.id} classSlug={classSlug} />
|
||||
|
||||
<div className="flex bg-bg-surface-alt rounded-lg p-0.5 border border-border-light">
|
||||
<button
|
||||
onClick={() => setView("study")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
|
||||
view === "study"
|
||||
? "bg-bg-surface text-text-heading shadow-sm"
|
||||
: "text-text-muted hover:text-text-heading"
|
||||
}`}
|
||||
>
|
||||
Study
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setView("manage")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
|
||||
view === "manage"
|
||||
? "bg-bg-surface text-text-heading shadow-sm"
|
||||
: "text-text-muted hover:text-text-heading"
|
||||
}`}
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export function SharedViewer({ type, data }: SharedViewerProps) {
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 md:gap-4 self-end md:self-auto">
|
||||
<div className="flex items-center justify-between w-full md:w-auto gap-2 md:gap-4 self-end md:self-auto">
|
||||
{view === "study" && (
|
||||
<button
|
||||
onClick={() => setRestartKey(k => k + 1)}
|
||||
|
|
@ -75,30 +75,32 @@ export function SharedViewer({ type, data }: SharedViewerProps) {
|
|||
</button>
|
||||
)}
|
||||
|
||||
{type === "flashcards" && (
|
||||
<div className="flex bg-bg-surface-alt rounded-lg p-0.5 border border-border-light">
|
||||
<button
|
||||
onClick={() => setView("study")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
|
||||
view === "study"
|
||||
? "bg-bg-surface text-text-heading shadow-sm"
|
||||
: "text-text-muted hover:text-text-heading"
|
||||
}`}
|
||||
>
|
||||
Study
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setView("list")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
|
||||
view === "list"
|
||||
? "bg-bg-surface text-text-heading shadow-sm"
|
||||
: "text-text-muted hover:text-text-heading"
|
||||
}`}
|
||||
>
|
||||
List
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2 md:gap-4 ml-auto">
|
||||
{type === "flashcards" && (
|
||||
<div className="flex bg-bg-surface-alt rounded-lg p-0.5 border border-border-light">
|
||||
<button
|
||||
onClick={() => setView("study")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
|
||||
view === "study"
|
||||
? "bg-bg-surface text-text-heading shadow-sm"
|
||||
: "text-text-muted hover:text-text-heading"
|
||||
}`}
|
||||
>
|
||||
Study
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setView("list")}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 cursor-pointer ${
|
||||
view === "list"
|
||||
? "bg-bg-surface text-text-heading shadow-sm"
|
||||
: "text-text-muted hover:text-text-heading"
|
||||
}`}
|
||||
>
|
||||
List
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -398,36 +398,15 @@ export function FlashcardViewer({ cards, deckId, isShared = false, initialProgre
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative w-full mt-6">
|
||||
{currentIndex > 0 && (
|
||||
<button
|
||||
onClick={() => {
|
||||
const prevIndex = currentIndex - 1;
|
||||
setCurrentIndex(prevIndex);
|
||||
setIsFlipped(false);
|
||||
setHasFlippedOnce(false);
|
||||
|
||||
const prevId = order[prevIndex];
|
||||
const newResults = { ...results };
|
||||
delete newResults[prevId];
|
||||
setResults(newResults);
|
||||
saveProgress(order, prevIndex, newResults, isShuffled ? "SHUFFLED" : "SEQUENTIAL");
|
||||
}}
|
||||
className="absolute left-0 top-0 p-2 rounded-full text-text-muted hover:bg-bg-surface-alt hover:text-text-heading transition-all duration-200 cursor-pointer z-10"
|
||||
title="Previous Card"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-center gap-4 min-h-[52px]">
|
||||
<div className="w-full mt-6">
|
||||
|
||||
{/* Primary Action Row (Grading) */}
|
||||
<div className="flex items-center justify-center gap-4 min-h-[52px] mb-4 relative z-20">
|
||||
{hasFlippedOnce && (
|
||||
<div className="flex items-center gap-4 animate-fade-in">
|
||||
<div className="flex items-center gap-2 md:gap-4 animate-fade-in">
|
||||
<button
|
||||
onClick={() => gradeCard("missed")}
|
||||
className="flex items-center gap-2 px-6 py-3 rounded-xl border-2 border-error/30 text-error font-medium hover:bg-error-bg transition-all duration-200 cursor-pointer"
|
||||
className="flex items-center gap-2 px-6 py-3 rounded-xl border-2 border-error/30 text-error font-medium hover:bg-error-bg transition-all duration-200 cursor-pointer bg-bg-base/80 backdrop-blur"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
|
|
@ -436,7 +415,7 @@ export function FlashcardViewer({ cards, deckId, isShared = false, initialProgre
|
|||
</button>
|
||||
<button
|
||||
onClick={() => gradeCard("correct")}
|
||||
className="flex items-center gap-2 px-6 py-3 rounded-xl border-2 border-success/30 text-success font-medium hover:bg-success-bg transition-all duration-200 cursor-pointer"
|
||||
className="flex items-center gap-2 px-6 py-3 rounded-xl border-2 border-success/30 text-success font-medium hover:bg-success-bg transition-all duration-200 cursor-pointer bg-bg-base/80 backdrop-blur"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
|
|
@ -447,24 +426,78 @@ export function FlashcardViewer({ cards, deckId, isShared = false, initialProgre
|
|||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={toggleShuffle}
|
||||
className={`absolute right-0 top-1 p-2 rounded-full hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer z-10 ${
|
||||
isShuffled ? "text-primary" : "text-text-muted hover:text-text-heading"
|
||||
}`}
|
||||
title={isShuffled ? "Turn shuffle off" : "Turn shuffle on"}
|
||||
>
|
||||
<svg className={`w-5 h-5 ${isShuffled ? "stroke-[2.5]" : "stroke-2"}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" />
|
||||
</svg>
|
||||
</button>
|
||||
{/* Secondary Action Row (Navigation/Settings) */}
|
||||
<div className={`flex items-center justify-between w-full px-2 transition-all duration-300 relative z-10 ${!hasFlippedOnce ? '-mt-[68px]' : ''}`}>
|
||||
{currentIndex > 0 ? (
|
||||
<button
|
||||
onClick={() => {
|
||||
const prevIndex = currentIndex - 1;
|
||||
setCurrentIndex(prevIndex);
|
||||
setIsFlipped(false);
|
||||
setHasFlippedOnce(false);
|
||||
|
||||
const prevId = order[prevIndex];
|
||||
const newResults = { ...results };
|
||||
delete newResults[prevId];
|
||||
setResults(newResults);
|
||||
saveProgress(order, prevIndex, newResults, isShuffled ? "SHUFFLED" : "SEQUENTIAL");
|
||||
}}
|
||||
className="p-2 rounded-full text-text-muted hover:bg-bg-surface-alt hover:text-text-heading transition-all duration-200 cursor-pointer bg-bg-base/50"
|
||||
title="Previous Card"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
||||
</svg>
|
||||
</button>
|
||||
) : <div className="w-9 h-9" />}
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
if (isShuffled) {
|
||||
const sortedOrder = [...order].sort((a, b) => {
|
||||
const idxA = cards.findIndex(c => c.id === a);
|
||||
const idxB = cards.findIndex(c => c.id === b);
|
||||
return idxA - idxB;
|
||||
});
|
||||
setOrder(sortedOrder);
|
||||
setCurrentIndex(0);
|
||||
setIsFlipped(false);
|
||||
setHasFlippedOnce(false);
|
||||
setResults({});
|
||||
setIsShuffled(false);
|
||||
setToastMessage("Card shuffle off");
|
||||
saveProgress(sortedOrder, 0, {}, "SEQUENTIAL");
|
||||
} else {
|
||||
const remainingCards = order.slice(currentIndex);
|
||||
const shuffledRemaining = [...remainingCards].sort(() => Math.random() - 0.5);
|
||||
const newOrder = [...order.slice(0, currentIndex), ...shuffledRemaining];
|
||||
|
||||
setOrder(newOrder);
|
||||
setIsShuffled(true);
|
||||
setToastMessage("Card shuffle on");
|
||||
saveProgress(newOrder, currentIndex, results, "SHUFFLED");
|
||||
}
|
||||
}}
|
||||
className={`p-2 rounded-full transition-all duration-200 cursor-pointer bg-bg-base/50 ${
|
||||
isShuffled
|
||||
? "text-primary hover:bg-primary/10"
|
||||
: "text-text-muted hover:bg-bg-surface-alt hover:text-text-heading"
|
||||
}`}
|
||||
title={isShuffled ? "Turn off shuffle" : "Shuffle remaining"}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.5 7.5L15 3m4.5 4.5l-4.5 4.5M19.5 7.5h-5.25a6 6 0 00-5.454 3.486m0 0L5.25 21m0 0h-1.5m1.5 0l-3-3m3 3l3-3m11.25-6l-4.5-4.5M19.5 16.5l-4.5 4.5M19.5 16.5h-5.25a6 6 0 01-5.454-3.486m0 0L5.25 3m0 0h-1.5m1.5 0l-3 3m3-3l3 3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-4 text-xs text-text-muted">
|
||||
{hasFlippedOnce
|
||||
? "← Missed · Got It →"
|
||||
: "Space to flip"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue