Favicon

Change resize by CSS

resources/js/Layouts/AppLayout.jsx

@@ -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>

resources/js/Pages/Comic/Chapters.jsx

@@ -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>

resources/js/Pages/Comic/Index.jsx

@@ -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>

resources/js/Pages/Comic/Read.jsx

@@ -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 = () => {
+        let imgStyles = {};
-            if (!imgRef.current || !ref.current) return;
 
-            const { naturalWidth, naturalHeight } = imgRef.current;
+        if (divDimensions[1] > divDimensions[0] && readingMode === 'utd') {
-            const containerWidth = ref.current.clientWidth;
+            imgStyles = { width: '100%' };
-            const containerHeight = ref.current.clientHeight;
+        } else if (divDimensions[0] > divDimensions[1] && readingMode === 'utd') {
-
+            imgStyles = { width: '50%' };
-            let width, height;
+        } else if (readingMode === 'rtl') {
-
+            imgStyles = { height: 'calc(100dvh - 90px)' };
-            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
 
         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 />
+                <span className="hidden lg:block">
-                <BreadcrumbItem>
+                    <BreadcrumbSeparator />
-                    <BreadcrumbLink asChild>
+                    <BreadcrumbItem>
-                        <Link href={ route('comics.chapters', [comic.comic.path_word]) }>
+                        <BreadcrumbLink asChild>
-                            { comic.comic.name }
+                            <Link href={ route('comics.chapters', [comic.comic.path_word]) }>
-                        </Link>
+                                { comic.comic.name }
-                    </BreadcrumbLink>
+                            </Link>
-                </BreadcrumbItem>
+                        </BreadcrumbLink>
-                <BreadcrumbSeparator />
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                </span>
                 <BreadcrumbItem>
                     <BreadcrumbPage>{ chapter.chapter.name }</BreadcrumbPage>
                 </BreadcrumbItem>