feat(mon-pix): use global AppLayout component on needed pages

1024pix · Dec 4, 2024 · e68a0da · e68a0da
1 parent ff5d926
commit e68a0da
Show file tree

Hide file tree

Showing 14 changed files with 325 additions and 373 deletions.
diff --git a/mon-pix/app/styles/components/_footer.scss b/mon-pix/app/styles/components/_footer.scss
@@ -5,7 +5,7 @@
   gap: var(--pix-spacing-4x);
   align-items: flex-start;
   justify-content: space-between;
-  padding-block: var(--pix-spacing-6x);
+  padding-block: var(--pix-spacing-12x) var(--pix-spacing-6x);
   color: var(--pix-neutral-500);
 
   @include device-is('mobile') {
@@ -52,7 +52,8 @@
   }
 
   a {
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       color: var(--pix-primary-500);
     }
   }

diff --git a/mon-pix/app/templates/authenticated/certifications/join.hbs b/mon-pix/app/templates/authenticated/certifications/join.hbs
@@ -1,22 +1,18 @@
 {{page-title (t "pages.certification-start.title")}}
 
-<header role="banner">
-  <NavbarHeader />
-</header>
+<Global::AppLayout>
+  <main class="main" role="main">
+    <PixBackgroundHeader id="main">
 
