Add divider to gallery tab (#3508)

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

@@ -1,4 +1,4 @@
-import { Tab, Nav, Dropdown } from "react-bootstrap";
+import { Button, Tab, Nav, Dropdown } from "react-bootstrap";
 import React, { useEffect, useMemo, useState } from "react";
 import { useParams, useHistory, Link } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -40,6 +40,8 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
   const Toast = useToast();
   const intl = useIntl();
 
+  const [collapsed, setCollapsed] = useState(false);
+
   const [activeTabKey, setActiveTabKey] = useState("gallery-details-panel");
   const activeRightTabKey = tab === "images" || tab === "add" ? tab : "images";
   const setActiveRightTabKey = (newTab: string | null) => {
@@ -73,6 +75,10 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
     }
   };
 
+  function getCollapseButtonText() {
+    return collapsed ? ">" : "<";
+  }
+
   async function onRescan() {
     if (!gallery || !path) {
       return;
@@ -285,7 +291,7 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
         <title>{title}</title>
       </Helmet>
       {maybeRenderDeleteDialog()}
-      <div className="gallery-tabs">
+      <div className={`gallery-tabs ${collapsed ? "collapsed" : ""}`}>
         <div className="d-none d-xl-block">
           {gallery.studio && (
             <h1 className="text-center">
@@ -302,7 +308,14 @@ export const GalleryPage: React.FC<IProps> = ({ gallery }) => {
         </div>
         {renderTabs()}
       </div>
-      <div className="gallery-container">{renderRightTabs()}</div>
+      <div className="gallery-divider d-none d-xl-block">
+        <Button onClick={() => setCollapsed(!collapsed)}>
+          {getCollapseButtonText()}
+        </Button>
+      </div>
+      <div className={`gallery-container ${collapsed ? "expanded" : ""}`}>
+        {renderRightTabs()}
+      </div>
     </div>
   );
 };

ui/v2.5/src/components/Galleries/styles.scss

@@ -63,11 +63,46 @@ $galleryTabWidth: 450px;
     flex: 0 0 $galleryTabWidth;
     max-width: $galleryTabWidth;
     overflow: auto;
+
+    &.collapsed {
+      display: none;
+    }
+  }
+
+  .gallery-divider {
+    flex: 0 0 15px;
+    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;
+      }
+    }
   }
 
   .gallery-container {
-    flex: 0 0 calc(100% - #{$galleryTabWidth});
-    max-width: calc(100% - #{$galleryTabWidth});
+    flex: 0 0 calc(100% - #{$galleryTabWidth} - 15px);
+    max-width: calc(100% - #{$galleryTabWidth} - 15px);
+
+    &.expanded {
+      flex: 0 0 calc(100% - 15px);
+      max-width: calc(100% - 15px);
+    }
   }
 }
 

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

@@ -10,6 +10,7 @@
 * Added toggleable favorite button to Performer cards. ([#3369](https://github.com/stashapp/stash/pull/3369))
 
 ### 🎨 Improvements
+* Added collapsible divider to Gallery page. ([#3508](https://github.com/stashapp/stash/pull/3508))
 * Overhauled and improved HLS streaming. ([#3274](https://github.com/stashapp/stash/pull/3274))
 
 ### 🐛 Bug fixes