Fixed: Performer image scaling

Lint fixes
plz12345 · Mar 17, 2024 · d961b24 · d961b24
1 parent 0f623df
commit d961b24
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 73 deletions.
diff --git a/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js b/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js
@@ -53,7 +53,8 @@ class MovieCastPoster extends Component {
     const elementStyle = {
       width: `${posterWidth}px`,
       height: `${posterHeight}px`,
-      borderRadius: '5px'
+      borderRadius: '5px',
+      'object-fit': 'cover'
     };
 
     const contentStyle = {
@@ -93,11 +94,10 @@ class MovieCastPoster extends Component {
                 onLoad={this.onPosterLoad}
               />
 
-              {
-                hasPosterError &&
-                  <div className={styles.overlayTitle}>
-                    {performer.fullName}
-                  </div>
+              {hasPosterError &&
+                <div className={styles.overlayTitle}>
+                  {performer.fullName}
+                </div>
               }
             </Link>
           </div>

diff --git a/frontend/src/Performer/Details/PerformerDetails.css b/frontend/src/Performer/Details/PerformerDetails.css
@@ -41,7 +41,7 @@
 .poster {
   z-index: 2;
   flex-shrink: 0;
-  margin-right: 35px;
+  margin-right: 30px;
   width: 217px;
   height: 319px;
 }
@@ -216,4 +216,4 @@
   .details {
     font-size: 19px;
   }
-}
+}
diff --git a/frontend/src/Performer/Details/PerformerDetails.js b/frontend/src/Performer/Details/PerformerDetails.js
@@ -236,6 +236,9 @@ class PerformerDetails extends Component {
     const runningYears = statusDetails.title === translate('Inactive') ? `${careerStart}-${careerEnd}` : `${careerStart}-`;
 
     const fanartUrl = getFanartUrl(images);
+    const elementStyle = {
+      'object-fit': 'cover'
+    };
 
     return (
       <PageContent title={fullName}>
@@ -293,6 +296,7 @@ class PerformerDetails extends Component {
               <MovieHeadshot
                 blur={safeForWorkMode}
                 className={styles.poster}
+                style={elementStyle}
                 images={images}
                 size={250}
                 lazy={false}
@@ -339,25 +343,22 @@ class PerformerDetails extends Component {
 
                 <div className={styles.details}>
                   <div>
-                    {
-                      !!gender &&
-                        <span className={styles.gender}>
-                          {firstCharToUpper(gender)}
-                        </span>
+                    {!!gender &&
+                      <span className={styles.gender}>
+                        {firstCharToUpper(gender)}
+                      </span>
                     }
 
-                    {
-                      !!ethnicity &&
-                        <span className={styles.ethnicity}>
-                          {firstCharToUpper(ethnicity)}
-                        </span>
+                    {!!ethnicity &&
+                      <span className={styles.ethnicity}>
+                        {firstCharToUpper(ethnicity)}
+                      </span>
                     }
 
-                    {
-                      !!careerStart &&
-                        <span className={styles.years}>
-                          {runningYears}
-                        </span>
+                    {!!careerStart &&
+                      <span className={styles.years}>
+                        {runningYears}
+                      </span>
                     }
 
                     {
@@ -379,22 +380,21 @@ class PerformerDetails extends Component {
                       </span>
                     }
 
-                    {
-                      !!tags.length &&
-                        <span>
-                          <Tooltip
-                            anchor={
-                              <Icon
-                                name={icons.TAGS}
-                                size={20}
-                              />
-                            }
-                            tooltip={
-                              <PerformerTagsConnector performerId={id} />
-                            }
-                            position={tooltipPositions.BOTTOM}
-                          />
-                        </span>
+                    {!!tags.length &&
+                      <span>
+                        <Tooltip
+                          anchor={
+                            <Icon
+                              name={icons.TAGS}
+                              size={20}
+                            />
+                          }
+                          tooltip={
+                            <PerformerTagsConnector performerId={id} />
+                          }
+                          position={tooltipPositions.BOTTOM}
+                        />
+                      </span>
                     }
                   </div>
                 </div>
@@ -489,17 +489,16 @@ class PerformerDetails extends Component {
                     position={tooltipPositions.BOTTOM}
                   />
 
-                  {
-                    !!genres.length && !isSmallScreen &&
-                      <Label
-                        className={styles.detailsInfoLabel}
-                        title={translate('Genres')}
-                        size={sizes.LARGE}
-                      >
-                        <span className={styles.genres}>
-                          {genres.join(', ')}
-                        </span>
-                      </Label>
+                  {!!genres.length && !isSmallScreen &&
+                    <Label
+                      className={styles.detailsInfoLabel}
+                      title={translate('Genres')}
+                      size={sizes.LARGE}
+                    >
+                      <span className={styles.genres}>
+                        {genres.join(', ')}
+                      </span>
+                    </Label>
                   }
                 </div>
               </div>
@@ -523,29 +522,26 @@ class PerformerDetails extends Component {
                 null
             }
 
-            {
-              !isFetching && isPopulated && hasScenes ?
-                <FieldSet legend={translate('Scenes')}>
-                  {
-                    isPopulated && !!studios.length &&
-                      <div>
-                        {
-                          studios.map((studio) => {
-                            return (
-                              <PerformerDetailsStudioConnector
-                                key={studio.foreignId}
-                                performerId={id}
-                                studioForeignId={studio.foreignId}
-                                isExpanded={expandedState[studio.foreignId]}
-                                onExpandPress={this.onExpandPress}
-                              />
-                            );
-                          })
-                        }
-                      </div>
-                  }
-                </FieldSet> :
-                null
+            {!isFetching && isPopulated && hasScenes ?
+              <FieldSet legend={translate('Scenes')}>
+                {isPopulated && !!studios.length &&
+                  <div>
+                    {studios.map((studio) => {
+                      return (
+                        <PerformerDetailsStudioConnector
+                          key={studio.foreignId}
+                          performerId={id}
+                          studioForeignId={studio.foreignId}
+                          isExpanded={expandedState[studio.foreignId]}
+                          onExpandPress={this.onExpandPress}
+                        />
+                      );
+                    })
+                    }
+                  </div>
+                }
+              </FieldSet> :
+              null
             }
           </div>
 

diff --git a/frontend/src/Performer/Index/Posters/PerformerIndexPoster.tsx b/frontend/src/Performer/Index/Posters/PerformerIndexPoster.tsx
@@ -64,6 +64,7 @@ function PerformerIndexPoster(props: PerformerIndexPosterProps) {
   const elementStyle = {
     width: `${posterWidth}px`,
     height: `${posterHeight}px`,
+    'object-fit': 'cover',
   };
 
   return (