Merge pull request #595 from Alt-Org/juhaj77/bug/585-enhancement-site-wide-uiux-improvements-continues

Juhaj77/bug/585 enhancement site wide uiux improvements continues

Author: Skoivumaki

frontend-next-migration/src/app/[lng]/(helper)/collections/music/[collection]/page.tsx

@@ -0,0 +1,6 @@
+import { redirect } from 'next/navigation';
+import { getRouteAllMusicCollectionsPage } from '@/shared/appLinks/RoutePaths';
+
+export default function Page({ params }: { params: { lng: string; collection: string } }) {
+    redirect(`/${params.lng}${getRouteAllMusicCollectionsPage()}`);
+}

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

@@ -1,16 +1,10 @@
 import { ReactNode } from 'react';
-import { ScrollTop } from '@/features/ScrollTop';
 import { FurnitureLayout } from '@/preparedPages/FurniturePages';
 
 type Props = {
     children: ReactNode;
 };
 
 export default function Layout({ children }: Props) {
-    return (
-        <FurnitureLayout>
-            {children}
-            <ScrollTop />
-        </FurnitureLayout>
-    );
+    return <FurnitureLayout>{children}</FurnitureLayout>;
 }

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { Footer } from '@/widgets/Footer';
 import { Navbar } from '@/widgets/Navbar';
+import { ScrollTop } from '@/features/ScrollTop';
 import LayoutDefault from '../../../preparedPages/Layouts/ui/LayoutDefault/LayoutDefault';
 
 type Props = {
@@ -15,6 +16,7 @@ export default function HelperLayout({ children }: Props) {
             <div style={{ flex: 1 }}>
                 <LayoutDefault>{children}</LayoutDefault>
             </div>
+            <ScrollTop />
             <Footer />
         </div>
     );

frontend-next-migration/src/app/[lng]/(home)/_getPage.ts

@@ -80,7 +80,7 @@ export async function _getPage(lng: string) {
                     href: getRouteAllHeroesPage(),
                 },
             },
-            gallery: {
+            altZone: {
                 title: t('project-description-title'),
                 infoText: t('project-description-text'),
                 socialsText: t('socials-text'),
@@ -97,23 +97,6 @@ export async function _getPage(lng: string) {
                 videoLink: AppExternalLinks.previewVideoYoutube,
                 gameImg: iPhone16.src,
             },
-            galleryCopy: {
-                title: t('project-description-title'),
-                infoText: t('project-description-text'),
-                socialsText: t('socials-text'),
-                followUsText: t('follow-us-text'),
-                seeMoreLink: {
-                    text: t('gallery-seeMore'),
-                    href: getRouteAboutPage(),
-                },
-                socialMediaLinks: [
-                    AppExternalLinks.igPost1,
-                    AppExternalLinks.igPost2,
-                    AppExternalLinks.fbPost1,
-                ],
-                videoLink: AppExternalLinks.previewVideoYoutube,
-                gameImg: gameImg.src,
-            },
             contactSection: {
                 title: t('contact-title'),
                 googlePLayLink: AppExternalLinks.duunitori,

frontend-next-migration/src/app/[lng]/(home)/layout.tsx

@@ -14,8 +14,8 @@ export default function HomeLayout({ children }: Props) {
         <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
             <Navbar />
             <div className={cls.joinUsLayout}>{children}</div>
-            <Footer />
             <ScrollTop />
+            <Footer />
         </div>
     );
 }

frontend-next-migration/src/features/CookieConsentV3/CookieConsentV3.module.scss

@@ -27,6 +27,15 @@
         @media (max-width: 457px) {
             height: 150px;
         }
+        @media (max-width: 368px) {
+            height: 180px;
+        }
+        @media (max-width: 357px) {
+            height: 210px;
+        }
+        @media (max-width: 315px) {
+            height: 240px;
+        }
     }
 }
 

frontend-next-migration/src/features/ScrollTop/ui/v2/ScrollTop.module.scss

