Skip to content

Commit 1571268

Browse files
committed
feat(mon-pix): use global AppLayout component on needed pages
1 parent 9faf894 commit 1571268

14 files changed

+325
-373
lines changed

mon-pix/app/styles/components/_footer.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
gap: var(--pix-spacing-4x);
66
align-items: flex-start;
77
justify-content: space-between;
8-
padding-block: var(--pix-spacing-6x);
8+
padding-block: var(--pix-spacing-12x) var(--pix-spacing-6x);
99
color: var(--pix-neutral-500);
1010

1111
@include device-is('mobile') {
@@ -52,7 +52,8 @@
5252
}
5353

5454
a {
55-
&:hover, &:focus {
55+
&:hover,
56+
&:focus {
5657
color: var(--pix-primary-500);
5758
}
5859
}
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
{{page-title (t "pages.certification-start.title")}}
22

3-
<header role="banner">
4-
<NavbarHeader />
5-
</header>
3+
<Global::AppLayout>
4+
<main class="main" role="main">
5+
<PixBackgroundHeader id="main">
66

7-
<main class="main" role="main">
8-
<PixBackgroundHeader id="main">
7+
{{#if this.model.isCertifiable}}
8+
<PixBlock @shadow="heavy" class="certification-start-page__block">
9+
<CertificationBanners @certificationEligibility={{this.model}} @fullName={{this.currentUser.user.fullName}} />
10+
<CertificationJoiner @onStepChange={{this.changeStep}} />
11+
</PixBlock>
12+
{{else}}
13+
<CertificationNotCertifiable />
14+
{{/if}}
915

10-
{{#if this.model.isCertifiable}}
11-
<PixBlock @shadow="heavy" class="certification-start-page__block">
12-
<CertificationBanners @certificationEligibility={{this.model}} @fullName={{this.currentUser.user.fullName}} />
13-
<CertificationJoiner @onStepChange={{this.changeStep}} />
14-
</PixBlock>
15-
{{else}}
16-
<CertificationNotCertifiable />
17-
{{/if}}
18-
19-
</PixBackgroundHeader>
20-
</main>
21-
22-
<Footer />
16+
</PixBackgroundHeader>
17+
</main>
18+
</Global::AppLayout>
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
1-
<header role="banner">
2-
<NavbarHeader />
3-
</header>
1+
<Global::AppLayout>
2+
<div class="background-banner-wrapper">
3+
<div class="background-banner"></div>
44

5-
<div class="background-banner-wrapper">
6-
<div class="background-banner"></div>
5+
<div class="app-nested-loader rounded-panel--over-background-banner rounded-panel rounded-panel--strong">
6+
<p class="app-loader__image">
7+
<img src="/images/interwind.gif" alt="" role="presentation" />
8+
</p>
9+
<p class="app-loader__text">{{t "common.loading.default"}}</p>
10+
</div>
711

8-
<div class="app-nested-loader rounded-panel--over-background-banner rounded-panel rounded-panel--strong">
9-
<p class="app-loader__image">
10-
<img src="/images/interwind.gif" alt="" role="presentation" />
11-
</p>
12-
<p class="app-loader__text">{{t "common.loading.default"}}</p>
1312
</div>
14-
15-
</div>
16-
17-
<Footer />
13+
</Global::AppLayout>
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
{{page-title @model.name}}
22

3-
<header role="banner">
4-
<NavbarHeader />
5-
</header>
6-
7-
<main id="main" class="main background-banner-wrapper competence-details" role="main">
8-
<div class="background-banner"></div>
9-
10-
<div class="rounded-panel rounded-panel--strong rounded-panel--over-background-banner">
11-
<ScorecardDetails @scorecard={{@model}} />
12-
</div>
13-
</main>
14-
15-
<Footer />
3+
<Global::AppLayout>
4+
<main id="main" class="main background-banner-wrapper competence-details" role="main">
5+
<div class="background-banner"></div>
6+
7+
<div class="rounded-panel rounded-panel--strong rounded-panel--over-background-banner">
8+
<ScorecardDetails @scorecard={{@model}} />
9+
</div>
10+
</main>
11+
</Global::AppLayout>
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,65 @@
11
{{page-title (t "pages.competence-result.title")}}
22

3-
<header role="banner">
4-
<NavbarHeader />
5-
</header>
3+
<Global::AppLayout>
4+
<main id="main" class="background-banner-wrapper" role="main">
5+
<div class="background-banner"></div>
66

7-
<main id="main" class="background-banner-wrapper" role="main">
8-
<div class="background-banner"></div>
9-
10-
<div class="rounded-panel rounded-panel--strong rounded-panel--over-background-banner">
11-
<div class="competence-results-panel__header">
12-
{{#if @model.scorecard.hasNotEarnedAnything}}
13-
<div class="competence-results-panel-header__banner competence-results-panel-header__banner--too-bad">
14-
<p class="competence-results-panel-header__banner-result-comment">{{t
15-
"pages.competence-result.header.too-bad"
16-
}}</p>
17-
<div class="competence-results-banner__subtitle competence-results-banner__subtitle--small">
18-
{{t "pages.competence-result.header.too-bad-subtitle"}}
19-
</div>
20-
</div>
21-
{{else if @model.scorecard.hasNotReachedLevelOne}}
22-
<div class="competence-results-panel-header__banner competence-results-panel-header__banner--not-bad">
23-
<p class="competence-results-panel-header__banner-result-comment">{{t
24-
"pages.competence-result.header.not-bad"
25-
}}</p>
26-
<div class="competence-results-banner__subtitle competence-results-banner__subtitle--left">
27-
{{t "pages.competence-result.header.not-bad-subtitle"}}
28-
</div>
29-
<div class="competence-results-banner__text">
30-
<div class="competence-results-banner-text__results">
31-
<div class="competence-results-banner-text-results__label">{{t
32-
"pages.competence-result.header.you-have-earned"
33-
}}</div>
34-
<div class="competence-results-banner-text-results__value">{{@model.scorecard.earnedPix}}
35-
{{t "common.pix"}}</div>
7+
<div class="rounded-panel rounded-panel--strong rounded-panel--over-background-banner">
8+
<div class="competence-results-panel__header">
9+
{{#if @model.scorecard.hasNotEarnedAnything}}
10+
<div class="competence-results-panel-header__banner competence-results-panel-header__banner--too-bad">
11+
<p class="competence-results-panel-header__banner-result-comment">{{t
12+
"pages.competence-result.header.too-bad"
13+
}}</p>
14+
<div class="competence-results-banner__subtitle competence-results-banner__subtitle--small">
15+
{{t "pages.competence-result.header.too-bad-subtitle"}}
3616
</div>
3717
</div>
38-
</div>
39-
{{else if @model.scorecard.hasReachedAtLeastLevelOne}}
40-
<div class="competence-results-panel-header__banner competence-results-panel-header__banner--congrats">
41-
<p class="competence-results-panel-header__banner-result-comment">{{t
42-
"pages.competence-result.header.congratulations"
43-
}}</p>
44-
<div class="competence-results-banner__text competence-results-banner__text--spaced">
45-
<div class="competence-results-banner-text__results competence-results-banner-text__results--spaced">
46-
<div class="competence-results-banner-text-results__label">{{t
47-
"pages.competence-result.header.you-have-reached-level"
48-
}}</div>
49-
<div class="competence-results-banner-text-results__value">{{t "common.level"}}
50-
{{@model.scorecard.level}}</div>
18+
{{else if @model.scorecard.hasNotReachedLevelOne}}
19+
<div class="competence-results-panel-header__banner competence-results-panel-header__banner--not-bad">
20+
<p class="competence-results-panel-header__banner-result-comment">{{t
21+
"pages.competence-result.header.not-bad"
22+
}}</p>
23+
<div class="competence-results-banner__subtitle competence-results-banner__subtitle--left">
24+
{{t "pages.competence-result.header.not-bad-subtitle"}}
5125
</div>
52-
<div class="competence-results-banner-text__results competence-results-banner-text__results--spaced">
53-
<div class="competence-results-banner-text-results__label">{{t
54-
"pages.competence-result.header.you-have-earned"
55-
}}</div>
56-
<div class="competence-results-banner-text-results__value">{{@model.scorecard.earnedPix}}
57-
{{t "common.pix"}}</div>
26+
<div class="competence-results-banner__text">
27+
<div class="competence-results-banner-text__results">
28+
<div class="competence-results-banner-text-results__label">{{t
29+
"pages.competence-result.header.you-have-earned"
30+
}}</div>
31+
<div class="competence-results-banner-text-results__value">{{@model.scorecard.earnedPix}}
32+
{{t "common.pix"}}</div>
33+
</div>
5834
</div>
5935
</div>
60-
</div>
36+
{{else if @model.scorecard.hasReachedAtLeastLevelOne}}
37+
<div class="competence-results-panel-header__banner competence-results-panel-header__banner--congrats">
38+
<p class="competence-results-panel-header__banner-result-comment">{{t
39+
"pages.competence-result.header.congratulations"
40+
}}</p>
41+
<div class="competence-results-banner__text competence-results-banner__text--spaced">
42+
<div class="competence-results-banner-text__results competence-results-banner-text__results--spaced">
43+
<div class="competence-results-banner-text-results__label">{{t
44+
"pages.competence-result.header.you-have-reached-level"
45+
}}</div>
46+
<div class="competence-results-banner-text-results__value">{{t "common.level"}}
47+
{{@model.scorecard.level}}</div>
48+
</div>
49+
<div class="competence-results-banner-text__results competence-results-banner-text__results--spaced">
50+
<div class="competence-results-banner-text-results__label">{{t
51+
"pages.competence-result.header.you-have-earned"
52+
}}</div>
53+
<div class="competence-results-banner-text-results__value">{{@model.scorecard.earnedPix}}
54+
{{t "common.pix"}}</div>
55+
</div>
56+
</div>
57+
</div>
58+
{{/if}}
59+
</div>
60+
{{#if @model.scorecard}}
61+
<ScorecardDetails @scorecard={{@model.scorecard}} />
6162
{{/if}}
6263
</div>
63-
{{#if @model.scorecard}}
64-
<ScorecardDetails @scorecard={{@model.scorecard}} />
65-
{{/if}}
66-
</div>
67-
</main>
68-
69-
<Footer />
64+
</main>
65+
</Global::AppLayout>
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
{{page-title (t "pages.sitemap.title")}}
22

3-
<header role="banner">
4-
<NavbarHeader />
5-
</header>
6-
7-
<Sitemap::Content @model={{@model}} />
8-
9-
<Footer />
3+
<Global::AppLayout>
4+
<Sitemap::Content @model={{@model}} />
5+
</Global::AppLayout>
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,53 @@
11
{{page-title (t "pages.user-account.title")}}
22

3-
<header role="banner">
4-
<NavbarHeader @campaignParticipations={{@model.campaignParticipations}} />
5-
</header>
3+
<Global::AppLayout>
4+
<main id="main" class="main" role="main">
5+
<PixBackgroundHeader class="user-account">
6+
<h1 class="user-account__title">{{t "pages.user-account.title"}}</h1>
67

7-
<main id="main" class="main" role="main">
8-
<PixBackgroundHeader class="user-account">
9-
<h1 class="user-account__title">{{t "pages.user-account.title"}}</h1>
10-
11-
<div class="user-account__menu-and-content">
12-
<PixBlock class="user-account__menu-block">
13-
<nav class="user-account-menu" role="navigation">
14-
<ul>
15-
<li>
16-
<LinkTo @route="authenticated.user-account.personal-information" class="user-account-menu__link">
17-
<PixIcon @name="userCircle" @ariaHidden={{true}} />
18-
{{t "pages.user-account.personal-information.menu-link-title"}}
19-
</LinkTo>
20-
</li>
21-
<li>
22-
<LinkTo @route="authenticated.user-account.connection-methods" class="user-account-menu__link">
23-
<PixIcon @name="link" @ariaHidden={{true}} />
24-
{{t "pages.user-account.connexion-methods.menu-link-title"}}
25-
</LinkTo>
26-
</li>
27-
{{#if this.isInternationalDomain}}
8+
<div class="user-account__menu-and-content">
9+
<PixBlock class="user-account__menu-block">
10+
<nav class="user-account-menu" role="navigation">
11+
<ul>
2812
<li>
29-
<LinkTo @route="authenticated.user-account.language" class="user-account-menu__link">
30-
<PixIcon @name="language" @ariaHidden={{true}} />
31-
{{t "pages.user-account.language.menu-link-title"}}
13+
<LinkTo @route="authenticated.user-account.personal-information" class="user-account-menu__link">
14+
<PixIcon @name="userCircle" @ariaHidden={{true}} />
15+
{{t "pages.user-account.personal-information.menu-link-title"}}
3216
</LinkTo>
3317
</li>
34-
{{/if}}
35-
{{#if @model.accountInfo.canSelfDeleteAccount}}
3618
<li>
37-
<LinkTo
38-
@route="authenticated.user-account.delete-account"
39-
class="user-account-menu__link user-account-menu__link--important"
40-
>
41-
<PixIcon @name="delete" @ariaHidden={{true}} />
42-
{{t "pages.user-account.delete-account.menu-link-title"}}
19+
<LinkTo @route="authenticated.user-account.connection-methods" class="user-account-menu__link">
20+
<PixIcon @name="link" @ariaHidden={{true}} />
21+
{{t "pages.user-account.connexion-methods.menu-link-title"}}
4322
</LinkTo>
4423
</li>
45-
{{/if}}
46-
</ul>
47-
</nav>
48-
</PixBlock>
49-
50-
<PixBlock class="user-account__content">
51-
{{outlet}}
52-
</PixBlock>
53-
</div>
54-
</PixBackgroundHeader>
55-
</main>
24+
{{#if this.isInternationalDomain}}
25+
<li>
26+
<LinkTo @route="authenticated.user-account.language" class="user-account-menu__link">
27+
<PixIcon @name="language" @ariaHidden={{true}} />
28+
{{t "pages.user-account.language.menu-link-title"}}
29+
</LinkTo>
30+
</li>
31+
{{/if}}
32+
{{#if @model.accountInfo.canSelfDeleteAccount}}
33+
<li>
34+
<LinkTo
35+
@route="authenticated.user-account.delete-account"
36+
class="user-account-menu__link user-account-menu__link--important"
37+
>
38+
<PixIcon @name="delete" @ariaHidden={{true}} />
39+
{{t "pages.user-account.delete-account.menu-link-title"}}
40+
</LinkTo>
41+
</li>
42+
{{/if}}
43+
</ul>
44+
</nav>
45+
</PixBlock>
5646

57-
<Footer />
47+
<PixBlock class="user-account__content">
48+
{{outlet}}
49+
</PixBlock>
50+
</div>
51+
</PixBackgroundHeader>
52+
</main>
53+
</Global::AppLayout>

0 commit comments

Comments
 (0)