fix separator being used around null fields (#3996)

* fix separator being used around null fields
* updated apple.ts code to use UAParser
This commit is contained in:
CJ
2023-08-07 18:32:04 -05:00
committed by GitHub
parent a9d31889b4
commit d0c60bab50
6 changed files with 59 additions and 39 deletions

View File

@@ -64,9 +64,11 @@ export const CompressedMovieDetailsPanel: React.FC<IMovieDetailsPanel> = ({
<a className="movie-name" onClick={() => scrollToTop()}> <a className="movie-name" onClick={() => scrollToTop()}>
{movie.name} {movie.name}
</a> </a>
<span className="detail-divider">/</span>
{movie?.studio?.name ? ( {movie?.studio?.name ? (
<span className="movie-studio">{movie?.studio?.name}</span> <>
<span className="detail-divider">/</span>
<span className="movie-studio">{movie?.studio?.name}</span>
</>
) : ( ) : (
"" ""
)} )}

View File

@@ -329,34 +329,43 @@ export const CompressedPerformerDetailsPanel: React.FC<IPerformerDetails> = ({
<a className="performer-name" onClick={() => scrollToTop()}> <a className="performer-name" onClick={() => scrollToTop()}>
{performer.name} {performer.name}
</a> </a>
<span className="detail-divider">/</span>
{performer.gender ? ( {performer.gender ? (
<span className="performer-gender"> <>
{intl.formatMessage({ id: "gender_types." + performer.gender })} <span className="detail-divider">/</span>
</span> <span className="performer-gender">
{intl.formatMessage({ id: "gender_types." + performer.gender })}
</span>
</>
) : ( ) : (
"" ""
)} )}
<span className="detail-divider">/</span>
{performer.birthdate ? ( {performer.birthdate ? (
<span <>
className="performer-age" <span className="detail-divider">/</span>
title={TextUtils.formatDate(intl, performer.birthdate ?? undefined)} <span
> className="performer-age"
{TextUtils.age(performer.birthdate, performer.death_date)} title={TextUtils.formatDate(
</span> intl,
performer.birthdate ?? undefined
)}
>
{TextUtils.age(performer.birthdate, performer.death_date)}
</span>
</>
) : ( ) : (
"" ""
)} )}
<span className="detail-divider">/</span>
{performer.country ? ( {performer.country ? (
<span className="performer-country"> <>
<CountryFlag <span className="detail-divider">/</span>
country={performer.country} <span className="performer-country">
className="mr-2" <CountryFlag
includeName={true} country={performer.country}
/> className="mr-2"
</span> includeName={true}
/>
</span>
</>
) : ( ) : (
"" ""
)} )}

View File

@@ -89,9 +89,11 @@ export const CompressedStudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({
<a className="studio-name" onClick={() => scrollToTop()}> <a className="studio-name" onClick={() => scrollToTop()}>
{studio.name} {studio.name}
</a> </a>
<span className="detail-divider">/</span>
{studio?.parent_studio?.name ? ( {studio?.parent_studio?.name ? (
<span className="studio-parent">{studio?.parent_studio?.name}</span> <>
<span className="detail-divider">/</span>
<span className="studio-parent">{studio?.parent_studio?.name}</span>
</>
) : ( ) : (
"" ""
)} )}

View File

@@ -79,9 +79,11 @@ export const CompressedTagDetailsPanel: React.FC<ITagDetails> = ({ tag }) => {
<a className="tag-name" onClick={() => scrollToTop()}> <a className="tag-name" onClick={() => scrollToTop()}>
{tag.name} {tag.name}
</a> </a>
<span className="detail-divider">/</span>
{tag.description ? ( {tag.description ? (
<span className="tag-desc">{tag.description}</span> <>
<span className="detail-divider">/</span>
<span className="tag-desc">{tag.description}</span>
</>
) : ( ) : (
"" ""
)} )}

View File

@@ -374,19 +374,21 @@ dd {
/* the .apple class denotes areas where rendering on some apple platforms has been inconsistent with other platforms /* the .apple class denotes areas where rendering on some apple platforms has been inconsistent with other platforms
these rules aim to address those inconsistences */ these rules aim to address those inconsistences */
.apple { .apple {
.detail-header { @media (min-width: 576px) {
.detail-container { .detail-header {
display: flex; .detail-container {
display: flex;
}
} }
}
.detail-header.edit .row { .detail-header.edit .row {
flex: 1; flex: 1;
} }
.detail-header.full-width .detail-header-image, .detail-header.full-width .detail-header-image,
.detail-header.edit .detail-header-image { .detail-header.edit .detail-header-image {
display: unset; display: unset;
}
} }
} }

View File

@@ -1,6 +1,9 @@
import UAParser from "ua-parser-js";
export function isPlatformUniquelyRenderedByApple() { export function isPlatformUniquelyRenderedByApple() {
return ( // OS name on iPads show up as iOS or Max OS depending on the browser.
/(ipad)/i.test(navigator.userAgent) || const isiOS = UAParser().os.name?.includes("iOS");
/(macintosh.*safari)/i.test(navigator.userAgent) const isMacOS = UAParser().os.name?.includes("Mac OS");
); const isSafari = UAParser().browser.name?.includes("Safari");
return isiOS || (isMacOS && isSafari);
} }