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

🔧 Tweaking appearance of search results

Browse Source
This commit is contained in:
Rishi Ghan
2022-05-29 09:40:46 -07:00
parent 4ec45352e9
commit f6d86199dd
2 changed files with 68 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/client/components/GlobalSearchBar/SearchBar.tsx
View File

@@ -62,7 +62,13 @@ export const SearchBar = (data: ISearchBarProps): ReactElement => {
}} }}
> >
{map(searchResults, (result) => ( {map(searchResults, (result) => (
<MetadataPanel data={result} /> <MetadataPanel
data={result}
imageStyle={{ maxWidth: 70 }}
titleStyle={{ fontSize: "0.8rem" }}
tagsStyle={{ fontSize: "0.7rem" }}
containerStyle={{ width: "100vw", padding: 0, margin: "0 0 8px 0" }}
/>
))} ))}
</div> </div>
) : null} ) : null}

89
src/client/components/shared/MetadataPanel.tsx
View File

@@ -10,6 +10,10 @@ import { find, isUndefined } from "lodash";
interface IMetadatPanelProps { interface IMetadatPanelProps {
value: any; value: any;
children: any; children: any;
imageStyle: any;
titleStyle: any;
tagsStyle: any;
containerStyle: any;
} }
export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => { export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
const { const {
@@ -29,7 +33,12 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
content: () => ( content: () => (
<dl> <dl>
<dt> <dt>
<h6 className="name has-text-weight-medium mb-1">{issueName}</h6> <h6
className="name has-text-weight-medium mb-1"
style={props.titleStyle}
>
{issueName}
</h6>
</dt> </dt>
<dd className="is-size-7"> <dd className="is-size-7">
Is a part of{" "} Is a part of{" "}
@@ -42,10 +51,16 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
<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"> <span className="tags">
<span className="tag is-success is-light has-text-weight-semibold"> <span
className="tag is-success is-light has-text-weight-semibold"
style={props.tagsStyle}
>
{rawFileDetails.extension} {rawFileDetails.extension}
</span> </span>
<span className="tag is-success is-light"> <span
className="tag is-success is-light"
style={props.tagsStyle}
>
{prettyBytes(rawFileDetails.fileSize)} {prettyBytes(rawFileDetails.fileSize)}
</span> </span>
</span> </span>
@@ -53,8 +68,10 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
<div className="control"> <div className="control">
{inferredMetadata.issue.number && ( {inferredMetadata.issue.number && (
<div className="tags has-addons"> <div className="tags has-addons">
<span className="tag is-light">Issue #</span> <span className="tag is-light" style={props.tagsStyle}>
<span className="tag is-warning"> Issue #
</span>
<span className="tag is-warning" style={props.tagsStyle}>
{inferredMetadata.issue.number} {inferredMetadata.issue.number}
</span> </span>
</div> </div>
@@ -73,7 +90,10 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
!isUndefined(comicvine.volumeInformation) && ( !isUndefined(comicvine.volumeInformation) && (
<dl> <dl>
<dt> <dt>
<h6 className="name has-text-weight-medium mb-1"> <h6
className="name has-text-weight-medium mb-1"
style={props.titleStyle}
>
{ellipsize(issueName, 18)} {ellipsize(issueName, 18)}
</h6> </h6>
</dt> </dt>
@@ -103,20 +123,34 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
<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"> <span className="tags">
<span className="tag is-success is-light has-text-weight-semibold"> <span
className="tag is-success is-light has-text-weight-semibold"
style={props.tagsStyle}
>
{comicvine.volumeInformation.start_year} {comicvine.volumeInformation.start_year}
</span> </span>
<span className="tag is-success is-light"> <span
className="tag is-success is-light"
style={props.tagsStyle}
>
{comicvine.volumeInformation.count_of_issues} {comicvine.volumeInformation.count_of_issues}
</span> </span>
</span> </span>
</div> </div>
<div className="control"> <div className="control">
<div className="tags has-addons"> <div className="tags has-addons">
<span className="tag is-primary is-light"> <span
className="tag is-primary is-light"
style={props.tagsStyle}
>
ComicVine ID ComicVine ID
</span> </span>
<span className="tag is-info is-light">{comicvine.id}</span> <span
className="tag is-info is-light"
style={props.tagsStyle}
>
{comicvine.id}
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -166,25 +200,24 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
}); });
return ( return (
<div className="columns"> <div className="column" style={props.containerStyle}>
<div className="column"> <div className="comic-detail issue-metadata">
<div className="comic-detail issue-metadata"> <dl>
<dl> <dd>
<dd> <div className="columns mt-2">
<div className="columns mt-2"> <div className="column is-3">
<div className="column is-3"> <Card
<Card imageUrl={url}
imageUrl={url} orientation={"vertical"}
orientation={"vertical"} hasDetails={false}
hasDetails={false} imageStyle={props.imageStyle}
// cardContainerStyle={{ maxWidth: 200 }} // cardContainerStyle={{ maxWidth: 200 }}
/> />
</div>
<div className="column">{metadataPanel.content()}</div>
</div> </div>
</dd> <div className="column">{metadataPanel.content()}</div>
</dl> </div>
</div> </dd>
</dl>
</div> </div>
</div> </div>
); );