wip

Co-authored-by: Dimitri Lahaye <[email protected]>
1024pix · Sep 20, 2024 · 081cd27 · 081cd27
1 parent e2b917f
commit 081cd27
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 23 deletions.
diff --git a/mon-pix/app/components/module/element/flashcards.gjs b/mon-pix/app/components/module/element/flashcards.gjs
@@ -24,23 +24,39 @@ export default class ModulixFlashcards extends Component {
   }
 
   <template>
-    {{#if this.currentCardSide.image}}
-      <img src={{this.currentCardSide.image.url}} />
-    {{/if}}
-    {{this.currentCardSide.text}}
-    {{#if (eq this.state "recto")}}
-      <button {{on "click" this.swipeCard}} type="button">{{t "pages.modulix.buttons.flashcards.seeAnswer"}}</button>
-    {{/if}}
-    {{#if (eq this.state "verso")}}
-      <a href="#" {{on "click" this.swipeCard}}>{{t "pages.modulix.buttons.flashcards.seeAgain"}}</a>
-    {{/if}}
+    <div class="element-flashcards">
+      <div class="element-flashcards__card">
+        {{#if this.currentCardSide.image}}
+          <div class="element-flashcards-card__image">
+            <img src={{this.currentCardSide.image.url}} />
+          </div>
+        {{/if}}
 
-    {{#if (eq this.state "recto")}}
-      <p>{{t "pages.modulix.flashcards.direction"}}</p>
-      <p>{{t "pages.modulix.flashcards.position" currentCardPosition=1 totalCards=1}}</p>
-    {{/if}}
-    {{#if (eq this.state "verso")}}
-      <button type="button">{{t "pages.modulix.buttons.flashcards.nextCard"}}</button>
-    {{/if}}
+        <div class="element-flashcards-card__text">
+          <p>{{this.currentCardSide.text}}</p>
+        </div>
+
+        <div class="element-flashcards-card__footer">
+          {{#if (eq this.state "recto")}}
+            <button {{on "click" this.swipeCard}} type="button">{{t
+                "pages.modulix.buttons.flashcards.seeAnswer"
+              }}</button>
+          {{/if}}
+          {{#if (eq this.state "verso")}}
+            <a href="#" {{on "click" this.swipeCard}}>{{t "pages.modulix.buttons.flashcards.seeAgain"}}</a>
+          {{/if}}
+        </div>
+      </div>
+
+      <div class="element-flashcards__footer">
+        {{#if (eq this.state "recto")}}
+          <p>{{t "pages.modulix.flashcards.direction"}}</p>
+          <p>{{t "pages.modulix.flashcards.position" currentCardPosition=1 totalCards=1}}</p>
+        {{/if}}
+        {{#if (eq this.state "verso")}}
+          <button type="button">{{t "pages.modulix.buttons.flashcards.nextCard"}}</button>
+        {{/if}}
+      </div>
+    </div>
   </template>
 }
diff --git a/mon-pix/app/styles/app.scss b/mon-pix/app/styles/app.scss
@@ -70,6 +70,7 @@ of an adaptative/mobile-first approach — refactoring is welcome here */
 @import 'components/module/stepper';
 @import 'components/module/download';
 @import 'components/module/embed';
+@import 'components/module/flashcards';
 @import 'components/module/image';
 @import 'components/module/qcu';
 @import 'components/module/qcm';

diff --git a/mon-pix/app/styles/components/module/_flashcards.scss b/mon-pix/app/styles/components/module/_flashcards.scss
@@ -0,0 +1,42 @@
+.element-flashcards {
+  &__card{
+    border-radius: 24px;
+    border: 5px solid var(--pix-neutral-100);
+    background: white;
+    box-shadow: 0px 12px 24px 0px rgba(7, 20, 46, 0.12);
+    display: flex;
+    height: 440px;
+    padding: 24px;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  &__footer{
+
+  }
+
+}
+
+.element-flashcards-card{
+  &__image{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      max-height: 250px;
+      height: auto;
+    }
+  }
+  &__text{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 24px;
+    color: var(--pix-neutral-900);
+    text-align: center;
+  }
+
+  &__footer{
+
+  }
+}
diff --git a/mon-pix/tests/integration/components/module/flashcards_test.gjs b/mon-pix/tests/integration/components/module/flashcards_test.gjs
@@ -21,7 +21,7 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
         {
           id: 'e1de6394-ff88-4de3-8834-a40057a50ff4',
           recto: {
-            image: { url: 'https://images.pix.fr/modulix/distinguer-vrai-faux-sur-internet/tweet6.jpg' },
+            image: { url: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg' },
             text: "A quoi sert l'arobase dans mon adresse email ?",
           },
           verso: {
@@ -34,12 +34,13 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
 
     // when
     const screen = await render(<template><ModulixFlashcards @flashcards={{flashcards}} /></template>);
+    await this.pauseTest()
 
     // then
     assert.ok(screen.getByText("A quoi sert l'arobase dans mon adresse email ?"));
     assert.strictEqual(
       screen.getByRole('img').getAttribute('src'),
-      'https://images.pix.fr/modulix/distinguer-vrai-faux-sur-internet/tweet6.jpg',
+      'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg',
     );
     assert.dom(screen.getByRole('button', { name: t('pages.modulix.buttons.flashcards.seeAnswer') })).exists();
     assert.ok(screen.getByText(t('pages.modulix.flashcards.direction')));
@@ -58,7 +59,7 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
         {
           id: 'e1de6394-ff88-4de3-8834-a40057a50ff4',
           recto: {
-            text: 'A quoi shttps://images.pix.fr/modulix/distinguer-vrai-faux-sur-internet/tweet6.jpg?',
+            text: 'A quoi sert l\'arobase dans mon adresse email ?',
           },
           verso: {
             image: { url: 'https://images.pix.fr/modulix/didacticiel/ordi-spatial.svg' },
@@ -87,7 +88,7 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
         {
           id: 'e1de6394-ff88-4de3-8834-a40057a50ff4',
           recto: {
-            image: { url: 'https://images.pix.fr/modulix/distinguer-vrai-faux-sur-internet/tweet6.jpg' },
+            image: { url: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg' },
             text: "A quoi sert l'arobase dans mon adresse email ?",
           },
           verso: {
@@ -119,7 +120,7 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
         {
           id: 'e1de6394-ff88-4de3-8834-a40057a50ff4',
           recto: {
-            image: { url: 'https://images.pix.fr/modulix/distinguer-vrai-faux-sur-internet/tweet6.jpg' },
+            image: { url: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg' },
             text: "A quoi sert l'arobase dans mon adresse email ?",
           },
           verso: {
@@ -150,7 +151,7 @@ module('Integration | Component | Module | Flashcards', function (hooks) {
           {
             id: 'e1de6394-ff88-4de3-8834-a40057a50ff4',
             recto: {
-              image: { url: 'https://images.pix.fr/modulix/distinguer-vrai-faux-sur-internet/tweet6.jpg' },
+              image: { url: 'https://images.pix.fr/modulix/bien-ecrire-son-adresse-mail-explication-les-parties-dune-adresse-mail.svg' },
               text: "A quoi sert l'arobase dans mon adresse email ?",
             },
             verso: {