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

🏗️ Fixed volume group card stacks on Dashboard

Browse Source
This commit is contained in:
Rishi Ghan
2024-01-15 22:52:35 -05:00
parent a2fe633502
commit c25dc40dac
2 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/components/Dashboard/Dashboard.tsx
View File

@@ -202,7 +202,7 @@ export const Dashboard = (): ReactElement => {
{/* Volume groups */} {/* Volume groups */}
<VolumeGroups volumeGroups={volumeGroups?.data.docs} /> <VolumeGroups volumeGroups={volumeGroups?.data} />
</div> </div>
); );
}; };

50
src/client/components/Dashboard/VolumeGroups.tsx
View File

@@ -2,7 +2,7 @@ import { map, unionBy } from "lodash";
import React, { ReactElement } from "react"; import React, { ReactElement } from "react";
import ellipsize from "ellipsize"; import ellipsize from "ellipsize";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import Masonry from "react-masonry-css"; import Card from "../shared/Carda";
export const VolumeGroups = (props): ReactElement => { export const VolumeGroups = (props): ReactElement => {
const breakpointColumnsObj = { const breakpointColumnsObj = {
@@ -18,7 +18,6 @@ export const VolumeGroups = (props): ReactElement => {
navigate(`/volumes/all`); navigate(`/volumes/all`);
}; };
console.log(props);
return ( return (
<section className="volumes-container mt-4"> <section className="volumes-container mt-4">
<div className="content"> <div className="content">
@@ -32,32 +31,39 @@ export const VolumeGroups = (props): ReactElement => {
</a> </a>
<p className="subtitle is-7">Based on ComicVine Volume information</p> <p className="subtitle is-7">Based on ComicVine Volume information</p>
</div> </div>
<Masonry <div className="grid grid-cols-5 gap-6">
breakpointCols={breakpointColumnsObj}
className="volumes-grid"
columnClassName="volumes-grid-column"
>
{map(deduplicatedGroups, (data) => { {map(deduplicatedGroups, (data) => {
return ( return (
<div className="stack" key={data._id}> <div className="max-w-sm py-8 mx-auto" key={data._id}>
<img src={data.volumes.image.small_url} /> <Card
<div className="content"> orientation="vertical-2"
<div className="stack-title is-size-8"> key={data._id}
<Link to={`/volume/details/${data._id}`}> imageUrl={data.volumes.image.small_url}
{ellipsize(data.volumes.name, 18)} hasDetails
</Link> >
<div className="content">
<div className="stack-title is-size-8">
<Link to={`/volume/details/${data._id}`}>
{ellipsize(data.volumes.name, 18)}
</Link>
</div>
<div className="control">
<span className="tags has-addons">
<span className="tag is-primary is-light">Issues</span>
<span className="tag">
{data.volumes.count_of_issues}
</span>
</span>
</div>
</div> </div>
<div className="control"> </Card>
<span className="tags has-addons"> <div className="w-11/12 h-2 mx-auto bg-gray-900 rounded-b opacity-75"></div>
<span className="tag is-primary is-light">Issues</span> <div className="w-10/12 h-2 mx-auto bg-gray-900 rounded-b opacity-50"></div>
<span className="tag">{data.volumes.count_of_issues}</span> <div className="w-9/12 h-2 mx-auto bg-gray-900 rounded-b opacity-25"></div>
</span>
</div>
</div>
</div> </div>
); );
})} })}
</Masonry> </div>
</section> </section>
); );
}; };