Skip to content

Commit 0cdbda6

Browse files
wayangalihpratamawayangalihpratama
authored
Feature/648 add 1280px container constraint to landing page (#649)
* [#648] Add 1280 max-width to all landing page * [#648] Fix max 1280 width for IDC landing page * [#648] Fix all landing page in media max-width 1024 * [#648] Fix image size
1 parent e9f57cc commit 0cdbda6

File tree

14 files changed

+141
-49
lines changed

14 files changed

+141
-49
lines changed

‎frontend/src/App.scss‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@
152152
header {
153153
height: 5rem;
154154
background: $bg-color-white;
155-
padding: 0.5rem var(--default-padding);
155+
padding: 0.5rem var(--default-header-padding);
156156
display: flex;
157157
align-items: center;
158158
box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.08);
@@ -624,6 +624,10 @@
624624
background-color: #00625f;
625625
}
626626

627+
&.with-landing-padding {
628+
padding: 1rem var(--default-landing-padding);
629+
}
630+
627631
&.with-fixed-position {
628632
position: fixed;
629633
width: 100%;
@@ -808,9 +812,14 @@
808812
}
809813

810814
// Media query
811-
@include respond-to(md) {
812-
.logo-text {
813-
font-size: 14px !important;
815+
@include respond-between(md, xlg) {
816+
.header-logo-wrapper {
817+
img {
818+
height: 42px !important;
819+
}
820+
.logo-text {
821+
font-size: 14px !important;
822+
}
814823
}
815824
}
816825
// EOL Media query

‎frontend/src/components/layout/PageFooter.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const page = {
1414
const PageFooter = ({
1515
wrapper = true,
1616
fixed = false,
17+
isLandingPage = true,
1718
disclaimerText = "default",
1819
}) => {
1920
const { isMobile } = useWindowDimensions();
@@ -23,8 +24,8 @@ const PageFooter = ({
2324
align="middle"
2425
className={`page-footer-container ${wrapper ? "with-padding-bg" : ""} ${
2526
fixed ? "with-fixed-position" : ""
26-
}`}
27-
gutter={isMobile ? [0, 32] : [32, 32]}
27+
} ${isLandingPage ? "with-landing-padding" : ""}`}
28+
gutter={isMobile ? [0, 32] : [0, 32]}
2829
>
2930
<Col span={isMobile ? 24 : 18}>
3031
<Space

‎frontend/src/components/utils/other-tools-and-resources/other-tool-resources.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "../../../variables.scss";
22

33
.other-tools-recources-container {
4-
padding: 1.5rem var(--default-padding) 3rem;
4+
padding: 1.5rem var(--default-landing-padding) 3rem;
55
background: #fff;
66

77
&.mobile-screen {

‎frontend/src/pages/cocoa-income-inventory/cii-dashboard.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
min-height: calc(100vh - 10px);
55

66
.cii-dashboard-page-title-wrapper {
7-
padding: 24px var(--default-padding) 34px var(--default-padding);
7+
padding: 24px var(--default-landing-padding) 34px
8+
var(--default-landing-padding);
89
background-color: #fffaeb;
910

1011
h1 {
@@ -30,7 +31,7 @@
3031
}
3132

3233
.cii-dashboard-power-bi-iframe-wrapper {
33-
padding: 24px var(--default-padding);
34+
padding: 24px var(--default-landing-padding);
3435
background-color: #f7f7f5;
3536
min-height: 99vh;
3637
position: relative;

‎frontend/src/pages/cocoa-income-inventory/cii.scss‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151

5252
.jumbotron-text-wrapper {
5353
z-index: 1;
54-
padding: 3rem var(--default-padding);
54+
padding: 3rem var(--default-landing-padding);
5555
h1 {
5656
font-family: "RocGrotesk" !important;
5757
color: #ffffff;
@@ -73,7 +73,8 @@
7373

7474
.about-wrapper {
7575
background-color: #fff;
76-
padding: 2rem var(--default-padding) 3rem var(--default-padding);
76+
padding: 2rem var(--default-landing-padding) 3rem
77+
var(--default-landing-padding);
7778

7879
.logos-wrapper {
7980
display: flex;
@@ -115,7 +116,7 @@
115116
}
116117

117118
.indicators-wrapper {
118-
padding: 2.5rem 0 5rem var(--default-padding);
119+
padding: 2.5rem 0 5rem var(--default-landing-padding);
119120
background-color: #eaf2f2;
120121

121122
h2 {
@@ -194,7 +195,7 @@
194195
}
195196

196197
.pch-wrapper {
197-
padding: 3rem var(--default-padding);
198+
padding: 3rem var(--default-landing-padding);
198199
background-color: #fcf9f4;
199200
display: flex;
200201
justify-content: space-evenly;
@@ -227,7 +228,7 @@
227228
}
228229

229230
.contributing-wrapper {
230-
padding: 3rem var(--default-padding) 4rem;
231+
padding: 3rem var(--default-landing-padding) 4rem;
231232

232233
.contributing-content-wrapper {
233234
padding-top: 10px;
@@ -248,7 +249,7 @@
248249
}
249250

250251
.value-org-wrapper {
251-
padding: 3rem var(--default-padding) 4rem;
252+
padding: 3rem var(--default-landing-padding) 4rem;
252253
background-color: #fcf9f4;
253254

254255
.value-org-content-wrapper {
@@ -295,7 +296,7 @@
295296
}
296297

297298
.contribute-to-wrapper {
298-
padding: 3rem var(--default-padding) 2rem;
299+
padding: 3rem var(--default-landing-padding) 2rem;
299300
background-color: #fff;
300301

301302
h2,

‎frontend/src/pages/faq/faq.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ const FAQ = ({ showPageTitle = true, showPageFooter = true }) => {
187187
))}
188188
</div>
189189

190-
{showPageFooter ? <PageFooter /> : ""}
190+
{showPageFooter ? <PageFooter isLandingPage={false} /> : ""}
191191
</div>
192192
);
193193
};

‎frontend/src/pages/home/Home.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -263,11 +263,11 @@ const Home = () => {
263263
style={{
264264
position: "absolute",
265265
bottom: -165,
266-
left: -265,
266+
left: -400,
267267
transform: "rotate(90deg)",
268268
}}
269-
width={400}
270-
height={400}
269+
width={600}
270+
height={600}
271271
color="#d5ebfd66"
272272
/>
273273
)}

‎frontend/src/pages/home/home.scss‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
}
3636

3737
.jumbotron-text-wrapper {
38-
padding: 3rem var(--default-padding);
38+
padding: 3rem var(--default-landing-padding);
3939
z-index: 1;
4040
h1 {
4141
color: #ffffff;
@@ -61,7 +61,8 @@
6161

6262
.info-card-row {
6363
background: #f9fafb;
64-
padding: 0 var(--default-padding) 3rem var(--default-padding);
64+
padding: 0 var(--default-landing-padding) 3rem
65+
var(--default-landing-padding);
6566
margin-top: -7rem;
6667
margin-left: 0 !important;
6768
margin-right: 0 !important;
@@ -132,7 +133,8 @@
132133
.income-driver-framework-wrapper {
133134
background: #f9fafb;
134135
width: 100%;
135-
padding: 0 var(--default-padding) 3rem var(--default-padding);
136+
padding: 0 var(--default-landing-padding) 3rem
137+
var(--default-landing-padding);
136138

137139
.income-driver-framework-text-wrapper {
138140
h2 {
@@ -155,7 +157,8 @@
155157
.toolkit-wrapper {
156158
background: #fff;
157159
width: 100%;
158-
padding: 3rem var(--default-padding) 3rem var(--default-padding);
160+
padding: 3rem var(--default-landing-padding) 3rem
161+
var(--default-landing-padding);
159162

160163
h2 {
161164
color: $primary-color;
@@ -243,7 +246,8 @@
243246
z-index: 9;
244247
background: #f9fafb;
245248
width: 100%;
246-
padding: 3rem var(--default-padding) 3.5rem var(--default-padding);
249+
padding: 3rem var(--default-landing-padding) 3.5rem
250+
var(--default-landing-padding);
247251
display: flex;
248252
justify-content: space-evenly;
249253
align-items: center;
@@ -278,7 +282,7 @@
278282
background: #fff;
279283

280284
.connect-col {
281-
padding: 4rem var(--default-padding);
285+
padding: 4rem var(--default-landing-padding);
282286

283287
.ant-card-body {
284288
text-align: center;

‎frontend/src/pages/income-driver-calculator/components/landingcomp.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
}
3333

3434
.jumbotron-text-wrapper {
35-
padding: 3rem var(--default-padding);
35+
padding: 3rem var(--default-landing-padding);
3636
z-index: 1;
3737
h1 {
3838
color: #ffffff;
@@ -61,7 +61,7 @@
6161
#framework-drivers {
6262
background-color: #f9fafb;
6363
width: 100%;
64-
padding: 2rem var(--default-padding);
64+
padding: 2rem var(--default-landing-padding);
6565

6666
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
6767
padding: 24px 0 16px 0;
@@ -131,7 +131,7 @@
131131
}
132132

133133
#get-started {
134-
padding: 4rem var(--default-padding);
134+
padding: 4rem var(--default-landing-padding);
135135
background: #fff;
136136

137137
.image-steps-container {
@@ -292,7 +292,8 @@
292292
#explore-studies {
293293
background: #f9fafb;
294294
width: 100%;
295-
padding: 3rem var(--default-padding) 3.5rem var(--default-padding);
295+
padding: 3rem var(--default-landing-padding) 3.5rem
296+
var(--default-landing-padding);
296297
display: flex;
297298
justify-content: space-evenly;
298299
align-items: center;
@@ -402,7 +403,7 @@
402403
background-color: #00625f;
403404
color: #ffffff !important;
404405
width: 100%;
405-
padding: 1.5rem var(--default-padding);
406+
padding: 1.5rem var(--default-landing-padding);
406407

407408
.disclaimer-text-wrapper {
408409
display: flex;

‎frontend/src/pages/income-driver-calculator/landing.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
.benefit-wrapper {
66
background: #fcf9f4;
77
width: 100%;
8-
padding: 0 var(--default-padding) 3rem var(--default-padding);
8+
padding: 0 var(--default-landing-padding) 3rem
9+
var(--default-landing-padding);
910

1011
.benefit-text-wrapper {
1112
text-align: center;
@@ -34,7 +35,8 @@
3435

3536
.info-card-row {
3637
background: #fcf9f4;
37-
padding: 0 var(--default-padding) 3rem var(--default-padding);
38+
padding: 0 var(--default-landing-padding) 3rem
39+
var(--default-landing-padding);
3840
margin-top: -7rem;
3941
margin-left: 0 !important;
4042
margin-right: 0 !important;
@@ -99,7 +101,7 @@
99101
}
100102

101103
.faq-section-wrapper {
102-
padding: 3rem var(--default-padding) 0;
104+
padding: 3rem var(--default-landing-padding) 0;
103105
background: #fff;
104106

105107
#faq-page {

0 commit comments

Comments
 (0)