Fixed images on rtl mode

This commit is contained in:
User
2024-12-29 14:40:56 -05:00
parent 2b52f7f15a
commit 3a1d4cc40a
11 changed files with 82 additions and 41 deletions

View File

@@ -1,6 +1,6 @@
import { useState } from 'react';
import { Head, Link, router } from '@inertiajs/react';
import { Plus, Star, ArrowDownNarrowWide, ArrowUpNarrowWide } from 'lucide-react';
import { Plus, Star, ArrowDownNarrowWide, ArrowUpNarrowWide, ChevronsLeft, ChevronsRight } from 'lucide-react';
import AppLayout from '@/Layouts/AppLayout.jsx';
@@ -12,7 +12,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { useToast } from '@/hooks/use-toast';
export default function Chapters({ auth, comic, chapters, histories }) {
export default function Chapters({ auth, comic, chapters, histories, offset }) {
const [group, setGroup] = useState('default');
const [favourites, setFavourites] = useState(auth.user.favourites);
@@ -113,11 +113,13 @@ export default function Chapters({ auth, comic, chapters, histories }) {
</tr>
<tr>
<td className="text-right pr-3">Authors</td>
<td>{ comic.comic.author.map(a => (
<td>
{ comic.comic.author.map(a => (
<Badge key={ a.path_word } className="m-2" variant="outline">
<Link href={ route('comics.author', [a.path_word]) }>{ a.name }</Link>
</Badge>
) ) }</td>
) ) }
</td>
</tr>
<tr>
<td className="text-right pr-3">Description</td>
@@ -125,7 +127,11 @@ export default function Chapters({ auth, comic, chapters, histories }) {
</tr>
<tr>
<td className="text-right pr-3">Updated At</td>
<td>{ comic.comic.datetime_updated }</td>
<td>
<Link href={ route('comics.read', [comic.comic.path_word, comic.comic.last_chapter.uuid])}>
{ comic.comic.datetime_updated } - { comic.comic.last_chapter.name }
</Link>
</td>
</tr>
</tbody>
</table>
@@ -151,9 +157,23 @@ export default function Chapters({ auth, comic, chapters, histories }) {
</div>
<TabsContent value={ group }>
<div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 xl:grid-cols-12 gap-1">
{ (chapters.total > chapters.limit && chapters.offset > 0) && (
<Button size="sm" variant="outline" asChild>
<Link href="?" only={['chapters', 'offset']} headers={{ offset: parseInt(chapters.offset) - chapters.limit }}>
<ChevronsLeft /> Prev
</Link>
</Button>
) }
{ chapters.list.sort((a, b) => ascending ? (a.index - b.index) : (b.index - a.index)).map(c => (
<ComicChapterLink key={ c.uuid } { ...c } />
) ) }
{ (chapters.total > chapters.limit && chapters.offset === 0) && (
<Button size="sm" variant="outline" asChild>
<Link href="?" only={['chapters', 'offset']} headers={{ offset: parseInt(chapters.offset) + chapters.limit }}>
Next <ChevronsRight />
</Link>
</Button>
) }
</div>
</TabsContent>
</Tabs>