Merge pull request #579 from Alt-Org/juhaj77/enhancement/475-issue-updated-update-gallery-page

Juhaj77/enhancement/475 issue updated update gallery page

Author: Rutjake

frontend-next-migration/src/app/[lng]/(helper)/picture-galleries/layout.tsx

@@ -4,6 +4,7 @@ import { LayoutWithSidebars } from '@/preparedPages/Layouts';
 import { GalleryNavMenuAsDropdown } from '@/features/NavigateGalleries';
 import useSizes from '@/shared/lib/hooks/useSizes';
 import { useClientTranslation } from '@/shared/i18n';
+import { PageTitle } from '@/shared/ui/PageTitle';
 import { cls } from '@/preparedPages/PictureGalleryPages';
 
 export default function PictureGalleryLayout({ children }: { children: ReactNode }) {
@@ -14,13 +15,25 @@ export default function PictureGalleryLayout({ children }: { children: ReactNode
     return (
         <LayoutWithSidebars
             leftTopSidebar={{
-                component: <GalleryNavMenuAsDropdown openByDefault={true} />,
+                component: (
+                    <GalleryNavMenuAsDropdown
+                        className={cls.LeftSidebar}
+                        openByDefault={true}
+                    />
+                ),
                 hideOnMobile: true,
             }}
         >
-            <h1 className={cls.Title}>{t('picture-galleries')}</h1>
-            <p className={cls.InfoText}>{t('info-text')}</p>
-            {isTouchDevice ? <GalleryNavMenuAsDropdown openByDefault={false} /> : null}
+            {isTouchDevice && (
+                <>
+                    <PageTitle
+                        titleText={t('picture-galleries-title')}
+                        alternate={true}
+                        searchVisible={false}
+                    />
+                    <GalleryNavMenuAsDropdown openByDefault={false} />
+                </>
+            )}
             {children}
         </LayoutWithSidebars>
     );

frontend-next-migration/src/entities/Gallery/api/filterAndTransformImages.ts

@@ -20,27 +20,27 @@ export const filterAndTransformImages = (
     version: string,
 ): PhotoVersion[] => {
     try {
-        let images: PhotoVersion[] = [];
-
-        if (version === 'full') {
-            images = photoObjects.map((po) => ({
-                id: po.versions.full.id,
-                image: po.versions.full.image,
-                width: po.versions.full.width,
-                height: po.versions.full.height,
-                altText: po.versions.full.altText,
-            }));
+        // Only allow the two supported versions
+        if (version !== 'full' && version !== 'preview') {
+            return [];
         }
 
-        if (version === 'preview') {
-            images = photoObjects.map((po) => ({
-                id: po.versions.preview.id,
-                image: po.versions.preview.image,
-                width: po.versions.preview.width,
-                height: po.versions.preview.height,
-                altText: po.versions.preview.altText,
-            }));
-        }
+        // Filter out entries with missing versions or missing selected version
+        const valid = photoObjects.filter((po) => {
+            const v = po.versions;
+            return !!(v && v[version]);
+        });
+
+        const images: PhotoVersion[] = valid.map((po) => {
+            const v = po.versions![version]!; // safe due to filtering above
+            return {
+                id: v.id,
+                image: v.image,
+                width: v.width,
+                height: v.height,
+                altText: v.altText || '',
+            };
+        });
 
         return images;
     } catch (error) {

frontend-next-migration/src/entities/Gallery/model/mockImages.ts

@@ -94,12 +94,12 @@ export const generateMockImages = (
             id: `${baseImage.id}-${i + 1}`,
             versions: {
                 preview: {
-                    ...baseImage.versions.preview,
-                    id: `${baseImage.versions.preview.id}-${i + 1}`,
+                    ...baseImage.versions!.preview,
+                    id: `${baseImage.versions!.preview.id}-${i + 1}`,
                 },
                 full: {
-                    ...baseImage.versions.full,
-                    id: `${baseImage.versions.full.id}-${i + 1}`,
+                    ...baseImage.versions!.full,
+                    id: `${baseImage.versions!.full.id}-${i + 1}`,
                 },
             },
         };

frontend-next-migration/src/entities/Gallery/types/gallery.d.ts

@@ -43,9 +43,13 @@ export interface PhotoVersion {
 }
 
 export interface PhotoObject {
-    id: string;
-    category: Category;
-    versions: {
+    title?: string;
+    description?: string;
+    supDescription?: string;
+    frames?: string[][];
+    id?: string;
+    category?: Category;
+    versions?: {
         preview: PhotoVersion;
         full: PhotoVersion;
     };

frontend-next-migration/src/features/NavigateGalleries/ui/GalleryNavMenuAsDropdown.tsx

@@ -17,10 +17,11 @@ import { useClientTranslation } from '@/shared/i18n';
 
 interface GalleryNavMenuProps {
     openByDefault?: boolean;
+    className?: string;
 }
 
 const GalleryNavMenuAsDropdown = (props: GalleryNavMenuProps) => {
-    const { openByDefault = false } = props;
+    const { openByDefault = false, className } = props;
     const { isMobileSize, isTabletSize } = useSizes();
     const isTouchDevice = isMobileSize || isTabletSize;
     const params = useParams();
@@ -100,7 +101,7 @@ const GalleryNavMenuAsDropdown = (props: GalleryNavMenuProps) => {
     };
 
     return (
-        <div>
+        <div className={className}>
             <nav style={isTouchDevice ? { display: 'contents' } : { display: 'none' }}>
                 <NavMenuWithDropdowns {...navMenuWithDropdownsMobileProps} />
             </nav>

frontend-next-migration/src/preparedPages/DefenseGalleryPages/ui/DefenseGalleryPage.module.scss

@@ -43,6 +43,10 @@
   margin-top: 1em;
   margin-bottom: 1em;
   font: var(--font-dm-m);
+  @media (max-width: breakpoint(md)) {
+    width: 100% !important;
+    margin-inline: 0;
+  }
 }
 .Container {
   margin-right: 3em;

frontend-next-migration/src/preparedPages/PictureGalleryPages/ui/PictureGalleryPage.module.scss

@@ -4,13 +4,19 @@
   flex-direction: column;
   min-height: 100vh;
   padding-bottom: 20px;
+  //  background-color: rgba(109, 39, 39, 0.322);
 
-  //@media (max-width: breakpoint(xl)) {
+  //@media (max-width: 1200px) {
   //  margin-top: 50px;
   //}
 
 }
-
+.LeftSidebar{
+  margin-top: 6rem;
+}
+.Maincontainer{
+  background-color: white !important;
+}
 
 .Container{
   flex-grow: 1;
@@ -24,7 +30,6 @@
     width: 85%;
     margin: auto;
     text-align: center;
-    font: var(--font-dm-m);
   }
 
 
@@ -33,19 +38,27 @@
   gap: 20px;
 
 }
+.Header{
+  background-color: #1E3544;
+  box-shadow: 0.3rem 0.3rem black;
+  border: 2px solid black;
+  border-radius: 5px;
+  margin-bottom: 20px;
+  padding: 20px;
+  margin-inline:0;
+}
 
 .Title {
-  font: var(--font-sw-xxxl);
+  font: var(--font-sw-xl);
+  margin-bottom: .2em;
   color: var(--primary-color);
-  line-height: 1.5;
-  text-align: center;
 }
 
 .InfoText {
-  width: 85%;
-  margin: 40px auto;
-  text-align: center;
+  margin-top: 10px;
+  display:inline;
   font: var(--font-dm-m);
+  color: #faf9f6c0;
 }
 
 
@@ -54,6 +67,7 @@
   gap: 30px;
   justify-content: center;
   flex-wrap: wrap;
+
 }
 
 @media (min-width: breakpoint(md)) {
@@ -62,7 +76,6 @@
 
     .SocialsText {
       width: 75%;
-      font: var(--font-dm-m);
     }
   }
 
@@ -73,13 +86,6 @@
 
 }
 
-@media (max-width: 480px) {
-  .Title {
-    font: var(--font-sw-xxl);
-  }
-  
-}
-
 .videoWrapper{
   padding: 0 40px;
   margin-bottom: 20px;
@@ -92,5 +98,37 @@
   border-radius: var(--border-radius-custom);
 }
 
+.TitleBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-inline: 1rem;
+}
 
+.SearchBarDesktop {
+  width: 200px;
+}
+
+.short {
+  width: 17.5rem;
+  @media (max-width: breakpoint(lg)){
+    margin-inline: auto;
+  }
+  @media (max-width: breakpoint(md)){
+    width: 100%;
+    margin-inline: 0;
+  }
+}
+
+
+
+@media (max-width: breakpoint(lg)) {
+  .mainTitle{
+    text-align: center;
+    font: var(--font-sw-xxl);
+  }
+  .Maincontainer{
+    width: 100%;
+  }
 
+}