diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx index 845da909b..859b1d76c 100644 --- a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx +++ b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx @@ -35,6 +35,7 @@ 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; @@ -64,6 +65,8 @@ 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 @@ -414,7 +417,7 @@ const MoviePage: React.FC = ({ movie }) => {
{maybeRenderHeaderBackgroundImage()}
diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx index 5771e46e8..2d38ece64 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx @@ -43,6 +43,7 @@ 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; @@ -72,6 +73,8 @@ 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) { @@ -546,7 +549,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 0c30efcef..17eff88a0 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx @@ -186,6 +186,11 @@ export const PerformerDetailsPanel: React.FC = ({ value={performer?.piercings} fullWidth={fullWidth} /> + = (props: ICardProps) => { if (props.selecting) { props.onSelectedChanged(!props.selected, shiftKey); event.preventDefault(); + } else { + window.scrollTo(0, 0); } - window.scrollTo(0, 0); } function handleDrag(event: React.DragEvent) { diff --git a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx index 921b3d6f7..65af886ad 100644 --- a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx +++ b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx @@ -42,6 +42,7 @@ import TextUtils from "src/utils/text"; import { RatingSystem } from "src/components/Shared/Rating/RatingSystem"; import ImageUtils from "src/utils/image"; import { useRatingKeybinds } from "src/hooks/keybinds"; +import { isPlatformUniquelyRenderedByApple } from "src/utils/apple"; interface IProps { studio: GQL.StudioDataFragment; @@ -68,6 +69,8 @@ const StudioPage: React.FC = ({ 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); @@ -504,7 +507,7 @@ const StudioPage: React.FC = ({ studio }) => {
{maybeRenderHeaderBackgroundImage()}
diff --git a/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx b/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx index 432fe7c9b..7245d124b 100644 --- a/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx +++ b/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx @@ -38,6 +38,7 @@ 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; @@ -63,6 +64,8 @@ const TagPage: React.FC = ({ tag }) => { const [collapsed, setCollapsed] = useState(!showAllDetails); const [loadStickyHeader, setLoadStickyHeader] = useState(false); + const appleRendering = isPlatformUniquelyRenderedByApple(); + const { tab = "scenes" } = useParams(); // Editing state @@ -496,7 +499,7 @@ const TagPage: React.FC = ({ tag }) => {
{maybeRenderHeaderBackgroundImage()}
diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss index ac29c5dca..ae7c839ff 100755 --- a/ui/v2.5/src/index.scss +++ b/ui/v2.5/src/index.scss @@ -43,7 +43,7 @@ body { -webkit-font-smoothing: antialiased; margin: 0; overflow-x: hidden; - padding: 3.5rem 0 0 0; + padding: 4rem 0 0 0; @include media-breakpoint-down(xs) { @media (orientation: portrait) { @@ -52,6 +52,13 @@ body { } } +#movie-page, +#performer-page, +#studio-page, +#tag-page { + margin-top: -0.5rem; +} + code, .code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", @@ -188,6 +195,7 @@ dd { .detail-header.edit { background-color: unset; + overflow: auto; form { padding-top: 0.5rem; @@ -241,7 +249,7 @@ dd { } .detail-item { - flex-direction: unset; + display: table; padding-right: 0; width: 100%; @@ -251,7 +259,11 @@ dd { } .detail-item-value { - padding-left: 0.5rem; + margin-left: 1.5rem; + } + + .detail-item-value.age { + width: fit-content; } } @@ -336,7 +348,6 @@ dd { } .detail-item { - align-items: left; display: inline-flex; flex-direction: column; padding-bottom: 0.5rem; @@ -347,6 +358,17 @@ 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; +} + +.detail-header.full-width.apple .detail-header-image, +.detail-header.edit.apple .detail-header-image { + display: unset; +} + .detail-item-title { color: #868791; font-weight: 700; diff --git a/ui/v2.5/src/utils/apple.ts b/ui/v2.5/src/utils/apple.ts new file mode 100644 index 000000000..d2618b8fc --- /dev/null +++ b/ui/v2.5/src/utils/apple.ts @@ -0,0 +1,6 @@ +export function isPlatformUniquelyRenderedByApple() { + return ( + /(ipad)/i.test(navigator.userAgent) || + /(macintosh.*safari)/i.test(navigator.userAgent) + ); +}