Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix tagger result styling #4222

Merged
merged 2 commits into from
Oct 18, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions ui/v2.5/src/components/Performers/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -208,10 +208,7 @@

.performer-disambiguation {
color: $text-muted;
/* stylelint-disable */
font-size: 0.875em;
/* stylelint-enable */
padding-right: 0.5rem;
}

.performer-result .performer-details > span {
Expand Down
49 changes: 25 additions & 24 deletions ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,14 @@ import { getStashboxBase } from "src/utils/stashbox";

interface IPerformerName {
performer: GQL.ScrapedPerformer | Performer;
className?: string;
baseURL: string | undefined;
id: string | undefined | null;
baseURL: string | undefined;
}

const PerformerName: React.FC<IPerformerName> = ({
performer,
className,
baseURL,
id,
baseURL,
}) => {
const name =
baseURL && id ? (
Expand All @@ -36,14 +34,14 @@ const PerformerName: React.FC<IPerformerName> = ({
);

return (
<span className={className}>
<>
<span>{name}</span>
{performer.disambiguation && (
<span className="performer-disambiguation">
{` (${performer.disambiguation})`}
</span>
)}
</span>
</>
);
};

Expand Down Expand Up @@ -117,12 +115,13 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
<div className="row no-gutters my-2">
<div className="entity-name">
<FormattedMessage id="countables.performers" values={{ count: 1 }} />:
<PerformerName
performer={performer}
className="ml-2"
id={performer.remote_site_id}
baseURL={stashboxPerformerPrefix}
/>
<b className="ml-2">
<PerformerName
performer={performer}
id={performer.remote_site_id}
baseURL={stashboxPerformerPrefix}
/>
</b>
</div>
<span className="ml-auto">
<OptionalField
Expand All @@ -135,12 +134,13 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
<span className="mr-2">
<FormattedMessage id="component_tagger.verb_matched" />:
</span>
<PerformerName
performer={matchedPerformer}
className="ml-3 text-right"
id={matchedPerformer.id}
baseURL={performerURLPrefix}
/>
<b className="col-3 text-right">
<PerformerName
performer={matchedPerformer}
id={matchedPerformer.id}
baseURL={performerURLPrefix}
/>
</b>
</div>
</OptionalField>
</span>
Expand Down Expand Up @@ -169,12 +169,13 @@ const PerformerResult: React.FC<IPerformerResultProps> = ({
<div className="row no-gutters align-items-center mt-2">
<div className="entity-name">
<FormattedMessage id="countables.performers" values={{ count: 1 }} />:
<PerformerName
performer={performer}
className="ml-2"
id={performer.remote_site_id}
baseURL={stashboxPerformerPrefix}
/>
<b className="ml-2">
<PerformerName
performer={performer}
id={performer.remote_site_id}
baseURL={stashboxPerformerPrefix}
/>
</b>
</div>
<ButtonGroup>
<Button variant="secondary" onClick={() => onCreate()}>
Expand Down
49 changes: 25 additions & 24 deletions ui/v2.5/src/components/Tagger/scenes/StudioResult.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,25 @@ import { OptionalField } from "../IncludeButton";
import { faSave } from "@fortawesome/free-solid-svg-icons";
import { getStashboxBase } from "src/utils/stashbox";

interface IStudioName {
studio: GQL.ScrapedStudio | GQL.SlimStudioDataFragment;
id: string | undefined | null;
baseURL: string | undefined;
}

const StudioName: React.FC<IStudioName> = ({ studio, id, baseURL }) => {
const name =
baseURL && id ? (
<a href={`${baseURL}${id}`} target="_blank" rel="noreferrer">
{studio.name}
</a>
) : (
studio.name
);

return <span>{name}</span>;
};

interface IStudioResultProps {
studio: GQL.ScrapedStudio;
selectedID: string | undefined;
Expand Down Expand Up @@ -58,34 +77,16 @@ const StudioResult: React.FC<IStudioResultProps> = ({

if (stashLoading) return <div>Loading studio</div>;

const StudioName = ({
name,
baseURL,
id,
}: {
name: string;
baseURL: string | undefined;
id: string | undefined | null;
}) => {
return baseURL && id ? (
<a href={`${baseURL}${id}`} target="_blank" rel="noreferrer">
{name}
</a>
) : (
<span>name</span>
);
};

if (matchedStudio && matchedStashID) {
return (
<div className="row no-gutters my-2">
<div className="entity-name">
<FormattedMessage id="countables.studios" values={{ count: 1 }} />:
<b className="ml-2">
<StudioName
name={studio.name}
baseURL={stashboxStudioPrefix}
studio={studio}
id={studio.remote_site_id}
baseURL={stashboxStudioPrefix}
/>
</b>
</div>
Expand All @@ -102,9 +103,9 @@ const StudioResult: React.FC<IStudioResultProps> = ({
</span>
<b className="col-3 text-right">
<StudioName
name={matchedStudio.name}
baseURL={studioURLPrefix}
studio={matchedStudio}
id={matchedStudio.id}
baseURL={studioURLPrefix}
/>
</b>
</div>
Expand Down Expand Up @@ -137,9 +138,9 @@ const StudioResult: React.FC<IStudioResultProps> = ({
<FormattedMessage id="countables.studios" values={{ count: 1 }} />:
<b className="ml-2">
<StudioName
name={studio.name}
baseURL={stashboxStudioPrefix}
studio={studio}
id={studio.remote_site_id}
baseURL={stashboxStudioPrefix}
/>
</b>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/v2.5/src/hooks/Lightbox/Lightbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const CLASSNAME_NAV = `${CLASSNAME}-nav`;
const CLASSNAME_NAVIMAGE = `${CLASSNAME_NAV}-image`;
const CLASSNAME_NAVSELECTED = `${CLASSNAME_NAV}-selected`;

const DEFAULT_SLIDESHOW_DELAY = 5;
const DEFAULT_SLIDESHOW_DELAY = 5000;
const SECONDS_TO_MS = 1000;
const MIN_VALID_INTERVAL_SECONDS = 1;
const MIN_ZOOM = 0.1;
Expand Down
Loading