feat(mon-pix): layout rework

1024pix · Dec 4, 2024 · 8cdd9eb · 8cdd9eb
1 parent aec14f4
commit 8cdd9eb
Show file tree

Hide file tree

Showing 30 changed files with 374 additions and 391 deletions.
diff --git a/mon-pix/app/components/certifications/start.gjs b/mon-pix/app/components/certifications/start.gjs
@@ -3,23 +3,18 @@ import PixBlock from '@1024pix/pix-ui/components/pix-block';
 
 import CertificationStarter from '../certification-starter';
 import CompanionBlocker from '../companion/blocker';
-import Footer from '../footer';
-import NavbarHeader from '../navbar-header';
+import AppLayout from '../global/app-layout';
 
 <template>
-  <CompanionBlocker>
-    <header role="banner">
-      <NavbarHeader />
-    </header>
-
-    <main class="main" role="main">
-      <PixBackgroundHeader id="main">
-        <PixBlock @shadow="heavy" class="certification-start-page__block">
-          <CertificationStarter @certificationCandidateSubscription={{@certificationCandidateSubscription}} />
-        </PixBlock>
-      </PixBackgroundHeader>
-    </main>
-
-    <Footer />
-  </CompanionBlocker>
+  <AppLayout>
+    <CompanionBlocker>
+      <main class="main" role="main">
+        <PixBackgroundHeader id="main">
+          <PixBlock @shadow="heavy" class="certification-start-page__block">
+            <CertificationStarter @certificationCandidateSubscription={{@certificationCandidateSubscription}} />
+          </PixBlock>
+        </PixBackgroundHeader>
+      </main>
+    </CompanionBlocker>
+  </AppLayout>
 </template>