@@ -11,14 +11,19 @@
     border: var(--border-desktop) solid var(--black);
     border-radius: var(--border-radius-custom);
     background-color: var(--primary-color);
-    z-index: 10;
+    /* no high z-index by default so it won't overlay inputs */
     cursor: pointer;
     padding: 0.75rem;
     box-shadow: var(--s);
 
-    position: fixed;
-    bottom: 100px;
-    right: 24px;
+    /* Make the button participate in normal flow and stick near viewport bottom */
+    position: sticky;
+    bottom: calc(180px + var(--cookie-consent-offset, 0px)); /* default (mobile/tablet) + cookie bar height */
+    align-self: flex-end; /* place to the right in flex containers */
+    margin-right: 28px; /* right gap */
+    display: inline-flex; /* shrink to content width */
+    float: right; /* align right when not inside a flex container */
+
 
     opacity: 0;
     visibility: hidden;
@@ -52,16 +57,21 @@
         outline-offset: 2px;
     }
 
+    /* Mobile tweaks */
     @media (max-width: breakpoint(lg)) {
-        right: 24px;
-        bottom: 100px;
         border-width: var(--border-mobile);
         border-radius: var(--border-radius-custom);
         box-shadow: var(--s);
         transform: none; // Mobile safety
+        margin-right: 25px;
     }
 }
 
+/* Raise just above the cookie bar only while it is visible */
+:root.cookie-consent-visible .ScrollTop {
+    z-index: 1001; /* Cookie bar uses z-index:1000 */
+}
+
 .ScrollTop > img {
     width: 32px;
     height: 32px;

frontend-next-migration/src/features/ScrollTop/ui/v2/ScrollTop.tsx

@@ -28,6 +28,82 @@ export const ScrollTop = memo(({ className = '' }: ScrollTopProps) => {
         }
     }, [currentYPosition]);
 
