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; 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
.comic-detail { .comic-detail {
dl { dl {

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

@@ -7,7 +7,7 @@ import React, {
} from "react"; } from "react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { useNavigate } from "react-router-dom"; 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 { flatten, isEmpty, isNil, isUndefined, map } from "lodash";
import RawFileDetails from "./RawFileDetails"; import RawFileDetails from "./RawFileDetails";
import ComicVineDetails from "./ComicVineDetails"; import ComicVineDetails from "./ComicVineDetails";
@@ -38,27 +38,27 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
const ImportStatus = ({ value }) => { const ImportStatus = ({ value }) => {
return value ? ( return value ? (
<div className="box"> <div className="comicvine-metadata">
<dl> <dl>
<span className="tags has-addons is-size-7"> <span className="tags has-addons is-size-7">
<span className="tag is-info">Series</span> <span className="tag">Series</span>
<span className="tag">{ellipsize(value.series[0], 25)}</span> <span className="tag is-warning is-light">{ellipsize(value.series[0], 25)}</span>
</span> </span>
</dl> </dl>
<dl> <dl>
<div className="field is-grouped is-grouped-multiline"> <div className="field is-grouped is-grouped-multiline">
<div className="control"> <div className="control">
<span className="tags has-addons is-size-7 has-text-weight-bold mt-2"> <span className="tags has-addons is-size-7 mt-2">
<span className="tag is-info">Pages</span> <span className="tag">Pages</span>
<span className="tag">{value.pagecount[0]}</span> <span className="tag is-info is-light has-text-weight-bold">{value.pagecount[0]}</span>
</span> </span>
</div> </div>
<div className="control"> <div className="control">
<span className="tags has-addons is-size-7 has-text-weight-bold mt-2"> <span className="tags has-addons is-size-7 mt-2">
<span className="tag is-info">Issue</span> <span className="tag">Issue</span>
{!isNil(value.number) && ( {!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> </span>
</div> </div>
@@ -84,6 +84,7 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
{ {
Header: "File Details", Header: "File Details",
id: "fileDetails", id: "fileDetails",
minWidth: 450,
accessor: (row) => accessor: (row) =>
!isEmpty(row._source.rawFileDetails) !isEmpty(row._source.rawFileDetails)
? { ? {
@@ -106,6 +107,8 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => {
{ {
Header: "Import Status", Header: "Import Status",
accessor: "_source.sourcedMetadata.comicInfo", accessor: "_source.sourcedMetadata.comicInfo",
minWidth: 300,
align: "right",
Cell: ImportStatus, 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, pageCount: searchResults.hits.total.value,
}, },
usePagination, usePagination,
useFlexLayout,
); );
const dispatch = useDispatch(); const dispatch = useDispatch();
const goToNextPage = useCallback(() => { 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 prettyBytes from "pretty-bytes";
import ellipsize from "ellipsize"; import ellipsize from "ellipsize";
import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints"; import { LIBRARY_SERVICE_HOST } from "../../constants/endpoints";
import { Card } from "../Carda";
// raw file details // raw file details
export const RawFileDetails = (rawFileData): ReactElement => { export const RawFileDetails = (rawFileData): ReactElement => {
@@ -13,48 +14,63 @@ export const RawFileDetails = (rawFileData): ReactElement => {
); );
const filePath = escapePoundSymbol(encodedFilePath); const filePath = escapePoundSymbol(encodedFilePath);
return ( return (
<div className="card-container"> <div className="columns">
<div className="card"> <div className="column">
<div className="is-horizontal"> <div className="comic-detail issue-metadata">
<div className="card-image"> <dl>
<figure> <dd>
<img className="image" src={filePath} /> <div className="columns mt-2">
</figure> <div className="column is-3">
</div> <Card
<ul className="card-content"> imageUrl={filePath}
<li className="name has-text-weight-medium"> orientation={"vertical"}
{ellipsize(rawFileDetails.name, 49)} hasDetails={false}
</li> // 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> <dd className="is-size-7 mt-2">
<dl className="is-size-7"> <div className="field is-grouped is-grouped-multiline">
<dd> <div className="control">
Series:{" "} <span className="tags">
<span className="has-text-weight-medium"> <span className="tag is-success is-light has-text-weight-semibold">
{inferredMetadata.issue.name} {rawFileDetails.extension}
</span> </span>
</dd> <span className="tag is-success is-light">
</dl> {prettyBytes(rawFileDetails.fileSize)}
</li> </span>
<li> </span>
<div className="mt-1 field is-grouped is-grouped-multiline"> </div>
<div className="control"> <div className="control">
<div className="tags"> {inferredMetadata.issue.number && (
<span className="tag is-warning is-light"> <div className="tags has-addons">
{inferredMetadata.issue.number} <span className="tag is-light">Issue #</span>
</span> <span className="tag is-warning">
{inferredMetadata.issue.number}
<span className="tag is-success is-light"> </span>
{rawFileDetails.extension} </div>
</span> )}
<span className="tag"> </div>
{prettyBytes(rawFileDetails.fileSize)} </div>
</span> </dd>
</div> </dl>
</div> </div>
</div> </div>
</li> </dd>
</ul> </dl>
</div> </div>
</div> </div>
</div> </div>