Rooba
/
stash
mirror of https://github.com/stashapp/stash.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
CJ 2024-10-28 17:35:58 -07:00 committed by GitHub
parent c6bcdd89be
commit 069a4b1f80
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 81 additions and 93 deletions
Show Stats 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> = ({
group,
collapsed,
fullWidth,
}) => {
// 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 (
<div className="detail-group">
<DetailItem
@ -108,7 +81,6 @@ export const GroupDetailsPanel: React.FC<IGroupDetailsPanel> = ({
}
fullWidth={fullWidth}
/>
<DetailItem
id="director"
value={
@ -120,7 +92,15 @@ export const GroupDetailsPanel: React.FC<IGroupDetailsPanel> = ({
}
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>
);
};

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

@ -41,8 +41,21 @@
}
}
#group-page .rating-number .text-input {
width: auto;
#group-page {
.rating-number .text-input {
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 {

67
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> =
PatchComponent("PerformerDetailsPanel", (props) => {
const { performer, collapsed, fullWidth } = props;
const { performer, fullWidth } = props;
// Network state
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
?.replace(/\[((?:http|www\.)[^\n\]]+)\]/gm, "")
.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}
/>
</>
);
}
}
let details = performer?.details
?.replace(/\[((?:http|www\.)[^\n\]]+)\]/gm, "")
.trim();
return (
<PerformerDetailGroup {...props}>
@ -190,7 +154,28 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> =
value={performer?.fake_tits}
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>
);
});

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

@ -40,6 +40,21 @@
.alias {
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 {

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

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

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

@ -40,4 +40,14 @@
.rating-number .text-input {
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 */
}