diff --git a/mon-pix/app/components/dashboard/banner.hbs b/mon-pix/app/components/dashboard/banner.hbs
@@ -2,7 +2,7 @@
   <section class="dashboard-banner">
     {{#unless @hasSeenNewDashboardInfo}}
       <NewInformation
-        @information="{{t 'pages.dashboard.presentation.message' firstname=@userFirstname htmlSafe=true}}"
+        @information="{{t 'pages.dashboard.presentation.message' htmlSafe=true}}"
         @image="/images/illustrations/discovery_TDB_pix.svg"
         @variantClass="new-information--blue-gradient-background"
         @textColorClass="new-information--white-text"

diff --git a/mon-pix/app/components/dashboard/content.hbs b/mon-pix/app/components/dashboard/content.hbs
@@ -1,31 +1,16 @@
-<main id="main" class="page-container dashboard-content" role="main">
+<main id="main" class="global-page-container" role="main">
   <h1 class="sr-only">{{t "pages.dashboard.title"}}</h1>
 
-  {{! This banner is displayed on tablet }}
-  <Dashboard::Banner
-    @show={{this.hasNewInformationToShow}}
-    @hasSeenNewDashboardInfo={{this.hasSeenNewDashboardInfo}}
-    @newDashboardInfoLink={{this.newDashboardInfoLink}}
-    @closeInformationAboutNewDashboard={{this.closeInformationAboutNewDashboard}}
-    @userFirstname={{this.userFirstname}}
-    @code={{this.codeForLastProfileToShare}}
-  />
-
-  <section class="dashboard-content__score">
-    <div class="dashboard-content-score__wrapper">
-      <HexagonScore
-        @pixScore={{this.userScore}}
-        @maxReachablePixScore={{this.maxReachablePixScore}}
-        @maxReachableLevel={{this.maxReachableLevel}}
-      />
-      <LinkTo @route="authenticated.profile" class="dashboard-content-score-wrapper__link">
-        {{t "pages.dashboard.score.profile-link"}}
-      </LinkTo>
+  <section class="global-page-header">
+    <div class="global-page-header__left-content">
+      <h1 class="global-page-header__title">
+        {{t "pages.dashboard.welcome" firstName=this.userFirstname}}
+      </h1>
     </div>
   </section>
 
-  <section class="dashboard-content__main">
-    {{! This banner is displayed on large screens }}
+  <div class="dashboard-content">
+    {{! This banner is displayed on tablet }}
     <Dashboard::Banner
       @show={{this.hasNewInformationToShow}}
       @hasSeenNewDashboardInfo={{this.hasSeenNewDashboardInfo}}
@@ -35,70 +20,95 @@
       @code={{this.codeForLastProfileToShare}}
     />
 
-    {{#if this.hasNothingToShow}}
-      <section>
-        <div>
-          <NewInformation
-            @information="{{t 'pages.dashboard.empty-dashboard.message'}}"
-            @image="/images/illustrations/fusee.png"
-            @variantClass="new-information--yellow-background"
-            @linkText={{t "pages.dashboard.empty-dashboard.link-to-competences"}}
-            @linkTo="authenticated.profile"
-            @linkDisplayType="button"
-            @textColorClass="new-information--black-text"
-          />
-        </div>
-      </section>
-    {{/if}}
+    <section class="dashboard-content__score">
+      <div class="dashboard-content-score__wrapper">
+        <HexagonScore
+          @pixScore={{this.userScore}}
+          @maxReachablePixScore={{this.maxReachablePixScore}}
+          @maxReachableLevel={{this.maxReachableLevel}}
+        />
+        <LinkTo @route="authenticated.profile" class="dashboard-content-score-wrapper__link">
+          {{t "pages.dashboard.score.profile-link"}}
+        </LinkTo>
+      </div>
+    </section>
 
-    {{#if this.hasCampaignParticipationOverviews}}
-      <Dashboard::Section
-        @title={{t "pages.dashboard.campaigns.title"}}
-        @subtitle={{t "pages.dashboard.campaigns.subtitle"}}
-        @linkRoute="authenticated.user-tests"
-        @linkText={{t "pages.dashboard.campaigns.tests-link"}}
-      >
-        <CampaignParticipationOverview::Grid @model={{@model.campaignParticipationOverviews}} />
-      </Dashboard::Section>
-    {{/if}}
+    <section class="dashboard-content__main">
+      {{! This banner is displayed on large screens }}
+      <Dashboard::Banner
+        @show={{this.hasNewInformationToShow}}
+        @hasSeenNewDashboardInfo={{this.hasSeenNewDashboardInfo}}
+        @newDashboardInfoLink={{this.newDashboardInfoLink}}
+        @closeInformationAboutNewDashboard={{this.closeInformationAboutNewDashboard}}
+        @userFirstname={{this.userFirstname}}
+        @code={{this.codeForLastProfileToShare}}
+      />
 
-    {{#if this.hasStartedCompetences}}
-      <Dashboard::Section
-        @title={{t "pages.dashboard.started-competences.title"}}
-        @subtitle={{t "pages.dashboard.started-competences.subtitle"}}
-      >
-        <CompetenceCard::List @scorecards={{this.startedCompetences}} />
-      </Dashboard::Section>
-    {{/if}}
+      {{#if this.hasNothingToShow}}
+        <section>
+          <div>
+            <NewInformation
+              @information="{{t 'pages.dashboard.empty-dashboard.message'}}"
+              @image="/images/illustrations/fusee.png"
+              @variantClass="new-information--yellow-background"
+              @linkText={{t "pages.dashboard.empty-dashboard.link-to-competences"}}
+              @linkTo="authenticated.profile"
+              @linkDisplayType="button"
+              @textColorClass="new-information--black-text"
+            />
+          </div>
+        </section>
+      {{/if}}
 
-    {{#if this.hasRecommendedCompetences}}
-      <Dashboard::Section
-        @title={{t "pages.dashboard.recommended-competences.title"}}
-        @subtitle={{t "pages.dashboard.recommended-competences.subtitle"}}
-        @linkRoute="authenticated.profile"
-        @linkText={{t "pages.dashboard.recommended-competences.profile-link"}}
-        @ariaLabelLink={{t "pages.dashboard.recommended-competences.extra-information"}}
-      >
-        <CompetenceCard::List @scorecards={{this.recommendedScorecards}} />
-      </Dashboard::Section>
-    {{/if}}
+      {{#if this.hasCampaignParticipationOverviews}}
+        <Dashboard::Section
+          @title={{t "pages.dashboard.campaigns.title"}}
+          @subtitle={{t "pages.dashboard.campaigns.subtitle"}}
+          @linkRoute="authenticated.user-tests"
+          @linkText={{t "pages.dashboard.campaigns.tests-link"}}
+        >
+          <CampaignParticipationOverview::Grid @model={{@model.campaignParticipationOverviews}} />
+        </Dashboard::Section>
+      {{/if}}
 
-    {{#if this.hasImprovableCompetences}}
-      <Dashboard::Section
-        @title={{t "pages.dashboard.improvable-competences.title"}}
-        @subtitle={{t "pages.dashboard.improvable-competences.subtitle"}}
-        @linkRoute="authenticated.profile"
-        @linkText={{t "pages.dashboard.improvable-competences.profile-link"}}
-        @ariaLabelLink={{t "pages.dashboard.improvable-competences.extra-information"}}
-      >
-        <CompetenceCard::List @scorecards={{this.improvableScorecards}} />
-      </Dashboard::Section>
-    {{/if}}
-  </section>
+      {{#if this.hasStartedCompetences}}
+        <Dashboard::Section
+          @title={{t "pages.dashboard.started-competences.title"}}
+          @subtitle={{t "pages.dashboard.started-competences.subtitle"}}
+        >
+          <CompetenceCard::List @scorecards={{this.startedCompetences}} />
+        </Dashboard::Section>
+      {{/if}}
 
-  <section class="dashboard-content__certif">
-    <!-- Rajout du bloc certif ultérieurement -->
-    <!-- Div ajoutée afin de créer le layout Grid CSS -->
-  </section>
+      {{#if this.hasRecommendedCompetences}}
+        <Dashboard::Section
+          @title={{t "pages.dashboard.recommended-competences.title"}}
+          @subtitle={{t "pages.dashboard.recommended-competences.subtitle"}}
+          @linkRoute="authenticated.profile"
+          @linkText={{t "pages.dashboard.recommended-competences.profile-link"}}
+          @ariaLabelLink={{t "pages.dashboard.recommended-competences.extra-information"}}
+        >
+          <CompetenceCard::List @scorecards={{this.recommendedScorecards}} />
+        </Dashboard::Section>
+      {{/if}}
+
+      {{#if this.hasImprovableCompetences}}
+        <Dashboard::Section
+          @title={{t "pages.dashboard.improvable-competences.title"}}
+          @subtitle={{t "pages.dashboard.improvable-competences.subtitle"}}
+          @linkRoute="authenticated.profile"
+          @linkText={{t "pages.dashboard.improvable-competences.profile-link"}}
+          @ariaLabelLink={{t "pages.dashboard.improvable-competences.extra-information"}}
+        >
+          <CompetenceCard::List @scorecards={{this.improvableScorecards}} />
+        </Dashboard::Section>
+      {{/if}}
+    </section>
+
+    <section class="dashboard-content__certif">
+      <!-- Rajout du bloc certif ultérieurement -->
+      <!-- Div ajoutée afin de créer le layout Grid CSS -->
+    </section>
+  </div>
 
 </main>
diff --git a/mon-pix/app/components/global/app-layout.gjs b/mon-pix/app/components/global/app-layout.gjs
@@ -0,0 +1,8 @@
+import Footer from '../footer';
+import NavbarHeader from '../navbar-header';
+
+<template>
+  <NavbarHeader />
+  {{yield}}
+  <Footer />
+</template>
diff --git a/mon-pix/app/components/navbar-header.hbs b/mon-pix/app/components/navbar-header.hbs
@@ -1,10 +1,12 @@
 <Skiplink @href="#main" @label={{t "common.skip-links.skip-to-content"}} />
 <Skiplink @href="#footer" @label={{t "common.skip-links.skip-to-footer"}} />
 
-<div class="navbar-header">
-  {{#if (media "isDesktop")}}
-    <NavbarDesktopHeader @shouldShowTheMarianneLogo={{this.isFrenchDomainExtension}} />
-  {{else}}
-    <NavbarMobileHeader @shouldShowTheMarianneLogo={{this.isFrenchDomainExtension}} />
-  {{/if}}
-</div>
+<header id="global-header" role="banner">
+  <div class="navbar-header">
+    {{#if (media "isDesktop")}}
+      <NavbarDesktopHeader @shouldShowTheMarianneLogo={{this.isFrenchDomainExtension}} />
+    {{else}}
+      <NavbarMobileHeader @shouldShowTheMarianneLogo={{this.isFrenchDomainExtension}} />
+    {{/if}}
+  </div>
+</header>
diff --git a/mon-pix/app/components/profile-content.hbs b/mon-pix/app/components/profile-content.hbs
@@ -1,37 +1,33 @@
-<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 profile__panel">
-    <h1 class="sr-only">{{t "pages.profile.accessibility.title"}}</h1>
-
-    <div class="rounded-panel-header-with-components">
-      <div class="rounded-panel-header__left-wrapper">
-        <div
-          class="rounded-panel-header-text__content rounded-panel-title rounded-panel-header-text__content--first-title"
-        >
-          {{t "pages.profile.first-title" htmlSafe=true}}
-        </div>
-      </div>
-      <div class="rounded-panel-header__right-wrapper">
-        <h2 class="sr-only">{{t "pages.profile.accessibility.user-score"}}</h2>
-        <HexagonScore
-          @pixScore={{@model.profile.pixScore}}
-          @maxReachablePixScore={{@model.profile.maxReachablePixScore}}
-          @maxReachableLevel={{@model.profile.maxReachableLevel}}
-        />
-      </div>
+<main id="main" class="profile-scorecards global-page-container" role="main">
+  <section class="global-page-header">
+    <div class="global-page-header__left-content">
+      <h1 class="global-page-header__title">
+        {{t "pages.profile.title"}}
+      </h1>
+      <p class="global-page-header__description">
+        {{t "pages.profile.description"}}
+      </p>
     </div>
-    {{#if @model.profile.scorecards}}
-      <ProfileScorecards
-        @interactive={{true}}
-        @areas={{@model.profile.areas}}
-        @scorecards={{@model.profile.scorecards}}
+    <div class="global-page-header__right-content">
+      <h2 class="sr-only">{{t "pages.profile.accessibility.user-score"}}</h2>
+      <HexagonScore
+        @pixScore={{@model.profile.pixScore}}
+        @maxReachablePixScore={{@model.profile.maxReachablePixScore}}
+        @maxReachableLevel={{@model.profile.maxReachableLevel}}
       />
-    {{else}}
-      <p class="app-loader__image">
-        <img src="/images/interwind.gif" alt="" />
-        <br />{{t "common.loading.default"}}
-      </p>
-    {{/if}}
-  </div>
+    </div>
+  </section>
+
+  {{#if @model.profile.scorecards}}
+    <ProfileScorecards
+      @interactive={{true}}
+      @areas={{@model.profile.areas}}
+      @scorecards={{@model.profile.scorecards}}
+    />
+  {{else}}
+    <p class="app-loader__image">
+      <img src="/images/interwind.gif" alt="" />
+      <br />{{t "common.loading.default"}}
+    </p>
+  {{/if}}
 </main>
diff --git a/mon-pix/app/components/profile-scorecards.hbs b/mon-pix/app/components/profile-scorecards.hbs
@@ -1,17 +1,19 @@
-<div class="rounded-panel-body">
+<section class="profile-scorecards">
   <h2 class="sr-only">{{t "pages.profile.accessibility.user-skills"}}</h2>
-  <div>
+  <ul class="profile-scorecards__areas">
     {{#each @areas as |area|}}
-      <h3 class="sr-only">{{area.title}}</h3>
-      <div class="rounded-panel-body__areas">
-        {{#each @scorecards as |scorecard|}}
-          {{#if (eq area.code scorecard.area.code)}}
-            <div class="rounded-panel-body__competence-card">
-              <CompetenceCard @interactive={{@interactive}} @scorecard={{scorecard}} />
-            </div>
-          {{/if}}
-        {{/each}}
-      </div>
+      <li>
+        <h3 class="sr-only">{{area.title}}</h3>
+        <ul class="profile-scorecards__competences">
+          {{#each @scorecards as |scorecard|}}
+            {{#if (eq area.code scorecard.area.code)}}
+              <li>
+                <CompetenceCard @interactive={{@interactive}} @scorecard={{scorecard}} />
+              </li>
+            {{/if}}
+          {{/each}}
+        </ul>
+      </li>
     {{/each}}
-  </div>
-</div>
+  </ul>
+</section>