lucasrcsantana/story-generator
1
0
Fork 0
mirror of https://github.com/lucasrcsantana/story-generator.git synced 2025-12-18 14:27: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> <h1 className="text-2xl font-bold text-gray-900">{story?.title}</h1>
</div> </div>
{/* Container de duas colunas */} {/* Container responsivo */}
<div className="grid grid-cols-10 gap-6 border-b border-gray-200 pb-6"> <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%) */} {/* 3. Texto da História - Coluna Esquerda (40% em desktop) */}
<div className="col-span-4"> <div className="col-span-1 md:col-span-4">
<div <div
className="prose max-w-none overflow-hidden" className="prose max-w-none overflow-hidden"
style={{ style={{
@ -871,9 +871,9 @@ export function StoryPage() {
</div> </div>
</div> </div>
{/* 5. Imagem da História - Coluna Direita (60%) */} {/* 5. Imagem da História - Coluna Direita (60% em desktop) */}
{!focusMode.isActive && ( {!focusMode.isActive && (
<div className="col-span-6"> <div className="col-span-1 md:col-span-6">
{story?.content?.pages?.[currentPage]?.image ? ( {story?.content?.pages?.[currentPage]?.image ? (
<ImageWithLoading <ImageWithLoading
src={story.content.pages[currentPage].image} src={story.content.pages[currentPage].image}
@ -891,26 +891,28 @@ export function StoryPage() {
{/* 4. Controles de Navegação */} {/* 4. Controles de Navegação */}
<div className="border-b border-gray-200 pb-6"> <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 <button
onClick={() => setCurrentPage(prev => prev - 1)} onClick={() => setCurrentPage(prev => prev - 1)}
disabled={currentPage === 0} 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" /> <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> </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} Página {currentPage + 1} de {story?.content?.pages?.length}
</span> </span>
<button <button
onClick={() => setCurrentPage(prev => prev + 1)} onClick={() => setCurrentPage(prev => prev + 1)}
disabled={currentPage === (story?.content?.pages?.length ?? 0) - 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" /> <ArrowRight className="h-5 w-5" />
</button> </button>
</div> </div>