Scene details page styling

ui/v2.5/src/components/Galleries/GalleryCard.tsx

@@ -27,6 +27,13 @@ export const GalleryPreview: React.FC<IGalleryPreviewProps> = ({
   gallery,
   onScrubberClick,
 }) => {
+  const [isPortrait, setIsPortrait] = React.useState(false);
+
+  function identifyPortaitImage(e: React.UIEvent<HTMLImageElement>) {
+    const img = e.target as HTMLImageElement;
+    setIsPortrait(img.width < img.height);
+  }
+
   const [imgSrc, setImgSrc] = useState<string | undefined>(
     gallery.paths.cover ?? undefined
   );
@@ -36,9 +43,10 @@ export const GalleryPreview: React.FC<IGalleryPreviewProps> = ({
       {!!imgSrc && (
         <img
           loading="lazy"
-          className="gallery-card-image"
+          className={`gallery-card-image ${isPortrait ? "portrait-image" : ""}`}
           alt={gallery.title ?? ""}
           src={imgSrc}
+          onLoad={identifyPortaitImage}
         />
       )}
       {gallery.image_count > 0 && (
@@ -60,6 +68,7 @@ interface IProps {
   selecting?: boolean;
   selected?: boolean | undefined;
   zoomIndex?: number;
+  titleOnImage?: boolean;
   onSelectedChanged?: (selected: boolean, shiftKey: boolean) => void;
 }
 
@@ -231,6 +240,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
       selected={props.selected}
       selecting={props.selecting}
       onSelectedChanged={props.onSelectedChanged}
+      titleOnImage={props.titleOnImage}
     />
   );
 };

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

@@ -43,6 +43,7 @@ import cx from "classnames";
 import { useRatingKeybinds } from "src/hooks/keybinds";
 import { ConfigurationContext } from "src/hooks/Config";
 import { TruncatedText } from "src/components/Shared/TruncatedText";
+import ScreenUtils from "src/utils/screen";
 
 interface IProps {
   gallery: GQL.GalleryDataFragment;
@@ -59,9 +60,11 @@ export const GalleryPage: React.FC<IProps> = ({ gallery, add }) => {
   const Toast = useToast();
   const intl = useIntl();
   const { configuration } = useContext(ConfigurationContext);
+  const uiConfig = configuration?.ui;
+  const enableBackgroundImage = uiConfig?.enableGalleryBackgroundImage ?? false;
   const showLightbox = useGalleryLightbox(gallery.id, gallery.chapters);
 
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(ScreenUtils.isSmallScreen());
 
   const [activeTabKey, setActiveTabKey] = useState("gallery-details-panel");
 
@@ -118,6 +121,30 @@ export const GalleryPage: React.FC<IProps> = ({ gallery, add }) => {
     return collapsed ? faChevronRight : faChevronLeft;
   }
 
+  function maybeRenderHeaderBackgroundImage() {
+    if (enableBackgroundImage && gallery != null && gallery.studio != null) {
+      let image = gallery.studio.image_path;
+      if (image) {
+        const imageURL = new URL(image);
+        let isDefaultImage = imageURL.searchParams.get("default");
+        if (!isDefaultImage) {
+          return (
+            <div className="background-image-container">
+              <picture>
+                <source src={image} />
+                <img
+                  className="background-image"
+                  src={image}
+                  alt={`${gallery.studio.name} background`}
+                />
+              </picture>
+            </div>
+          );
+        }
+      }
+    }
+  }
+
   async function onRescan() {
     if (!gallery || !path) {
       return;
@@ -380,63 +407,74 @@ export const GalleryPage: React.FC<IProps> = ({ gallery, add }) => {
   const title = galleryTitle(gallery);
 
   return (
-    <div className="row">
+    <div id="gallery-page" className="row">
       <Helmet>
         <title>{title}</title>
       </Helmet>
       {maybeRenderDeleteDialog()}
-      <div className={`gallery-tabs ${collapsed ? "collapsed" : ""}`}>
-        <div>
-          <div className="gallery-header-container">
-            {gallery.studio && (
-              <h1 className="text-center gallery-studio-image">
-                <Link to={`/studios/${gallery.studio.id}`}>
-                  <img
-                    src={gallery.studio.image_path ?? ""}
-                    alt={`${gallery.studio.name} logo`}
-                    className="studio-logo"
+      <div
+        className={`gallery-tabs order-xl-first order-last ${
+          collapsed ? "collapsed" : ""
+        }`}
+      >
+        <div className="detail-header">
+          {maybeRenderHeaderBackgroundImage()}
+          <div className="detail-container">
+            <div className="gallery-header-container">
+              {gallery.studio && (
+                <>
+                  <h1 className="text-center gallery-studio-image">
+                    <Link to={`/studios/${gallery.studio.id}`}>
+                      <img
+                        src={gallery.studio.image_path ?? ""}
+                        alt={`${gallery.studio.name} logo`}
+                        className="studio-logo"
+                      />
+                    </Link>
+                  </h1>
+                </>
+              )}
+              <h3
+                className={cx("gallery-header", {
+                  "no-studio": !gallery.studio,
+                })}
+              >
+                <TruncatedText lineCount={2} text={title} />
+              </h3>
+            </div>
+
+            <div className="gallery-subheader">
+              {!!gallery.date && (
+                <span className="date" data-value={gallery.date}>
+                  <FormattedDate
+                    value={gallery.date}
+                    format="long"
+                    timeZone="utc"
                   />
-                </Link>
-              </h1>
-            )}
-            <h3
-              className={cx("gallery-header", { "no-studio": !gallery.studio })}
-            >
-              <TruncatedText lineCount={2} text={title} />
-            </h3>
-          </div>
-
-          <div className="gallery-subheader">
-            {!!gallery.date && (
-              <span className="date" data-value={gallery.date}>
-                <FormattedDate
-                  value={gallery.date}
-                  format="long"
-                  timeZone="utc"
+                </span>
+              )}
+            </div>
+
+            <div className="gallery-toolbar">
+              <span className="gallery-toolbar-group">
+                <RatingSystem
+                  value={gallery.rating100}
+                  onSetRating={setRating}
+                  clickToRate
+                  withoutContext
                 />
               </span>
-            )}
-          </div>
-
-          <div className="gallery-toolbar">
-            <span className="gallery-toolbar-group">
-              <RatingSystem
-                value={gallery.rating100}
-                onSetRating={setRating}
-                clickToRate
-                withoutContext
-              />
-            </span>
-            <span className="gallery-toolbar-group">
-              <span>
-                <OrganizedButton
-                  loading={organizedLoading}
-                  organized={gallery.organized}
-                  onClick={onOrganizedClick}
-                />
+              <span className="gallery-toolbar-group">
+                <span>
+                  <OrganizedButton
+                    loading={organizedLoading}
+                    organized={gallery.organized}
+                    onClick={onOrganizedClick}
+                  />
+                </span>
+                <span>{renderOperations()}</span>
               </span>
-              <span>{renderOperations()}</span>
-            </span>
+            </div>
           </div>
         </div>
         {renderTabs()}
@@ -446,6 +484,11 @@ export const GalleryPage: React.FC<IProps> = ({ gallery, add }) => {
           <Icon className="fa-fw" icon={getCollapseButtonIcon()} />
         </Button>
       </div>
+      <div className="floating-gallery-divider">
+        <Button onClick={() => setCollapsed(!collapsed)}>
+          {collapsed ? "Show Details" : "Hide Details"}
+        </Button>
+      </div>
       <div className={`gallery-container ${collapsed ? "expanded" : ""}`}>
         {renderRightTabs()}
       </div>

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

@@ -52,7 +52,7 @@ export const GalleryChapterPanel: React.FC<IGalleryChapterPanelProps> = ({
     );
 
   return (
-    <div>
+    <div id="gallery-chapter-panel">
       <Button onClick={() => onOpenEditor()}>
         <FormattedMessage id="actions.create_chapters" />
       </Button>