From e7981539e65f689cc0db87b19e3191bb8712d366 Mon Sep 17 00:00:00 2001 From: Jelle van Snik Date: Sat, 7 Jan 2023 23:44:46 +0100 Subject: [PATCH] media grids --- package.json | 1 + src/components/SearchBar.tsx | 2 +- src/components/buttons/DropdownButton.tsx | 6 +- src/components/buttons/IconPatch.tsx | 4 +- src/components/layout/Backdrop.tsx | 8 +-- src/components/layout/BrandPill.tsx | 9 +-- src/components/layout/WideContainer.tsx | 18 ++++++ src/components/media/MediaCard.tsx | 78 ++++++++--------------- src/components/media/MediaGrid.tsx | 11 ++++ src/components/text/Title.tsx | 7 +- src/views/search/HomeView.tsx | 28 +++++--- src/views/search/SearchLoadingView.tsx | 2 +- src/views/search/SearchResultsView.tsx | 17 +++-- src/views/search/SearchView.tsx | 12 ++-- tailwind.config.js | 26 ++++---- yarn.lock | 19 ++++-- 16 files changed, 136 insertions(+), 112 deletions(-) create mode 100644 src/components/layout/WideContainer.tsx create mode 100644 src/components/media/MediaGrid.tsx diff --git a/package.json b/package.json index 405a6ca5..49f803f6 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ ] }, "devDependencies": { + "@tailwindcss/line-clamp": "^0.4.2", "@types/crypto-js": "^4.1.1", "@types/node": "^17.0.15", "@types/react": "^17.0.39", diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index eea26423..3be9d0b5 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -37,7 +37,7 @@ export function SearchBarInput(props: SearchBarProps) { } return ( -
+
diff --git a/src/components/buttons/DropdownButton.tsx b/src/components/buttons/DropdownButton.tsx index f32517ba..a49403e8 100644 --- a/src/components/buttons/DropdownButton.tsx +++ b/src/components/buttons/DropdownButton.tsx @@ -6,11 +6,7 @@ import React, { } from "react"; import { Icon, Icons } from "@/components/Icon"; -import { - Backdrop, - BackdropContainer, - useBackdrop, -} from "@/components/layout/Backdrop"; +import { BackdropContainer, useBackdrop } from "@/components/layout/Backdrop"; import { ButtonControlProps, ButtonControl } from "./ButtonControl"; export interface OptionItem { diff --git a/src/components/buttons/IconPatch.tsx b/src/components/buttons/IconPatch.tsx index f14a3f56..53980322 100644 --- a/src/components/buttons/IconPatch.tsx +++ b/src/components/buttons/IconPatch.tsx @@ -12,9 +12,9 @@ export function IconPatch(props: IconPatchProps) { return (
diff --git a/src/components/layout/Backdrop.tsx b/src/components/layout/Backdrop.tsx index 3daac079..3ded3afc 100644 --- a/src/components/layout/Backdrop.tsx +++ b/src/components/layout/Backdrop.tsx @@ -40,7 +40,7 @@ export function useBackdrop(): [ return [setBackdrop, backdropProps, highlightedProps]; } -export function Backdrop(props: BackdropProps) { +function Backdrop(props: BackdropProps) { const clickEvent = props.onClick || (() => {}); const animationEvent = props.onBackdropHide || (() => {}); const [isVisible, setVisible, fadeProps] = useFade(); @@ -59,7 +59,7 @@ export function Backdrop(props: BackdropProps) { return (
{createPortal( -
+
-
+
{props.children}
, diff --git a/src/components/layout/BrandPill.tsx b/src/components/layout/BrandPill.tsx index 3df0be76..82a037cb 100644 --- a/src/components/layout/BrandPill.tsx +++ b/src/components/layout/BrandPill.tsx @@ -6,13 +6,14 @@ export function BrandPill(props: { clickable?: boolean }) { return (
- {t('global.name')} + {t("global.name")}
); } diff --git a/src/components/layout/WideContainer.tsx b/src/components/layout/WideContainer.tsx new file mode 100644 index 00000000..f7d745fe --- /dev/null +++ b/src/components/layout/WideContainer.tsx @@ -0,0 +1,18 @@ +import { ReactNode } from "react"; + +interface WideContainerProps { + classNames?: string; + children?: ReactNode; +} + +export function WideContainer(props: WideContainerProps) { + return ( +
+ {props.children} +
+ ); +} diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx index 2171f7cb..8174f2c8 100644 --- a/src/components/media/MediaCard.tsx +++ b/src/components/media/MediaCard.tsx @@ -5,23 +5,20 @@ import { MWMediaMeta, MWMediaType, } from "@/providers"; -import { Icon, Icons } from "@/components/Icon"; import { serializePortableMedia } from "@/hooks/usePortableMedia"; import { DotList } from "@/components/text/DotList"; export interface MediaCardProps { media: MWMediaMeta; + // eslint-disable-next-line react/no-unused-prop-types watchedPercentage: number; linkable?: boolean; series?: boolean; } -function MediaCardContent({ - media, - linkable, - watchedPercentage, - series, -}: MediaCardProps) { +// TODO add progress back + +function MediaCardContent({ media, series, linkable }: MediaCardProps) { const provider = getProviderFromId(media.providerId); if (!provider) { @@ -29,52 +26,31 @@ function MediaCardContent({ } return ( -
- {/* progress background */} - {watchedPercentage > 0 ? ( -
-
-
-
-
- ) : null} - -
- {/* card content */} -
-

- {media.title} - {series && media.seasonId && media.episodeId ? ( - - S{media.seasonId} E{media.episodeId} - - ) : null} -

- -
- - {/* hoverable chevron */} -
- -
-
-
+
+
+

+ {media.title} + {series && media.seasonId && media.episodeId ? ( + + S{media.seasonId} E{media.episodeId} + + ) : null} +

+ +
+
); } diff --git a/src/components/media/MediaGrid.tsx b/src/components/media/MediaGrid.tsx new file mode 100644 index 00000000..59a3e39e --- /dev/null +++ b/src/components/media/MediaGrid.tsx @@ -0,0 +1,11 @@ +interface MediaGridProps { + children?: React.ReactNode; +} + +export function MediaGrid(props: MediaGridProps) { + return ( +
+ {props.children} +
+ ); +} diff --git a/src/components/text/Title.tsx b/src/components/text/Title.tsx index f6771c6f..f30d6f8a 100644 --- a/src/components/text/Title.tsx +++ b/src/components/text/Title.tsx @@ -1,10 +1,15 @@ export interface TitleProps { children?: React.ReactNode; + className?: string; } export function Title(props: TitleProps) { return ( -

+

{props.children}

); diff --git a/src/views/search/HomeView.tsx b/src/views/search/HomeView.tsx index d646646f..180d456e 100644 --- a/src/views/search/HomeView.tsx +++ b/src/views/search/HomeView.tsx @@ -1,5 +1,6 @@ import { Icons } from "@/components/Icon"; import { SectionHeading } from "@/components/layout/SectionHeading"; +import { MediaGrid } from "@/components/media/MediaGrid"; import { WatchedMediaCard } from "@/components/media/WatchedMediaCard"; import { getIfBookmarkedFromPortable, @@ -20,9 +21,14 @@ function Bookmarks() { title={t("search.bookmarks") || "Bookmarks"} icon={Icons.BOOKMARK} > - {bookmarks.map((v) => ( - - ))} + + {bookmarks.map((v) => ( + + ))} + ); } @@ -44,13 +50,15 @@ function Watched() { title={t("search.continueWatching") || "Continue Watching"} icon={Icons.CLOCK} > - {watchedItems.map((v) => ( - - ))} + + {watchedItems.map((v) => ( + + ))} + ); } diff --git a/src/views/search/SearchLoadingView.tsx b/src/views/search/SearchLoadingView.tsx index e8ce46d2..4572c659 100644 --- a/src/views/search/SearchLoadingView.tsx +++ b/src/views/search/SearchLoadingView.tsx @@ -5,7 +5,7 @@ export function SearchLoadingView() { const { t } = useTranslation(); return ( ); diff --git a/src/views/search/SearchResultsView.tsx b/src/views/search/SearchResultsView.tsx index a948553c..6ce0001d 100644 --- a/src/views/search/SearchResultsView.tsx +++ b/src/views/search/SearchResultsView.tsx @@ -1,6 +1,7 @@ import { IconPatch } from "@/components/buttons/IconPatch"; import { Icons } from "@/components/Icon"; import { SectionHeading } from "@/components/layout/SectionHeading"; +import { MediaGrid } from "@/components/media/MediaGrid"; import { WatchedMediaCard } from "@/components/media/WatchedMediaCard"; import { useLoading } from "@/hooks/useLoading"; import { MWMassProviderOutput, MWQuery, SearchProviders } from "@/providers"; @@ -19,7 +20,7 @@ function SearchSuffix(props: { const icon: Icons = allFailed ? Icons.WARNING : Icons.EYE_SLASH; return ( -
+
- {results.results.map((v) => ( - - ))} + + {results.results.map((v) => ( + + ))} + ) : null} diff --git a/src/views/search/SearchView.tsx b/src/views/search/SearchView.tsx index d4f5e1d9..4d45e278 100644 --- a/src/views/search/SearchView.tsx +++ b/src/views/search/SearchView.tsx @@ -5,8 +5,8 @@ import { SearchBarInput } from "@/components/SearchBar"; import Sticky from "react-stickynode"; import { Title } from "@/components/text/Title"; import { useSearchQuery } from "@/hooks/useSearchQuery"; +import { WideContainer } from "@/components/layout/WideContainer"; import { useTranslation } from "react-i18next"; - import { SearchResultsPartial } from "./SearchResultsPartial"; export function SearchView() { @@ -21,16 +21,16 @@ export function SearchView() { return ( <> -
+
-
+
- {t("search.title")} + {t("search.title")}
- + - + ); } diff --git a/tailwind.config.js b/tailwind.config.js index f26c6c17..eb70d4d8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,29 +12,29 @@ module.exports = { "bink-500": "#8D66B5", "bink-600": "#A87FD1", "bink-700": "#CD97D6", - "denim-100": "#131119", - "denim-200": "#1E1A29", - "denim-300": "#282336", - "denim-400": "#322D43", - "denim-500": "#433D55", - "denim-600": "#5A5370", - "denim-700": "#817998", + "denim-100": "#120F1D", + "denim-200": "#191526", + "denim-300": "#211D30", + "denim-400": "#2B263D", + "denim-500": "#38334A", + "denim-600": "#504B64", + "denim-700": "#7A758F" }, /* fonts */ fontFamily: { - "open-sans": "'Open Sans'", + "open-sans": "'Open Sans'" }, /* animations */ keyframes: { "loading-pin": { "0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" }, - "20%": { height: "1em", "background-color": "white" }, - }, + "20%": { height: "1em", "background-color": "white" } + } }, - animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }, - }, + animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" } + } }, - plugins: [require("tailwind-scrollbar")], + plugins: [require("tailwind-scrollbar"), require("@tailwindcss/line-clamp")] }; diff --git a/yarn.lock b/yarn.lock index b454d8fe..bd46f9e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -254,6 +254,11 @@ "@swc/core-win32-ia32-msvc" "1.3.22" "@swc/core-win32-x64-msvc" "1.3.22" +"@tailwindcss/line-clamp@^0.4.2": + "integrity" "sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==" + "resolved" "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz" + "version" "0.4.2" + "@tootallnate/once@2": "version" "2.0.0" @@ -1942,16 +1947,16 @@ "version" "1.1.4" "json5@^1.0.1": - "integrity" "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==" - "resolved" "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz" - "version" "1.0.1" + "integrity" "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==" + "resolved" "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz" + "version" "1.0.2" dependencies: "minimist" "^1.2.0" "json5@^2.2.0": - "integrity" "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==" - "resolved" "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz" - "version" "2.2.1" + "integrity" "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==" + "resolved" "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz" + "version" "2.2.3" "jsonparse@^1.3.1": "version" "1.3.1" @@ -3225,7 +3230,7 @@ "resolved" "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-2.0.1.tgz" "version" "2.0.1" -"tailwindcss@^3.2.4", "tailwindcss@3.x": +"tailwindcss@^3.2.4", "tailwindcss@>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1", "tailwindcss@3.x": "integrity" "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==" "resolved" "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz" "version" "3.2.4"