💅🏼 Prettified Library Table view
This commit is contained in:
@@ -152,10 +152,10 @@ export const Library = (): ReactElement => {
|
||||
accessorKey: "_source.createdAt",
|
||||
cell: (info) => {
|
||||
return !isNil(info.getValue()) ? (
|
||||
<div className="text-sm w-max ml-3 my-3 text-slate-600 dark:text-slate-900">
|
||||
<p>{format(parseISO(info.getValue()), "dd MMMM, yyyy")} </p>
|
||||
{format(parseISO(info.getValue()), "h aaaa")}
|
||||
</div>
|
||||
<span className="inline-flex items-center bg-slate-300 dark:bg-slate-500 text-xs font-medium text-slate-700 dark:text-slate-200 px-3 py-1 rounded-md shadow-sm whitespace-nowrap ml-3 my-3">
|
||||
<i className="icon-[solar--file-download-bold] w-4 h-4 mr-2 opacity-70" />
|
||||
{format(parseISO(info.getValue()), "dd MMM yyyy, h:mm a")}
|
||||
</span>
|
||||
) : null;
|
||||
},
|
||||
},
|
||||
@@ -164,23 +164,25 @@ export const Library = (): ReactElement => {
|
||||
accessorKey: "_source.acquisition",
|
||||
cell: (info) => (
|
||||
<div className="flex flex-col gap-2 ml-3 my-3">
|
||||
<span className="inline-flex items-center w-fit bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--folder-path-connect-bold-duotone] w-5 h-5"></i>
|
||||
{/* DC++ Downloads */}
|
||||
{info.getValue().directconnect?.downloads?.length > 0 ? (
|
||||
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<i className="icon-[solar--folder-path-connect-bold-duotone] w-4 h-4 mr-1 opacity-70" />
|
||||
<span>
|
||||
DC++: {info.getValue().directconnect.downloads.length}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-md text-slate-900 dark:text-slate-900">
|
||||
DC++: {info.getValue().directconnect.downloads.length}
|
||||
</span>
|
||||
</span>
|
||||
) : null}
|
||||
|
||||
<span className="inline-flex w-fit items-center bg-slate-50 text-slate-800 text-xs px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<span className="pr-1 pt-1">
|
||||
<i className="icon-[solar--magnet-bold-duotone] w-5 h-5"></i>
|
||||
{/* Torrent Downloads */}
|
||||
{info.getValue().torrent.length > 0 ? (
|
||||
<span className="inline-flex items-center whitespace-nowrap bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-1 rounded-md dark:text-slate-900 dark:bg-slate-400">
|
||||
<i className="icon-[solar--magnet-bold-duotone] w-4 h-4 mr-1 opacity-70" />
|
||||
<span className="whitespace-nowrap">
|
||||
Torrent: {info.getValue().torrent.length}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-md text-slate-900 dark:text-slate-900">
|
||||
Torrent: {info.getValue().torrent.length}
|
||||
</span>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
|
||||
@@ -271,23 +271,22 @@ export const Search = ({}: ISearchProps): ReactElement => {
|
||||
return result.resource_type === "issue" ? (
|
||||
<div
|
||||
key={result.id}
|
||||
className="relative flex items-start gap-4 py-6 border-b border-slate-300 dark:border-slate-700"
|
||||
className="relative flex gap-4 py-6 px-3 border-b border-slate-200 dark:border-slate-700 hover:bg-slate-100/50 dark:hover:bg-slate-800/30 transition-colors duration-150 group"
|
||||
>
|
||||
{/* IMAGE */}
|
||||
<Card
|
||||
orientation="cover-only"
|
||||
imageUrl={result?.image?.small_url}
|
||||
hasDetails={false}
|
||||
cardContainerStyle={{
|
||||
width: "120px",
|
||||
maxWidth: "150px",
|
||||
}}
|
||||
/>
|
||||
<div className="flex-shrink-0">
|
||||
<Card
|
||||
orientation="cover-only"
|
||||
imageUrl={result.image.small_url}
|
||||
hasDetails={false}
|
||||
cardContainerStyle={{ width: "120px", maxWidth: "150px" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* RIGHT-SIDE CONTENT */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* TITLE */}
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-white truncate">
|
||||
<div className="text-base font-medium text-slate-800 dark:text-white tracking-tight truncate">
|
||||
{result.volume?.name || <span>No Name</span>}
|
||||
</div>
|
||||
|
||||
@@ -335,9 +334,10 @@ export const Search = ({}: ISearchProps): ReactElement => {
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* CTA BUTTON */}
|
||||
{result.volume.name ? (
|
||||
<div className="mt-4 justify-self-end">
|
||||
{result.volume.name && (
|
||||
<div className="absolute bottom-4 right-4">
|
||||
<PopoverButton
|
||||
content={`This will add ${result?.volume?.name} to your wanted list.`}
|
||||
clickHandler={() =>
|
||||
@@ -350,14 +350,14 @@ export const Search = ({}: ISearchProps): ReactElement => {
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
result.resource_type === "volume" && (
|
||||
<div
|
||||
key={result.id}
|
||||
className="relative flex items-start gap-4 py-6 border-b border-slate-300 dark:border-slate-700"
|
||||
className="relative flex gap-4 py-6 px-3 border-b border-slate-200 dark:border-slate-700 hover:bg-slate-100/50 dark:hover:bg-slate-800/30 transition-colors duration-150 group"
|
||||
>
|
||||
{/* LEFT COLUMN: COVER */}
|
||||
<Card
|
||||
|
||||
@@ -67,21 +67,21 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
|
||||
|
||||
{inferredMetadata.issue.number && (
|
||||
<dd className="my-2">
|
||||
<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">
|
||||
<i className="icon-[solar--hashtag-outline] w-3.5 h-3.5 pr-1 pt-1"></i>
|
||||
<span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
|
||||
<i className="icon-[solar--hashtag-bold-duotone] w-4 h-4 mr-1 opacity-70"></i>
|
||||
<span>{inferredMetadata.issue.number}</span>
|
||||
</span>
|
||||
</dd>
|
||||
)}
|
||||
|
||||
<dd className="flex flex-row gap-2 w-max">
|
||||
<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">
|
||||
<i className="icon-[solar--zip-file-bold-duotone] w-5 h-5 pr-1 pt-1" />
|
||||
<span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
|
||||
<i className="icon-[solar--file-text-bold-duotone] w-4 h-4 mr-1 opacity-70" />
|
||||
{rawFileDetails.mimeType}
|
||||
</span>
|
||||
|
||||
<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">
|
||||
<i className="icon-[solar--mirror-right-bold-duotone] w-5 h-5 pr-1 pt-1" />
|
||||
<span className="inline-flex items-center bg-slate-100 dark:bg-slate-400 text-slate-800 dark:text-slate-900 text-xs font-medium px-2 py-1 rounded-md">
|
||||
<i className="icon-[solar--database-bold-duotone] w-4 h-4 mr-1 opacity-70" />
|
||||
{prettyBytes(rawFileDetails.fileSize)}
|
||||
</span>
|
||||
|
||||
@@ -98,43 +98,48 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
|
||||
{
|
||||
name: "comicvine",
|
||||
content: () => {
|
||||
console.log("comicvine:", comicvine);
|
||||
console.log("volumeInformation:", comicvine?.volumeInformation);
|
||||
return (
|
||||
!isUndefined(comicvine?.volumeInformation) && (
|
||||
<dl>
|
||||
<dt>
|
||||
<h6
|
||||
className="name has-text-weight-medium mb-1"
|
||||
style={props.titleStyle}
|
||||
>
|
||||
{ellipsize(issueName, 18)}
|
||||
</h6>
|
||||
<dl className="space-y-1 text-sm text-slate-700 dark:text-slate-200">
|
||||
{/* Title */}
|
||||
<dt className="text-base font-semibold text-slate-900 dark:text-white">
|
||||
{ellipsize(issueName, 28)}
|
||||
</dt>
|
||||
|
||||
{/* Volume Name */}
|
||||
<dd>
|
||||
<span className="is-size-7">
|
||||
Is a part of{" "}
|
||||
<span className="has-text-weight-semibold">
|
||||
<span className="text-sm text-slate-600 dark:text-slate-300">
|
||||
Part of{" "}
|
||||
<span className="font-medium text-slate-800 dark:text-white">
|
||||
{comicvine.volumeInformation.name}
|
||||
</span>
|
||||
</span>
|
||||
</dd>
|
||||
<dd className="is-size-7">
|
||||
<span>
|
||||
{ellipsize(
|
||||
convert(comicvine.description || "", {
|
||||
baseElements: { selectors: ["p"] },
|
||||
}),
|
||||
120,
|
||||
)}
|
||||
</span>
|
||||
|
||||
{/* Description */}
|
||||
<dd className="text-slate-600 dark:text-slate-300">
|
||||
{ellipsize(
|
||||
convert(comicvine.description || "", {
|
||||
baseElements: { selectors: ["p"] },
|
||||
}),
|
||||
160,
|
||||
)}
|
||||
</dd>
|
||||
<dd className="is-size-7 mt-2">
|
||||
<span className="my-3 mx-2">
|
||||
|
||||
{/* Misc Info */}
|
||||
<dd className="flex flex-wrap items-center gap-2 pt-2 text-xs text-slate-500 dark:text-slate-300">
|
||||
<span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
|
||||
<i className="icon-[solar--calendar-bold-duotone] w-4 h-4 mr-1 opacity-70" />
|
||||
{comicvine.volumeInformation.start_year}
|
||||
</span>
|
||||
{comicvine.volumeInformation.count_of_issues}
|
||||
ComicVine ID: {comicvine.id}
|
||||
<span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
|
||||
<i className="icon-[solar--book-bold-duotone] w-4 h-4 mr-1 opacity-70" />
|
||||
{comicvine.volumeInformation.count_of_issues} issues
|
||||
</span>
|
||||
<span className="inline-flex items-center bg-slate-100 dark:bg-slate-600 px-2 py-0.5 rounded-md">
|
||||
<i className="icon-[solar--hashtag-bold-duotone] w-4 h-4 mr-1 opacity-70" />
|
||||
ID: {comicvine.id}
|
||||
</span>
|
||||
</dd>
|
||||
</dl>
|
||||
)
|
||||
@@ -187,6 +192,7 @@ export const MetadataPanel = (props: MetadataPanelProps): ReactElement => {
|
||||
orientation="cover-only"
|
||||
hasDetails={false}
|
||||
imageStyle={props.imageStyle}
|
||||
cardContainerStyle={{ width: "190px", maxWidth: "230px" }}
|
||||
/>
|
||||
<div>{metadataPanel?.content()}</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user