Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 12:24:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

show/hide details via CSS rather than Javascript (#5396)

Browse Source
This commit is contained in:
CJ
2024-10-28 17:35:58 -07:00
committed by GitHub
parent c6bcdd89be
commit 069a4b1f80
6 changed files with 81 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
ui/v2.5/src/components/Groups/GroupDetails/GroupDetailsPanel.tsx
View File

@@ -36,7 +36,6 @@ interface IGroupDetailsPanel {
export const GroupDetailsPanel: React.FC<IGroupDetailsPanel> = ({ export const GroupDetailsPanel: React.FC<IGroupDetailsPanel> = ({
group, group,
collapsed,
fullWidth, fullWidth,
}) => { }) => {
// Network state // Network state
@@ -55,32 +54,6 @@ export const GroupDetailsPanel: React.FC<IGroupDetailsPanel> = ({
); );
} }
function maybeRenderExtraDetails() {
if (!collapsed) {
return (
<>
<DetailItem
id="synopsis"
value={group.synopsis}
fullWidth={fullWidth}
/>
<DetailItem
id="tags"
value={renderTagsField()}
fullWidth={fullWidth}
/>
{group.containing_groups.length > 0 && (
<DetailItem
id="containing_groups"
value={<GroupsList groups={group.containing_groups} />}
fullWidth={fullWidth}
/>
)}
</>
);
}
}
return ( return (
<div className="detail-group"> <div className="detail-group">
<DetailItem <DetailItem
@@ -108,7 +81,6 @@ export const GroupDetailsPanel: React.FC<IGroupDetailsPanel> = ({
} }
fullWidth={fullWidth} fullWidth={fullWidth}
/> />
<DetailItem <DetailItem
id="director" id="director"
value={ value={
@@ -120,7 +92,15 @@ export const GroupDetailsPanel: React.FC<IGroupDetailsPanel> = ({
} }
fullWidth={fullWidth} fullWidth={fullWidth}
/> />
{maybeRenderExtraDetails()} <DetailItem id="synopsis" value={group.synopsis} fullWidth={fullWidth} />
<DetailItem id="tags" value={renderTagsField()} fullWidth={fullWidth} />
{group.containing_groups.length > 0 && (
<DetailItem
id="containing_groups"
value={<GroupsList groups={group.containing_groups} />}
fullWidth={fullWidth}
/>
)}
</div> </div>
); );
}; };

15
ui/v2.5/src/components/Groups/styles.scss
View File

@@ -41,10 +41,23 @@
} }
} }
#group-page .rating-number .text-input { #group-page {
.rating-number .text-input {
width: auto; width: auto;
} }
// the detail element ids are the same as field type name
// which don't follow the correct convention
/* stylelint-disable selector-class-pattern */
.collapsed {
.detail-item.tags,
.detail-item.containing_groups {
display: none;
}
}
/* stylelint-enable selector-class-pattern */
}
.group-select-option { .group-select-option {
.group-select-row { .group-select-row {
align-items: center; align-items: center;

61
ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx
View File

@@ -28,7 +28,7 @@ const PerformerDetailGroup: React.FC<PropsWithChildren<IPerformerDetails>> =
export const PerformerDetailsPanel: React.FC<IPerformerDetails> = export const PerformerDetailsPanel: React.FC<IPerformerDetails> =
PatchComponent("PerformerDetailsPanel", (props) => { PatchComponent("PerformerDetailsPanel", (props) => {
const { performer, collapsed, fullWidth } = props; const { performer, fullWidth } = props;
// Network state // Network state
const intl = useIntl(); const intl = useIntl();
@@ -62,45 +62,9 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> =
); );
} }
function maybeRenderExtraDetails() {
if (!collapsed) {
/* Remove extra urls provided in details since they will be present by perfomr name */
/* This code can be removed once multple urls are supported for performers */
let details = performer?.details let details = performer?.details
?.replace(/\[((?:http|www\.)[^\n\]]+)\]/gm, "") ?.replace(/\[((?:http|www\.)[^\n\]]+)\]/gm, "")
.trim(); .trim();
return (
<>
<DetailItem
id="tattoos"
value={performer?.tattoos}
fullWidth={fullWidth}
/>
<DetailItem
id="piercings"
value={performer?.piercings}
fullWidth={fullWidth}
/>
<DetailItem
id="career_length"
value={performer?.career_length}
fullWidth={fullWidth}
/>
<DetailItem id="details" value={details} fullWidth={fullWidth} />
<DetailItem
id="tags"
value={renderTagsField()}
fullWidth={fullWidth}
/>
<DetailItem
id="stash_ids"
value={renderStashIDs()}
fullWidth={fullWidth}
/>
</>
);
}
}
return ( return (
<PerformerDetailGroup {...props}> <PerformerDetailGroup {...props}>
@@ -190,7 +154,28 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> =
value={performer?.fake_tits} value={performer?.fake_tits}
fullWidth={fullWidth} fullWidth={fullWidth}
/> />
{maybeRenderExtraDetails()} <DetailItem
id="tattoos"
value={performer?.tattoos}
fullWidth={fullWidth}
/>
<DetailItem
id="piercings"
value={performer?.piercings}
fullWidth={fullWidth}
/>
<DetailItem
id="career_length"
value={performer?.career_length}
fullWidth={fullWidth}
/>
<DetailItem id="details" value={details} fullWidth={fullWidth} />
<DetailItem id="tags" value={renderTagsField()} fullWidth={fullWidth} />
<DetailItem
id="stash_ids"
value={renderStashIDs()}
fullWidth={fullWidth}
/>
</PerformerDetailGroup> </PerformerDetailGroup>
); );
}); });

