From d17afa439abef6ae6abc66ecd5a1a82922570c4e Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Mon, 31 May 2021 18:01:11 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=9E=20Beautifying=20cover=20display=20?=
 =?UTF-8?q?UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/assets/scss/App.scss  | 11 +++++++++++
 src/client/components/Card.tsx   | 20 ++++++++++----------
 src/client/components/Import.tsx |  3 +--
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss
index 884b0b8..acf7fbc 100644
--- a/src/client/assets/scss/App.scss
+++ b/src/client/assets/scss/App.scss
@@ -25,6 +25,17 @@ $border-color: red;
 }
 
 .card {
+  max-width: 200px;
+  margin: 12px;
+  float: left;
+
+  .truncate {
+    width: 100px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   img {
     max-width: 200px;
   }
diff --git a/src/client/components/Card.tsx b/src/client/components/Card.tsx
index dab34a6..e4cb2f0 100644
--- a/src/client/components/Card.tsx
+++ b/src/client/components/Card.tsx
@@ -1,9 +1,7 @@
 import * as React from "react";
-import { IFolderData } from "../shared/interfaces/comicinfo.interfaces";
+
 import { IExtractedComicBookCoverFile } from "../../server/interfaces/folder.interface";
-import { isArray, map, isUndefined, isEmpty, flatten } from "lodash";
-import { socket } from "./Import";
-import { walkFolder } from "../actions/fileops.actions";
+import { map } from "lodash";
 
 interface IProps {
   comicBookCoversMetadata: IExtractedComicBookCoverFile[];
@@ -14,13 +12,15 @@ class Card extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
   }
-  private removeLeadingPeriod = (string) => {
-    if (string.charAt(0) == ".") {
-      string = string.substr(1);
+  private removeLeadingPeriod = (input: string): string => {
+    if (input.charAt(0) == ".") {
+      input = input.substr(1);
     }
-    return string;
+    return input;
   };
-  public drawCoverCard = (metadata: IExtractedComicBookCoverFile[]) => {
+  public drawCoverCard = (
+    metadata: IExtractedComicBookCoverFile[],
+  ): JSX.Element[] => {
     return map(metadata, (item: IExtractedComicBookCoverFile) => {
       return (
         <div className="card">
@@ -38,7 +38,7 @@ class Card extends React.Component<IProps, IState> {
             </figure>
           </div>
           <div className="card-content">
-            <div className="content">{item.name}</div>
+            <div className="content truncate">{item.name}</div>
           </div>
         </div>
       );
diff --git a/src/client/components/Import.tsx b/src/client/components/Import.tsx
index 642db12..5ccf582 100644
--- a/src/client/components/Import.tsx
+++ b/src/client/components/Import.tsx
@@ -88,10 +88,9 @@ class Import extends React.Component<IProps, IState> {
               <span>Import and Tag</span>
             </button>
           </p>
-          {/* Folder walk results */}
+
           {!_.isUndefined(this.state.folderWalkResults) ? (
             <>
-              <div>poopie</div>
               <Card comicBookCoversMetadata={this.props.garam} />
             </>
           ) : null}