lucasrcsantana/story-generator
1
0
Fork 0
mirror of https://github.com/lucasrcsantana/story-generator.git synced 2025-12-16 21:37:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Ajustando visualização da página de leitura de história

Browse Source
This commit is contained in:
Lucas Santana 2025-01-29 14:22:35 -03:00
parent e81dc5bedf
commit 9f7ea648fe
1 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/student-dashboard/StoryPage.tsx
View File

@ -854,10 +854,10 @@ export function StoryPage() {
<h1 className="text-2xl font-bold text-gray-900">{story?.title}</h1>
</div>
{/* Container de duas colunas */}
<div className="grid grid-cols-10 gap-6 border-b border-gray-200 pb-6">
{/* 3. Texto da História - Coluna Esquerda (40%) */}
<div className="col-span-4">
{/* Container responsivo */}
<div className="grid grid-cols-1 md:grid-cols-10 gap-6 border-b border-gray-200 pb-6">
{/* 3. Texto da História - Coluna Esquerda (40% em desktop) */}
<div className="col-span-1 md:col-span-4">
<div
className="prose max-w-none overflow-hidden"
style={{
@ -871,9 +871,9 @@ export function StoryPage() {
</div>
</div>
{/* 5. Imagem da História - Coluna Direita (60%) */}
{/* 5. Imagem da História - Coluna Direita (60% em desktop) */}
{!focusMode.isActive && (
<div className="col-span-6">
<div className="col-span-1 md:col-span-6">
{story?.content?.pages?.[currentPage]?.image ? (
<ImageWithLoading
src={story.content.pages[currentPage].image}
@ -891,26 +891,28 @@ export function StoryPage() {
{/* 4. Controles de Navegação */}
<div className="border-b border-gray-200 pb-6">
<div className="flex justify-between items-center">
<div className="flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-2">
<button
onClick={() => setCurrentPage(prev => prev - 1)}
disabled={currentPage === 0}
className="flex items-center gap-2 px-4 py-2 text-purple-600 border border-purple-600 rounded-md hover:bg-purple-50 disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2 text-purple-600 border border-purple-600 rounded-md hover:bg-purple-50 disabled:opacity-50 disabled:cursor-not-allowed"
>
<ArrowLeft className="h-5 w-5" />
Página Anterior
<span className="hidden sm:inline">Página Anterior</span>
<span className="sm:hidden">Anterior</span>
</button>
<span className="text-sm text-gray-500">
<span className="text-sm text-gray-500 order-first sm:order-none">
Página {currentPage + 1} de {story?.content?.pages?.length}
</span>
<button
onClick={() => setCurrentPage(prev => prev + 1)}
disabled={currentPage === (story?.content?.pages?.length ?? 0) - 1}
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full sm:w-auto flex items-center justify-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
Próxima Página
<span className="hidden sm:inline">Próxima Página</span>
<span className="sm:hidden">Próxima</span>
<ArrowRight className="h-5 w-5" />
</button>
</div>