15
ui/v2.5/src/components/Performers/styles.scss
View File

@@ -40,6 +40,21 @@
.alias { .alias {
font-weight: bold; font-weight: bold;
} }
// the detail element ids are the same as field type name
// which don't follow the correct convention
/* stylelint-disable selector-class-pattern */
.collapsed {
.detail-item.tattoos,
.detail-item.piercings,
.detail-item.career_length,
.detail-item.details,
.detail-item.tags,
.detail-item.stash_ids {
display: none;
}
}
/* stylelint-enable selector-class-pattern */
} }
.new-view { .new-view {

27
ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx
View File

@@ -13,7 +13,6 @@ interface IStudioDetailsPanel {
export const StudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({ export const StudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({
studio, studio,
collapsed,
fullWidth, fullWidth,
}) => { }) => {
function renderTagsField() { function renderTagsField() {
@@ -47,25 +46,6 @@ export const StudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({
); );
} }
function maybeRenderExtraDetails() {
if (!collapsed) {
return (
<>
<DetailItem
id="tags"
value={renderTagsField()}
fullWidth={fullWidth}
/>
<DetailItem
id="stash_ids"
value={renderStashIDs()}
fullWidth={fullWidth}
/>
</>
);
}
}
return ( return (
<div className="detail-group"> <div className="detail-group">
<DetailItem id="details" value={studio.details} fullWidth={fullWidth} /> <DetailItem id="details" value={studio.details} fullWidth={fullWidth} />
@@ -82,7 +62,12 @@ export const StudioDetailsPanel: React.FC<IStudioDetailsPanel> = ({
} }
fullWidth={fullWidth} fullWidth={fullWidth}
/> />
{maybeRenderExtraDetails()} <DetailItem id="tags" value={renderTagsField()} fullWidth={fullWidth} />
<DetailItem
id="stash_ids"
value={renderStashIDs()}
fullWidth={fullWidth}
/>
</div> </div>
); );
}; };

10
ui/v2.5/src/components/Studios/styles.scss
View File

@@ -40,4 +40,14 @@
.rating-number .text-input { .rating-number .text-input {
width: auto; width: auto;
} }
// the detail element ids are the same as field type name
// which don't follow the correct convention
/* stylelint-disable selector-class-pattern */
.collapsed {
.detail-item.stash_ids {
display: none;
}
}
/* stylelint-enable selector-class-pattern */
} }