[FEATURE] Modification de la position des éléments challenge (PIX-15935)

junior/app/components/card-wrapper.gjs

@@ -0,0 +1,5 @@
+<template>
+  <div class="card-wrapper">
+    {{yield}}
+  </div>
+</template>

junior/app/components/challenge/challenge-content.gjs

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { or } from 'ember-truth-helpers';
 
+import CardWrapper from '../card-wrapper';
 import AutoReply from './content/auto-reply';
 import ChallengeActions from './content/challenge-actions';
 import ChallengeMedia from './content/challenge-media';
@@ -23,94 +24,97 @@ export default class ChallengeContent extends Component {
     });
   }
 
-  get isMediaWithForm() {
+  get shouldDisplayMultipleElements() {
     const challenge = this.args.challenge;
-    return challenge.hasForm && this.hasMedia && challenge.hasType;
+    const hasMediaAndForm = challenge.hasForm && challenge.hasMedia && challenge.hasType;
+    const hasIllustrationAndEmbed = challenge.illustrationUrl && challenge.hasEmbed;
+    const hasIllustrationAndWebComponent = challenge.illustrationUrl && challenge.hasWebComponent;
+    const hasFormAndEmbed = challenge.hasForm && challenge.hasEmbed;
+
+    return hasMediaAndForm || hasIllustrationAndEmbed || hasIllustrationAndWebComponent || hasFormAndEmbed;
   }
 
-  get hasMedia() {
-    return (
-      this.args.challenge.illustrationUrl ||
-      this.args.challenge.hasValidEmbedDocument ||
-      this.args.challenge.hasWebComponent
-    );
+  get challengeContentClassname() {
+    const hasIllustrationAndEmbed = this.args.challenge.illustrationUrl && this.args.challenge.hasEmbed;
+    let classname = '';
+
+    if (this.shouldDisplayMultipleElements) {
+      classname = 'challenge-content__grid-multiple-element';
+
+      if (hasIllustrationAndEmbed) {
+        classname += ' challenge-content__grid-multiple-element--1x-2x';
+      }
+    }
+    return classname;
   }
 
   get shouldDisplayRebootButton() {
     return this.isRebootable && !this.args.isDisabled;
   }
 
   <template>
-    <div class="challenge-content {{unless this.isMediaWithForm 'challenge-content--single-display'}}">
-      {{#if this.hasMedia}}
-        <div class="challenge-content__media {{unless @challenge.hasWebComponent 'challenge-content__media--framed'}}">
-          {{#if @challenge.illustrationUrl}}
-            <ChallengeMedia @src={{@challenge.illustrationUrl}} @alt={{@challenge.illustrationAlt}} />
-          {{/if}}
-          {{#if @challenge.hasValidEmbedDocument}}
-            <EmbeddedSimulator
-              @url={{@challenge.embedUrl}}
-              @title={{@challenge.embedTitle}}
-              @height={{@challenge.embedHeight}}
-              @hideSimulator={{@isDisabled}}
-              @isMediaWithForm={{this.isMediaWithForm}}
-              @shouldDisplayRebootButton={{this.shouldDisplayRebootButton}}
-            />
-          {{/if}}
-          {{#if @challenge.hasWebComponent}}
-            <EmbeddedWebComponent
-              @tagName={{@challenge.webComponentTagName}}
-              @props={{@challenge.webComponentProps}}
-              @setAnswerValue={{@setAnswerValue}}
-            />
-          {{/if}}
-        </div>
+    <div class="challenge-content {{this.challengeContentClassname}}">
+      {{#if @challenge.illustrationUrl}}
+        <CardWrapper>
+          <ChallengeMedia @src={{@challenge.illustrationUrl}} @alt={{@challenge.illustrationAlt}} />
+        </CardWrapper>
+      {{/if}}
+      {{#if @challenge.hasEmbed}}
+        <CardWrapper>
+          <EmbeddedSimulator
+            @url={{@challenge.embedUrl}}
+            @title={{@challenge.embedTitle}}
+            @height={{@challenge.embedHeight}}
+            @hideSimulator={{@isDisabled}}
+            @isMediaWithForm={{this.isMediaWithForm}}
+            @shouldDisplayRebootButton={{this.shouldDisplayRebootButton}}
+          />
+        </CardWrapper>
       {{/if}}
-      <div class="challenge-content__proposals">
-        {{#if @challenge.autoReply}}
-          <div class="challenge-content__autoreply">
-            <AutoReply @setAnswerValue={{@setAnswerValue}} />
-          </div>
-        {{/if}}
-        {{#if (or @challenge.isQROC @challenge.isQROCM)}}
-          <div class="challenge-content__qrocm">
+      {{#if @challenge.hasWebComponent}}
+        <EmbeddedWebComponent
+          @tagName={{@challenge.webComponentTagName}}
+          @props={{@challenge.webComponentProps}}
+          @setAnswerValue={{@setAnswerValue}}
+        />
+      {{/if}}
+      {{#if @challenge.hasForm}}
+        <div class="challenge-content__form">
+          {{#if (or @challenge.isQROC @challenge.isQROCM)}}
             <Qrocm @challenge={{@challenge}} @setAnswerValue={{@setAnswerValue}} @isDisabled={{@isDisabled}} />
-          </div>
-        {{/if}}
-        {{#if @challenge.isQCU}}
-          <div class="challenge-content__qcu">
+          {{else if @challenge.isQCU}}
             <Qcu
               @challenge={{@challenge}}
               @setAnswerValue={{@setAnswerValue}}
               @assessment={{@assessment}}
               @isDisabled={{@isDisabled}}
             />
-          </div>
-        {{/if}}
-        {{#if @challenge.isQCM}}
-          <div class="challenge-content__qcm">
+          {{else if @challenge.isQCM}}
             <Qcm
               @challenge={{@challenge}}
               @setAnswerValue={{@setAnswerValue}}
               @setValidationWarning={{@setValidationWarning}}
               @assessment={{@assessment}}
               @isDisabled={{@isDisabled}}
             />
-          </div>
-        {{/if}}
-        <div class="container__actions">
-          <ChallengeActions
-            @validateAnswer={{@validateAnswer}}
-            @skipChallenge={{@skipChallenge}}
-            @level={{@activity.level}}
-            @nextAction={{@resume}}
-            @isLesson={{@challenge.focused}}
-            @disableCheckButton={{@disableCheckButton}}
-            @disableLessonButton={{@disableLessonButton}}
-            @answerHasBeenValidated={{@answerHasBeenValidated}}
-          />
+          {{/if}}
+        </div>
+      {{/if}}
+      {{#if @challenge.autoReply}}
+        <div class="challenge-content__autoreply">
+          <AutoReply @setAnswerValue={{@setAnswerValue}} />
         </div>
-      </div>
+      {{/if}}
+      <ChallengeActions
+        @validateAnswer={{@validateAnswer}}
+        @skipChallenge={{@skipChallenge}}
+        @level={{@activity.level}}
+        @nextAction={{@resume}}
+        @isLesson={{@challenge.isLesson}}
+        @disableCheckButton={{@disableCheckButton}}
+        @disableLessonButton={{@disableLessonButton}}
+        @answerHasBeenValidated={{@answerHasBeenValidated}}
+      />
     </div>
   </template>
 }

junior/app/components/challenge/challenge.gjs

@@ -36,7 +36,7 @@ export default class Challenge extends Component {
   }
 
   get disableLessonButton() {
-    return this.args.challenge.hasValidEmbedDocument ? this.answerValue === null || this.answerValue === '' : false;
+    return this.args.challenge.hasEmbed ? this.answerValue === null || this.answerValue === '' : false;
   }
 
   get robotMood() {

junior/app/components/challenge/content/challenge-media.gjs

@@ -18,32 +18,34 @@ export default class ChallengeMedia extends Component {
   }
 
   <template>
-    {{#if this.displayPlaceholder}}
-      <div class="challenge-media__placeholder" aria-label="{{t 'pages.challenge.media.placeholder'}}">
-        {{#if (eq @type "video")}}
-          <PixIcon @name="videocam" @ariaHidden={{true}} />
-        {{else}}
-          <PixIcon @name="image" @ariaHidden={{true}} />
-        {{/if}}
-      </div>
-    {{/if}}
-    {{#if (eq @type "video")}}
-      <video
-        controls
-        class="challenge-media__loaded-image {{this.hiddenClass}}"
-        {{on "loadeddata" this.onMediaLoaded}}
-        aria-label="video"
-        src={{@src}}
-      >
-        <track kind="captions" />
-      </video>
-    {{else}}
-      <img
-        src={{@src}}
-        alt={{@alt}}
-        class="challenge-media__loaded-image {{this.hiddenClass}}"
-        {{on "load" this.onMediaLoaded}}
-      />
-    {{/if}}
+    <div>
+      {{#if this.displayPlaceholder}}
+        <div class="challenge-media__placeholder" aria-label="{{t 'pages.challenge.media.placeholder'}}">
+          {{#if (eq @type "video")}}
+            <PixIcon @name="videocam" @ariaHidden={{true}} />
+          {{else}}
+            <PixIcon @name="image" @ariaHidden={{true}} />
+          {{/if}}
+        </div>
+      {{/if}}
+      {{#if (eq @type "video")}}
+        <video
+          controls
+          class="challenge-media__loaded-image {{this.hiddenClass}}"
+          {{on "loadeddata" this.onMediaLoaded}}
+          aria-label="video"
+          src={{@src}}
+        >
+          <track kind="captions" />
+        </video>
+      {{else}}
+        <img
+          src={{@src}}
+          alt={{@alt}}
+          class="challenge-media__loaded-image {{this.hiddenClass}}"
+          {{on "load" this.onMediaLoaded}}
+        />
+      {{/if}}
+    </div>
   </template>
 }

junior/app/models/challenge.js

@@ -33,21 +33,19 @@ export default class Challenge extends Model {
   @hasMany('activity-answer', { async: true, inverse: 'challenge' }) activityAnswers;
 
   @computed('embedHeight', 'embedTitle', 'embedUrl', 'hasWebComponent')
-  get hasValidEmbedDocument() {
+  get hasEmbed() {
     const embedUrl = this.embedUrl;
-    return (
-      !!embedUrl &&
-      !!this.embedTitle &&
-      !!this.embedHeight &&
-      !this.hasWebComponent &&
-      embedUrl.toLowerCase().indexOf('https://') === 0
-    ); // fixes bug on IE: startsWith in not supported (PR #242)
+    return !!embedUrl && !!this.embedTitle && !this.hasWebComponent && embedUrl.toLowerCase().indexOf('https://') === 0; // fixes bug on IE: startsWith in not supported (PR #242)
   }
 
   get hasWebComponent() {
     return !!this.webComponentProps && !!this.webComponentTagName;
   }
 
+  get isLesson() {
+    return !!this.focused;
+  }
+
   get isQROC() {
     return this.autoReply === false && this.type === 'QROC';
   }
@@ -65,10 +63,14 @@ export default class Challenge extends Model {
   }
 
   get hasForm() {
-    return this.autoReply === false;
+    return this.isQROC || this.isQROCM || this.isQCM || this.isQCU;
   }
 
   get hasType() {
     return !!this.type;
   }
+
+  get hasMedia() {
+    return this.illustrationUrl || this.hasEmbed || this.hasWebComponent;
+  }
 }

junior/app/styles/app.scss

@@ -20,6 +20,7 @@
 @import 'components/delayed-element';
 @import 'components/mission-card/card';
 @import 'components/bubble';
+@import 'components/card-wrapper';
 @import 'components/footer';
 @import 'components/issue';
 @import 'components/oralization-button';

junior/app/styles/components/card-wrapper.scss

@@ -0,0 +1,7 @@
+.card-wrapper {
+  height: fit-content;
+  padding: var(--pix-spacing-4x);
+  background-color: var(--pix-neutral-0);
+  border-radius: 24px;
+  box-shadow: 0 0 1px 0 var(--pix-primary-500), 8px 8px 32px -8px rgb(63 125 216 / 35%)
+}

junior/app/styles/components/challenge/challenge-actions.scss

@@ -1,7 +1,7 @@
 .challenge-actions {
   display: flex;
   justify-content: space-between;
-  margin: var(--pix-spacing-8x) auto;
+  height: fit-content;
 
   button:only-child {
     margin-left: auto;

junior/app/styles/components/challenge/challenge-content.scss

@@ -1,43 +1,46 @@
 .challenge-content {
-  display: flex;
-  gap: var(--pix-spacing-6x);
+  display: grid;
+  grid-row-gap: var(--pix-spacing-4x);
+  grid-column-gap: var(--pix-spacing-6x) ;
+  grid-template-columns: 1fr;
   margin: 16px 140px 0;
   transition: all 0.4s;
 
-  @include device-is('tablet') {
-    margin: 16px 120px 0;
-  }
+  &__grid-multiple-element {
+    grid-template-areas:
+    "illu  form"
+    "illu actions";
+    grid-template-columns: 1fr 1fr;
 
-  &--single-display {
-    flex-direction: column;
-  }
+    &--1x-2x {
+      grid-template-columns: 40% 60%;
+    }
 
-  &__media,
-  &__proposals {
-    flex: 1;
-  }
+    div:nth-child(1) {
+      grid-area: illu;
+    }
+
+    div:nth-child(2) {
+      grid-area: form;
+    }
 
-  &__media {
-    &--framed {
-      padding: var(--pix-spacing-4x);
-      background-color: var(--pix-neutral-0);
-      border-radius: 24px;
-      box-shadow: 0 0 1px 0 var(--pix-primary-500), 8px 8px 32px -8px rgb(63 125 216 / 35%);
+    div:nth-child(3) {
+      grid-area: actions;
     }
   }
 
-  &__qrocm {
-    align-items: center;
+  @include device-is('tablet') {
+    margin: 16px 120px 0;
   }
 
-  &__qcm, &__qcu {
+  &__form {
     display: flex;
     justify-content: center;
     width: 100%;
   }
 
   &__autoreply {
-    width: 0;
+    display: none;
   }
 }