Details redesign bug fixes

stashapp · Aug 1, 2023 · 632a1e0 · 632a1e0
1 parent 170f45c
commit 632a1e0
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 11 deletions.
diff --git 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 UAParser from "ua-parser-js";
 
 interface IProps {
   movie: GQL.MovieDataFragment;
@@ -64,6 +65,8 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
   const [backImage, setBackImage] = useState<string | null>();
   const [encodingImage, setEncodingImage] = useState<boolean>(false);
 
+  const appleRendering = /(ipad)/i.test(navigator.userAgent) || /(macintosh.*safari)/i.test(navigator.userAgent);
+
   const defaultImage =
     movie.front_image_path && movie.front_image_path.includes("default=true")
       ? true
@@ -414,16 +417,14 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
           collapsed ? "collapsed" : !compactExpandedDetails ? "full-width" : ""
-        }`}
+        } ${appleRendering ? "apple" : ""}`}
       >
         {maybeRenderHeaderBackgroundImage()}
         <div className="detail-container">
           <div className="detail-header-image">
             <div className="logo w-100">
               {encodingImage ? (
-                <LoadingIndicator
-                  message={`${intl.formatMessage({ id: "encoding_image" })}...`}
-                />
+                <LoadingIndicator message="Encoding image..." />
               ) : (
                 <div className="movie-images">
                   {renderFrontImage()}

diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
@@ -72,6 +72,8 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
   const [encodingImage, setEncodingImage] = useState<boolean>(false);
   const [loadStickyHeader, setLoadStickyHeader] = useState<boolean>(false);
 
+  const appleRendering = /(ipad)/i.test(navigator.userAgent) || /(macintosh.*safari)/i.test(navigator.userAgent);
+
   const activeImage = useMemo(() => {
     const performerImage = performer.image_path;
     if (isEditing) {
@@ -546,7 +548,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
           collapsed ? "collapsed" : !compactExpandedDetails ? "full-width" : ""
-        }`}
+        } ${appleRendering ? "apple" : ""}`}
       >
         {maybeRenderHeaderBackgroundImage()}
         <div className="detail-container">

diff --git 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<IPerformerDetails> = ({
             value={performer?.piercings}
             fullWidth={fullWidth}
           />
+          <DetailItem
+            id="career_length"
+            value={performer?.career_length}
+            fullWidth={fullWidth}
+          />
           <DetailItem id="details" value={details} fullWidth={fullWidth} />
           <DetailItem
             id="tags"

diff --git a/ui/v2.5/src/components/Shared/GridCard.tsx b/ui/v2.5/src/components/Shared/GridCard.tsx
@@ -34,8 +34,9 @@ export const GridCard: React.FC<ICardProps> = (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<HTMLElement>) {

diff --git a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
@@ -68,6 +68,8 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
   const [collapsed, setCollapsed] = useState<boolean>(!showAllDetails);
   const [loadStickyHeader, setLoadStickyHeader] = useState<boolean>(false);
 
+  const appleRendering = /(ipad)/i.test(navigator.userAgent) || /(macintosh.*safari)/i.test(navigator.userAgent);
+
   // Editing state
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState<boolean>(false);
@@ -504,7 +506,7 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
           collapsed ? "collapsed" : !compactExpandedDetails ? "full-width" : ""
-        }`}
+        }  ${appleRendering ? "apple" : ""}`}
       >
         {maybeRenderHeaderBackgroundImage()}
         <div className="detail-container">

diff --git a/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx b/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx
@@ -63,6 +63,8 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
   const [collapsed, setCollapsed] = useState<boolean>(!showAllDetails);
   const [loadStickyHeader, setLoadStickyHeader] = useState<boolean>(false);
 
+  const appleRendering = /(ipad)/i.test(navigator.userAgent) || /(macintosh.*safari)/i.test(navigator.userAgent);
+
   const { tab = "scenes" } = useParams<ITabParams>();
 
   // Editing state
@@ -496,7 +498,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
           collapsed ? "collapsed" : !compactExpandedDetails ? "full-width" : ""
-        }`}
+        } ${appleRendering ? "apple" : ""}`}
       >
         {maybeRenderHeaderBackgroundImage()}
         <div className="detail-container">

diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss
@@ -188,6 +188,7 @@ dd {
 
 .detail-header.edit {
   background-color: unset;
+  overflow: auto;
 
   form {
     padding-top: 0.5rem;
@@ -241,7 +242,7 @@ dd {
   }
 
   .detail-item {
-    flex-direction: unset;
+    display: table;
     padding-right: 0;
     width: 100%;
 
@@ -251,7 +252,11 @@ dd {
     }
 
     .detail-item-value {
-      padding-left: 0.5rem;
+      margin-left: 1.5rem;
+    }
+
+    .detail-item-value.age {
+      width: 1.13rem;
     }
   }
 
@@ -336,7 +341,6 @@ dd {
 }
 
 .detail-item {
-  align-items: left;
   display: inline-flex;
   flex-direction: column;
   padding-bottom: 0.5rem;
@@ -347,6 +351,15 @@ dd {
   }
 }
 
+.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;