turkey/cv4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed images on rtl mode

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

30
resources/js/Pages/Comic/Chapters.jsx
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>

2
resources/js/Pages/Comic/Histories.jsx
View File

@@ -97,7 +97,7 @@ export default function Histories({ auth, histories }) {
{ h.comic.name }
</Link>
</TableCell>
<TableCell className="hidden lg:block">{ datetimeConversion(h.created_at) }</TableCell>
<TableCell className="hidden lg:block">{ datetimeConversion(h.read_at) }</TableCell>
</TableRow>
)) }
</TableBody>

2
resources/js/Pages/Comic/Index.jsx
View File

@@ -43,7 +43,7 @@ export default function Index({ comics, offset, auth }) {
<CardContent>
<CardTitle><Link href={ `/comic/${ props.path_word }` }>{ props.name }</Link></CardTitle>
<CardDescription className="pt-2">
{ props.author.map(a => (
{ props.author && props.author.map(a => (
<Badge className="m-1" key={ a.path_word } variant="outline">
{ a.name }
</Badge>)

10
resources/js/Pages/Comic/Read.jsx
View File

@@ -76,7 +76,7 @@ export default function Read({ auth, comic, chapter }) {
} else if (divDimensions[0] > divDimensions[1] && readingMode === 'utd') {
imgStyles = { width: '50%' };
} else if (readingMode === 'rtl') {
imgStyles = { height: 'calc(100dvh - 90px)' };
imgStyles = { width: '100%', height: 'calc(100dvh - 90px)', objectFit: 'contain' };
}
const handleImageClick = (e) => {
@@ -156,6 +156,10 @@ export default function Read({ auth, comic, chapter }) {
</DialogContent>
</Dialog>
<Button variant="ghost">
{ currentImage } / { chapter.sorted.length }
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
@@ -204,10 +208,6 @@ export default function Read({ auth, comic, chapter }) {
</Tooltip>
</TooltipProvider>
) }
<Button variant="ghost">
{ currentImage } / { chapter.sorted.length }
</Button>
</>
);
}