provide full width detatils when showAllDetails is enables

stashapp · Jul 30, 2023 · 31676df · 31676df
1 parent a97f303
commit 31676df
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 32 deletions.
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
@@ -311,7 +311,12 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
 
   function maybeRenderDetails() {
     if (!isEditing) {
-      return <MovieDetailsPanel movie={movie} />;
+      return (
+        <MovieDetailsPanel
+          movie={movie}
+          fullWidth={!collapsed && showAllDetails}
+        />
+      );
     }
   }
 
@@ -384,7 +389,7 @@ const MoviePage: React.FC<IProps> = ({ movie }) => {
 
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
-          collapsed ? "collapsed" : ""
+          collapsed ? "collapsed" : showAllDetails ? "full-width" : ""
         }`}
       >
         {maybeRenderHeaderBackgroundImage()}

diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieDetailsPanel.tsx
@@ -7,9 +7,13 @@ import { DetailItem } from "src/components/Shared/DetailItem";
 
 interface IMovieDetailsPanel {
   movie: GQL.MovieDataFragment;
+  fullWidth?: boolean;
 }
 
-export const MovieDetailsPanel: React.FC<IMovieDetailsPanel> = ({ movie }) => {
+export const MovieDetailsPanel: React.FC<IMovieDetailsPanel> = ({
+  movie,
+  fullWidth,
+}) => {
   // Network state
   const intl = useIntl();
 
@@ -20,10 +24,12 @@ export const MovieDetailsPanel: React.FC<IMovieDetailsPanel> = ({ movie }) => {
         value={
           movie.duration ? DurationUtils.secondsToString(movie.duration) : ""
         }
+        fullWidth={fullWidth}
       />
       <DetailItem
         id="date"
         value={movie.date ? TextUtils.formatDate(intl, movie.date) : ""}
+        fullWidth={fullWidth}
       />
       <DetailItem
         id="studio"
@@ -36,10 +42,11 @@ export const MovieDetailsPanel: React.FC<IMovieDetailsPanel> = ({ movie }) => {
             ""
           )
         }
+        fullWidth={fullWidth}
       />
 
-      <DetailItem id="director" value={movie.director} />
-      <DetailItem id="synopsis" value={movie.synopsis} />
+      <DetailItem id="director" value={movie.director} fullWidth={fullWidth} />
+      <DetailItem id="synopsis" value={movie.synopsis} fullWidth={fullWidth} />
     </div>
   );
 };

diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
@@ -366,7 +366,11 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
   function maybeRenderDetails() {
     if (!isEditing) {
       return (
-        <PerformerDetailsPanel performer={performer} collapsed={collapsed} />
+        <PerformerDetailsPanel
+          performer={performer}
+          collapsed={collapsed}
+          fullWidth={!collapsed && showAllDetails}
+        />
       );
     }
   }
@@ -524,7 +528,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
 
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
-          collapsed ? "collapsed" : ""
+          collapsed ? "collapsed" : showAllDetails ? "full-width" : ""
         }`}
       >
         {maybeRenderHeaderBackgroundImage()}

diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx
@@ -11,11 +11,13 @@ import { CountryFlag } from "src/components/Shared/CountryFlag";
 interface IPerformerDetails {
   performer: GQL.PerformerDataFragment;
   collapsed?: boolean;
+  fullWidth?: boolean;
 }
 
 export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
   performer,
   collapsed,
+  fullWidth,
 }) => {
   // Network state
   const intl = useIntl();
@@ -177,11 +179,27 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
         .trim();
       return (
         <>
-          <DetailItem id="tattoos" value={performer?.tattoos} />
-          <DetailItem id="piercings" value={performer?.piercings} />
-          <DetailItem id="details" value={details} />
-          <DetailItem id="tags" value={renderTagsField()} />
-          <DetailItem id="StashIDs" value={renderStashIDs()} />
+          <DetailItem
+            id="tattoos"
+            value={performer?.tattoos}
+            fullWidth={fullWidth}
+          />
+          <DetailItem
+            id="piercings"
+            value={performer?.piercings}
+            fullWidth={fullWidth}
+          />
+          <DetailItem id="details" value={details} fullWidth={fullWidth} />
+          <DetailItem
+            id="tags"
+            value={renderTagsField()}
+            fullWidth={fullWidth}
+          />
+          <DetailItem
+            id="StashIDs"
+            value={renderStashIDs()}
+            fullWidth={fullWidth}
+          />
         </>
       );
     }
