diff --git a/junior/app/components/challenge/challenge.gjs b/junior/app/components/challenge/challenge.gjs index e9d90913d46..4026bcc52b1 100644 --- a/junior/app/components/challenge/challenge.gjs +++ b/junior/app/components/challenge/challenge.gjs @@ -8,6 +8,7 @@ import ENV from 'junior/config/environment'; import Bubble from '../bubble'; import DelayedElement from '../delayed-element'; +import IdentifiedLearner from '../identified-learner'; import RobotDialog from '../robot-dialog'; import ChallengeContent from './challenge-content'; import ChallengeLayout from './challenge-layout'; @@ -141,22 +142,25 @@ export default class Challenge extends Component { +} diff --git a/junior/app/controllers/school/students.js b/junior/app/controllers/school/students.js index f0860047ecd..1d0a321753c 100644 --- a/junior/app/controllers/school/students.js +++ b/junior/app/controllers/school/students.js @@ -14,6 +14,7 @@ export default class Students extends Controller { identifyUser(learner) { this.currentLearner.setLearner({ id: learner.id, + displayName: learner.displayName, schoolUrl: this.model.schoolUrl, }); styleToolkit.backgroundBlob.reset(); diff --git a/junior/app/styles/app.scss b/junior/app/styles/app.scss index 1325358833f..a28f164535b 100644 --- a/junior/app/styles/app.scss +++ b/junior/app/styles/app.scss @@ -11,6 +11,7 @@ @import 'globals/fonts'; // Components +@import 'components/challenge/challenge'; @import 'components/challenge/challenge-actions'; @import 'components/challenge/challenge-embed-simulator'; @import 'components/challenge/challenge-content'; @@ -23,6 +24,7 @@ @import 'components/bubble'; @import 'components/footer'; @import 'components/issue'; +@import 'components/identified-learner'; @import 'components/oralization-button'; @import 'components/robot-dialog'; diff --git a/junior/app/styles/components/challenge/challenge.scss b/junior/app/styles/components/challenge/challenge.scss new file mode 100644 index 00000000000..e57d367dcde --- /dev/null +++ b/junior/app/styles/components/challenge/challenge.scss @@ -0,0 +1,11 @@ +.header_container { + display: flex; + align-items: flex-start; + justify-content: space-between; + + .identified-learner { + // Negative margin to set identified user outside the container on the far right + // Equals half of the total margin outside the challenge content + offset + margin-right: calc(((100% - 100vw) / 2) + 45px); + } +} diff --git a/junior/app/styles/components/identified-learner.scss b/junior/app/styles/components/identified-learner.scss new file mode 100644 index 00000000000..ece055dada1 --- /dev/null +++ b/junior/app/styles/components/identified-learner.scss @@ -0,0 +1,30 @@ +.identified-learner { + display: flex; + gap: var(--pix-spacing-3x); + align-items: center; + font-weight: var(--font-medium); + + &__informations { + display: flex; + flex-direction: column; + align-items: end; + + button { + padding: 0; + } + + p { + font-weight: var(--pix-font-bold); + white-space: nowrap; + } + } + + &__icon { + width: 40px; + height: 40px; + padding: var(--pix-spacing-1x); + background-color: var(--pix-primary-300); + border-radius: 50%; + fill: var(--pix-neutral-0); + } +} diff --git a/junior/app/styles/pages/identified/missions/introduction.scss b/junior/app/styles/pages/identified/missions/introduction.scss index dffed4e6233..d6f904d44b1 100644 --- a/junior/app/styles/pages/identified/missions/introduction.scss +++ b/junior/app/styles/pages/identified/missions/introduction.scss @@ -3,6 +3,12 @@ flex-direction: column; align-content: center; + .header_container { + display: flex; + align-items: flex-start; + justify-content: space-between; + } + .button-actions__icon { width: 20px; height: 20px; diff --git a/junior/app/styles/pages/identified/missions/list.scss b/junior/app/styles/pages/identified/missions/list.scss index 539fcaf45b4..8ed16fc3fdd 100644 --- a/junior/app/styles/pages/identified/missions/list.scss +++ b/junior/app/styles/pages/identified/missions/list.scss @@ -34,3 +34,9 @@ } } } + +.header_container { + display: flex; + align-items: flex-start; + justify-content: space-between; +} diff --git a/junior/app/styles/pages/identified/missions/mission.scss b/junior/app/styles/pages/identified/missions/mission.scss index 8a2537b6bfb..b6121af474a 100644 --- a/junior/app/styles/pages/identified/missions/mission.scss +++ b/junior/app/styles/pages/identified/missions/mission.scss @@ -1,6 +1,12 @@ .mission-page { margin-top: 20px; + .header_container { + display: flex; + align-items: flex-start; + justify-content: space-between; + } + &__body { display: flex; margin-top: 16px; diff --git a/junior/app/templates/assessment/results.hbs b/junior/app/templates/assessment/results.hbs index 39f30d8bb2b..8fb89a76ab7 100644 --- a/junior/app/templates/assessment/results.hbs +++ b/junior/app/templates/assessment/results.hbs @@ -1,8 +1,11 @@ {{page-title (t "pages.missions.end-page.title")}}
- - - +
+ + + + +
- - - - - +
+ + + + + +
{{#each this.orderedMissionList as |mission|}} diff --git a/junior/app/templates/identified/missions/mission/index.hbs b/junior/app/templates/identified/missions/mission/index.hbs index f119d76c773..59605f62852 100644 --- a/junior/app/templates/identified/missions/mission/index.hbs +++ b/junior/app/templates/identified/missions/mission/index.hbs @@ -1,8 +1,11 @@ {{page-title (t "pages.missions.start-page.title")}}
- - - +
+ + + + +
- - - +
+ + + + +
+ const missionsList = allButton.filter( + (mission) => !mission.textContent.includes(t('components.login.logout-button')), + ); + assert.strictEqual(missionsList.length, 3); assert.true(missionsList[0].innerHTML.includes('mission_2')); diff --git a/junior/translations/fr.json b/junior/translations/fr.json index 6e1ad1ead89..a7a3f69dcce 100644 --- a/junior/translations/fr.json +++ b/junior/translations/fr.json @@ -26,6 +26,9 @@ }, "title": "Écran dans le mauvais sens" }, + "login": { + "logout-button": "Se déconnecter" + }, "oralization-button": { "label": "Lire la consigne à haute voix", "play": "J'écoute",