mirror of
https://github.com/stashapp/stash.git
synced 2025-12-15 12:52:38 +01:00
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:
parent
a9d31889b4
commit
d0c60bab50
6 changed files with 59 additions and 39 deletions
|
|
@ -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>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue