From 1fb7ea72589d2908ae80a2a688881d4eb3c050e5 Mon Sep 17 00:00:00 2001 From: sct Date: Wed, 23 Dec 2020 16:02:55 +0900 Subject: [PATCH] feat(frontend): adjust person details design and add improved truncate --- package.json | 1 + src/assets/ellipsis.svg | 6 +++ src/components/Common/ImageFader/index.tsx | 18 +++++++- src/components/PersonDetails/index.tsx | 49 +++++++++++++++------- tailwind.config.js | 2 +- yarn.lock | 34 ++++++++++++++- 6 files changed, 90 insertions(+), 20 deletions(-) create mode 100644 src/assets/ellipsis.svg diff --git a/package.json b/package.json index f911a453e..ac024cece 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "react-spring": "^8.0.27", "react-toast-notifications": "^2.4.0", "react-transition-group": "^4.4.1", + "react-truncate-markup": "^5.0.1", "react-use-clipboard": "1.0.2", "reflect-metadata": "^0.1.13", "sqlite3": "^5.0.0", diff --git a/src/assets/ellipsis.svg b/src/assets/ellipsis.svg new file mode 100644 index 000000000..2c286cb02 --- /dev/null +++ b/src/assets/ellipsis.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Common/ImageFader/index.tsx b/src/components/Common/ImageFader/index.tsx index 4ccb9711b..902e9a281 100644 --- a/src/components/Common/ImageFader/index.tsx +++ b/src/components/Common/ImageFader/index.tsx @@ -8,12 +8,18 @@ import React, { interface ImageFaderProps extends HTMLAttributes { backgroundImages: string[]; rotationSpeed?: number; + isDarker?: boolean; } const DEFAULT_ROTATION_SPEED = 6000; const ImageFader: ForwardRefRenderFunction = ( - { backgroundImages, rotationSpeed = DEFAULT_ROTATION_SPEED, ...props }, + { + backgroundImages, + rotationSpeed = DEFAULT_ROTATION_SPEED, + isDarker, + ...props + }, ref ) => { const [activeIndex, setIndex] = useState(0); @@ -29,6 +35,14 @@ const ImageFader: ForwardRefRenderFunction = ( }; }, [backgroundImages, rotationSpeed]); + let gradient = + 'linear-gradient(180deg, rgba(45, 55, 72, 0.47) 0%, #1A202E 100%)'; + + if (isDarker) { + gradient = + 'linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%)'; + } + return (
{backgroundImages.map((imageUrl, i) => ( @@ -38,7 +52,7 @@ const ImageFader: ForwardRefRenderFunction = ( i === activeIndex ? 'opacity-100' : 'opacity-0' }`} style={{ - backgroundImage: `linear-gradient(180deg, rgba(45, 55, 72, 0.47) 0%, #1A202E 100%), url(${imageUrl})`, + backgroundImage: `${gradient}, url(${imageUrl})`, }} {...props} /> diff --git a/src/components/PersonDetails/index.tsx b/src/components/PersonDetails/index.tsx index c05829699..1121a13c4 100644 --- a/src/components/PersonDetails/index.tsx +++ b/src/components/PersonDetails/index.tsx @@ -1,5 +1,6 @@ import { useRouter } from 'next/router'; import React, { useContext, useState } from 'react'; +import TruncateMarkup from 'react-truncate-markup'; import useSWR from 'swr'; import type { PersonDetail } from '../../../server/models/Person'; import type { PersonCombinedCreditsResponse } from '../../../server/interfaces/api/personInterfaces'; @@ -8,6 +9,8 @@ import LoadingSpinner from '../Common/LoadingSpinner'; import TitleCard from '../TitleCard'; import { defineMessages, useIntl } from 'react-intl'; import { LanguageContext } from '../../context/LanguageContext'; +import ImageFader from '../Common/ImageFader'; +import Ellipsis from '../../assets/ellipsis.svg'; const messages = defineMessages({ appearsin: 'Appears in', @@ -74,7 +77,21 @@ const PersonDetails: React.FC = () => { return ( <> -
+ {(sortedCrew || sortedCast) && ( +
+ media.posterPath) + .map( + (media) => + `//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${media.posterPath}` + ) + .slice(0, 6)} + /> +
+ )} +
{data.profilePath && (
{
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
setShowBio((show) => !show)} role="button" tabIndex={-1} > -
- {data.biography - ? data.biography - : intl.formatMessage(messages.nobiography)} -
- {!showBio && ( -
- )} + + } + > +
+ {data.biography + ? data.biography + : intl.formatMessage(messages.nobiography)} +
+
{(sortedCast ?? []).length > 0 && ( <> -
+
{intl.formatMessage(messages.appearsin)} @@ -157,7 +174,7 @@ const PersonDetails: React.FC = () => { )} {(sortedCrew ?? []).length > 0 && ( <> -
+
{intl.formatMessage(messages.crewmember)} diff --git a/tailwind.config.js b/tailwind.config.js index 94b25a79d..79a78e78e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -62,7 +62,7 @@ module.exports = { borderWidth: ['first', 'last'], margin: ['first', 'last', 'responsive'], boxShadow: ['group-focus'], - opacity: ['disabled', 'hover'], + opacity: ['disabled', 'hover', 'group-hover'], }, plugins: [ require('@tailwindcss/forms'), diff --git a/yarn.lock b/yarn.lock index e281a3abc..47865d021 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4162,6 +4162,11 @@ compose-function@3.0.3: dependencies: arity-n "^1.0.4" +computed-style@~0.1.3: + version "0.1.4" + resolved "https://registry.yarnpkg.com/computed-style/-/computed-style-0.1.4.tgz#7f344fd8584b2e425bedca4a1afc0e300bb05d74" + integrity sha1-fzRP2FhLLkJb7cpKGvwOMAuwXXQ= + concat-map@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" @@ -8155,6 +8160,13 @@ line-column@^1.0.2: isarray "^1.0.0" isobject "^2.0.0" +line-height@0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/line-height/-/line-height-0.3.1.tgz#4b1205edde182872a5efa3c8f620b3187a9c54c9" + integrity sha1-SxIF7d4YKHKl76PI9iCzGHqcVMk= + dependencies: + computed-style "~0.1.3" + lines-and-columns@^1.1.6: version "1.1.6" resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" @@ -8713,6 +8725,11 @@ mem@^1.1.0: dependencies: mimic-fn "^1.0.0" +memoize-one@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" + integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== + memory-fs@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" @@ -11019,7 +11036,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -11448,6 +11465,16 @@ react-transition-group@^4.3.0, react-transition-group@^4.4.1: loose-envify "^1.4.0" prop-types "^15.6.2" +react-truncate-markup@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/react-truncate-markup/-/react-truncate-markup-5.0.1.tgz#5c52bda712f7e185e84969b2b79440ec8b422441" + integrity sha512-WG1E9FLyTrq5ERaDbIq0DjWVs3JrAdr93fasdQqbVlEifBUp27kGM7ws4xCBIh2keDjumTPjw3iiHNNmD+YtcQ== + dependencies: + line-height "0.3.1" + memoize-one "^5.1.1" + prop-types "^15.6.0" + resize-observer-polyfill "1.5.x" + react-use-clipboard@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/react-use-clipboard/-/react-use-clipboard-1.0.2.tgz#e00254ffc70b989daa41638325fa6557c7b89dd2" @@ -11852,6 +11879,11 @@ require-main-filename@^2.0.0: resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b" integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg== +resize-observer-polyfill@1.5.x: + version "1.5.1" + resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" + integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg== + resolve-dir@^1.0.0, resolve-dir@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"