From 154fa425643ddcfadea0e66fdba0aa4e44f6e83e Mon Sep 17 00:00:00 2001 From: Geoffroy Begouaussel Date: Mon, 2 Dec 2024 17:59:51 +0100 Subject: [PATCH] feat(mon-pix): layout rework --- .../app/components/certifications/start.gjs | 29 ++- mon-pix/app/components/dashboard/banner.hbs | 2 +- mon-pix/app/components/dashboard/content.hbs | 176 +++++++++--------- mon-pix/app/components/global/app-layout.gjs | 8 + mon-pix/app/components/navbar-header.hbs | 16 +- mon-pix/app/components/profile-content.hbs | 64 +++---- mon-pix/app/components/profile-scorecards.hbs | 30 +-- mon-pix/app/components/tutorials/header.hbs | 50 ++--- mon-pix/app/styles/app.scss | 7 +- .../components/_communication-banner.scss | 7 + .../components/_competence-card-default.scss | 2 - mon-pix/app/styles/components/_footer.scss | 6 +- .../components/_navbar-desktop-header.scss | 8 +- .../styles/components/_new-information.scss | 4 - .../_grid.scss | 30 +-- .../components/competence-card/_list.scss | 43 +---- .../styles/components/dashboard/_content.scss | 52 +++--- .../components/profile/_scorecards.scss | 23 +++ mon-pix/app/styles/globals/_layout.scss | 36 ++-- mon-pix/app/styles/globals/_page-header.scss | 30 +++ mon-pix/app/styles/pages/_user-tutorials.scss | 53 ++---- mon-pix/app/templates/application.hbs | 3 +- .../app/templates/authenticated/profile.hbs | 10 +- .../authenticated/user-certifications.hbs | 10 +- .../user-certifications/index.hbs | 10 +- .../authenticated/user-dashboard.hbs | 10 +- .../templates/authenticated/user-tests.hbs | 26 ++- .../user-tutorials/recommended.hbs | 6 +- .../authenticated/user-tutorials/saved.hbs | 6 +- mon-pix/translations/en.json | 2 +- mon-pix/translations/fr.json | 10 +- 31 files changed, 376 insertions(+), 393 deletions(-) create mode 100644 mon-pix/app/components/global/app-layout.gjs create mode 100644 mon-pix/app/styles/components/_communication-banner.scss create mode 100644 mon-pix/app/styles/components/profile/_scorecards.scss create mode 100644 mon-pix/app/styles/globals/_page-header.scss diff --git a/mon-pix/app/components/certifications/start.gjs b/mon-pix/app/components/certifications/start.gjs index 4a1f3ed92fd..3f12b37482b 100644 --- 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'; diff --git a/mon-pix/app/components/dashboard/banner.hbs b/mon-pix/app/components/dashboard/banner.hbs index 5ba8ac6fc42..e59815e8875 100644 --- a/mon-pix/app/components/dashboard/banner.hbs +++ b/mon-pix/app/components/dashboard/banner.hbs @@ -2,7 +2,7 @@
{{#unless @hasSeenNewDashboardInfo}} +

{{t "pages.dashboard.title"}}

- {{! This banner is displayed on tablet }} - - -
-
- - - {{t "pages.dashboard.score.profile-link"}} - +
+
+

+ {{t "pages.dashboard.welcome" firstName=this.userFirstname}} +

-
- {{! This banner is displayed on large screens }} +
+ {{! This banner is displayed on tablet }} - {{#if this.hasNothingToShow}} -
-
- -
-
- {{/if}} +
+
+ + + {{t "pages.dashboard.score.profile-link"}} + +
+
- {{#if this.hasCampaignParticipationOverviews}} - - - - {{/if}} +
+ {{! This banner is displayed on large screens }} + - {{#if this.hasStartedCompetences}} - - - - {{/if}} + {{#if this.hasNothingToShow}} +
+
+ +
+
+ {{/if}} - {{#if this.hasRecommendedCompetences}} - - - - {{/if}} + {{#if this.hasCampaignParticipationOverviews}} + + + + {{/if}} - {{#if this.hasImprovableCompetences}} - - - - {{/if}} -
+ {{#if this.hasStartedCompetences}} + + + + {{/if}} -
- - -
+ {{#if this.hasRecommendedCompetences}} + + + + {{/if}} + + {{#if this.hasImprovableCompetences}} + + + + {{/if}} +
+ +
+ + +
+
\ No newline at end of file diff --git a/mon-pix/app/components/global/app-layout.gjs b/mon-pix/app/components/global/app-layout.gjs new file mode 100644 index 00000000000..24de64f0af4 --- /dev/null +++ b/mon-pix/app/components/global/app-layout.gjs @@ -0,0 +1,8 @@ +import Footer from '../footer'; +import NavbarHeader from '../navbar-header'; + + diff --git a/mon-pix/app/components/navbar-header.hbs b/mon-pix/app/components/navbar-header.hbs index 7073ea6ac88..0929204ee7a 100644 --- a/mon-pix/app/components/navbar-header.hbs +++ b/mon-pix/app/components/navbar-header.hbs @@ -1,10 +1,12 @@ -
- {{#if (media "isDesktop")}} - - {{else}} - - {{/if}} -
\ No newline at end of file + \ No newline at end of file diff --git a/mon-pix/app/components/profile-content.hbs b/mon-pix/app/components/profile-content.hbs index 2233c6ae9d0..c092082916a 100644 --- a/mon-pix/app/components/profile-content.hbs +++ b/mon-pix/app/components/profile-content.hbs @@ -1,37 +1,33 @@ -
-
- -
-

{{t "pages.profile.accessibility.title"}}

- -
-
-
- {{t "pages.profile.first-title" htmlSafe=true}} -
-
-
-

{{t "pages.profile.accessibility.user-score"}}

- -
+
+
+
+

+ {{t "pages.profile.title"}} +

+

+ {{t "pages.profile.description"}} +

- {{#if @model.profile.scorecards}} - +

{{t "pages.profile.accessibility.user-score"}}

+ - {{else}} -

- -
{{t "common.loading.default"}} -

- {{/if}} -
+
+
+ + {{#if @model.profile.scorecards}} + + {{else}} +

+ +
{{t "common.loading.default"}} +

+ {{/if}} \ No newline at end of file diff --git a/mon-pix/app/components/profile-scorecards.hbs b/mon-pix/app/components/profile-scorecards.hbs index fdc6ad92be2..fb1e6d4a3bd 100644 --- a/mon-pix/app/components/profile-scorecards.hbs +++ b/mon-pix/app/components/profile-scorecards.hbs @@ -1,17 +1,19 @@ -
+

{{t "pages.profile.accessibility.user-skills"}}

-
+
    {{#each @areas as |area|}} -

    {{area.title}}

    -
    - {{#each @scorecards as |scorecard|}} - {{#if (eq area.code scorecard.area.code)}} -
    - -
    - {{/if}} - {{/each}} -
    +
  • +

    {{area.title}}

    +
      + {{#each @scorecards as |scorecard|}} + {{#if (eq area.code scorecard.area.code)}} +
    • + +
      • + {{/if}} + {{/each}} +
    +
    • {{/each}} -
-
\ No newline at end of file + + \ No newline at end of file diff --git a/mon-pix/app/components/tutorials/header.hbs b/mon-pix/app/components/tutorials/header.hbs index 13d4061893d..1a354bdaa6c 100644 --- a/mon-pix/app/components/tutorials/header.hbs +++ b/mon-pix/app/components/tutorials/header.hbs @@ -1,28 +1,30 @@ -
-
-

{{t "pages.user-tutorials.title"}}

-

- {{t "pages.user-tutorials.description"}} -

+
+
+
+

{{t "pages.user-tutorials.title"}}

+

+ {{t "pages.user-tutorials.description"}} +

+
+
-
    +
      +
    • + + {{t "pages.user-tutorials.recommended"}} + +
      • +
    • + + {{t "pages.user-tutorials.saved"}} + +
      • + {{#if @shouldShowFilterButton}}
    • - - {{t "pages.user-tutorials.recommended"}} - + + {{t "pages.user-tutorials.filter"}} +
      • -
    • - - {{t "pages.user-tutorials.saved"}} - -
      • - {{#if @shouldShowFilterButton}} -
    • - - {{t "pages.user-tutorials.filter"}} - -
      • - {{/if}} -
    -
+ {{/if}} +
\ No newline at end of file diff --git a/mon-pix/app/styles/app.scss b/mon-pix/app/styles/app.scss index 18d7fb61c6e..ac3b2dc2017 100644 --- a/mon-pix/app/styles/app.scss +++ b/mon-pix/app/styles/app.scss @@ -6,12 +6,13 @@ /* globals */ @import 'globals/a11y'; @import 'globals/alert'; +@import 'globals/buttons'; @import 'globals/inputs'; +@import 'globals/layout'; @import 'globals/loading'; -@import 'globals/buttons'; +@import 'globals/page-header'; @import 'globals/tables'; @import 'globals/text'; -@import 'globals/layout'; /* components */ @import '../components/campaigns/assessment/results/evaluation-results-hero/attestation-result'; @@ -33,6 +34,7 @@ @import 'components/certifications-list'; @import 'components/certifications-list-item'; @import 'components/certifications/certification-ender'; +@import 'components/communication-banner'; @import 'components/companion/blocker'; @import 'components/companion/check'; @import 'components/congratulations-certification-banner'; @@ -136,6 +138,7 @@ of an adaptative/mobile-first approach — refactoring is welcome here */ @import 'components/pix-toggle'; @import 'components/skip-link'; @import 'components/campaigns'; +@import 'components/profile/scorecards'; /* Styles for colocated components */ @import 'authentication-layout'; diff --git a/mon-pix/app/styles/components/_communication-banner.scss b/mon-pix/app/styles/components/_communication-banner.scss new file mode 100644 index 00000000000..da0df31683d --- /dev/null +++ b/mon-pix/app/styles/components/_communication-banner.scss @@ -0,0 +1,7 @@ +.pix-communication-banner { + position: relative; + top: 0; + right: 0; + left: 0; + z-index: 2; +} diff --git a/mon-pix/app/styles/components/_competence-card-default.scss b/mon-pix/app/styles/components/_competence-card-default.scss index cda8985fb9a..86d89a6e0ab 100644 --- a/mon-pix/app/styles/components/_competence-card-default.scss +++ b/mon-pix/app/styles/components/_competence-card-default.scss @@ -2,8 +2,6 @@ @include device-is('tablet') { .competence-card { - flex-direction: column; - width: 212px; height: 310px; } diff --git a/mon-pix/app/styles/components/_footer.scss b/mon-pix/app/styles/components/_footer.scss index 638fca5fd9d..fff2e3740d5 100644 --- a/mon-pix/app/styles/components/_footer.scss +++ b/mon-pix/app/styles/components/_footer.scss @@ -1,11 +1,11 @@ #footer { + @extend %global-container; + display: flex; gap: var(--pix-spacing-4x); align-items: flex-start; justify-content: space-between; - width: min(100%, 1280px); - margin: 0 auto; - padding: var(--pix-spacing-6x) 20px; + padding-block: var(--pix-spacing-6x); color: var(--pix-neutral-500); @include device-is('mobile') { diff --git a/mon-pix/app/styles/components/_navbar-desktop-header.scss b/mon-pix/app/styles/components/_navbar-desktop-header.scss index 7c269c26924..9252fb735d9 100644 --- a/mon-pix/app/styles/components/_navbar-desktop-header.scss +++ b/mon-pix/app/styles/components/_navbar-desktop-header.scss @@ -1,11 +1,13 @@ .navbar-desktop-header { + box-shadow: rgb(0 0 0 / 6%) 0 6px 24px; + &__container { + @extend %global-container; + position: relative; display: flex; gap: 4rem; - max-width: 1280px; - margin: 0 auto; - padding: var(--pix-spacing-4x) 20px; + padding-block: var(--pix-spacing-4x); } } diff --git a/mon-pix/app/styles/components/_new-information.scss b/mon-pix/app/styles/components/_new-information.scss index a04800f1bd4..841a6a59be5 100644 --- a/mon-pix/app/styles/components/_new-information.scss +++ b/mon-pix/app/styles/components/_new-information.scss @@ -31,10 +31,6 @@ &--yellow-background { background: linear-gradient(-225deg, rgb(254 220 65 / 55%) 0%, rgb(255 159 0 / 55%) 100%); - - @include device-is('tablet') { - margin-top: 40px; - } } &--blue-gradient-background { diff --git a/mon-pix/app/styles/components/campaign-participation-overview/_grid.scss b/mon-pix/app/styles/components/campaign-participation-overview/_grid.scss index b2e9d47a0a6..87fa23d9eb4 100644 --- a/mon-pix/app/styles/components/campaign-participation-overview/_grid.scss +++ b/mon-pix/app/styles/components/campaign-participation-overview/_grid.scss @@ -1,29 +1,5 @@ .campaign-participation-overview-grid { - display: flex; - flex-direction: column; - flex-wrap: wrap; - padding: 0; - - @include device-is('tablet') { - flex-direction: row; - } - - &__item { - margin-bottom: 16px; - list-style-type: none; - - &:last-child { - margin-bottom: 0; - } - - @include device-is('tablet') { - width: calc(50% - 16px); - margin: 8px; - } - - @include device-is('desktop') { - width: calc(33% - 16px); - margin: 8px; - } - } + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); + gap: var(--pix-spacing-4x); } diff --git a/mon-pix/app/styles/components/competence-card/_list.scss b/mon-pix/app/styles/components/competence-card/_list.scss index 022a000e5f1..f3625eac211 100644 --- a/mon-pix/app/styles/components/competence-card/_list.scss +++ b/mon-pix/app/styles/components/competence-card/_list.scss @@ -1,42 +1,5 @@ -$scorecard-width: 212px; - .competence-card-list { - display: flex; - flex-direction: column; - margin: 0; - padding: 0; - list-style: none; - - &__competence-card { - margin-bottom: 37px; - - &:last-child { - margin-bottom: 0; - } - } - - @include device-is('tablet') { - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - - &__competence-card { - margin-right: calc((100% - #{$scorecard-width} * 3) / 2); - - &:nth-child(3n) { - margin-right: 0; - } - } - } - - @media (min-width: 1056px) { - &__competence-card, - &__competence-card:nth-child(3n) { - margin-right: calc((100% - #{$scorecard-width} * 4) / 3); - - &:nth-child(4n) { - margin-right: 0; - } - } - } + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); + gap: var(--pix-spacing-4x); } diff --git a/mon-pix/app/styles/components/dashboard/_content.scss b/mon-pix/app/styles/components/dashboard/_content.scss index c36652faf35..d7e189bd15d 100644 --- a/mon-pix/app/styles/components/dashboard/_content.scss +++ b/mon-pix/app/styles/components/dashboard/_content.scss @@ -1,6 +1,10 @@ @mixin add-dashboard-content-separator() { - padding: 24px 0; + padding: var(--pix-spacing-8x) 0; border-bottom: 1px solid var(--pix-neutral-20); + + &:first-child { + padding-top: 0; + } } .dashboard-content { @@ -12,7 +16,6 @@ 'certif'; grid-template-rows: auto; grid-template-columns: 100%; - padding: 40px 20px; .dashboard-banner { grid-area: banner; @@ -24,7 +27,6 @@ @include add-dashboard-content-separator; grid-area: score; - margin-bottom: 20px; } } @@ -87,7 +89,6 @@ 'main main main certif'; grid-template-rows: auto; grid-template-columns: repeat(4, 1fr); - padding: 0; .dashboard-banner { display: none; @@ -102,7 +103,10 @@ @include add-dashboard-content-separator; display: block; - padding: 40px 0 47px; + + &:first-child { + padding-top: 0; + } } & > .new-information { @@ -114,12 +118,8 @@ &__score { grid-area: score; margin: 0; - padding-top: 40px; + padding-top: 0; border-bottom: none; - - &:first-of-type { - padding-top: 40px; - } } &__certif { @@ -169,21 +169,24 @@ } .dashboard-section { + @include add-dashboard-content-separator; + + &:last-child { + border-bottom: none; + } + &__title { + @extend %pix-title-xs; + + margin-bottom: var(--pix-spacing-1x); color: var(--pix-neutral-800); - font-weight: var(--pix-font-medium); - font-size: 1.125rem; - font-family: $font-open-sans; - line-height: 1.562rem; - letter-spacing: 0.009rem; } &__subtitle { - margin: 4px 0 24px; + @extend %pix-body-m; + + margin-bottom: var(--pix-spacing-6x); color: var(--pix-neutral-500); - font-size: 0.8125rem; - font-family: $font-roboto; - letter-spacing: 0.009rem; } &__header { @@ -201,15 +204,4 @@ display: block; } } - - // stylelint-disable-next-line no-duplicate-selectors - & { - @include add-dashboard-content-separator; - - padding: 24px 0; - } - - &:last-child { - border-bottom: none; - } } diff --git a/mon-pix/app/styles/components/profile/_scorecards.scss b/mon-pix/app/styles/components/profile/_scorecards.scss new file mode 100644 index 00000000000..654eed27227 --- /dev/null +++ b/mon-pix/app/styles/components/profile/_scorecards.scss @@ -0,0 +1,23 @@ +.profile-scorecards { + --profile-scorecards-spacing: var(--pix-spacing-4x); + + @include device-is('desktop') { + --profile-scorecards-spacing: var(--pix-spacing-6x); + } +} + +.profile-scorecards__areas { + & > li:not(:last-child) { + margin-bottom: var(--profile-scorecards-spacing); + } +} + +.profile-scorecards__competences { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); + gap: var(--profile-scorecards-spacing); + + @include device-is('mobile') { + grid-template-columns: 1fr; + } +} diff --git a/mon-pix/app/styles/globals/_layout.scss b/mon-pix/app/styles/globals/_layout.scss index 670a9654780..4b0846ba4f6 100644 --- a/mon-pix/app/styles/globals/_layout.scss +++ b/mon-pix/app/styles/globals/_layout.scss @@ -1,28 +1,38 @@ body { color: var(--pix-neutral-800); - background-color: var(--pix-neutral-20); + background-color: var(--pix-primary-10); } -.body { +#app { display: flex; flex-direction: column; min-height: 100vh; } -.page-container { +img { + max-width: 100%; +} + +/* Global container */ +%global-container { width: 100%; - max-width: 1240px; - margin: 0 auto; + max-width: 96rem; + margin-inline: auto; + padding-inline: var(--pix-spacing-4x); + + @include device-is('desktop') { + padding-inline: var(--pix-spacing-6x); + } } -.pix-communication-banner { - position: relative; - top: 0; - right: 0; - left: 0; - z-index: 2; +.global-page-container { + @extend %global-container; + + display: flex; + flex-direction: column; + flex-grow: 1; } -img { - max-width: 100%; +.global-page-container__streched-content { + flex-grow: 1; } diff --git a/mon-pix/app/styles/globals/_page-header.scss b/mon-pix/app/styles/globals/_page-header.scss new file mode 100644 index 00000000000..f7dbec0a1ea --- /dev/null +++ b/mon-pix/app/styles/globals/_page-header.scss @@ -0,0 +1,30 @@ +.global-page-header { + display: flex; + flex-wrap: wrap; + gap: var(--pix-spacing-6x); + justify-content: space-between; + padding-bottom: var(--pix-spacing-6x); + border-bottom: 1px solid var(--pix-neutral-100); + margin-block: var(--pix-spacing-10x) var(--pix-spacing-8x); +} + +.global-page-header__left-content { + width: min(100%, 50rem); +} + +.global-page-header__right-content { + flex-shrink: 0; +} + +.global-page-header__title { + @extend %pix-title-m; + + color: var(--pix-neutral-900); +} + +.global-page-header__description { + @extend %pix-body-m; + + margin-top: var(--pix-spacing-3x); + color: var(--pix-neutral-500); +} diff --git a/mon-pix/app/styles/pages/_user-tutorials.scss b/mon-pix/app/styles/pages/_user-tutorials.scss index 8025e978ff6..bd257ebedbd 100644 --- a/mon-pix/app/styles/pages/_user-tutorials.scss +++ b/mon-pix/app/styles/pages/_user-tutorials.scss @@ -1,42 +1,15 @@ -.user-tutorials-banner { - margin: 0 var(--pix-spacing-6x); - padding-bottom: var(--pix-spacing-4x); - - @include device-is('desktop') { - max-width: 1280px; - margin: 0 auto; - padding: var(--pix-spacing-4x) 20px; - } - - &__title { - @extend %pix-title-m; - - color: var(--pix-neutral-900); - } - - &__description { - @extend %pix-body-m; - - padding: var(--pix-spacing-2x) 0 var(--pix-spacing-8x); - color: var(--pix-neutral-500); - } - - &__filters { - display: flex; - flex-wrap: wrap; - gap: var(--pix-spacing-4x); - align-items: center; - min-height: 2.8125rem; - } +.user-tutorials-banner__filters { + display: flex; + flex-wrap: wrap; + gap: var(--pix-spacing-4x); + align-items: center; + min-height: 2.8125rem; + padding-bottom: var(--pix-spacing-8x); } .user-tutorials-content { - margin: 0 auto; - padding: var(--pix-spacing-6x) 20px 0; - - @include device-is('desktop') { - max-width: 1280px; - } + display: flex; + flex-direction: column; &__cards { display: grid; @@ -52,8 +25,7 @@ &__saved-empty, &__recommended-empty { - margin: 75px auto 0; - padding: 0 20px; + padding: 6rem 0; text-align: center; @include device-is('desktop') { @@ -61,8 +33,11 @@ flex-direction: row-reverse; gap: 100px; align-items: center; - max-width: 1037px; text-align: left; + + & > div { + flex-grow: 1; + } } } } diff --git a/mon-pix/app/templates/application.hbs b/mon-pix/app/templates/application.hbs index 9034e4c474f..9b70064bf78 100644 --- a/mon-pix/app/templates/application.hbs +++ b/mon-pix/app/templates/application.hbs @@ -6,10 +6,11 @@ {{/in-element}} -
+
+ {{outlet}} diff --git a/mon-pix/app/templates/authenticated/profile.hbs b/mon-pix/app/templates/authenticated/profile.hbs index d088f5935bb..19386d72414 100644 --- a/mon-pix/app/templates/authenticated/profile.hbs +++ b/mon-pix/app/templates/authenticated/profile.hbs @@ -1,9 +1,5 @@ {{page-title (t "pages.profile.title")}} -
- -
- - - -