From b754b75eb636af7c62ef5662e5eee63423572b7d Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Fri, 13 May 2022 22:21:40 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=81=20Added=20reference=20card=20for?=
 =?UTF-8?q?=20dc++=20downloads?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/assets/scss/App.scss               |   5 +-
 src/client/components/Carda.tsx               |  19 +++-
 .../components/Dashboard/RecentlyImported.tsx | 102 ++++++++++--------
 3 files changed, 79 insertions(+), 47 deletions(-)

diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index e711c72..130034a 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -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;
diff --git a/src/client/components/Carda.tsx b/src/client/components/Carda.tsx
index 898aec8..4dabb3d 100644
--- a/src/client/components/Carda.tsx
+++ b/src/client/components/Carda.tsx
@@ -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}>
diff --git a/src/client/components/Dashboard/RecentlyImported.tsx b/src/client/components/Dashboard/RecentlyImported.tsx
index 3c909a1..6e2ba95 100644
--- a/src/client/components/Dashboard/RecentlyImported.tsx
+++ b/src/client/components/Dashboard/RecentlyImported.tsx
@@ -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>
+              </>
             );
           },
         )}