[FEATURE] Ajouter un cadre autour des média des épreuves (Pix-12894)

#9278
1024pix · Jun 14, 2024 · ab7e034 · ab7e034
2 parents d9cae7c + a3fb3ab
commit ab7e034
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 22 deletions.
diff --git a/junior/app/pods/components/challenge/challenge-actions/challenge-actions.scss b/junior/app/pods/components/challenge/challenge-actions/challenge-actions.scss
@@ -1,7 +1,7 @@
 .challenge-actions {
   display: flex;
   justify-content: space-between;
-  margin: 16px auto;
+  margin: var(--pix-spacing-8x) auto;
 
   button:only-child {
     margin-left: auto;

diff --git a/junior/app/pods/components/challenge/item/challenge-item.scss b/junior/app/pods/components/challenge/item/challenge-item.scss
@@ -16,6 +16,10 @@
   &__media {
     width: 60%;
     margin-right: var(--pix-spacing-6x);
+    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%);
 
     &--single-display {
       width: unset;
@@ -33,7 +37,6 @@
 
   &__qrocm {
     align-items: center;
-    padding: 20px 20px;
   }
 
   &__qcm, &__qcu {

diff --git a/junior/app/pods/components/challenge/item/component.js b/junior/app/pods/components/challenge/item/component.js
@@ -2,10 +2,10 @@ import Component from '@glimmer/component';
 
 export default class Item extends Component {
   get isMediaWithForm() {
-    return this.args.challenge.hasForm && this.#hasMedia;
+    return this.args.challenge.hasForm && this.hasMedia;
   }
 
-  get #hasMedia() {
+  get hasMedia() {
     return this.args.challenge.illustrationUrl || this.args.challenge.hasValidEmbedDocument;
   }
 }
diff --git a/junior/app/pods/components/challenge/item/template.hbs b/junior/app/pods/components/challenge/item/template.hbs
@@ -1,21 +1,23 @@
 <div class="challenge-item {{unless this.isMediaWithForm 'challenge-item--single-display'}}">
-  <div class="challenge-item__media {{unless this.isMediaWithForm 'challenge-item__media--single-display'}}">
-    {{#if @challenge.illustrationUrl}}
-      <div class="challenge-item__image">
-        <Challenge::ChallengeIllustration @src={{@challenge.illustrationUrl}} @alt={{@challenge.illustrationAlt}} />
-      </div>
-    {{/if}}
-    {{#if @challenge.hasValidEmbedDocument}}
-      <div class="challenge-item__embed">
-        <Challenge::ChallengeEmbedSimulator
-          @url={{@challenge.embedUrl}}
-          @title={{@challenge.embedTitle}}
-          @height={{@challenge.embedHeight}}
-          @hideSimulator={{@isDisabled}}
-        />
-      </div>
-    {{/if}}
-  </div>
+  {{#if this.hasMedia}}
+    <div class="challenge-item__media {{unless this.isMediaWithForm 'challenge-item__media--single-display'}}">
+      {{#if @challenge.illustrationUrl}}
+        <div class="challenge-item__image">
+          <Challenge::ChallengeIllustration @src={{@challenge.illustrationUrl}} @alt={{@challenge.illustrationAlt}} />
+        </div>
+      {{/if}}
+      {{#if @challenge.hasValidEmbedDocument}}
+        <div class="challenge-item__embed">
+          <Challenge::ChallengeEmbedSimulator
+            @url={{@challenge.embedUrl}}
+            @title={{@challenge.embedTitle}}
+            @height={{@challenge.embedHeight}}
+            @hideSimulator={{@isDisabled}}
+          />
+        </div>
+      {{/if}}
+    </div>
+  {{/if}}
   <div class="challenge-item__proposals {{unless this.isMediaWithForm 'challenge-item__proposals--single-display'}}">
     {{#if @challenge.autoReply}}
       <div class="challenge-item__autoreply">

diff --git a/junior/app/styles/app.scss b/junior/app/styles/app.scss
@@ -16,7 +16,7 @@ body {
   font-weight: 600;
   font-family: $font-nunito;
   text-align: center;
-  background: rgb(var(--pix-primary-50) 0.2);
+  background: rgba(236 242 251 / 20%);
 }
 
 b {