From 069a4b1f80bd19ba885242af787cb6e7bb64c1c2 Mon Sep 17 00:00:00 2001
From: CJ <72030708+cj12312021@users.noreply.github.com>
Date: Mon, 28 Oct 2024 17:35:58 -0700
Subject: [PATCH] show/hide details via CSS rather than Javascript (#5396)

---
 .../Groups/GroupDetails/GroupDetailsPanel.tsx | 38 +++--------
 ui/v2.5/src/components/Groups/styles.scss     | 17 ++++-
 .../PerformerDetailsPanel.tsx                 | 67 +++++++------------
 ui/v2.5/src/components/Performers/styles.scss | 15 +++++
 .../StudioDetails/StudioDetailsPanel.tsx      | 27 ++------
 ui/v2.5/src/components/Studios/styles.scss    | 10 +++
 6 files changed, 81 insertions(+), 93 deletions(-)

diff --git a/ui/v2.5/src/components/Groups/GroupDetails/GroupDetailsPanel.tsx b/ui/v2.5/src/components/Groups/GroupDetails/GroupDetailsPanel.tsx
index 6a20eb908..d93b06466 100644
--- 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
index 1b80045c7..927cd38a0 100644
--- 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
index 94e27a362..e805c03e6 100644
--- 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
index c1f891f6b..786054d98 100644
--- 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
index 5bf877b11..81e389765 100644
--- 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
index 9d919f42d..eaab21d10 100644
--- 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 */
 }