Group details: Flippable images in expanded view. (#5367)

* flippable images in expanded view

* adjust table title width

* cleanup

* eliminate bounce and other improvements

* expand support to non full-width option

ui/v2.5/src/components/Groups/GroupDetails/Group.tsx

@@ -21,7 +21,7 @@ import {
   GroupDetailsPanel,
 } from "./GroupDetailsPanel";
 import { GroupEditPanel } from "./GroupEditPanel";
-import { faTrashAlt } from "@fortawesome/free-solid-svg-icons";
+import { faRefresh, faTrashAlt } from "@fortawesome/free-solid-svg-icons";
 import { RatingSystem } from "src/components/Shared/Rating/RatingSystem";
 import { ConfigurationContext } from "src/hooks/Config";
 import { DetailImage } from "src/components/Shared/DetailImage";
@@ -39,8 +39,9 @@ import {
   TabTitleCounter,
   useTabKey,
 } from "src/components/Shared/DetailsPage/Tabs";
-import { Tab, Tabs } from "react-bootstrap";
+import { Button, Tab, Tabs } from "react-bootstrap";
 import { GroupSubGroupsPanel } from "./GroupSubGroupsPanel";
+import { Icon } from "src/components/Shared/Icon";
 
 const validTabs = ["default", "scenes", "subgroups"] as const;
 type TabKey = (typeof validTabs)[number];
@@ -130,6 +131,8 @@ const GroupPage: React.FC<IProps> = ({ group, tabKey }) => {
   const showAllDetails = uiConfig?.showAllDetails ?? true;
   const abbreviateCounter = uiConfig?.abbreviateCounters ?? false;
 
+  const [focusedOnFront, setFocusedOnFront] = useState<boolean>(true);
+
   const [collapsed, setCollapsed] = useState<boolean>(!showAllDetails);
   const loadStickyHeader = useLoadStickyHeader();
 
@@ -328,7 +331,13 @@ const GroupPage: React.FC<IProps> = ({ group, tabKey }) => {
             <div className="group-images">
               {!!activeFrontImage && (
                 <LightboxLink images={lightboxImages}>
-                  <DetailImage alt="Front Cover" src={activeFrontImage} />
+                  <DetailImage
+                    className={`front-cover ${
+                      focusedOnFront ? "active" : "inactive"
+                    }`}
+                    alt="Front Cover"
+                    src={activeFrontImage}
+                  />
                 </LightboxLink>
               )}
               {!!activeBackImage && (
@@ -336,9 +345,23 @@ const GroupPage: React.FC<IProps> = ({ group, tabKey }) => {
                   images={lightboxImages}
                   index={lightboxImages.length - 1}
                 >
-                  <DetailImage alt="Back Cover" src={activeBackImage} />
+                  <DetailImage
+                    className={`back-cover ${
+                      !focusedOnFront ? "active" : "inactive"
+                    }`}
+                    alt="Back Cover"
+                    src={activeBackImage}
+                  />
                 </LightboxLink>
               )}
+              {!!(activeFrontImage && activeBackImage) && (
+                <Button
+                  className="flip"
+                  onClick={() => setFocusedOnFront(!focusedOnFront)}
+                >
+                  <Icon icon={faRefresh} />
+                </Button>
+              )}
             </div>
           </HeaderImage>
           <div className="row">

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

@@ -104,6 +104,62 @@
   }
 }
 
+button.flip {
+  display: none;
+}
+
+#group-page .detail-header:not(.collapsed) {
+  .group-images {
+    padding: 0.375rem 0.75rem;
+    position: relative;
+    z-index: 1;
+
+    button.btn-link {
+      padding: 0;
+      position: relative;
+      transition: all 0.3s;
+      z-index: 1;
+    }
+
+    button:has(.active) {
+      z-index: 2;
+    }
+
+    button:has(.inactive) {
+      opacity: 0.5;
+      padding: 0;
+      transform: rotateY(180deg);
+    }
+
+    button.flip {
+      align-items: center;
+      border-radius: 50%;
+      bottom: -5px;
+      display: flex;
+      font-size: 20px;
+      height: 40px;
+      justify-content: center;
+      padding: 0;
+      position: absolute;
+      right: -5px;
+      width: 40px;
+      z-index: 2;
+    }
+
+    img.active {
+      max-width: 22rem;
+    }
+
+    img.inactive {
+      display: none;
+    }
+  }
+
+  .detail-item .detail-item-title {
+    width: 150px;
+  }
+}
+
 .groups-list {
   list-style-type: none;
   padding-inline-start: 0;