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

🤼 Cleaning up CV match panel

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-31 23:55:15 -05:00
parent 0ade3f9354
commit e00e8c17d8
3 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,6 +29,7 @@ import ComicViewer from "react-comic-viewer";
import { extractComicArchive } from "../../actions/fileops.actions";
import { determineCoverFile } from "../../shared/utils/metadata.utils";
import axios from "axios";
import { styled } from "styled-components";
import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
import { refineQuery } from "filename-parser";
@@ -92,6 +93,10 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
// );
}, []);
// overridden <SlidingPanel> with some styles
const StyledSlidingPanel = styled(SlidingPane)`
background: #ccc;
`;
const afterOpenModal = useCallback((things) => {
// references are now sync'd and can be accessed.
// subtitle.style.color = "#f00";
@@ -108,9 +113,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
content: (props) => (
<>
<div>
<div className="card-content">
<ComicVineSearchForm data={rawFileDetails} />
</div>
<ComicVineSearchForm data={rawFileDetails} />
</div>
<p className="is-size-5 mt-3 mb-2 ml-3">Searching for:</p>
{inferredMetadata.issue ? (
@@ -460,7 +463,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
downloadCount={acquisition?.directconnect?.downloads?.length}
/>
<SlidingPane
<StyledSlidingPanel
isOpen={visible}
onRequestClose={() => setVisible(false)}
title={"Comic Vine Search Matches"}
@@ -468,7 +471,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
>
{slidingPanelContentId !== "" &&
contentForSlidingPanel[slidingPanelContentId].content()}
</SlidingPane>
</StyledSlidingPanel>
</>
)}
</div>

53
src/client/components/ComicDetail/MatchResult.tsx
View File

@@ -38,49 +38,62 @@ export const MatchResult = (props: MatchResultProps) => {
}
return (
<div className="mb-4" key={idx}>
<div className="flex flex-row">
<div className="w-full mr-2">
<div className="flex flex-row gap-4">
<div className="min-w-fit">
<img
className="rounded-md"
src={match.image.thumb_url}
onError={handleBrokenImage}
/>
</div>
<div>
<div className="">{match.name}</div>
<span>Number</span>
<span>{match.issue_number}</span>
<span className="tag">Cover Date</span>
<span className="tag is-warning">{match.cover_date}</span>
<div className="">
{match.name ? <p className="text-md">{match.name}</p> : null}
<span className="flex flex-row gap-2 mb-2">
<span className="inline-flex items-center bg-slate-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--hashtag-outline] w-4 h-4"></i>
</span>
<span className="text-slate-900 dark:text-slate-900">
{parseInt(match.issue_number, 10)}
</span>
</span>
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--calendar-mark-bold-duotone] w-5 h-5"></i>
</span>
<span className="text-slate-900 dark:text-slate-900">
Cover Date: {match.cover_date}
</span>
</span>
</span>
<div className="text-sm">
{ellipsize(issueDescription, 300)}
</div>
</div>
</div>
<div className="">
<div className="flex flex-row gap-2 my-4 ml-10">
<div className="">
<img
src={match.volumeInformation.results.image.icon_url}
className="cover-image"
className="rounded-md w-full"
onError={handleBrokenImage}
/>
</div>
<div className="">
<div className="">{match.volume.name}</div>
<div className="">
<span className="">Total Issues</span>
<span className="">
<span>{match.volume.name}</span>
<div className="text-sm">
<p>
Total Issues:
{match.volumeInformation.results.count_of_issues}
</span>
</p>
<p>
Publisher:
{match.volumeInformation.results.publisher.name}
</p>
</div>
</div>
<span className="tag">Publisher</span>
<span className="tag is-warning">
{match.volumeInformation.results.publisher.name}
</span>
</div>
<button
className="button is-normal is-outlined is-primary is-light is-pulled-right"

8
src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx
View File

@@ -20,11 +20,11 @@ export const ComicInfoXML = (data): ReactElement => {
{/* Issue number */}
{!isUndefined(json.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">
<span className="inline-flex items-center bg-slate-50 text-sm text-slate-800 font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--hashtag-outline] w-4 h-4"></i>
</span>
<span className="text-md text-slate-900 dark:text-slate-900">
<span className="text-slate-900 dark:text-slate-900">
{parseInt(json.number[0], 10)}
</span>
</span>
@@ -32,12 +32,12 @@ export const ComicInfoXML = (data): ReactElement => {
)}
<dd className="my-2">
{/* Genre */}
<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-sm font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--sticker-smile-circle-bold-duotone] w-5 h-5"></i>
</span>
<span className="text-md text-slate-500 dark:text-slate-900">
<span className="text-slate-500 dark:text-slate-900">
{json.genre[0]}
</span>
</span>