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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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()}>
{movie.name}
</a>
<span className="detail-divider">/</span>
{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()}>
{performer.name}
</a>
<span className="detail-divider">/</span>
{performer.gender ? (
<span className="performer-gender">
{intl.formatMessage({ id: "gender_types." + performer.gender })}
</span>
<>
<span className="detail-divider">/</span>
<span className="performer-gender">
{intl.formatMessage({ id: "gender_types." + performer.gender })}
</span>
</>
) : (
""
)}
<span className="detail-divider">/</span>
{performer.birthdate ? (
<span
className="performer-age"
title={TextUtils.formatDate(intl, performer.birthdate ?? undefined)}
>
{TextUtils.age(performer.birthdate, performer.death_date)}
</span>
<>
<span className="detail-divider">/</span>
<span
className="performer-age"
title={TextUtils.formatDate(
intl,
performer.birthdate ?? undefined
)}
>
{TextUtils.age(performer.birthdate, performer.death_date)}
</span>
</>
) : (
""
)}
<span className="detail-divider">/</span>
{performer.country ? (
<span className="performer-country">
<CountryFlag
country={performer.country}
className="mr-2"
includeName={true}
/>
</span>
<>
<span className="detail-divider">/</span>
<span className="performer-country">
<CountryFlag
country={performer.country}
className="mr-2"
includeName={true}
/>
</span>
</>
) : (
""
)}

View file

@ -89,9 +89,11 @@ export const CompressedStudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({
<a className="studio-name" onClick={() => scrollToTop()}>
{studio.name}
</a>
<span className="detail-divider">/</span>
{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()}>
{tag.name}
</a>
<span className="detail-divider">/</span>
{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
these rules aim to address those inconsistences */
.apple {
.detail-header {
.detail-container {
display: flex;
@media (min-width: 576px) {
.detail-header {
.detail-container {
display: flex;
}
}
}
.detail-header.edit .row {
flex: 1;
}
.detail-header.edit .row {
flex: 1;
}
.detail-header.full-width .detail-header-image,
.detail-header.edit .detail-header-image {
display: unset;
.detail-header.full-width .detail-header-image,
.detail-header.edit .detail-header-image {
display: unset;
}
}
}

View file

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