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

🌁 Added reference card for dc++ downloads

Browse Source
This commit is contained in:
Rishi Ghan
2022-05-13 22:21:40 -07:00
parent 8f79da2eab
commit b754b75eb6
3 changed files with 79 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/client/assets/scss/App.scss
View File

@@ -215,6 +215,9 @@ pre {
} }
.is-horizontal { .is-horizontal {
border: 1px solid #CCC;
border-radius: 0.25em;
flex-direction: row; flex-direction: row;
display: flex; display: flex;
flex-basis: 50ex; flex-basis: 50ex;
@@ -225,7 +228,7 @@ pre {
.card-image { .card-image {
align-self: center; align-self: center;
.image { .image {
max-width: 80px; max-width: 50px;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-top-left-radius: 0.25em; border-top-left-radius: 0.25em;

19
src/client/components/Carda.tsx
View File

@@ -17,7 +17,24 @@ interface ICardProps {
const renderCard = (props): ReactElement => { const renderCard = (props): ReactElement => {
switch (props.orientation) { switch (props.orientation) {
case "horizontal": case "horizontal":
return <>horiztonal</>; return (
<div className="card-container">
<div className="card generic-card">
<div className="is-horizontal">
<div className="card-image">
<img
src={props.imageUrl}
alt="Placeholder image"
className="image"
/>
</div>
{props.hasDetails && (
<div className="card-content">{props.children}</div>
)}
</div>
</div>
</div>
);
case "vertical": case "vertical":
return ( return (
<div onClick={props.onClick}> <div onClick={props.onClick}>

102
src/client/components/Dashboard/RecentlyImported.tsx
View File

@@ -61,53 +61,65 @@ export const RecentlyImported = ({
</Link> </Link>
); );
return ( return (
<Card <>
key={_id} <Card
orientation={"vertical"} key={_id}
imageUrl={imagePath} orientation={"vertical"}
hasDetails imageUrl={imagePath}
title={comicName ? titleElement : null} hasDetails
> title={comicName ? titleElement : null}
<div className="content is-flex is-flex-direction-row"> >
{isComicBookMetadataAvailable && ( <div className="content is-flex is-flex-direction-row">
<span className="icon custom-icon is-small"> {isComicBookMetadataAvailable && (
<img src="/img/cvlogo.svg" /> <span className="icon custom-icon is-small">
</span> <img src="/img/cvlogo.svg" />
)}
{/* Raw file presence */}
{isNil(rawFileDetails) && (
<span className="icon custom-icon is-small has-text-danger mr-2">
<img src="/img/missing-file.svg" />
</span>
)}
{/* ComicInfo.xml presence */}
{!isNil(sourcedMetadata.comicInfo) &&
!isEmpty(sourcedMetadata.comicInfo) && (
<span className="icon custom-icon is-small has-text-danger">
<img
src="/img/comicinfoxml.svg"
alt={"ComicInfo.xml file detected."}
/>
</span> </span>
)} )}
{/* Issue type */} {/* Raw file presence */}
{isComicBookMetadataAvailable && {isNil(rawFileDetails) && (
!isNil( <span className="icon custom-icon is-small has-text-danger mr-2">
detectIssueTypes( <img src="/img/missing-file.svg" />
sourcedMetadata.comicvine.volumeInformation.description, </span>
), )}
) ? ( {/* ComicInfo.xml presence */}
<span className="tag is-warning"> {!isNil(sourcedMetadata.comicInfo) &&
{ !isEmpty(sourcedMetadata.comicInfo) && (
detectIssueTypes( <span className="icon custom-icon is-small has-text-danger">
sourcedMetadata.comicvine.volumeInformation <img
.description, src="/img/comicinfoxml.svg"
).displayName alt={"ComicInfo.xml file detected."}
} />
</span> </span>
) : null} )}
</div> {/* Issue type */}
</Card> {isComicBookMetadataAvailable &&
!isNil(
detectIssueTypes(
sourcedMetadata.comicvine.volumeInformation.description,
),
) ? (
<span className="tag is-warning">
{
detectIssueTypes(
sourcedMetadata.comicvine.volumeInformation
.description,
).displayName
}
</span>
) : null}
</div>
</Card>
{/* original reference */}
<Card
orientation="horizontal"
hasDetails
imageUrl={sourcedMetadata.comicvine.image.icon_url}
>
<dd className="is-size-7">
<dl>asdasd</dl>
</dd>
</Card>
</>
); );
}, },
)} )}