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

💅🏽 react-table UI polishes

Browse Source
This commit is contained in:
Rishi Ghan
2022-03-20 23:33:16 -07:00
parent 2c8e339e3b
commit 089078fda0
3 changed files with 92 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -263,6 +263,22 @@ pre {
border-radius: 0.5rem;
}
.issue-metadata {
background-color: #FBFFEE;
padding: 0.8em;
border-radius: 0.5rem;
.name {
font-size: 0.95rem;
color: #4A4F50;
}
}
.comicvine-metadata {
background-color: #EBFCFF;
padding: 0.8rem;
border-radius: 0.5rem;
}
// Comic Detail
.comic-detail {
dl {

31
src/client/components/Library/Library.tsx
View File

@@ -7,7 +7,7 @@ import React, {
} from "react";
import PropTypes from "prop-types";
import { useNavigate } from "react-router-dom";
import { useTable, usePagination } from "react-table";
import { useTable, usePagination, useFlexLayout } from "react-table";
import { flatten, isEmpty, isNil, isUndefined, map } from "lodash";
import RawFileDetails from "./RawFileDetails";
import ComicVineDetails from "./ComicVineDetails";
@@ -38,27 +38,27 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
const ImportStatus = ({ value }) => {
return value ? (
<div className="box">
<div className="comicvine-metadata">
<dl>
<span className="tags has-addons is-size-7">
<span className="tag is-info">Series</span>
<span className="tag">{ellipsize(value.series[0], 25)}</span>
<span className="tag">Series</span>
<span className="tag is-warning is-light">{ellipsize(value.series[0], 25)}</span>
</span>
</dl>
<dl>
<div className="field is-grouped is-grouped-multiline">
<div className="control">
<span className="tags has-addons is-size-7 has-text-weight-bold mt-2">
<span className="tag is-info">Pages</span>
<span className="tag">{value.pagecount[0]}</span>
<span className="tags has-addons is-size-7 mt-2">
<span className="tag">Pages</span>
<span className="tag is-info is-light has-text-weight-bold">{value.pagecount[0]}</span>
</span>
</div>
<div className="control">
<span className="tags has-addons is-size-7 has-text-weight-bold mt-2">
<span className="tag is-info">Issue</span>
<span className="tags has-addons is-size-7 mt-2">
<span className="tag">Issue</span>
{!isNil(value.number) && (
<span className="tag">{parseInt(value.number[0], 10)}</span>
<span className="tag has-text-weight-bold is-success is-light">{parseInt(value.number[0], 10)}</span>
)}
</span>
</div>
@@ -84,6 +84,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
{
Header: "File Details",
id: "fileDetails",
minWidth: 450,
accessor: (row) =>
!isEmpty(row._source.rawFileDetails)
? {
@@ -106,6 +107,8 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
{
Header: "Import Status",
accessor: "_source.sourcedMetadata.comicInfo",
minWidth: 300,
align: "right",
Cell: ImportStatus,
},
],
@@ -123,6 +126,13 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
);
},
},
{
Header: "Something",
accessor: "_source.acquisition.wanted",
Cell: (props) => {
return <div>asda</div>
},
},
],
},
],
@@ -159,6 +169,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
pageCount: searchResults.hits.total.value,
},
usePagination,
useFlexLayout,
);
const dispatch = useDispatch();
const goToNextPage = useCallback(() => {

94
src/client/components/Library/RawFileDetails.tsx
View File

@@ -4,6 +4,7 @@ import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
import prettyBytes from "pretty-bytes";
import ellipsize from "ellipsize";
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
import { Card } from "../Carda";
// raw file details
export const RawFileDetails = (rawFileData): ReactElement => {
@@ -13,48 +14,63 @@ export const RawFileDetails = (rawFileData): ReactElement => {
);
const filePath = escapePoundSymbol(encodedFilePath);
return (
<div className="card-container">
<div className="card">
<div className="is-horizontal">
<div className="card-image">
<figure>
<img className="image" src={filePath} />
</figure>
</div>
<ul className="card-content">
<li className="name has-text-weight-medium">
{ellipsize(rawFileDetails.name, 49)}
</li>
<div className="columns">
<div className="column">
<div className="comic-detail issue-metadata">
<dl>
<dd>
<div className="columns mt-2">
<div className="column is-3">
<Card
imageUrl={filePath}
orientation={"vertical"}
hasDetails={false}
// cardContainerStyle={{ maxWidth: 200 }}
/>
</div>
<div className="column">
<dl>
<dt>
<h6 className="name has-text-weight-medium mb-1">
{rawFileDetails.name}
</h6>
</dt>
<dd className="is-size-7">
Is a part of{" "}
<span className="has-text-weight-semibold">
{inferredMetadata.issue.name}
</span>
</dd>
<li>
<dl className="is-size-7">
<dd>
Series:{" "}
<span className="has-text-weight-medium">
{inferredMetadata.issue.name}
</span>
</dd>
</dl>
</li>
<li>
<div className="mt-1 field is-grouped is-grouped-multiline">
<div className="control">
<div className="tags">
<span className="tag is-warning is-light">
{inferredMetadata.issue.number}
</span>
<span className="tag is-success is-light">
{rawFileDetails.extension}
</span>
<span className="tag">
{prettyBytes(rawFileDetails.fileSize)}
</span>
</div>
<dd className="is-size-7 mt-2">
<div className="field is-grouped is-grouped-multiline">
<div className="control">
<span className="tags">
<span className="tag is-success is-light has-text-weight-semibold">
{rawFileDetails.extension}
</span>
<span className="tag is-success is-light">
{prettyBytes(rawFileDetails.fileSize)}
</span>
</span>
</div>
<div className="control">
{inferredMetadata.issue.number && (
<div className="tags has-addons">
<span className="tag is-light">Issue #</span>
<span className="tag is-warning">
{inferredMetadata.issue.number}
</span>
</div>
)}
</div>
</div>
</dd>
</dl>
</div>
</div>
</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>