🏞 Beautifying cover display UI

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;
   }

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>
       );

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}