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

stashapp · Oct 29, 2024 · 069a4b1 · 069a4b1
1 parent c6bcdd8
commit 069a4b1
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 93 deletions.
diff --git a/ui/v2.5/src/components/Groups/GroupDetails/GroupDetailsPanel.tsx b/ui/v2.5/src/components/Groups/GroupDetails/GroupDetailsPanel.tsx
@@ -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>
   );
 };

diff --git a/ui/v2.5/src/components/Groups/styles.scss b/ui/v2.5/src/components/Groups/styles.scss
@@ -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 {

diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/PerformerDetailsPanel.tsx
@@ -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>
     );
   });

diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss
@@ -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 {

diff --git a/ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx b/ui/v2.5/src/components/Studios/StudioDetails/StudioDetailsPanel.tsx
@@ -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>
   );
 };

diff --git a/ui/v2.5/src/components/Studios/styles.scss b/ui/v2.5/src/components/Studios/styles.scss
@@ -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 */
 }