Merge pull request #16 from bookracy/fix/mobile-styling-issues

mobile styling fixes
bookracy · Aug 26, 2024 · 33217b0 · 33217b0
2 parents b2b957a + 9468901
commit 33217b0
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 8 deletions.
diff --git a/src/components/books/book-item.tsx b/src/components/books/book-item.tsx
@@ -24,7 +24,7 @@ export function BookItem(props: BookItemProps) {
           <BookmarkButton book={props} />
         </div>
 
-        <div className="flex flex-col gap-4 md:flex-row md:gap-6">
+        <div className="flex flex-col gap-4 pt-12 sm:pt-0 md:flex-row md:gap-6">
           <div className="mx-2 w-full max-w-[200px] md:w-1/4">
             <AspectRatio ratio={5 / 8} className="flex items-center">
               <img
@@ -34,7 +34,7 @@ export function BookItem(props: BookItemProps) {
                 onError={(e) => {
                   e.currentTarget.src = PlaceholderImage;
                 }}
-                onClick={() => open(props.book_image, "_blank")}
+                onClick={() => setIsReaderOpen(true)}
               />
             </AspectRatio>
           </div>

diff --git a/src/components/layout/sheet-menu.tsx b/src/components/layout/sheet-menu.tsx
@@ -1,18 +1,14 @@
 import { MenuIcon } from "lucide-react";
-import React from "react";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetHeader, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { Link } from "@tanstack/react-router";
 import { Menu } from "./menu";
-import { useLayoutStore } from "@/stores/layout";
 
 import LogoHeader from "@/assets/logo_header.svg";
 import LogoHeaderDark from "@/assets/logo_header_dark.svg";
-import Logo from "@/assets/logo.svg";
 import { useSettingsStore } from "@/stores/settings";
 
 export function SheetMenu() {
-  const sidebar = useLayoutStore((state) => state.sidebar);
   const theme = useSettingsStore((state) => state.theme);
 
   return (
@@ -26,7 +22,7 @@ export function SheetMenu() {
         <SheetHeader>
           <Button className="flex items-center justify-center pb-2 pt-1" variant="link" asChild>
             <Link to="/" className="flex items-center gap-2" search={{ q: "" }}>
-              {theme === "dark" ? <img src={sidebar.isOpen ? LogoHeader : Logo} className="h-13" /> : <img src={sidebar.isOpen ? LogoHeaderDark : Logo} className="h-13" />}
+              {theme === "dark" ? <img src={LogoHeader} className="h-12" /> : <img src={LogoHeaderDark} className="h-12" />}
             </Link>
           </Button>
         </SheetHeader>

diff --git a/src/routes/featured.tsx b/src/routes/featured.tsx
@@ -28,7 +28,7 @@ function Feature() {
                 .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
                 .join(" ")}
             </h1>
-            <div className="grid grid-cols-2 gap-4">{data[category].length > 0 ? data[category].map((book) => <BookItem key={book.md5} {...book} />) : null}</div>
+            <div className="flex flex-col gap-4 md:grid md:grid-cols-2">{data[category].length > 0 ? data[category].map((book) => <BookItem key={book.md5} {...book} />) : null}</div>
           </div>
         ))}
       </div>