+    useEffect(() => {
+        // Keep ScrollTop above minimized CookieConsent: set CSS var to bar height
+        const root = document.documentElement;
+        const CSS_VAR = '--cookie-consent-offset';
+
+        const getBar = (): HTMLElement | null => {
+            // Match CookieConsent V2/V3 wrappers using CSS Modules generated class names
+            return document.querySelector('[class*="cookieConsentV2"]') as HTMLElement | null;
+        };
+
+        const ROOT_VISIBLE_CLASS = 'cookie-consent-visible';
+        const updateOffset = (bar: HTMLElement | null) => {
+            let height = 0;
+            if (bar) {
+                const rect = bar.getBoundingClientRect();
+                const style = window.getComputedStyle(bar);
+                const isVisible =
+                    style.display !== 'none' &&
+                    style.visibility !== 'hidden' &&
+                    rect.height > 0 &&
+                    rect.width > 0;
+                height = isVisible ? Math.round(rect.height) : 0;
+            }
+
+            root.style.setProperty(CSS_VAR, `${height - 80}px`);
+            // Toggle a helper class so we can raise z-index only while bar is present
+            if (height > 0) {
+                root.classList.add(ROOT_VISIBLE_CLASS);
+                root.style.setProperty(CSS_VAR, `${height - 150}px`);
+            } else {
+                root.classList.remove(ROOT_VISIBLE_CLASS);
+            }
+        };
+
+        let resizeObs: ResizeObserver | null = null;
+        let mutationObs: MutationObserver | null = null;
+
+        const setup = () => {
+            const bar = getBar();
+            updateOffset(bar);
+            if (bar && 'ResizeObserver' in window) {
+                resizeObs = new ResizeObserver(() => updateOffset(bar));
+                resizeObs.observe(bar);
+            }
+        };
+
+        setup();
+
+        // Watch for bar mount/unmount or class changes (minimized/full)
+        mutationObs = new MutationObserver(() => {
+            const bar = getBar();
+            updateOffset(bar);
+            if (bar && resizeObs && (resizeObs as any)._observed !== bar) {
+                // Reconnect observer in case element changed
+                resizeObs.disconnect();
+                resizeObs.observe(bar);
+            }
+        });
+        mutationObs.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['class', 'style'],
+        });
+
+        // Fallback: periodic poll to be extra safe on older browsers
+        const pollId = window.setInterval(() => updateOffset(getBar()), 1500);
+
+        return () => {
+            root.style.removeProperty(CSS_VAR);
+            if (resizeObs) resizeObs.disconnect();
+            if (mutationObs) mutationObs.disconnect();
+            window.clearInterval(pollId);
+        };
+    }, []);
+
     return (
         <button
             data-testid="scroll-to-top-btn"

frontend-next-migration/src/preparedPages/AboutPage/ui/About.module.scss

@@ -118,7 +118,7 @@
     overflow: hidden;
     outline: 4px solid var(--black);
     box-shadow: 6px 6px #121212;
-    margin: 0 0 var(--spacing-400) 0;
+    margin: -16px 0 var(--spacing-400) 0;
 
     @media (max-width: breakpoint(sm)) {
         max-width: none;
@@ -137,6 +137,7 @@
     font: var(--font-sw-xl);
     color: var(--primary-color);
     padding-bottom: var(--spacing-sm);
+    margin-bottom: 16px;
     padding-top: var(--spacing-sm);
 
     @media (max-width: breakpoint(sm)) {
@@ -164,15 +165,15 @@
 }
 
 .sValues {
-    font-family: var(--font-family-title);
-    font-size: var(--font-size-m);
+    font: var(font-sw-xl);
     text-align: center;
     padding: 1%;
 }
 .yearh1 {
     font: var(--font-sw-xl);
     color: var(--primary-color);
     text-align: left;
+    margin-top: -16px;
 
     @media (max-width: breakpoint(sm)) {
         text-align: left;
@@ -188,6 +189,7 @@
 
     @media (max-width: breakpoint(lg)) {
         font: var(--font-sw-l);
+        margin-top: -12px;
     }
 }
 

frontend-next-migration/src/preparedPages/MainPage/ui/MainPage.tsx

@@ -7,7 +7,7 @@ import {
 } from '@/shared/ui/v2/DescriptionCardMobile';
 import defenceGalleryMobile from '@/shared/assets/images/descriptionCard/defense_gallery_mobile.png';
 import useSizes from '@/shared/lib/hooks/useSizes';
-import { Gallery, GalleryProps } from './_components/sections/Gallery';
+import { AltZone, AltZoneProps } from './_components/sections/AltZone';
 import { GetToKnowComicsProps } from './_components/sections/GetToKnowComics';
 import { PlayWithUs, PlayWithUsProps } from './_components/sections/PlayWithUs';
 import { NewsCard } from '@/widgets/NewsCard';
@@ -32,8 +32,7 @@ export type Props = {
     playWithUs: PlayWithUsProps;
     getToKnowComics: GetToKnowComicsProps;
     videoAndGalleries: VideoAndGalleriesProps;
-    gallery: GalleryProps;
-    galleryCopy: GalleryProps;
+    altZone: AltZoneProps;
     contactSection: ContactSectionProps;
 };
 
@@ -43,7 +42,7 @@ function MainPage(props: Props) {
         playWithUs,
         // getToKnowComics,
         // classifiedHeroesBlocks,
-        gallery,
+        altZone,
         contactSection,
     } = props;
 
@@ -149,7 +148,7 @@ function MainPage(props: Props) {
                     </DescriptionCard>
                 </div>
             )}
-            <Gallery {...gallery} />
+            <AltZone {...altZone} />
             <div className={cls.newsSection}>
                 <h2 className={cls.newsHeader}>{t('newsSection-title')}</h2>
                 <div className={cls.newsGrid}>
@@ -181,8 +180,6 @@ function MainPage(props: Props) {
             </div>
             <ContactSection {...contactSection} />
 
-            {/*<Gallery {...galleryCopy} />*/}
-
             {/*<HorizontalLines />*/}
             {/*<SectionRanking*/}
             {/*    rankingPlayerText={t('ranking-player')}*/}