Skip to content

Salimsara/enhancement/556 complete gameart page redesign #584

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Skoivumaki merged 16 commits into from
Dec 4, 2025
Merged

Salimsara/enhancement/556 complete gameart page redesign #584

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
538d413
SectionCard component creation + implementation
salimsara Oct 15, 2025
cddf941
Resolved image rendering issues with SectionCard + made Sidebar visib…
salimsara Oct 22, 2025
b9a233b
Adjusted layout
salimsara Oct 22, 2025
a368acb
Fix layout
salimsara Oct 23, 2025
ddd825d
Small fixes to enhance visual look
salimsara Oct 23, 2025
8f80ccb
Adjusting visual details
salimsara Oct 23, 2025
8bbc69c
Small fixes
salimsara Oct 23, 2025
b59332f
Small fixes to SectionCard styles
salimsara Oct 27, 2025
c2ac43a
Fixing SectionCard image shape
salimsara Oct 28, 2025
af99cba
Small fix to SectionCard Triangle
salimsara Oct 28, 2025
b5308db
Fixing the SectionCard image view
salimsara Oct 28, 2025
6e29148
Fixed mobile nav bar width
salimsara Oct 28, 2025
3a7fb62
Fixed gap between title and dropdown navbar
salimsara Oct 28, 2025
c704ad2
Restored breakpoint to media query
salimsara Oct 30, 2025
10200d3
Fixed section navigation
salimsara Nov 5, 2025
f0144fd
Adjusted margin between text and image in the Sectioncard on tablet.
salimsara Nov 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions frontend-next-migration/src/features/NavigateGameArt/ui/GameArtNavMenuAsDropdown.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
min-width: 300px;
padding-top: var(--spacing-800);

