Skip to content

Commit cfeda72

Browse files
SkoivumakiSkoivumaki
authored
Merge pull request #551 from Alt-Org/juhaj77/feature/547-implement-new-prg-page
547-implement-new-prg-page
2 parents 56407a7 + cd320fd commit cfeda72

File tree

16 files changed

+515
-7
lines changed

16 files changed

+515
-7
lines changed

‎frontend-next-migration/src/app/[lng]/(helper)/prg/_getPage.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { createPage } from '@/app/_helpers';
2+
import { useServerTranslation } from '@/shared/i18n';
3+
4+
export async function _getPage(lng: string) {
5+
const { t } = await useServerTranslation(lng, 'prg');
6+
return createPage({
7+
buildPage: () => ({}),
8+
buildSeo: () => ({
9+
title: t('head-title'),
10+
description: t('head-description'),
11+
keywords: t('head-keywords'),
12+
}),
13+
});
14+
}

‎frontend-next-migration/src/app/[lng]/(helper)/prg/page.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { PRGPage } from '@/preparedPages/PRGPage';
2+
import { withPageData, createMetadataGenerator } from '@/app/_helpers';
3+
import { _getPage } from './_getPage';
4+
5+
export const generateMetadata = createMetadataGenerator(_getPage);
6+
export default withPageData(PRGPage, _getPage);

‎frontend-next-migration/src/preparedPages/PRGPage/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as PRGPage } from './ui/PRGPage';

‎frontend-next-migration/src/preparedPages/PRGPage/ui/PRGPage.module.scss‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
.Container {
2+
margin-inline: auto;
3+
padding-inline: 16px;
4+
font: var(--font-dm-m) !important;
5+
6+
@media (min-width: breakpoint(md)){
7+
width: 70%;
8+
}
9+
}
10+
11+
.HeaderLine {
12+
display: flex;
13+
justify-content: space-between;
14+
}
15+
.TextContainer {
16+
margin-top: 2rem;
17+
border-radius: var(--corner-radius-web);
18+
background-color: var(--base-card-background);
19+
border: var(--border-mobile) solid var(--black);
20+
box-shadow: var(--black) 4px 6px 0;
21+
padding: 1rem;
22+
}
23+
.Subheading {
24+
font: var(--font-sw-xl);
25+
color: var(--primary-color);
26+
text-align: center;
27+
padding-top: 1rem;
28+
padding-bottom: 1rem;
29+
@media (max-width: #{breakpoint(sm)}){
30+
font-size: 1.5rem;
31+
}
32+
}
33+
.textColumns {
34+
box-sizing: border-box;
35+
padding-inline: 32px;
36+
column-count: 1;
37+
column-gap: 24px;
38+
column-fill: balance;
39+
hyphens: auto;
40+
overflow-wrap: break-word;
41+
padding-bottom: 1em;
42+
}
43+
44+
@media (min-width: #{breakpoint(md)}) {
45+
.textColumns {
46+
column-count: 2;
47+
}
48+
}
49+
.textCenter {
50+
text-align: center;
51+
padding-inline: 2em;
52+
}
53+
.pdfButton {
54+
display: inline-flex;
55+
align-items: center;
56+
gap: 10px;
57+
58+
padding: 6px 22px !important;
59+
border: 2px solid var(--black, #000);
60+
border-radius: 2em;
61+
background: var(--background, #fff);
62+
color: var(--primary-color, #000);
63+
text-decoration: none;
64+
cursor: pointer;
65+
filter: drop-shadow(3px 3px var(--black, #000));
66+
transition: transform 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
67+
68+
&:hover {
69+
transform: translate(-1px, -1px);
70+
}
71+
72+
&:active {
73+
transform: translate(0, 0);
74+
filter: drop-shadow(1px 1px var(--black, #000));
75+
}
76+
77+
&:focus-visible {
78+
outline: 2px solid var(--black, #000);
79+
outline-offset: 2px;
80+
}
81+
}
82+
83+
.label {
84+
font: var(--font-dm-m, inherit);
85+
line-height: var(--font-line-m, 1.3);
86+
white-space: nowrap;
87+
color: var(--primary-color, #000);
88+
}
89+
90+
.externalLinkIcon {
91+
color: var(--primary-color, #000);
92+
width: 15px;
93+
height: 15px;
94+
}
95+
96+
.icon {
97+
display: inline-block;
98+
width: 15px;
99+
height: 15px;
100+
}
101+
102+
.ButtonBlock {
103+
display: flex;
104+
justify-content: center;
105+
gap: 1rem;
106+
margin-top: 1rem;
107+
}
108+
109+
.BoardCard {
110+
display: flex;
111+
flex-direction: column;
112+
border: 2px solid var(--primary-color);
113+
border-radius: .8em;
114+
width: calc(33% - 1.333rem);
115+
}
116+
.BoardCardInfoArea {
117+
outline: 2px solid var(--primary-color);
118+
border-radius: .8em;
119+
text-align: center;
120+
height: 100%;
121+
}
122+
.BoardCardInfoAreaMobile {
123+
outline: 1px solid var(--primary-color);
124+
border-bottom-right-radius: .6em;
125+
border-bottom-left-radius: .6em;
126+
text-align: center;
127+
height: 100%;
128+
width: 100%;
129+
}
130+
.BoardCardMobile {
131+
display: flex;
132+
flex-direction: column;
133+
border: 2px solid var(--primary-color);
134+
border-radius: .6em;
135+
width: 100%;
136+
align-items: center;
137+
}
138+
.Name {
139+
font: var(--font-sw-l);
140+
color: var(--white);
141+
padding-top: .5rem;
142+
}
143+
.Job {
144+
font: var(--font-sw-m);
145+
font-size: 1.2rem;
146+
color: var(--primary-color);
147+
padding-top: .2rem;
148+
}
149+
.Profession {
150+
padding-top: .2rem;
151+
padding-bottom: .2rem;
152+
153+
}
154+
.NameMobile {
155+
font: var(--font-sw-m);
156+
color: var(--white);
157+
padding-top: .5rem;
158+
}
159+
.JobMobile {
160+
font: var(--font-sw-s);
161+
font-size: 1.2rem;
162+
color: var(--primary-color);
163+
padding-top: .2rem;
164+
}
165+
.ProfessionMobile {
166+
padding-top: .2rem;
167+
padding-bottom: .2rem;
168+
font-size: .8rem;
169+
}
170+
.BoardCardContainer {
171+
justify-content: center;
172+
display: flex;
173+
flex-wrap: wrap;
174+
gap: 2rem;
175+
margin-top: 1rem;
176+
padding-inline: 2rem;
177+
}
178+
.BoardCardHeader {
179+
display: flex;
180+
justify-content: space-between;
181+
align-items: center;
182+
}
183+
.MeetBoard {
184+
padding-top: 1rem !important;
185+
color: var(--primary-color) !important;
186+
text-align: center;
187+
display: block;
188+
width: 100%;
189+
}
190+
.SeeBoard {
191+
padding-top: 2rem;
192+
}
193+
.BoardCardMobileContainer {
194+
display: flex;
195+
flex-direction: column;
196+
gap: 1rem;
197+
width: 100%;
198+
}
199+
.Underline {
200+
&:hover {
201+
text-decoration: underline !important;
202+
text-underline-offset: 2px;
203+
text-decoration-thickness: 1.5px;
204+
}
205+
}
206+
.MarginBottom {
207+
margin-bottom: 2rem;
208+
}
209+
.bold {
210+
font-weight: bold;
211+
}
212+
213+
214+
215+

0 commit comments

Comments
 (0)