@@ -193,6 +211,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
         <DetailItem
           id="gender"
           value={intl.formatMessage({ id: "gender_types." + performer.gender })}
+          fullWidth={fullWidth}
         />
       ) : (
         ""
@@ -201,6 +220,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
         id="age"
         value={TextUtils.age(performer.birthdate, performer.death_date)}
         title={TextUtils.formatDate(intl, performer.birthdate ?? undefined)}
+        fullWidth={fullWidth}
       />
       <DetailItem id="death_date" value={performer.death_date} />
       {performer.country ? (
@@ -213,25 +233,56 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
               includeName={true}
             />
           }
+          fullWidth={fullWidth}
         />
       ) : (
         ""
       )}
-      <DetailItem id="ethnicity" value={performer?.ethnicity} />
-      <DetailItem id="hair_color" value={performer?.hair_color} />
-      <DetailItem id="eye_color" value={performer?.eye_color} />
-      <DetailItem id="height" value={formatHeight(performer.height_cm)} />
-      <DetailItem id="weight" value={formatWeight(performer.weight)} />
+      <DetailItem
+        id="ethnicity"
+        value={performer?.ethnicity}
+        fullWidth={fullWidth}
+      />
+      <DetailItem
+        id="hair_color"
+        value={performer?.hair_color}
+        fullWidth={fullWidth}
+      />
+      <DetailItem
+        id="eye_color"
+        value={performer?.eye_color}
+        fullWidth={fullWidth}
+      />
+      <DetailItem
+        id="height"
+        value={formatHeight(performer.height_cm)}
+        fullWidth={fullWidth}
+      />
+      <DetailItem
+        id="weight"
+        value={formatWeight(performer.weight)}
+        fullWidth={fullWidth}
+      />
       <DetailItem
         id="penis_length"
         value={formatPenisLength(performer.penis_length)}
+        fullWidth={fullWidth}
       />
       <DetailItem
         id="circumcised"
         value={formatCircumcised(performer.circumcised)}
+        fullWidth={fullWidth}
+      />
+      <DetailItem
+        id="measurements"
+        value={performer?.measurements}
+        fullWidth={fullWidth}
+      />
+      <DetailItem
+        id="fake_tits"
+        value={performer?.fake_tits}
+        fullWidth={fullWidth}
       />
-      <DetailItem id="measurements" value={performer?.measurements} />
-      <DetailItem id="fake_tits" value={performer?.fake_tits} />
       {maybeRenderExtraDetails()}
     </div>
   );

diff --git a/ui/v2.5/src/components/Shared/DetailItem.tsx b/ui/v2.5/src/components/Shared/DetailItem.tsx
@@ -6,9 +6,15 @@ interface IDetailItem {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value?: any;
   title?: string;
+  fullWidth?: boolean;
 }
 
