Elijah/Study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix: Improve mobile layout for flashcards, splitting action rows
All checks were successful
Automated Container Build / build-and-push (push) Successful in 52s
Details

Browse source
This commit is contained in:
Elijah 2026-06-28 12:43:32 -07:00
parent 2457bfcb39
commit 454db7fb1d
3 changed files with 126 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/app/(protected)/[classSlug]/flashcards/[deckId]/page.tsx
View file

@ -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>

52
src/app/shared/[classSlug]/[type]/[token]/SharedViewer.tsx
View file

@ -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>