Dashboard links (ShokoAnime#657)

* Add links to poster items on dashboard * Fix itemsPerRow again
Queuecumbr · Oct 23, 2023 · 281f957 · 281f957
1 parent 58f94cf
commit 281f957
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/src/components/Collection/CollectionView.tsx b/src/components/Collection/CollectionView.tsx
@@ -142,7 +142,8 @@ const CollectionView = ({ isSidebarOpen, mode, setGroupTotal, setTimelineSeries
   const [gridContainerRef, gridContainerBounds] = useMeasure();
 
   const [itemsPerRow, count] = useMemo(() => {
-    const tempItemsPerRow = Math.max(1, Math.floor((gridContainerBounds.width + itemGap) / (itemWidth + itemGap)));
+    // + 4 is to account for scrollbar, otherwise only 7 items show up in a row at max width
+    const tempItemsPerRow = Math.max(1, Math.floor((gridContainerBounds.width + itemGap + 4) / (itemWidth + itemGap)));
     const tempCount = total === -1 ? 0 : Math.ceil(total / tempItemsPerRow);
     return [tempItemsPerRow, tempCount];
   }, [gridContainerBounds.width, itemGap, itemWidth, total]);

diff --git a/src/pages/dashboard/components/EpisodeDetails.tsx b/src/pages/dashboard/components/EpisodeDetails.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import type { JSX } from 'react';
+import { Link } from 'react-router-dom';
 import { mdiLayersTripleOutline } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import moment from 'moment';
@@ -24,7 +24,7 @@ type Props = {
   isInCollection?: boolean;
 };
 
-function EpisodeDetails(props: Props): JSX.Element {
+function EpisodeDetails(props: Props): React.ReactNode {
   const { episode, isInCollection, showDate } = props;
   const percentage = useMemo(() => {
     if (episode.ResumePosition == null) return null;
@@ -40,7 +40,11 @@ function EpisodeDetails(props: Props): JSX.Element {
   );
 
   return (
-    <div key={`episode-${episode.IDs.ID}`} className="mr-4 flex w-56 shrink-0 flex-col justify-center last:mr-0">
+    <Link
+      key={`episode-${episode.IDs.ID}`}
+      className="group mr-4 flex w-56 shrink-0 flex-col justify-center last:mr-0"
+      to={`/webui/collection/series/${episode.IDs.ShokoSeries}/episodes`}
+    >
       {showDate
         ? (
           <>
@@ -52,6 +56,7 @@ function EpisodeDetails(props: Props): JSX.Element {
       <BackgroundImagePlaceholderDiv
         image={episode.SeriesPoster}
         className="mb-3 h-80 rounded border border-panel-border drop-shadow-md"
+        zoomOnHover
       >
         {percentage && (
           <div className="absolute bottom-0 left-0 h-1 bg-panel-text-primary" style={{ width: percentage }} />
@@ -66,7 +71,7 @@ function EpisodeDetails(props: Props): JSX.Element {
         {episode.SeriesTitle}
       </p>
       <p className="truncate text-center text-sm font-semibold opacity-65" title={title}>{title}</p>
-    </div>
+    </Link>
   );
 }
 

diff --git a/src/pages/dashboard/components/SeriesDetails.tsx b/src/pages/dashboard/components/SeriesDetails.tsx
@@ -1,4 +1,5 @@
 import React, { type JSX } from 'react';
+import { Link } from 'react-router-dom';
 
 import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv';
 import useMainPoster from '@/hooks/useMainPoster';
@@ -10,17 +11,22 @@ function SeriesDetails(props: { series: SeriesType }): JSX.Element {
   const mainPoster = useMainPoster(series);
 
   return (
-    <div key={`series-${series.IDs.ID}`} className="mr-4 flex w-56 shrink-0 flex-col justify-center last:mr-0">
+    <Link
+      key={`series-${series.IDs.ID}`}
+      className="group mr-4 flex w-56 shrink-0 flex-col justify-center last:mr-0"
+      to={`/webui/collection/series/${series.IDs.ID}`}
+    >
       <BackgroundImagePlaceholderDiv
         image={mainPoster}
         className="mb-3 h-80 rounded border border-panel-border drop-shadow-md"
+        zoomOnHover
       />
       <p className="mb-1 truncate text-center text-sm font-semibold" title={series.Name}>{series.Name}</p>
       <p className="truncate text-center text-sm font-semibold opacity-65" title={`${series.Size} Files`}>
         {series.Size}
         &nbsp;Files
       </p>
-    </div>
+    </Link>
   );
 }