refactor: adjust styling and class names in GalleryCard, TagInput, layout, nav, and comicPage components
This commit is contained in:
parent
25231b5e88
commit
6c559a854b
5 changed files with 29 additions and 23 deletions
|
|
@ -77,7 +77,8 @@ function GalleryCardImpl({
|
|||
};
|
||||
}, [originalTags]);
|
||||
|
||||
return <Card className="flex h-[200px] overflow-hidden transition-all duration-200 hover:shadow-lg hover:shadow-primary/20 group">
|
||||
return <Card className="flex h-[200px] overflow-hidden
|
||||
transition-all duration-200 hover:shadow-lg hover:shadow-primary/20 group">
|
||||
{isDeleted ? (
|
||||
<div className="bg-gradient-to-br from-red-500/20 to-red-800/30 flex items-center justify-center h-[200px] w-[142px] rounded-l-xl border-r border-border/50">
|
||||
<div className="flex flex-col items-center gap-2 text-primary-foreground">
|
||||
|
|
@ -93,7 +94,7 @@ function GalleryCardImpl({
|
|||
className="max-h-full max-w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded-full flex items-center gap-1 opacity-80">
|
||||
<LayersIcon className="h-3 w-3" />
|
||||
<LayersIcon className="size-3" />
|
||||
<span>{x.pagenum}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -180,7 +181,7 @@ export function GalleryCardSkeleton({
|
|||
}: {
|
||||
tagCount?: number;
|
||||
}) {
|
||||
return <Card className="flex h-[200px]">
|
||||
return <Card className="flex h-[200px] flex-col md:flex-row">
|
||||
<Skeleton className="rounded-xl overflow-hidden h-[200px] w-[142px] flex-none" />
|
||||
<div className="flex-1 flex flex-col">
|
||||
<CardHeader className="flex-none">
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ export default function TagInput({
|
|||
)}
|
||||
onClick={() => inputRef.current?.focus()}
|
||||
>
|
||||
<ul className="flex gap-1 flex-none">
|
||||
<ul className="flex gap-1 flex-grow-0">
|
||||
{tags.map((tag) => <li className={cn(
|
||||
tagBadgeVariants({ variant: getTagKind(tag) }),
|
||||
"cursor-pointer"
|
||||
|
|
@ -121,7 +121,7 @@ export default function TagInput({
|
|||
}}>{tag}</li>)}
|
||||
</ul>
|
||||
<input ref={inputRef} type="text" className="flex-1 border-0 ml-2 focus:border-0 focus:outline-none
|
||||
bg-transparent text-sm" placeholder="Add tag"
|
||||
bg-transparent text-sm w-0" placeholder="Add tag"
|
||||
onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)}
|
||||
value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
|
|
@ -172,7 +172,7 @@ export default function TagInput({
|
|||
</div>
|
||||
}
|
||||
{
|
||||
tags.length > 0 && <Button variant="ghost" className="flex-none" onClick={() => {
|
||||
tags.length > 0 && <Button variant="ghost" className="flex-grow-0" onClick={() => {
|
||||
setTags([]);
|
||||
setOpenInfo(null);
|
||||
}}>Clear</Button>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@ export default function Layout({ children }: LayoutProps) {
|
|||
"transition-all duration-300 ease-in-out",
|
||||
"border-r bg-background sticky top-0 h-screen",
|
||||
isSidebarOpen ? 'w-64' : 'w-16')}>
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<div className="flex items-center justify-between p-2 border-b">
|
||||
{isSidebarOpen && (
|
||||
<h2 className="text-lg font-semibold">Ionian</h2>
|
||||
<h2 className="text-lg font-semibold ml-4">Ionian</h2>
|
||||
)}
|
||||
<SidebarToggle />
|
||||
<SidebarToggle className="size-10 p-2 ml-1" />
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<SidebarNav />
|
||||
|
|
@ -30,7 +30,7 @@ export default function Layout({ children }: LayoutProps) {
|
|||
</aside>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 flex flex-col min-h-0 pb-16 md:pb-0 pt-0 md:pt-0">
|
||||
<main className="flex-1 flex flex-col min-h-0 p-0">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { useMemo } from "react";
|
|||
import { useAtom, useAtomValue } from "jotai";
|
||||
import { sidebarAtom } from "./sidebarAtom";
|
||||
|
||||
const NAV_ICON_CLASS = "size-4";
|
||||
export const NAV_ICON_CLASS = "size-4";
|
||||
|
||||
const NAV_LINKS = {
|
||||
search: { to: "/search", Icon: SearchIcon },
|
||||
|
|
@ -103,16 +103,20 @@ export function NavList() {
|
|||
}
|
||||
|
||||
// 사이드바 토글 버튼
|
||||
export function SidebarToggle() {
|
||||
export function SidebarToggle({
|
||||
className,
|
||||
}: {
|
||||
className?: string;
|
||||
}) {
|
||||
const [sidebarState, setSidebarState] = useAtom(sidebarAtom);
|
||||
const isOpen = sidebarState.isCollapsed;
|
||||
const isOpen = !sidebarState.isCollapsed;
|
||||
const onToggle = () => setSidebarState((s) => ({ ...s, isCollapsed: !s.isCollapsed }));
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant="ghost" size="sm" onClick={onToggle} className="size-8 p-0">
|
||||
{isOpen ? <PanelLeftCloseIcon className="size-4" /> : <PanelLeftIcon className="size-4" />}
|
||||
<Button variant="ghost" size="sm" onClick={onToggle} className={className}>
|
||||
{isOpen ? <PanelLeftCloseIcon className={NAV_ICON_CLASS} /> : <PanelLeftIcon className={NAV_ICON_CLASS} />}
|
||||
<span className="sr-only">{isOpen ? "Close sidebar" : "Open sidebar"}</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
|
|
@ -131,7 +135,7 @@ export function MobileSidebarToggle() {
|
|||
|
||||
return (
|
||||
<Button variant="ghost" size="sm" onClick={onToggle} className="size-8 p-0">
|
||||
{isOpen ? <XIcon className="size-5" /> : <MenuIcon className="size-5" />}
|
||||
{isOpen ? <XIcon className={NAV_ICON_CLASS} /> : <MenuIcon className={NAV_ICON_CLASS} />}
|
||||
<span className="sr-only">{isOpen ? "Close menu" : "Open menu"}</span>
|
||||
</Button>
|
||||
);
|
||||
|
|
@ -151,9 +155,9 @@ export function SidebarNavItem({ children, name, to, className, onClick }: Sideb
|
|||
const isCollapsed = sidebarState.isCollapsed;
|
||||
|
||||
const buttonClass = cn(
|
||||
buttonVariants({ variant: "ghost", size: "sm" }),
|
||||
"rounded-none md:rounded-md",
|
||||
isCollapsed ? "justify-center size-10 p-0" : "justify-start gap-3 h-10 px-3",
|
||||
buttonVariants({ variant: "ghost", size: "lg" }),
|
||||
"rounded-none md:rounded-md flex-1 md:min-h-10 min-h-12 touch-manipulation justify-center",
|
||||
isCollapsed ? "p-0" : "md:justify-start gap-3 px-3",
|
||||
className
|
||||
);
|
||||
|
||||
|
|
@ -205,7 +209,7 @@ export function SidebarNav() {
|
|||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<nav className="flex flex-col gap-2 p-3 flex-1 min-h-0">
|
||||
<nav className="flex flex-col gap-2 p-2 flex-1 min-h-0">
|
||||
{customNavItems && (
|
||||
<>
|
||||
<div className={cn("flex flex-col gap-2")}>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useEventListener } from "usehooks-ts";
|
|||
import type { Document } from "dbtype";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { SidebarNavItem } from "@/components/layout/nav";
|
||||
import { NAV_ICON_CLASS, SidebarNavItem } from "@/components/layout/nav";
|
||||
|
||||
interface ComicPageProps {
|
||||
params: {
|
||||
|
|
@ -150,13 +150,14 @@ export default function ComicPage({
|
|||
name="Back"
|
||||
to={`/doc/${params.id}`}
|
||||
>
|
||||
<ExitIcon />
|
||||
<ExitIcon className={NAV_ICON_CLASS} />
|
||||
</SidebarNavItem>
|
||||
<SidebarNavItem
|
||||
name={isFullScreen ? "Exit FS" : "Enter FS"}
|
||||
onClick={toggleFullScreen}
|
||||
>
|
||||
{isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
|
||||
{isFullScreen ? <ExitFullScreenIcon className={NAV_ICON_CLASS} /> :
|
||||
<EnterFullScreenIcon className={NAV_ICON_CLASS} />}
|
||||
</SidebarNavItem>
|
||||
<Popover>
|
||||
<SidebarNavItem
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue