add divider on more details pages (#3514)

ui/v2.5/src/components/Galleries/GalleryDetails/Gallery.tsx

@@ -281,11 +281,13 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
     Mousetrap.bind("a", () => setActiveTabKey("gallery-details-panel"));
     Mousetrap.bind("e", () => setActiveTabKey("gallery-edit-panel"));
     Mousetrap.bind("f", () => setActiveTabKey("gallery-file-info-panel"));
+    Mousetrap.bind(",", () => setCollapsed(!collapsed));
 
     return () => {
       Mousetrap.unbind("a");
       Mousetrap.unbind("e");
       Mousetrap.unbind("f");
+      Mousetrap.unbind(",");
     };
   });
 

ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx

@@ -49,6 +49,8 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
   const intl = useIntl();
   const { tab = "details" } = useParams<IPerformerParams>();
 
+  const [collapsed, setCollapsed] = useState(false);
+
   // Configuration settings
   const { configuration } = React.useContext(ConfigurationContext);
   const abbreviateCounter =
@@ -116,6 +118,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
     Mousetrap.bind("g", () => setActiveTabKey("galleries"));
     Mousetrap.bind("m", () => setActiveTabKey("movies"));
     Mousetrap.bind("f", () => setFavorite(!performer.favorite));
+    Mousetrap.bind(",", () => setCollapsed(!collapsed));
 
     return () => {
       Mousetrap.unbind("a");
@@ -123,6 +126,7 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
       Mousetrap.unbind("c");
       Mousetrap.unbind("f");
       Mousetrap.unbind("o");
+      Mousetrap.unbind(",");
     };
   });
 
@@ -380,13 +384,21 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
       />
     );
 
+  function getCollapseButtonText() {
+    return collapsed ? ">" : "<";
+  }
+
   return (
     <div id="performer-page" className="row">
       <Helmet>
         <title>{performer.name}</title>
       </Helmet>
 
-      <div className="performer-image-container col-md-4 text-center">
+      <div
+        className={`performer-image-container details-tab text-center text-center ${
+          collapsed ? "collapsed" : ""
+        }`}
+      >
         {encodingImage ? (
           <LoadingIndicator message="Encoding image..." />
         ) : (
@@ -399,7 +411,12 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
           </Button>
         )}
       </div>
-      <div className="col-md-8">
+      <div className="details-divider d-none d-xl-block">
+        <Button onClick={() => setCollapsed(!collapsed)}>
+          {getCollapseButtonText()}
+        </Button>
+      </div>
+      <div className={`content-container ${collapsed ? "expanded" : ""}`}>
         <div className="row">
           <div className="performer-head col">
             <h2>

ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx

@@ -1,4 +1,4 @@
-import { Tabs, Tab } from "react-bootstrap";
+import { Button, Tabs, Tab } from "react-bootstrap";
 import React, { useEffect, useState } from "react";
 import { useParams, useHistory } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -44,6 +44,8 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
   const intl = useIntl();
   const { tab = "details" } = useParams<IStudioParams>();
 
+  const [collapsed, setCollapsed] = useState(false);
+
   // Configuration settings
   const { configuration } = React.useContext(ConfigurationContext);
   const abbreviateCounter =
@@ -66,10 +68,12 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
     Mousetrap.bind("d d", () => {
       onDelete();
     });
+    Mousetrap.bind(",", () => setCollapsed(!collapsed));
 
     return () => {
       Mousetrap.unbind("e");
       Mousetrap.unbind("d d");
+      Mousetrap.unbind(",");
     };
   });
 
@@ -174,9 +178,15 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
     }
   };
 
+  function getCollapseButtonText() {
+    return collapsed ? ">" : "<";
+  }
+
   return (
     <div className="row">
-      <div className="studio-details col-md-4">
+      <div
+        className={`studio-details details-tab ${collapsed ? "collapsed" : ""}`}
+      >
         <div className="text-center">
           {encodingImage ? (
             <LoadingIndicator message="Encoding image..." />
@@ -215,7 +225,12 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
           />
         )}
       </div>
-      <div className="col col-md-8">
+      <div className="details-divider d-none d-xl-block">
+        <Button onClick={() => setCollapsed(!collapsed)}>
+          {getCollapseButtonText()}
+        </Button>
+      </div>
+      <div className={`col content-container ${collapsed ? "expanded" : ""}`}>
         <Tabs
           id="studio-tabs"
           mountOnEnter

ui/v2.5/src/components/Tags/TagDetails/Tag.tsx

@@ -1,4 +1,4 @@
-import { Tabs, Tab, Dropdown } from "react-bootstrap";
+import { Button, Tabs, Tab, Dropdown } from "react-bootstrap";
 import React, { useEffect, useState } from "react";
 import { useParams, useHistory } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -49,6 +49,8 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
   const Toast = useToast();
   const intl = useIntl();
 
+  const [collapsed, setCollapsed] = useState(false);
+
   // Configuration settings
   const { configuration } = React.useContext(ConfigurationContext);
   const abbreviateCounter =
@@ -88,6 +90,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
     Mousetrap.bind("d d", () => {
       onDelete();
     });
+    Mousetrap.bind(",", () => setCollapsed(!collapsed));
 
     return () => {
       if (isEditing) {
@@ -96,6 +99,7 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
 
       Mousetrap.unbind("e");
       Mousetrap.unbind("d d");
+      Mousetrap.unbind(",");
     };
   });
 
@@ -245,13 +249,19 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
     );
   }
 
+  function getCollapseButtonText() {
+    return collapsed ? ">" : "<";
+  }
+
   return (
     <>
       <Helmet>
         <title>{tag.name}</title>
       </Helmet>
       <div className="row">
-        <div className="tag-details col-md-4">
+        <div
+          className={`tag-details details-tab ${collapsed ? "collapsed" : ""}`}
+        >
           <div className="text-center logo-container">
             {encodingImage ? (
               <LoadingIndicator message="Encoding image..." />
@@ -290,7 +300,12 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
             />
           )}
         </div>
-        <div className="col col-md-8">
+        <div className="details-divider d-none d-xl-block">
+          <Button onClick={() => setCollapsed(!collapsed)}>
+            {getCollapseButtonText()}
+          </Button>
+        </div>
+        <div className={`col content-container ${collapsed ? "expanded" : ""}`}>
           <Tabs
             id="tag-tabs"
             mountOnEnter

ui/v2.5/src/docs/en/Changelog/v0200.md

@@ -13,7 +13,7 @@
 
 ### 🎨 Improvements
 * Improved Images wall view layout and added Interface settings to adjust the layout. ([#3511](https://github.com/stashapp/stash/pull/3511))
-* Added collapsible divider to Gallery page. ([#3508](https://github.com/stashapp/stash/pull/3508))
+* Added collapsible divider to Gallery, Performer, Studio and Tag pages. ([#3508](https://github.com/stashapp/stash/pull/3508), [#3514](https://github.com/stashapp/stash/pull/3514))
 * Overhauled and improved HLS streaming. ([#3274](https://github.com/stashapp/stash/pull/3274))
 
 ### 🐛 Bug fixes

ui/v2.5/src/index.scss

@@ -767,6 +767,79 @@ div.dropdown-menu {
   }
 }
 
+$detailTabWidth: calc(100% / 3);
+
+.content-container,
+.details-tab {
+  padding-left: 15px;
+  padding-right: 15px;
+  position: relative;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .details-tab {
+    flex: 0 0 $detailTabWidth;
+    max-width: $detailTabWidth;
+  }
+
+  .content-container {
+    flex: 0 0 calc(100% - #{$detailTabWidth});
+    max-width: calc(100% - #{$detailTabWidth});
+  }
+}
+@media (min-width: 1200px) {
+  .details-tab {
+    flex: 0 0 $detailTabWidth;
+    max-height: calc(100vh - 4rem);
+    max-width: $detailTabWidth;
+    overflow: auto;
+
+    &.collapsed {
+      display: none;
+    }
+  }
+
+  .details-divider {
+    flex: 0 0 15px;
+    height: calc(100vh - 4rem);
+    max-width: 15px;
+
+    button {
+      background-color: transparent;
+      border: 0;
+      color: $link-color;
+      cursor: pointer;
+      font-size: 10px;
+      font-weight: 800;
+      height: 100%;
+      line-height: 100%;
+      padding: 0;
+      text-align: center;
+      width: 100%;
+
+      &:active:not(:hover),
+      &:focus:not(:hover) {
+        background-color: transparent;
+        border: 0;
+        box-shadow: none;
+      }
+    }
+  }
+
+  .content-container {
+    flex: 0 0 calc(100% - #{$detailTabWidth} - 15px);
+    max-height: calc(100vh - 4rem);
+    max-width: calc(100% - #{$detailTabWidth} - 15px);
+    overflow: auto;
+
+    &.expanded {
+      flex: 0 0 calc(100% - 15px);
+      max-width: calc(100% - 15px);
+    }
+  }
+}
+
 .pre {
   white-space: pre-line;
 }