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 {
border: 1px solid #CCC;
border-radius: 0.25em;
flex-direction: row;
display: flex;
flex-basis: 50ex;
@@ -225,7 +228,7 @@ pre {
.card-image {
align-self: center;
.image {
max-width: 80px;
max-width: 50px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0.25em;

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

@@ -17,7 +17,24 @@ interface ICardProps {
const renderCard = (props): ReactElement => {
switch (props.orientation) {
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":
return (
<div onClick={props.onClick}>

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

@@ -61,53 +61,65 @@ export const RecentlyImported = ({
</Link>
);
return (
<Card
key={_id}
orientation={"vertical"}
imageUrl={imagePath}
hasDetails
title={comicName ? titleElement : null}
>
<div className="content is-flex is-flex-direction-row">
{isComicBookMetadataAvailable && (
<span className="icon custom-icon is-small">
<img src="/img/cvlogo.svg" />
</span>
)}
{/* 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."}
/>
<>
<Card
key={_id}
orientation={"vertical"}
imageUrl={imagePath}
hasDetails
title={comicName ? titleElement : null}
>
<div className="content is-flex is-flex-direction-row">
{isComicBookMetadataAvailable && (
<span className="icon custom-icon is-small">
<img src="/img/cvlogo.svg" />
</span>
)}
{/* Issue type */}
{isComicBookMetadataAvailable &&
!isNil(
detectIssueTypes(
sourcedMetadata.comicvine.volumeInformation.description,
),
) ? (
<span className="tag is-warning">
{
detectIssueTypes(
sourcedMetadata.comicvine.volumeInformation
.description,
).displayName
}
</span>
) : null}
</div>
</Card>
{/* 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>
)}
{/* Issue type */}
{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>
</>
);
},
)}