@media (max-width: breakpoint(lg)) {
min-width: 320px;
@media (max-width: 1023px) {
Copy link
Contributor

@Rutjake Rutjake Oct 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you remove the breakpoint?

Copy link
Contributor Author

@salimsara salimsara Oct 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the breakpoint because I wanted the padding-top to also apply at screen width (1023px), which is exactly between the lg and xl breakpoints. Since that screen width is where sidebar switches to a dropdown, and that creates a gap between the dropdown and the title (which doesn't align with the Figma design). No problem, I will put it back.

min-width: 290px;
padding-top: 0;
}
}
4 changes: 4 additions & 0 deletions frontend-next-migration/src/preparedPages/GameArtPage/ui/GameArtPage.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
.Title {
padding-left: 5%;
margin-bottom: 25px;

@media (max-width: breakpoint(lg)) {
margin-bottom: -30px;
}
}
60 changes: 52 additions & 8 deletions frontend-next-migration/src/preparedPages/GameArtPage/ui/GameArtPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
'use client';
import cls from './GameArtPage.module.scss';
import { LayoutWithSidebars } from '@/preparedPages/Layouts';
import WikiContent from '@/shared/ui/WikiContent/ui/WikiContent';
import { ModularCard, ModularCardTheme } from '@/shared/ui/v2/ModularCard';
import GameArtNavMenu from '@/features/NavigateGameArt';
import { PageTitle } from '@/shared/ui/PageTitle';
import { Container } from '@/shared/ui/Container';
import useSizes from '@/shared/lib/hooks/useSizes';

interface Section {
id: string;
Expand All @@ -23,22 +24,65 @@ export type Props = {

const GameArtPackagePage = (props: Props) => {
const { sections = [], title } = props;
const { isMobileSize, isTabletSize } = useSizes();

return (
<main>
<LayoutWithSidebars
leftTopSidebar={{
component: <GameArtNavMenu sections={sections} />,
hideOnMobile: true,
}}
>
{(isTabletSize || isMobileSize) && (
<Container className={cls.Title}>
<PageTitle
titleText={title}
alternate={true}
/>
</Container>
<WikiContent sections={sections} />
)}

<LayoutWithSidebars
leftTopSidebar={{
component: <GameArtNavMenu sections={sections} />,
hideOnMobile: false,
}}
>
{!isTabletSize && !isMobileSize && (
<Container className={cls.Title}>
<PageTitle
titleText={title}
alternate={true}
/>
</Container>
)}

<div className={cls.SectionGrid}>
{sections.map((section) => (
<ModularCard
key={section.id}
theme={ModularCardTheme.SECTIONCARD}
className={cls.SectionCard}
>
<ModularCard.Texts>
<ModularCard.Texts.Title>{section.label}</ModularCard.Texts.Title>
<ModularCard.Texts.Body>
<div
dangerouslySetInnerHTML={{
__html: section.description,
}}
/>
</ModularCard.Texts.Body>
</ModularCard.Texts>

{section.image && (
<ModularCard.Image className={cls.SectionCardImage}>
<ModularCard.Image.Image
src={section.image}
alt={section.imageAlt}
width={600}
height={400}
/>
</ModularCard.Image>
)}
</ModularCard>
))}
</div>
</LayoutWithSidebars>
</main>
);
Expand Down
Binary file removed frontend-next-migration/src/shared/assets/images/gameArt/implementation.webp
View file
Open in desktop
Binary file not shown.
Binary file removed frontend-next-migration/src/shared/assets/images/gameArt/info.webp
View file
Open in desktop
Binary file not shown.
Binary file removed frontend-next-migration/src/shared/assets/images/gameArt/intro.webp
View file
Open in desktop
Binary file not shown.
Binary file removed frontend-next-migration/src/shared/assets/images/gameArt/joinus.webp
View file
Open in desktop
Binary file not shown.
Binary file removed frontend-next-migration/src/shared/assets/images/gameArt/message.webp
View file
Open in desktop
Binary file not shown.
87 changes: 87 additions & 0 deletions frontend-next-migration/src/shared/ui/v2/ModularCard/ui/ModularCard.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,3 +345,90 @@
}
}

// SectionCard
.Card.SectionCard {
position: relative;
display: flex;
background-color: var(--background);
border: var(--border-desktop) solid var(--black);
border-radius: var(--border-radius-md);
box-shadow: 4px 8px 0 var(--black);
overflow: hidden;
margin-left: 50px;
margin-bottom: 50px;
margin-right: 20px;

@media (max-width: breakpoint(md)) {
flex-direction: column;
margin: 0;
margin-bottom: 30px;
}

}

.Card.SectionCard > .ModularCardTexts {
flex-basis: 95%;
display: flex;
flex-direction: column;
z-index: 2;
gap: 10px;
padding: 20px;
justify-content: flex-start;
}

.Card.SectionCard > .ModularCardTexts > .ModularCardTitle {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
padding-bottom: 10px;
h2 {
font: var(--font-sw-xxl);
color: var(--primary-color);
}
@media (max-width: breakpoint(md)) {
h2 {
font: var(--font-sw-xl);
}
}
}
.Card.SectionCard > .ModularCardTexts > .ModularCardBody {
font: var(--font-dm-m);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
@media (max-width: breakpoint(md)) {
font: var(--font-dm-m);
}
}

.Card.SectionCard > .ModularCardImageSection {
height: auto;
position: relative;
overflow: visible;
display: flex;
justify-content: flex-end;
align-items: stretch;
clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%);
margin-left: -20px;

@media (max-width: breakpoint(md)) {
height: auto;
clip-path: polygon(0 50%, 100% 31%, 100% 100%, 0 100%);
margin-top: -110px;
}

}

.Card.SectionCard > .ModularCardImageSection > .ModularCardImage {
position: relative;
max-width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;

@media (max-width: breakpoint(md)) {
height: auto;
width: 100%;
margin-top: 80px;
}
}
7 changes: 6 additions & 1 deletion frontend-next-migration/src/shared/ui/v2/ModularCard/ui/ModularCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export enum ModularCardTheme {
TITLEIMAGE = 'TitleImageCard',
NEWSCARD = 'NewsImageCard',
DEFENSECARD = 'DefenseCard',
SECTIONCARD = 'SectionCard',
}

/**
Expand Down Expand Up @@ -57,6 +58,8 @@ interface CardCompoundProps {
interface ModularCardImageProps {
className?: string;
alt: string;
width?: number;
height?: number;
src: StaticImageData | string;
}

Expand Down Expand Up @@ -200,13 +203,15 @@ ModularCardFootnote.displayName = 'modularcard-Texts-Footnote';
* />
*/
const ModularCardImage = memo((props: ModularCardImageProps) => {
const { className = '', alt, src } = props;
const { className = '', alt, src, width, height } = props;

return (
<Image
className={classNames(cls.ModularCardImage, {}, [className])}
src={src}
alt={alt}
width={width}
height={height}
/>
);
});
Expand Down