frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🎨 Styling fixes in wake of tailwindv4

Browse Source
This commit is contained in:
Rishi Ghan
2026-02-25 17:38:27 -05:00
parent 4498830e29
commit c005d118ac
14 changed files with 65 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/components/ComicDetail/ComicDetail.tsx
View File

@@ -404,7 +404,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
// 2. from the CV-scraped version // 2. from the CV-scraped version
return ( return (
<section className="container mx-auto"> <section className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="section"> <div className="section">
{!isNil(data) && !isEmpty(data) && ( {!isNil(data) && !isEmpty(data) && (
<> <>

2
src/client/components/Dashboard/Dashboard.tsx
View File

@@ -67,7 +67,7 @@ export const Dashboard = (): ReactElement => {
}); });
return ( return (
<div className="container mx-auto max-w-full"> <div className="container mx-auto px-4 sm:px-6 lg:px-8">
<PullList /> <PullList />
{recentComics && <RecentlyImported comics={recentComics?.data.docs} />} {recentComics && <RecentlyImported comics={recentComics?.data.docs} />}
{/* Wanted comics */} {/* Wanted comics */}

18
src/client/components/Dashboard/PullList.tsx
View File

@@ -99,8 +99,7 @@ export const PullList = (): ReactElement => {
return ( return (
<> <>
<div className="content"> <Header
<Header
headerContent="Discover" headerContent="Discover"
subHeaderContent={ subHeaderContent={
<span className="text-md"> <span className="text-md">
@@ -143,9 +142,8 @@ export const PullList = (): ReactElement => {
/> />
</div> </div>
</div> </div>
</div> <div className="overflow-hidden mt-3 -mx-4 sm:-mx-8 lg:-mx-16 xl:-mx-20 2xl:-mx-24 pl-4 sm:pl-8 lg:pl-16 xl:pl-20 2xl:pl-24">
{isSuccess && !isLoading && ( {isSuccess && !isLoading && (
<div className="overflow-hidden -mr-4 sm:-mr-8 lg:-mr-16 xl:-mr-20 2xl:-mr-24">
<div className="overflow-hidden" ref={emblaRef}> <div className="overflow-hidden" ref={emblaRef}>
<div className="flex"> <div className="flex">
{map(pullList?.data.result, (issue, idx) => { {map(pullList?.data.result, (issue, idx) => {
@@ -180,12 +178,10 @@ export const PullList = (): ReactElement => {
})} })}
</div> </div>
</div> </div>
</div> )}
)} {isLoading && <div>Loading...</div>}
{isLoading ? <div>Loading...</div> : null} {isError && <div>An error occurred while retrieving the pull list.</div>}
{isError ? ( </div>
<div>An error occurred while retrieving the pull list.</div>
) : null}
</> </>
); );
}; };

2
src/client/components/Downloads/Downloads.tsx
View File

@@ -57,7 +57,7 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
}, [issueBundles]); }, [issueBundles]);
return !isNil(bundles) ? ( return !isNil(bundles) ? (
<div className="container"> <div className="container mx-auto px-4 sm:px-6 lg:px-8">
<section className="section"> <section className="section">
<h1 className="title">Downloads</h1> <h1 className="title">Downloads</h1>
<div className="columns"> <div className="columns">

2
src/client/components/Import/Import.tsx
View File

@@ -150,7 +150,7 @@ export const Import = (props: IProps): ReactElement => {
<div> <div>
<section> <section>
<header className="bg-slate-200 dark:bg-slate-500"> <header className="bg-slate-200 dark:bg-slate-500">
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4"> <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
<div className="sm:flex sm:items-center sm:justify-between"> <div className="sm:flex sm:items-center sm:justify-between">
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl"> <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">

34
src/client/components/Library/Library.tsx
View File

@@ -83,30 +83,30 @@ export const Library = (): ReactElement => {
const ComicInfoXML = (value) => { const ComicInfoXML = (value) => {
return value.data ? ( return value.data ? (
<dl className="flex flex-col text-md p-3 ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-max"> <dl className="flex flex-col text-xs sm:text-md p-2 sm:p-3 ml-0 sm:ml-4 my-3 rounded-lg dark:bg-yellow-500 bg-yellow-300 w-full sm:w-max max-w-full">
{/* Series Name */} {/* Series Name */}
<span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> <span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs font-medium px-1.5 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400 max-w-full overflow-hidden">
<span className="pr-1 pt-1"> <span className="pr-0.5 sm:pr-1 pt-1">
<i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-5 h-5"></i> <i className="icon-[solar--bookmark-square-minimalistic-bold-duotone] w-4 h-4 sm:w-5 sm:h-5"></i>
</span> </span>
<span className="text-md text-slate-900 dark:text-slate-900"> <span className="text-xs sm:text-md text-slate-900 dark:text-slate-900 truncate">
{ellipsize(value.data.series[0], 45)} {ellipsize(value.data.series[0], 25)}
</span> </span>
</span> </span>
<div className="flex flex-row mt-2 gap-2"> <div className="flex flex-row flex-wrap mt-1 sm:mt-2 gap-1 sm:gap-2">
{/* Pages */} {/* Pages */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-1 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1"> <span className="pr-0.5 sm:pr-1 pt-1">
<i className="icon-[solar--notebook-minimalistic-bold-duotone] w-5 h-5"></i> <i className="icon-[solar--notebook-minimalistic-bold-duotone] w-3.5 h-3.5 sm:w-5 sm:h-5"></i>
</span> </span>
<span className="text-md text-slate-900 dark:text-slate-900"> <span className="text-xs sm:text-md text-slate-900 dark:text-slate-900">
Pages: {value.data.pagecount[0]} Pages: {value.data.pagecount[0]}
</span> </span>
</span> </span>
{/* Issue number */} {/* Issue number */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs px-1 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1"> <span className="pr-0.5 sm:pr-1 pt-1">
<i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i> <i className="icon-[solar--hashtag-outline] w-3 h-3 sm:w-3.5 sm:h-3.5"></i>
</span> </span>
<span className="text-slate-900 dark:text-slate-900"> <span className="text-slate-900 dark:text-slate-900">
{!isNil(value.data.number) && ( {!isNil(value.data.number) && (
@@ -128,7 +128,7 @@ export const Library = (): ReactElement => {
{ {
header: "File Details", header: "File Details",
id: "fileDetails", id: "fileDetails",
minWidth: 400, minWidth: 250,
accessorKey: "_source", accessorKey: "_source",
cell: (info) => { cell: (info) => {
return <MetadataPanel data={info.getValue()} />; return <MetadataPanel data={info.getValue()} />;
@@ -248,7 +248,7 @@ export const Library = (): ReactElement => {
<div> <div>
<section> <section>
<header className="bg-slate-200 dark:bg-slate-500"> <header className="bg-slate-200 dark:bg-slate-500">
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4"> <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
<div className="sm:flex sm:items-center sm:justify-between"> <div className="sm:flex sm:items-center sm:justify-between">
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl"> <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
@@ -263,7 +263,7 @@ export const Library = (): ReactElement => {
</div> </div>
</header> </header>
{!isUndefined(searchResults?.hits) ? ( {!isUndefined(searchResults?.hits) ? (
<div> <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
<div> <div>
<T2Table <T2Table
totalPages={searchResults.hits.total.value} totalPages={searchResults.hits.total.value}

2
src/client/components/PullList/PullList.tsx
View File

@@ -99,7 +99,7 @@ export const PullList = (): ReactElement => {
[], [],
); );
return ( return (
<section className="container"> <section className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="section"> <div className="section">
<div className="header-area"> <div className="header-area">
<h1 className="title">Weekly Pull List</h1> <h1 className="title">Weekly Pull List</h1>

2
src/client/components/Search/Search.tsx
View File

@@ -165,7 +165,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
<div> <div>
<section> <section>
<header className="bg-slate-200 dark:bg-slate-500"> <header className="bg-slate-200 dark:bg-slate-500">
<div className="px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4"> <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
<div className="sm:flex sm:items-center sm:justify-between"> <div className="sm:flex sm:items-center sm:justify-between">
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl"> <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">

4
src/client/components/VolumeDetail/VolumeDetail.tsx
View File

@@ -266,7 +266,7 @@ const VolumeDetails = (props): ReactElement => {
return ( return (
<> <>
<header className="bg-slate-200 dark:bg-slate-500"> <header className="bg-slate-200 dark:bg-slate-500">
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4"> <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
<div className="sm:flex sm:items-center sm:justify-between"> <div className="sm:flex sm:items-center sm:justify-between">
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl"> <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
@@ -280,7 +280,7 @@ const VolumeDetails = (props): ReactElement => {
</div> </div>
</div> </div>
</header> </header>
<div className="container mx-auto mt-4"> <div className="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div> <div>
<div className="flex flex-row gap-4"> <div className="flex flex-row gap-4">
{/* Volume cover */} {/* Volume cover */}

4
src/client/components/Volumes/Volumes.tsx
View File

@@ -143,7 +143,7 @@ export const Volumes = (props): ReactElement => {
<div> <div>
<section className=""> <section className="">
<header className="bg-slate-200 dark:bg-slate-500"> <header className="bg-slate-200 dark:bg-slate-500">
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4"> <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
<div className="sm:flex sm:items-center sm:justify-between"> <div className="sm:flex sm:items-center sm:justify-between">
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl"> <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
@@ -158,7 +158,7 @@ export const Volumes = (props): ReactElement => {
</div> </div>
</header> </header>
{isSuccess ? ( {isSuccess ? (
<div> <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
<div className="library"> <div className="library">
<T2Table <T2Table
sourceData={volumes?.data.hits.hits} sourceData={volumes?.data.hits.hits}

4
src/client/components/WantedComics/WantedComics.tsx
View File

@@ -160,7 +160,7 @@ export const WantedComics = (props): ReactElement => {
<div className=""> <div className="">
<section className=""> <section className="">
<header className="bg-slate-200 dark:bg-slate-500"> <header className="bg-slate-200 dark:bg-slate-500">
<div className="mx-auto max-w-screen-xl px-2 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4"> <div className="mx-auto max-w-screen-xl px-4 py-2 sm:px-6 sm:py-8 lg:px-8 lg:py-4">
<div className="sm:flex sm:items-center sm:justify-between"> <div className="sm:flex sm:items-center sm:justify-between">
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl"> <h1 className="text-2xl font-bold text-gray-900 dark:text-white sm:text-3xl">
@@ -175,7 +175,7 @@ export const WantedComics = (props): ReactElement => {
</div> </div>
</header> </header>
{isSuccess && wantedComics?.data.hits?.hits ? ( {isSuccess && wantedComics?.data.hits?.hits ? (
<div> <div className="mx-auto max-w-screen-xl px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
<div className="library"> <div className="library">
<T2Table <T2Table
sourceData={wantedComics?.data.hits.hits} sourceData={wantedComics?.data.hits.hits}

40
src/client/components/shared/MetadataPanel.tsx
View File

@@ -31,11 +31,11 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
{ {
name: "rawFileDetails", name: "rawFileDetails",
content: () => ( content: () => (
<dl className="dark:bg-card-imported bg-card-imported dark:text-slate-800 p-3 rounded-lg"> <dl className="dark:bg-card-imported bg-card-imported dark:text-slate-800 p-2 sm:p-3 rounded-lg">
<dt> <dt>
<p className="text-lg">{issueName}</p> <p className="text-sm sm:text-lg">{issueName}</p>
</dt> </dt>
<dd className="text-sm"> <dd className="text-xs sm:text-sm">
is a part of{" "} is a part of{" "}
<span className="underline"> <span className="underline">
{inferredMetadata.issue.name} {inferredMetadata.issue.name}
@@ -50,31 +50,31 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
<span className="pr-1 pt-1"> <span className="pr-1 pt-1">
<i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i> <i className="icon-[solar--hashtag-outline] w-3.5 h-3.5"></i>
</span> </span>
<span className="text-md text-slate-900 dark:text-slate-900"> <span className="text-xs sm:text-md text-slate-900 dark:text-slate-900">
{inferredMetadata.issue.number} {inferredMetadata.issue.number}
</span> </span>
</span> </span>
</dd> </dd>
)} )}
<dd className="flex flex-row gap-2 w-max"> <dd className="flex flex-row flex-wrap gap-1 sm:gap-2 w-full sm:w-max">
{/* File extension */} {/* File extension */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-1.5 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1"> <span className="pr-1 pt-1">
<i className="icon-[solar--zip-file-bold-duotone] w-5 h-5"></i> <i className="icon-[solar--zip-file-bold-duotone] w-4 h-4 sm:w-5 sm:h-5"></i>
</span> </span>
<span className="text-md text-slate-500 dark:text-slate-900"> <span className="text-xs sm:text-md text-slate-500 dark:text-slate-900">
{rawFileDetails.mimeType} {rawFileDetails.mimeType}
</span> </span>
</span> </span>
{/* size */} {/* size */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400"> <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-1.5 sm:px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1"> <span className="pr-1 pt-1">
<i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5"></i> <i className="icon-[solar--mirror-right-bold-duotone] w-4 h-4 sm:w-5 sm:h-5"></i>
</span> </span>
<span className="text-md text-slate-500 dark:text-slate-900"> <span className="text-xs sm:text-md text-slate-500 dark:text-slate-900">
{prettyBytes(rawFileDetails.fileSize)} {prettyBytes(rawFileDetails.fileSize)}
</span> </span>
</span> </span>
@@ -179,14 +179,16 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
}); });
return ( return (
<div className="flex gap-5 my-3"> <div className="flex flex-col sm:flex-row gap-3 sm:gap-5 my-3">
<Card <div className="w-32 sm:w-56 lg:w-52 shrink-0">
imageUrl={url} <Card
orientation={"cover-only"} imageUrl={url}
hasDetails={false} orientation={"cover-only"}
imageStyle={props.imageStyle} hasDetails={false}
/> imageStyle={props.imageStyle}
<div>{metadataPanel.content()}</div> />
</div>
<div className="flex-1">{metadataPanel.content()}</div>
</div> </div>
); );
}; };

2
src/client/components/shared/T2Table.tsx
View File

@@ -79,7 +79,7 @@ export const T2Table = (tableOptions: T2TableProps): ReactElement => {
}); });
return ( return (
<div className="container max-w-fit mx-14"> <div className="container max-w-fit">
<div> <div>
<div className="flex flex-row gap-2 justify-between mt-6 mb-4"> <div className="flex flex-row gap-2 justify-between mt-6 mb-4">
{/* Search bar */} {/* Search bar */}

7
tailwind.config.ts
View File

@@ -29,6 +29,13 @@ module.exports = {
xl: "5rem", xl: "5rem",
"2xl": "6rem", "2xl": "6rem",
}, },
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1280px",
},
}, },
}, },