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

Favicon

Browse Source 
Change resize by CSS
This commit is contained in:
User
2024-12-28 16:32:41 -05:00
parent 58f85bfc22
commit 6e8d2023b7
5 changed files with 26 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 0 B

After

Width:  |  Height:  |  Size: 15 KiB

4
resources/js/Layouts/AppLayout.jsx
View File

@@ -46,9 +46,9 @@ export default function AppLayout({ auth, header, children, toolbar }) {
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" />
<Breadcrumb className="hidden lg:block">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbItem className="hidden lg:block">
<BreadcrumbLink asChild>
<Link href={ route('comics.index') }>Home</Link>
</BreadcrumbLink>

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

@@ -70,7 +70,7 @@ export default function Chapters({ auth, comic, chapters, histories }) {
return (
<AppLayout auth={ auth } header={
<>
<BreadcrumbSeparator />
<span className="hidden lg:block"><BreadcrumbSeparator /></span>
<BreadcrumbItem>
<BreadcrumbPage>{ comic.comic.name }</BreadcrumbPage>
</BreadcrumbItem>

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

@@ -60,7 +60,6 @@ export default function Index({ comics, offset, auth }) {
</Head>
<div className="p-3 pt-1 grid 2xl:grid-cols-6 xl:grid-cols-4 sm:grid-cols-2 gap-2">
<ComicCards { ...comics } />
<button onClick={() => {throw new Error("This is your first error!");}}>Break the world</button>;
</div>
<Pagination className="justify-end pb-2">
<PaginationContent>

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

@@ -8,10 +8,10 @@ import { throttle } from 'lodash';
import { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
import { Button } from '@/components/ui/button';
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import PrimaryButton from '@/components/PrimaryButton';
import { Switch } from '@/components/ui/switch';
import { TooltipContent } from "@/components/ui/tooltip";
import { TooltipContent } from '@/components/ui/tooltip';
export default function Read({ auth, comic, chapter }) {
@@ -69,39 +69,15 @@ export default function Read({ auth, comic, chapter }) {
const ImageForComic = (img) => {
const imgRef = useRef();
const resizeImage = () => {
if (!imgRef.current || !ref.current) return;
let imgStyles = {};
const { naturalWidth, naturalHeight } = imgRef.current;
const containerWidth = ref.current.clientWidth;
const containerHeight = ref.current.clientHeight;
let width, height;
if (readingMode === "rtl") {
// Scale for RTL mode
const ratioWidth = naturalWidth / containerWidth;
const ratioHeight = naturalHeight / containerHeight;
const maxRatio = Math.max(ratioWidth, ratioHeight);
width = naturalWidth / maxRatio;
height = naturalHeight / maxRatio;
} else if (readingMode === "utd") {
// Scale for UTD mode
const ratio = divDimensions[1] < divDimensions[0] ? 0.33 : 1; // Example logic
const scaledWidth = containerWidth * ratio;
const scaledRatio = naturalWidth / scaledWidth;
width = naturalWidth / scaledRatio;
height = naturalHeight / scaledRatio;
}
// Apply dimensions directly
imgRef.current.style.width = `${width}px`;
imgRef.current.style.height = `${height}px`;
};
useEffect(() => {
resizeImage();
}, [readingMode, divDimensions]); // Recalculate when these dependencies change
if (divDimensions[1] > divDimensions[0] && readingMode === 'utd') {
imgStyles = { width: '100%' };
} else if (divDimensions[0] > divDimensions[1] && readingMode === 'utd') {
imgStyles = { width: '50%' };
} else if (readingMode === 'rtl') {
imgStyles = { height: 'calc(100dvh - 90px)' };
}
const handleImageClick = (e) => {
if (readingMode === "utd") return;
@@ -128,9 +104,9 @@ export default function Read({ auth, comic, chapter }) {
<img
id={ `image-${img.innerKey}` }
ref={ imgRef }
className="m-auto comic-img"
style={ imgStyles }
className={` m-auto comic-img `}
src={ `/image/${btoa(img.url)}` }
onLoad={ resizeImage } // Resize image immediately on load
onClick={ handleImageClick }
alt={ comic.comic.name }
/>
@@ -282,15 +258,17 @@ export default function Read({ auth, comic, chapter }) {
return (
<AppLayout auth={ auth } header={
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href={ route('comics.chapters', [comic.comic.path_word]) }>
{ comic.comic.name }
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<span className="hidden lg:block">
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link href={ route('comics.chapters', [comic.comic.path_word]) }>
{ comic.comic.name }
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
</span>
<BreadcrumbItem>
<BreadcrumbPage>{ chapter.chapter.name }</BreadcrumbPage>
</BreadcrumbItem>