Update scene, image, and gallery detail panels

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

@@ -1,11 +1,6 @@
 import { Button, Tab, Nav, Dropdown } from "react-bootstrap";
 import React, { useEffect, useMemo, useState } from "react";
-import {
-  useHistory,
-  Link,
-  RouteComponentProps,
-  Redirect,
-} from "react-router-dom";
+import { useHistory, RouteComponentProps, Redirect } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Helmet } from "react-helmet";
 import * as GQL from "src/core/generated-graphql";
@@ -347,17 +342,6 @@ export const GalleryPage: React.FC<IProps> = ({ gallery, add }) => {
       {maybeRenderDeleteDialog()}
       <div className={`gallery-tabs ${collapsed ? "collapsed" : ""}`}>
         <div className="d-none d-xl-block">
-          {gallery.studio && (
-            <h1 className="text-center">
-              <Link to={`/studios/${gallery.studio.id}`}>
-                <img
-                  src={gallery.studio.image_path ?? ""}
-                  alt={`${gallery.studio.name} logo`}
-                  className="studio-logo"
-                />
-              </Link>
-            </h1>
-          )}
           <h3 className="gallery-header">{title}</h3>
         </div>
         {renderTabs()}

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

@@ -1,4 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+import { Icon } from "src/components/Shared/Icon";
 import { Link } from "react-router-dom";
 import { FormattedDate, FormattedMessage, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
@@ -9,6 +11,9 @@ import { PerformerCard } from "src/components/Performers/PerformerCard";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
 import { sortPerformers } from "src/core/performers";
 import { galleryTitle } from "src/core/galleries";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { ConfigurationContext } from "src/hooks/Config";
+import { IUIConfig } from "src/core/config";
 
 interface IGalleryDetailProps {
   gallery: GQL.GalleryDataFragment;
@@ -19,37 +24,55 @@ export const GalleryDetailPanel: React.FC<IGalleryDetailProps> = ({
 }) => {
   const intl = useIntl();
 
-  function renderDetails() {
+  const { configuration } = React.useContext(ConfigurationContext);
+  const uiConfig = configuration?.ui as IUIConfig | undefined;
+  const showAllDetails = uiConfig?.showAllDetails ?? true;
+  const [collapsed, setCollapsed] = useState<boolean>(!showAllDetails);
+
+  function getCollapseButtonIcon() {
+    return collapsed ? faChevronDown : faChevronUp;
+  }
+
+  function maybeRenderDetails() {
     if (!gallery.details) return;
     return (
-      <>
-        <h6>
-          <FormattedMessage id="details" />:{" "}
-        </h6>
-        <p className="pre">{gallery.details}</p>
-      </>
+      <div className="row details-description">
+        <div className="col-12">
+          <h5>
+            <FormattedMessage id="details" />
+            <Button
+              className="minimal expand-collapse"
+              onClick={() => setCollapsed(!collapsed)}
+            >
+              <Icon className="fa-fw" icon={getCollapseButtonIcon()} />
+            </Button>
+          </h5>
+          <p className={`pre ${collapsed ? "collapsed" : ""}`}>
+            {gallery.details}
+          </p>
+        </div>
+      </div>
     );
   }
 
-  function renderTags() {
+  function maybeRenderTags() {
     if (gallery.tags.length === 0) return;
     const tags = gallery.tags.map((tag) => (
       <TagLink key={tag.id} tag={tag} linkType="gallery" />
     ));
     return (
-      <>
-        <h6>
-          <FormattedMessage
-            id="countables.tags"
-            values={{ count: gallery.tags.length }}
-          />
-        </h6>
-        {tags}
-      </>
+      <div className="row details-tags">
+        <div className="col-12">
+          <h5>
+            <FormattedMessage id="tags" />
+          </h5>
+          {tags}
+        </div>
+      </div>
     );
   }
 
-  function renderPerformers() {
+  function maybeRenderPerformers() {
     if (gallery.performers.length === 0) return;
     const performers = sortPerformers(gallery.performers);
     const cards = performers.map((performer) => (
@@ -61,86 +84,103 @@ export const GalleryDetailPanel: React.FC<IGalleryDetailProps> = ({
     ));
 
     return (
-      <>
-        <h6>
-          <FormattedMessage
-            id="countables.performers"
-            values={{ count: gallery.performers.length }}
-          />
-        </h6>
-        <div className="row justify-content-center gallery-performers">
-          {cards}
+      <div className="row details-performers">
+        <div className="col-12">
+          <h5>
+            <FormattedMessage id="performers" />
+          </h5>
+          <div className="row image-performers">{cards}</div>
         </div>
-      </>
+      </div>
     );
   }
 
-  // filename should use entire row if there is no studio
-  const galleryDetailsWidth = gallery.studio ? "col-9" : "col-12";
   const title = galleryTitle(gallery);
 
   return (
-    <>
-      <div className="row">
-        <div className={`${galleryDetailsWidth} col-xl-12 gallery-details`}>
-          <h3 className="gallery-header d-xl-none">
-            <TruncatedText text={title} />
-          </h3>
-          {gallery.date ? (
+    <div className="col-xl-12 details-display">
+      <div className="details-basic">
+        <div className="row">
+          <div className="gallery-header d-xl-none">
+            <h3>
+              <TruncatedText text={title} />
+            </h3>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-6">
             <h5>
-              <FormattedDate
-                value={gallery.date}
-                format="long"
-                timeZone="utc"
-              />
+              <FormattedMessage id="studio" />
             </h5>
-          ) : undefined}
-          {gallery.rating100 ? (
-            <h6>
-              <FormattedMessage id="rating" />:{" "}
-              <RatingSystem value={gallery.rating100} disabled />
-            </h6>
-          ) : (
-            ""
-          )}
-          <h6>
-            <FormattedMessage id="created_at" />:{" "}
-            {TextUtils.formatDateTime(intl, gallery.created_at)}{" "}
-          </h6>
-          <h6>
-            <FormattedMessage id="updated_at" />:{" "}
-            {TextUtils.formatDateTime(intl, gallery.updated_at)}{" "}
-          </h6>
-          {gallery.code && (
+            {gallery.studio?.name ? (
+              <h6>
+                <Link to={`/studios/${gallery.studio.id}`}>
+                  <TruncatedText text={gallery.studio.name} />
+                </Link>
+              </h6>
+            ) : (
+              <h6>&nbsp;</h6>
+            )}
+          </div>
+          <div className="col-6">
+            <h5>
+              <FormattedMessage id="date" />
+            </h5>
+            {gallery.date ? (
+              <h6>
+                <FormattedDate
+                  value={gallery.date}
+                  format="long"
+                  timeZone="utc"
+                />
+              </h6>
+            ) : (
+              <h6>&nbsp;</h6>
+            )}
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-6">
+            <h5>
+              <FormattedMessage id="scene_code" />
+            </h5>
+            {gallery.code ? <h6>{gallery.code}</h6> : <h6>&nbsp;</h6>}
+          </div>
+          <div className="col-6">
+            <h5>
+              <FormattedMessage id="rating" />
+            </h5>
+            <RatingSystem value={gallery.rating100 ?? undefined} disabled />
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-6">
+            <h5>
+              <FormattedMessage id="photographer" />
+            </h5>
+            {gallery.photographer ? (
+              <h6>{gallery.photographer}</h6>
+            ) : (
+              <h6>&nbsp;</h6>
+            )}
+          </div>
+        </div>
+        {maybeRenderTags()}
+        {maybeRenderDetails()}
+        {maybeRenderPerformers()}
+        <div className="row details-extra">
+          <div className="col-12">
             <h6>
-              <FormattedMessage id="scene_code" />: {gallery.code}{" "}
+              <FormattedMessage id="created_at" />:{" "}
+              {TextUtils.formatDateTime(intl, gallery.created_at)}
             </h6>
-          )}
-          {gallery.photographer && (
             <h6>
-              <FormattedMessage id="photographer" />: {gallery.photographer}{" "}
+              <FormattedMessage id="updated_at" />:{" "}
+              {TextUtils.formatDateTime(intl, gallery.updated_at)}
             </h6>
-          )}
-        </div>
-        {gallery.studio && (
-          <div className="col-3 d-xl-none">
-            <Link to={`/studios/${gallery.studio.id}`}>
-              <img
-                src={gallery.studio.image_path ?? ""}
-                alt={`${gallery.studio.name} logo`}
-                className="studio-logo float-right"
-              />
-            </Link>
           </div>
-        )}
-      </div>
-      <div className="row">
-        <div className="col-12">
-          {renderDetails()}
-          {renderTags()}
-          {renderPerformers()}
         </div>
       </div>
-    </>
+    </div>
   );
 };

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

@@ -7,8 +7,8 @@
 }
 
 .gallery-header {
-  flex-basis: auto;
-  margin-top: 30px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 #gallery-details-container {
@@ -109,7 +109,6 @@ $galleryTabWidth: 450px;
 .gallery-tabs,
 .gallery-container {
   padding-left: 15px;
-  padding-right: 15px;
   position: relative;
   width: 100%;
 }
@@ -122,7 +121,7 @@ $galleryTabWidth: 450px;
 @media (min-width: 1200px), (max-width: 575px) {
   .gallery-performers {
     .performer-card {
-      width: 15rem;
+      width: 14rem;
 
       &-gallery {
         height: 22.5rem;

ui/v2.5/src/components/Images/ImageDetails/Image.tsx

@@ -1,7 +1,7 @@
 import { Tab, Nav, Dropdown } from "react-bootstrap";
 import React, { useEffect, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
-import { useHistory, Link, RouteComponentProps } from "react-router-dom";
+import { useHistory, RouteComponentProps } from "react-router-dom";
 import { Helmet } from "react-helmet";
 import {
   useFindImage,
@@ -276,17 +276,6 @@ const ImagePage: React.FC<IProps> = ({ image }) => {
       {maybeRenderDeleteDialog()}
       <div className="image-tabs order-xl-first order-last">
         <div className="d-none d-xl-block">
-          {image.studio && (
-            <h1 className="text-center">
-              <Link to={`/studios/${image.studio.id}`}>
-                <img
-                  src={image.studio.image_path ?? ""}
-                  alt={`${image.studio.name} logo`}
-                  className="studio-logo"
-                />
-              </Link>
-            </h1>
-          )}
           <h3 className="image-header">{title}</h3>
         </div>
         {renderTabs()}