-<main class="main" role="main">
-  <PixBackgroundHeader id="main">
+      {{#if this.model.isCertifiable}}
+        <PixBlock @shadow="heavy" class="certification-start-page__block">
+          <CertificationBanners @certificationEligibility={{this.model}} @fullName={{this.currentUser.user.fullName}} />
+          <CertificationJoiner @onStepChange={{this.changeStep}} />
+        </PixBlock>
+      {{else}}
+        <CertificationNotCertifiable />
+      {{/if}}
 
-    {{#if this.model.isCertifiable}}
-      <PixBlock @shadow="heavy" class="certification-start-page__block">
-        <CertificationBanners @certificationEligibility={{this.model}} @fullName={{this.currentUser.user.fullName}} />
-        <CertificationJoiner @onStepChange={{this.changeStep}} />
-      </PixBlock>
-    {{else}}
-      <CertificationNotCertifiable />
-    {{/if}}
-
-  </PixBackgroundHeader>
-</main>
-
-<Footer />
+    </PixBackgroundHeader>
+  </main>
+</Global::AppLayout>
diff --git a/mon-pix/app/templates/authenticated/certifications/start-loading.hbs b/mon-pix/app/templates/authenticated/certifications/start-loading.hbs
@@ -1,17 +1,13 @@
-<header role="banner">
-  <NavbarHeader />
-</header>
+<Global::AppLayout>
+  <div class="background-banner-wrapper">
+    <div class="background-banner"></div>
 
-<div class="background-banner-wrapper">
-  <div class="background-banner"></div>
+    <div class="app-nested-loader rounded-panel--over-background-banner rounded-panel rounded-panel--strong">
+      <p class="app-loader__image">
+        <img src="/images/interwind.gif" alt="" role="presentation" />
+      </p>
+      <p class="app-loader__text">{{t "common.loading.default"}}</p>
+    </div>
 
-  <div class="app-nested-loader rounded-panel--over-background-banner rounded-panel rounded-panel--strong">
-    <p class="app-loader__image">
-      <img src="/images/interwind.gif" alt="" role="presentation" />
-    </p>
-    <p class="app-loader__text">{{t "common.loading.default"}}</p>
   </div>
-
-</div>
-
-<Footer />
+</Global::AppLayout>
diff --git a/mon-pix/app/templates/authenticated/competences/details.hbs b/mon-pix/app/templates/authenticated/competences/details.hbs
@@ -1,15 +1,11 @@
 {{page-title @model.name}}
 
-<header role="banner">
-  <NavbarHeader />
-</header>
-
-<main id="main" class="main background-banner-wrapper competence-details" role="main">
-  <div class="background-banner"></div>
-
-  <div class="rounded-panel rounded-panel--strong rounded-panel--over-background-banner">
-    <ScorecardDetails @scorecard={{@model}} />
-  </div>
-</main>
-
-<Footer />
+<Global::AppLayout>
+  <main id="main" class="main background-banner-wrapper competence-details" role="main">
+    <div class="background-banner"></div>
+
+    <div class="rounded-panel rounded-panel--strong rounded-panel--over-background-banner">
+      <ScorecardDetails @scorecard={{@model}} />
+    </div>
+  </main>
+</Global::AppLayout>
diff --git a/mon-pix/app/templates/authenticated/competences/results.hbs b/mon-pix/app/templates/authenticated/competences/results.hbs
@@ -1,69 +1,65 @@
 {{page-title (t "pages.competence-result.title")}}
 
-<header role="banner">
-  <NavbarHeader />
-</header>
+<Global::AppLayout>
+  <main id="main" class="background-banner-wrapper" role="main">
+    <div class="background-banner"></div>
 
-<main id="main" class="background-banner-wrapper" role="main">
-  <div class="background-banner"></div>
-
-  <div class="rounded-panel rounded-panel--strong rounded-panel--over-background-banner">
-    <div class="competence-results-panel__header">
-      {{#if @model.scorecard.hasNotEarnedAnything}}
-        <div class="competence-results-panel-header__banner competence-results-panel-header__banner--too-bad">
-          <p class="competence-results-panel-header__banner-result-comment">{{t
-              "pages.competence-result.header.too-bad"
-            }}</p>
-          <div class="competence-results-banner__subtitle competence-results-banner__subtitle--small">
-            {{t "pages.competence-result.header.too-bad-subtitle"}}
-          </div>
-        </div>
-      {{else if @model.scorecard.hasNotReachedLevelOne}}
-        <div class="competence-results-panel-header__banner competence-results-panel-header__banner--not-bad">
-          <p class="competence-results-panel-header__banner-result-comment">{{t
-              "pages.competence-result.header.not-bad"
-            }}</p>
-          <div class="competence-results-banner__subtitle competence-results-banner__subtitle--left">
-            {{t "pages.competence-result.header.not-bad-subtitle"}}
-          </div>
-          <div class="competence-results-banner__text">
-            <div class="competence-results-banner-text__results">
-              <div class="competence-results-banner-text-results__label">{{t
-                  "pages.competence-result.header.you-have-earned"
-                }}</div>
-              <div class="competence-results-banner-text-results__value">{{@model.scorecard.earnedPix}}
-                {{t "common.pix"}}</div>
+    <div class="rounded-panel rounded-panel--strong rounded-panel--over-background-banner">
+      <div class="competence-results-panel__header">
+        {{#if @model.scorecard.hasNotEarnedAnything}}
+          <div class="competence-results-panel-header__banner competence-results-panel-header__banner--too-bad">
+            <p class="competence-results-panel-header__banner-result-comment">{{t
+                "pages.competence-result.header.too-bad"
+              }}</p>
+            <div class="competence-results-banner__subtitle competence-results-banner__subtitle--small">
+              {{t "pages.competence-result.header.too-bad-subtitle"}}
             </div>
           </div>
-        </div>
-      {{else if @model.scorecard.hasReachedAtLeastLevelOne}}
-        <div class="competence-results-panel-header__banner competence-results-panel-header__banner--congrats">
-          <p class="competence-results-panel-header__banner-result-comment">{{t
-              "pages.competence-result.header.congratulations"
-            }}</p>
-          <div class="competence-results-banner__text competence-results-banner__text--spaced">
-            <div class="competence-results-banner-text__results competence-results-banner-text__results--spaced">
-              <div class="competence-results-banner-text-results__label">{{t
-                  "pages.competence-result.header.you-have-reached-level"
-                }}</div>
-              <div class="competence-results-banner-text-results__value">{{t "common.level"}}
-                {{@model.scorecard.level}}</div>
+        {{else if @model.scorecard.hasNotReachedLevelOne}}
+          <div class="competence-results-panel-header__banner competence-results-panel-header__banner--not-bad">
+            <p class="competence-results-panel-header__banner-result-comment">{{t
+                "pages.competence-result.header.not-bad"
+              }}</p>
+            <div class="competence-results-banner__subtitle competence-results-banner__subtitle--left">
+              {{t "pages.competence-result.header.not-bad-subtitle"}}
             </div>
-            <div class="competence-results-banner-text__results competence-results-banner-text__results--spaced">
-              <div class="competence-results-banner-text-results__label">{{t
-                  "pages.competence-result.header.you-have-earned"
-                }}</div>
-              <div class="competence-results-banner-text-results__value">{{@model.scorecard.earnedPix}}
-                {{t "common.pix"}}</div>
+            <div class="competence-results-banner__text">
+              <div class="competence-results-banner-text__results">
+                <div class="competence-results-banner-text-results__label">{{t
+                    "pages.competence-result.header.you-have-earned"
+                  }}</div>
+                <div class="competence-results-banner-text-results__value">{{@model.scorecard.earnedPix}}
+                  {{t "common.pix"}}</div>
+              </div>
             </div>
           </div>
-        </div>
+        {{else if @model.scorecard.hasReachedAtLeastLevelOne}}
+          <div class="competence-results-panel-header__banner competence-results-panel-header__banner--congrats">
+            <p class="competence-results-panel-header__banner-result-comment">{{t
+                "pages.competence-result.header.congratulations"
+              }}</p>
+            <div class="competence-results-banner__text competence-results-banner__text--spaced">
+              <div class="competence-results-banner-text__results competence-results-banner-text__results--spaced">
+                <div class="competence-results-banner-text-results__label">{{t
+                    "pages.competence-result.header.you-have-reached-level"
+                  }}</div>
+                <div class="competence-results-banner-text-results__value">{{t "common.level"}}
+                  {{@model.scorecard.level}}</div>
+              </div>
+              <div class="competence-results-banner-text__results competence-results-banner-text__results--spaced">
+                <div class="competence-results-banner-text-results__label">{{t
+                    "pages.competence-result.header.you-have-earned"
+                  }}</div>
+                <div class="competence-results-banner-text-results__value">{{@model.scorecard.earnedPix}}
+                  {{t "common.pix"}}</div>
+              </div>
+            </div>
+          </div>
+        {{/if}}
+      </div>
+      {{#if @model.scorecard}}
+        <ScorecardDetails @scorecard={{@model.scorecard}} />
       {{/if}}
     </div>
-    {{#if @model.scorecard}}
-      <ScorecardDetails @scorecard={{@model.scorecard}} />
-    {{/if}}
-  </div>
-</main>
-
-<Footer />
+  </main>
+</Global::AppLayout>
diff --git a/mon-pix/app/templates/authenticated/sitemap.hbs b/mon-pix/app/templates/authenticated/sitemap.hbs
@@ -1,9 +1,5 @@
 {{page-title (t "pages.sitemap.title")}}
 
-<header role="banner">
-  <NavbarHeader />
-</header>
-
-<Sitemap::Content @model={{@model}} />
-
-<Footer />
+<Global::AppLayout>
+  <Sitemap::Content @model={{@model}} />
+</Global::AppLayout>
diff --git a/mon-pix/app/templates/authenticated/user-account.hbs b/mon-pix/app/templates/authenticated/user-account.hbs
@@ -1,57 +1,53 @@
 {{page-title (t "pages.user-account.title")}}
 
-<header role="banner">
-  <NavbarHeader @campaignParticipations={{@model.campaignParticipations}} />
-</header>
+<Global::AppLayout>
+  <main id="main" class="main" role="main">
+    <PixBackgroundHeader class="user-account">
+      <h1 class="user-account__title">{{t "pages.user-account.title"}}</h1>
 
-<main id="main" class="main" role="main">
-  <PixBackgroundHeader class="user-account">
-    <h1 class="user-account__title">{{t "pages.user-account.title"}}</h1>
-
-    <div class="user-account__menu-and-content">
-      <PixBlock class="user-account__menu-block">
-        <nav class="user-account-menu" role="navigation">
-          <ul>
-            <li>
-              <LinkTo @route="authenticated.user-account.personal-information" class="user-account-menu__link">
-                <PixIcon @name="userCircle" @ariaHidden={{true}} />
-                {{t "pages.user-account.personal-information.menu-link-title"}}
-              </LinkTo>
-            </li>
-            <li>
-              <LinkTo @route="authenticated.user-account.connection-methods" class="user-account-menu__link">
-                <PixIcon @name="link" @ariaHidden={{true}} />
-                {{t "pages.user-account.connexion-methods.menu-link-title"}}
-              </LinkTo>
-            </li>
-            {{#if this.isInternationalDomain}}
+      <div class="user-account__menu-and-content">
+        <PixBlock class="user-account__menu-block">
+          <nav class="user-account-menu" role="navigation">
+            <ul>
               <li>
-                <LinkTo @route="authenticated.user-account.language" class="user-account-menu__link">
-                  <PixIcon @name="language" @ariaHidden={{true}} />
-                  {{t "pages.user-account.language.menu-link-title"}}
+                <LinkTo @route="authenticated.user-account.personal-information" class="user-account-menu__link">
+                  <PixIcon @name="userCircle" @ariaHidden={{true}} />
+                  {{t "pages.user-account.personal-information.menu-link-title"}}
                 </LinkTo>
               </li>
-            {{/if}}
-            {{#if @model.accountInfo.canSelfDeleteAccount}}
               <li>
-                <LinkTo
-                  @route="authenticated.user-account.delete-account"
-                  class="user-account-menu__link user-account-menu__link--important"
-                >
-                  <PixIcon @name="delete" @ariaHidden={{true}} />
-                  {{t "pages.user-account.delete-account.menu-link-title"}}
+                <LinkTo @route="authenticated.user-account.connection-methods" class="user-account-menu__link">
+                  <PixIcon @name="link" @ariaHidden={{true}} />
+                  {{t "pages.user-account.connexion-methods.menu-link-title"}}
                 </LinkTo>
               </li>
-            {{/if}}
-          </ul>
-        </nav>
-      </PixBlock>
-
-      <PixBlock class="user-account__content">
-        {{outlet}}
-      </PixBlock>
-    </div>
-  </PixBackgroundHeader>
-</main>
+              {{#if this.isInternationalDomain}}
+                <li>
+                  <LinkTo @route="authenticated.user-account.language" class="user-account-menu__link">
+                    <PixIcon @name="language" @ariaHidden={{true}} />
+                    {{t "pages.user-account.language.menu-link-title"}}
+                  </LinkTo>
+                </li>
+              {{/if}}
+              {{#if @model.accountInfo.canSelfDeleteAccount}}
+                <li>
+                  <LinkTo
+                    @route="authenticated.user-account.delete-account"
+                    class="user-account-menu__link user-account-menu__link--important"
+                  >
+                    <PixIcon @name="delete" @ariaHidden={{true}} />
+                    {{t "pages.user-account.delete-account.menu-link-title"}}
+                  </LinkTo>
+                </li>
+              {{/if}}
+            </ul>
+          </nav>
+        </PixBlock>
 
-<Footer />
+        <PixBlock class="user-account__content">
+          {{outlet}}
+        </PixBlock>
+      </div>
+    </PixBackgroundHeader>
+  </main>
+</Global::AppLayout>