diff --git a/junior/app/components/mission-card/completed-mission-card.gjs b/junior/app/components/mission-card/completed-mission-card.gjs new file mode 100644 index 00000000000..744064b4e0d --- /dev/null +++ b/junior/app/components/mission-card/completed-mission-card.gjs @@ -0,0 +1,20 @@ +import Background from './mission-card-completed-background'; + + diff --git a/junior/app/components/mission-card/completed-mission/template.hbs b/junior/app/components/mission-card/completed-mission/template.hbs deleted file mode 100644 index a805dc32d10..00000000000 --- a/junior/app/components/mission-card/completed-mission/template.hbs +++ /dev/null @@ -1,97 +0,0 @@ - - - - - {{t - "pages.missions.start-page.cards.finished" - }} - - {{@title}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/junior/app/components/mission-card/incomplete-mission/template.hbs b/junior/app/components/mission-card/incomplete-mission/template.hbs deleted file mode 100644 index 616380fe004..00000000000 --- a/junior/app/components/mission-card/incomplete-mission/template.hbs +++ /dev/null @@ -1,108 +0,0 @@ - - - - - {{@title}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/junior/app/components/mission-card/mission-card-background.gjs b/junior/app/components/mission-card/mission-card-background.gjs new file mode 100644 index 00000000000..e443fd46012 --- /dev/null +++ b/junior/app/components/mission-card/mission-card-background.gjs @@ -0,0 +1,53 @@ + diff --git a/junior/app/components/mission-card/mission-card-completed-background.gjs b/junior/app/components/mission-card/mission-card-completed-background.gjs new file mode 100644 index 00000000000..5121f0848db --- /dev/null +++ b/junior/app/components/mission-card/mission-card-completed-background.gjs @@ -0,0 +1,48 @@ + diff --git a/junior/app/components/mission-card/mission-card.gjs b/junior/app/components/mission-card/mission-card.gjs new file mode 100644 index 00000000000..4e64b65e0ca --- /dev/null +++ b/junior/app/components/mission-card/mission-card.gjs @@ -0,0 +1,30 @@ +import MissionCardBackGround from './mission-card-background'; + + diff --git a/junior/app/components/mission-card/template.hbs b/junior/app/components/mission-card/template.hbs deleted file mode 100644 index a0245e1051e..00000000000 --- a/junior/app/components/mission-card/template.hbs +++ /dev/null @@ -1,5 +0,0 @@ -{{#if (eq @missionCompleted true)}} - -{{else}} - -{{/if}} \ No newline at end of file diff --git a/junior/app/styles/components/mission-card/card.scss b/junior/app/styles/components/mission-card/card.scss index af59c628bd4..b62a64026c7 100644 --- a/junior/app/styles/components/mission-card/card.scss +++ b/junior/app/styles/components/mission-card/card.scss @@ -1,64 +1,141 @@ .mission-card { - width: 250px; + &__container { + position: relative; + display: flex; + flex-direction: column; + width: 248px; + height: 368px; + padding: var(--pix-spacing-2x); + font-style: normal; + background-color: var(--pix-neutral-0); + border-radius: 15px; + box-shadow: 2px 4px 6px 0px rgb(70 77 98 / 20%), 0px 0px 2px 0px rgb(70 77 98 / 32%); - text { - font-weight: 700; - font-size: 18px; - } + .area-code-1 { + color: var(--pix-information-dark); - .stop-start-gradient { - &--area-1 { - stop-color: var(--pix-information-dark); + .background { + fill: var(--pix-information-light); + } } - &--area-2 { - stop-color: var(--pix-content-dark); - } + .area-code-2 { + color: var(--pix-communication-dark); - &--area-3 { - stop-color: var(--pix-communication-dark); + .background { + fill: var(--pix-communication-light); + } } - &--area-4 { - stop-color: var(--pix-security-dark); - } + .area-code-3 { + color: var(--pix-contenu-dark); - &--area-5 { - stop-color: var(--pix-environment-dark); + .background { + fill: var(--pix-contenu-light); + } } - &--purple { - stop-color: var(--pix-tertiary-50); + .area-code-4 { + color: var(--pix-securite-dark); + + .background { + fill: var(--pix-securite-light); + } } - } - .stop-end-gradient { - &--area-1 { - stop-color: var(--pix-information-light); + .area-code-5 { + color: var(--pix-environnementnum-dark); + + svg .background { + fill: var(--pix-environnementnum-light); + } } - &--area-2 { - stop-color: var(--pix-content-light); + .status { + position: absolute; + top: 30px; + left: 50%; + width: fit-content; + color: var(--pix-primary-500); + font-weight: 700; + font-size:var(--pix-spacing-4x); + line-height: 21.82px; + text-align: center; + background: var(--pix-neutral-0); + border: solid 2px var(--pix-primary-500); + transform: translate(-50%); + + p { + padding: var(--pix-spacing-1x) var(--pix-spacing-4x); + } } - &--area-3 { - stop-color: var(--pix-communication-light); + .mission-card-bottom { + display: flex; + flex-direction: column; + align-content: center; + align-self: center; + justify-content: center; + width: 200px; + + .mission-name { + margin-bottom: var(--pix-spacing-3x); + font-weight: 800; + font-size: 22.38px; + line-height: normal; + text-align: center; + text-wrap: wrap; + } + + .fake-button { + display: inline-flex; + flex-shrink: 0; + gap: var(--pix-spacing-2x); + align-items: center; + justify-content: center; + height: 40px; + padding: var(--pix-spacing-3x) var(--pix-spacing-8x); + color: var(--pix-primary-500); + background: var(--pix-neutral-0); + border: 1px solid var(--pix-primary-500); + border-radius: 100px; + } } - &--area-4 { - stop-color: var(--pix-security-light); + .mission-icon { + position: absolute; + top: 75px; + left: 50%; + transform: translate(-50%); } - &--area-5 { - stop-color: var(--pix-environment-light); + .mission-icon--completed { + position: absolute; + top: 130px; + left: 50%; + transform: translate(-50%); } - &--purple { - stop-color: var(--pix-tertiary-700); + .completed-mission-card-bottom { + position: absolute; + bottom: var(--pix-spacing-8x); + left: 50%; + display: flex; + flex-direction: column; + flex-shrink: 0; + justify-content: center; + width: 200px; + height: 62px; + transform: translate(-50%); + + p { + color: var(--pix-neutral-0); + font-weight: 800; + font-size: 22.38px; + line-height: normal; + text-align: center; + text-wrap: wrap; + } } } } - -text.mission-card__title { - font-size: 22px; -} diff --git a/junior/app/styles/globals/_colors.scss b/junior/app/styles/globals/_colors.scss index fc83a547801..871775a610e 100644 --- a/junior/app/styles/globals/_colors.scss +++ b/junior/app/styles/globals/_colors.scss @@ -53,4 +53,24 @@ --pix-neutral-700: #464D62; --pix-neutral-900: #2A2D3A; + + /* Information */ + --pix-information-light: #FFB24D; + --pix-information-dark: #CE6700; + + /* Communication */ + --pix-communication-light: #19A0A3; + --pix-communication-dark: #0E585A; + + /* Contenu */ + --pix-contenu-light: #3F7DD8; + --pix-contenu-dark: #234577; + + /* Securite */ + --pix-securite-light: #CE4D6F; + --pix-securite-dark: #712A3D; + + /* EnvironnementNum */ + --pix-environnementnum-light: #6346CE; + --pix-environnementnum-dark: #362771; } diff --git a/junior/app/templates/assessment/results.hbs b/junior/app/templates/assessment/results.hbs index 823d738be01..a41c28d81ed 100644 --- a/junior/app/templates/assessment/results.hbs +++ b/junior/app/templates/assessment/results.hbs @@ -4,11 +4,7 @@
- +

{{t "pages.missions.end-page.details-list"}}

diff --git a/junior/app/templates/identified/missions/list.hbs b/junior/app/templates/identified/missions/list.hbs index 645469387b5..d50f4bcece8 100644 --- a/junior/app/templates/identified/missions/list.hbs +++ b/junior/app/templates/identified/missions/list.hbs @@ -14,12 +14,22 @@
{{#each @model.missions as |mission|}} - + {{#if (this.missionCompleted mission.id)}} + + {{else}} + + {{/if}} {{/each}}
diff --git a/junior/app/templates/identified/missions/mission.hbs b/junior/app/templates/identified/missions/mission.hbs index 8b22c4651cf..ffce5723a1b 100644 --- a/junior/app/templates/identified/missions/mission.hbs +++ b/junior/app/templates/identified/missions/mission.hbs @@ -4,11 +4,9 @@
- + + +
{{t "pages.missions.start-page.back-to-missions" diff --git a/junior/package-lock.json b/junior/package-lock.json index 49b9521c87e..75264b96ace 100644 --- a/junior/package-lock.json +++ b/junior/package-lock.json @@ -29,6 +29,7 @@ "@fortawesome/free-solid-svg-icons": "^6.2.1", "@glimmer/component": "^1.1.2", "@glimmer/tracking": "^1.1.2", + "babel-plugin-ember-template-compilation": "^2.2.5", "dotenv": "^16.3.1", "ember-auto-import": "^2.7.2", "ember-cli": "^5.8.1", @@ -13878,18 +13879,27 @@ } }, "node_modules/babel-plugin-ember-template-compilation": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/babel-plugin-ember-template-compilation/-/babel-plugin-ember-template-compilation-2.2.1.tgz", - "integrity": "sha512-alinprIQcLficqkuIyeKKfD4HQOpMOiHK6pt6Skj/yjoPoQYBuwAJ2BoPAlRe9k/URPeVkpMefbN3m6jEp7RsA==", + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/babel-plugin-ember-template-compilation/-/babel-plugin-ember-template-compilation-2.2.5.tgz", + "integrity": "sha512-NQ2DT0DsYyHVrEpFQIy2U8S91JaKSE8NOSZzMd7KZFJVgA6KodJq3Uj852HcH9LsSfvwppnM+dRo1G8bzTnnFw==", "dev": true, "dependencies": { "@glimmer/syntax": "^0.84.3", - "babel-import-util": "^2.0.0" + "babel-import-util": "^3.0.0" }, "engines": { "node": ">= 12.*" } }, + "node_modules/babel-plugin-ember-template-compilation/node_modules/babel-import-util": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/babel-import-util/-/babel-import-util-3.0.0.tgz", + "integrity": "sha512-4YNPkuVsxAW5lnSTa6cn4Wk49RX6GAB6vX+M6LqEtN0YePqoFczv1/x0EyLK/o+4E1j9jEuYj5Su7IEPab5JHQ==", + "dev": true, + "engines": { + "node": ">= 12.*" + } + }, "node_modules/babel-plugin-filter-imports": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/babel-plugin-filter-imports/-/babel-plugin-filter-imports-4.0.0.tgz", diff --git a/junior/package.json b/junior/package.json index e00e9f3defe..de5891dad8b 100644 --- a/junior/package.json +++ b/junior/package.json @@ -54,6 +54,7 @@ "@fortawesome/free-solid-svg-icons": "^6.2.1", "@glimmer/component": "^1.1.2", "@glimmer/tracking": "^1.1.2", + "babel-plugin-ember-template-compilation": "^2.2.5", "dotenv": "^16.3.1", "ember-auto-import": "^2.7.2", "ember-cli": "^5.8.1", diff --git a/junior/public/images/icons/mission-card/img-area-1.svg b/junior/public/images/icons/mission-card/img-area-1.svg deleted file mode 100644 index 3b47e5e0dd0..00000000000 --- a/junior/public/images/icons/mission-card/img-area-1.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/junior/public/images/icons/mission-card/img-area-2.svg b/junior/public/images/icons/mission-card/img-area-2.svg deleted file mode 100644 index c5a95d0dc2d..00000000000 --- a/junior/public/images/icons/mission-card/img-area-2.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/junior/public/images/icons/mission-card/img-area-3.svg b/junior/public/images/icons/mission-card/img-area-3.svg deleted file mode 100644 index e14f3cdcc8a..00000000000 --- a/junior/public/images/icons/mission-card/img-area-3.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/junior/public/images/icons/mission-card/img-area-4.svg b/junior/public/images/icons/mission-card/img-area-4.svg deleted file mode 100644 index e55abc86c00..00000000000 --- a/junior/public/images/icons/mission-card/img-area-4.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/junior/public/images/icons/mission-card/img-area-5.svg b/junior/public/images/icons/mission-card/img-area-5.svg deleted file mode 100644 index 01ac2a9e58f..00000000000 --- a/junior/public/images/icons/mission-card/img-area-5.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/junior/public/images/mission/icon/area-code-1.svg b/junior/public/images/mission/icon/area-code-1.svg new file mode 100644 index 00000000000..5c3acc118f8 --- /dev/null +++ b/junior/public/images/mission/icon/area-code-1.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/junior/public/images/mission/icon/area-code-2.svg b/junior/public/images/mission/icon/area-code-2.svg new file mode 100644 index 00000000000..81886308c4f --- /dev/null +++ b/junior/public/images/mission/icon/area-code-2.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/junior/public/images/mission/icon/area-code-3.svg b/junior/public/images/mission/icon/area-code-3.svg new file mode 100644 index 00000000000..a116d1c6e6e --- /dev/null +++ b/junior/public/images/mission/icon/area-code-3.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/junior/public/images/mission/icon/area-code-4.svg b/junior/public/images/mission/icon/area-code-4.svg new file mode 100644 index 00000000000..65f4ac78be8 --- /dev/null +++ b/junior/public/images/mission/icon/area-code-4.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/junior/public/images/mission/icon/finished-icon.svg b/junior/public/images/mission/icon/finished-icon.svg new file mode 100644 index 00000000000..cbd118e1f2f --- /dev/null +++ b/junior/public/images/mission/icon/finished-icon.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/junior/tests/acceptance/display-missions-list-test.js b/junior/tests/acceptance/display-missions-list-test.js index 76af7ab811f..64c18bb0a01 100644 --- a/junior/tests/acceptance/display-missions-list-test.js +++ b/junior/tests/acceptance/display-missions-list-test.js @@ -31,7 +31,11 @@ module('Acceptance | Display missions list', function (hooks) { const screen = await visit('/'); // then - assert.dom(within(screen.getByText('mission_1').parentElement).queryByText('Terminé')).doesNotExist(); - assert.dom(within(screen.getByText('mission_2').parentElement).getByText('Terminé')).exists(); + assert + .dom(within(screen.getByText('mission_1').parentElement.parentElement.parentElement).queryByText('Terminé')) + .doesNotExist(); + assert + .dom(within(screen.getByText('mission_2').parentElement.parentElement.parentElement).getByText('Terminé')) + .exists(); }); }); diff --git a/junior/translations/fr.json b/junior/translations/fr.json index cb1c026857b..86e9443cff5 100644 --- a/junior/translations/fr.json +++ b/junior/translations/fr.json @@ -47,7 +47,16 @@ "list": { "title": "Mes Missions", "instruction": "Bonjour {prenom}, choisis ta mission parmi celles qui te sont proposées ci-dessous !", - "back-to-students": "Si tu n'es pas {prenom}, clique ici pour retourner à la liste des élèves " + "back-to-students": "Si tu n'es pas {prenom}, clique ici pour retourner à la liste des élèves ", + "status": { + "started": { + "label": "A faire", + "button-label": "Commencer" + }, + "completed": { + "label": "Terminé" + } + } }, "start-page": { "title": "Début de mission",