-export const DetailItem: React.FC<IDetailItem> = ({ id, value, title }) => {
+export const DetailItem: React.FC<IDetailItem> = ({
+  id,
+  value,
+  title,
+  fullWidth,
+}) => {
   if (!id || !value || value === "Na") {
     return <></>;
   }
@@ -17,7 +23,10 @@ export const DetailItem: React.FC<IDetailItem> = ({ id, value, title }) => {
 
   return (
     <div className={`detail-item ${id}`}>
-      <span className={`detail-item-title ${id}`}>{message}</span>
+      <span className={`detail-item-title ${id}`}>
+        {message}
+        {fullWidth ? ":" : ""}
+      </span>
       <span className={`detail-item-value ${id}`} title={title}>
         {value}
       </span>

diff --git a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
@@ -265,7 +265,13 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
 
   function maybeRenderDetails() {
     if (!isEditing) {
-      return <StudioDetailsPanel studio={studio} collapsed={collapsed} />;
+      return (
+        <StudioDetailsPanel
+          studio={studio}
+          collapsed={collapsed}
+          fullWidth={!collapsed && showAllDetails}
+        />
+      );
     }
   }
 
@@ -473,7 +479,7 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
 
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
-          collapsed ? "collapsed" : ""
+          collapsed ? "collapsed" : showAllDetails ? "full-width" : ""
         }`}
       >
         {maybeRenderHeaderBackgroundImage()}

diff --git a/ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx b/ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx
@@ -5,11 +5,13 @@ import { DetailItem } from "src/components/Shared/DetailItem";
 interface IStudioDetailsPanel {
   studio: GQL.StudioDataFragment;
   collapsed?: boolean;
+  fullWidth?: boolean;
 }
 
 export const StudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({
   studio,
   collapsed,
+  fullWidth,
 }) => {
   function renderStashIDs() {
     if (!studio.stash_ids?.length) {
@@ -43,13 +45,19 @@ export const StudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({
 
   function maybeRenderExtraDetails() {
     if (!collapsed) {
-      return <DetailItem id="StashIDs" value={renderStashIDs()} />;
+      return (
+        <DetailItem
+          id="StashIDs"
+          value={renderStashIDs()}
+          fullWidth={fullWidth}
+        />
+      );
     }
   }
 
   return (
     <div className="detail-group">
-      <DetailItem id="details" value={studio.details} />
+      <DetailItem id="details" value={studio.details} fullWidth={fullWidth} />
       <DetailItem
         id="parent_studios"
         value={
@@ -61,6 +69,7 @@ export const StudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({
             ""
           )
         }
+        fullWidth={fullWidth}
       />
       {maybeRenderExtraDetails()}
     </div>

diff --git a/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx b/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx
@@ -311,7 +311,9 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
 
   function maybeRenderDetails() {
     if (!isEditing) {
-      return <TagDetailsPanel tag={tag} />;
+      return (
+        <TagDetailsPanel tag={tag} fullWidth={!collapsed && showAllDetails} />
+      );
     }
   }
 
@@ -473,7 +475,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
 
       <div
         className={`detail-header ${isEditing ? "edit" : ""}  ${
-          collapsed ? "collapsed" : ""
+          collapsed ? "collapsed" : showAllDetails ? "full-width" : ""
         }`}
       >
         {maybeRenderHeaderBackgroundImage()}

diff --git a/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx b/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx
@@ -6,9 +6,10 @@ import * as GQL from "src/core/generated-graphql";
 
 interface ITagDetails {
   tag: GQL.TagDataFragment;
+  fullWidth?: boolean;
 }
 
-export const TagDetailsPanel: React.FC<ITagDetails> = ({ tag }) => {
+export const TagDetailsPanel: React.FC<ITagDetails> = ({ tag, fullWidth }) => {
   function renderParentsField() {
     if (!tag.parents?.length) {
       return;
@@ -43,9 +44,21 @@ export const TagDetailsPanel: React.FC<ITagDetails> = ({ tag }) => {
 
   return (
     <div className="detail-group">
-      <DetailItem id="description" value={tag.description} />
-      <DetailItem id="parent_tags" value={renderParentsField()} />
-      <DetailItem id="sub_tags" value={renderChildrenField()} />
+      <DetailItem
+        id="description"
+        value={tag.description}
+        fullWidth={fullWidth}
+      />
+      <DetailItem
+        id="parent_tags"
+        value={renderParentsField()}
+        fullWidth={fullWidth}
+      />
+      <DetailItem
+        id="sub_tags"
+        value={renderChildrenField()}
+        fullWidth={fullWidth}
+      />
     </div>
   );
 };

diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss
@@ -245,6 +245,26 @@ dd {
   overflow: hidden;
 }
 
+.full-width {
+  .detail-header-image {
+    height: auto;
+
+    img {
+      max-width: 22rem;
+    }
+  }
+
+  .detail-item {
+    flex-direction: unset;
+    padding-right: 0;
+    width: 100%;
+
+    .detail-item-title {
+      padding-right: 0.5rem;
+    }
+  }
+}
+
 .detail-header-image {
   display: flex;
   float: left;