From 00ae40ad72223cb9b1a6353f2ac60964c161a2a9 Mon Sep 17 00:00:00 2001 From: CJ <72030708+Teda1@users.noreply.github.com> Date: Wed, 2 Aug 2023 01:15:09 -0500 Subject: [PATCH] Detail redesign round 2 bug fixes (#3990) * increase full-width for measurement issue in apple devices * trade left margin for more full-width * removed isApple code from details page --- ui/v2.5/src/App.tsx | 9 +- .../components/Movies/MovieDetails/Movie.tsx | 5 +- .../Movies/MovieDetails/MovieDetailsPanel.tsx | 1 + .../Performers/PerformerDetails/Performer.tsx | 5 +- .../PerformerDetailsPanel.tsx | 30 +++++- ui/v2.5/src/components/Shared/styles.scss | 1 + .../Studios/StudioDetails/Studio.tsx | 5 +- .../StudioDetails/StudioDetailsPanel.tsx | 1 + .../src/components/Tags/TagDetails/Tag.tsx | 5 +- .../Tags/TagDetails/TagDetailsPanel.tsx | 1 + ui/v2.5/src/index.scss | 92 ++++++++++++------- 11 files changed, 104 insertions(+), 51 deletions(-) diff --git a/ui/v2.5/src/App.tsx b/ui/v2.5/src/App.tsx index a522f362423..cda72d902a7 100644 --- a/ui/v2.5/src/App.tsx +++ b/ui/v2.5/src/App.tsx @@ -39,6 +39,7 @@ import { IUIConfig } from "./core/config"; import { releaseNotes } from "./docs/en/ReleaseNotes"; import { getPlatformURL } from "./core/createClient"; import { lazyComponent } from "./utils/lazyComponent"; +import { isPlatformUniquelyRenderedByApple } from "./utils/apple"; const Performers = lazyComponent( () => import("./components/Performers/Performers") @@ -67,6 +68,8 @@ const SceneDuplicateChecker = lazyComponent( () => import("./components/SceneDuplicateChecker/SceneDuplicateChecker") ); +const appleRendering = isPlatformUniquelyRenderedByApple(); + initPolyfills(); MousetrapPause(Mousetrap); @@ -274,7 +277,11 @@ export const App: React.FC = () => { defaultTitle="Stash" /> {maybeRenderNavbar()} -
+
{renderContent()}
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx index 859b1d76c67..845da909b77 100644 --- a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx +++ b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx @@ -35,7 +35,6 @@ import { ConfigurationContext } from "src/hooks/Config"; import { IUIConfig } from "src/core/config"; import ImageUtils from "src/utils/image"; import { useRatingKeybinds } from "src/hooks/keybinds"; -import { isPlatformUniquelyRenderedByApple } from "src/utils/apple"; interface IProps { movie: GQL.MovieDataFragment; @@ -65,8 +64,6 @@ const MoviePage: React.FC = ({ movie }) => { const [backImage, setBackImage] = useState(); const [encodingImage, setEncodingImage] = useState(false); - const appleRendering = isPlatformUniquelyRenderedByApple(); - const defaultImage = movie.front_image_path && movie.front_image_path.includes("default=true") ? true @@ -417,7 +414,7 @@ const MoviePage: React.FC = ({ movie }) => {
{maybeRenderHeaderBackgroundImage()}
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx index 08af10fa899..c9d87368aa7 100644 --- a/ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx +++ b/ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx @@ -64,6 +64,7 @@ export const CompressedMovieDetailsPanel: React.FC = ({ scrollToTop()}> {movie.name} + / {movie?.studio?.name ? ( {movie?.studio?.name} ) : ( diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx index 2d38ece6429..5771e46e881 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx @@ -43,7 +43,6 @@ import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons"; import { IUIConfig } from "src/core/config"; import { useRatingKeybinds } from "src/hooks/keybinds"; import ImageUtils from "src/utils/image"; -import { isPlatformUniquelyRenderedByApple } from "src/utils/apple"; interface IProps { performer: GQL.PerformerDataFragment; @@ -73,8 +72,6 @@ const PerformerPage: React.FC = ({ performer }) => { const [encodingImage, setEncodingImage] = useState(false); const [loadStickyHeader, setLoadStickyHeader] = useState(false); - const appleRendering = isPlatformUniquelyRenderedByApple(); - const activeImage = useMemo(() => { const performerImage = performer.image_path; if (isEditing) { @@ -549,7 +546,7 @@ const PerformerPage: React.FC = ({ performer }) => {
{maybeRenderHeaderBackgroundImage()}
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx index 17eff88a03d..1f595b0ee93 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx @@ -97,6 +97,21 @@ export const PerformerDetailsPanel: React.FC = ({ ); }; + const formatAge = (birthdate?: string | null, deathdate?: string | null) => { + if (!birthdate) { + return ""; + } + + const age = TextUtils.age(birthdate, deathdate); + + return ( + + {age} + ({birthdate}) + + ); + }; + const formatWeight = (weight?: number | null) => { if (!weight) { return ""; @@ -220,8 +235,16 @@ export const PerformerDetailsPanel: React.FC = ({ )} @@ -306,6 +329,7 @@ export const CompressedPerformerDetailsPanel: React.FC = ({ scrollToTop()}> {performer.name} + / {performer.gender ? ( {intl.formatMessage({ id: "gender_types." + performer.gender })} @@ -313,6 +337,7 @@ export const CompressedPerformerDetailsPanel: React.FC = ({ ) : ( "" )} + / {performer.birthdate ? ( = ({ ) : ( "" )} + / {performer.country ? ( = ({ studio }) => { const [collapsed, setCollapsed] = useState(!showAllDetails); const [loadStickyHeader, setLoadStickyHeader] = useState(false); - const appleRendering = isPlatformUniquelyRenderedByApple(); - // Editing state const [isEditing, setIsEditing] = useState(false); const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState(false); @@ -507,7 +504,7 @@ const StudioPage: React.FC = ({ studio }) => {
{maybeRenderHeaderBackgroundImage()}
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx b/ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx index bfaa9b4f435..12a803f30ff 100644 --- a/ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx +++ b/ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx @@ -89,6 +89,7 @@ export const CompressedStudioDetailsPanel: React.FC = ({ scrollToTop()}> {studio.name} + / {studio?.parent_studio?.name ? ( {studio?.parent_studio?.name} ) : ( diff --git a/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx b/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx index 7245d124b63..432fe7c9bf8 100644 --- a/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx +++ b/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx @@ -38,7 +38,6 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { IUIConfig } from "src/core/config"; import ImageUtils from "src/utils/image"; -import { isPlatformUniquelyRenderedByApple } from "src/utils/apple"; interface IProps { tag: GQL.TagDataFragment; @@ -64,8 +63,6 @@ const TagPage: React.FC = ({ tag }) => { const [collapsed, setCollapsed] = useState(!showAllDetails); const [loadStickyHeader, setLoadStickyHeader] = useState(false); - const appleRendering = isPlatformUniquelyRenderedByApple(); - const { tab = "scenes" } = useParams(); // Editing state @@ -499,7 +496,7 @@ const TagPage: React.FC = ({ tag }) => {
{maybeRenderHeaderBackgroundImage()}
diff --git a/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx b/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx index 39d8d19ed90..03c6618400b 100644 --- a/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx +++ b/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx @@ -79,6 +79,7 @@ export const CompressedTagDetailsPanel: React.FC = ({ tag }) => { scrollToTop()}> {tag.name} + / {tag.description ? ( {tag.description} ) : ( diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss index ae7c839ff07..1d19667bbf0 100755 --- a/ui/v2.5/src/index.scss +++ b/ui/v2.5/src/index.scss @@ -69,26 +69,6 @@ dd { white-space: pre-line; } -.sticky.detail-header-group { - padding: 1rem 2.5rem; - - a.movie-name, - a.performer-name, - a.studio-name, - a.tag-name { - color: #f5f8fa; - cursor: pointer; - font-weight: 800; - } - - a, - span { - color: #d7d9db; - font-weight: 600; - padding-right: 1.5rem; - } -} - .sticky.detail-header { display: block; min-height: 50px; @@ -107,6 +87,32 @@ dd { .tag-name { font-weight: 800; } + + .sticky.detail-header-group { + padding: 1rem 2.5rem; + + a.movie-name, + a.performer-name, + a.studio-name, + a.tag-name { + color: #f5f8fa; + cursor: pointer; + font-weight: 800; + } + + a, + span { + color: #d7d9db; + font-weight: 600; + padding-right: 0.5rem; + } + + .detail-divider { + font-size: 1rem; + font-weight: 400; + opacity: 0.6; + } + } } .detail-expand-collapse { @@ -170,6 +176,11 @@ dd { border-bottom: 1px dotted #f5f8fa; margin-right: auto; } + + .performer-disambiguation { + letter-spacing: -0.04rem; + opacity: 0.65; + } } h2 { @@ -195,7 +206,7 @@ dd { .detail-header.edit { background-color: unset; - overflow: auto; + overflow: visible; form { padding-top: 0.5rem; @@ -208,6 +219,11 @@ dd { .detail-header-image { height: auto; } + + /* StashID alignment fix */ + .form-group.row .row.no-gutters { + padding-top: calc(0.375rem + 1px); + } } .detail-header.collapsed { @@ -255,14 +271,11 @@ dd { .detail-item-title { display: table-cell; - width: 100px; - } - - .detail-item-value { - margin-left: 1.5rem; + width: 130px; } .detail-item-value.age { + border-bottom: unset; width: fit-content; } } @@ -360,13 +373,21 @@ dd { /* the .apple class denotes areas where rendering on some apple platforms has been inconsistent with other platforms these rules aim to address those inconsistences */ -.detail-header.apple .detail-container { - display: flex; -} +.apple { + .detail-header { + .detail-container { + display: flex; + } + } + + .detail-header.edit .row { + flex: 1; + } -.detail-header.full-width.apple .detail-header-image, -.detail-header.edit.apple .detail-header-image { - display: unset; + .detail-header.full-width .detail-header-image, + .detail-header.edit .detail-header-image { + display: unset; + } } .detail-item-title { @@ -379,6 +400,13 @@ dd { display: flex; flex-direction: row; white-space: pre-line; + + .birthdate, + .height-imperial, + .penis-length-imperial, + .weight-imperial { + opacity: 0.65; + } } .input-control,