[FEATURE] Amélioration de l'affichage de la fiche pédagogique (PIX-15487

)

 #10806

orga/app/components/mission/details.gjs

@@ -1,4 +1,5 @@
 import PixButtonLink from '@1024pix/pix-ui/components/pix-button-link';
+import PixIcon from '@1024pix/pix-ui/components/pix-icon';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { t } from 'ember-intl';
@@ -37,7 +38,9 @@ export default class MissionDetails extends Component {
             @href={{@mission.documentationUrl}}
             target="_blank "
           >
-            {{t "pages.missions.mission.details.button-label"}}</PixButtonLink>
+            <PixIcon @name="openNew" />
+            {{t "pages.missions.mission.details.button-label"}}
+          </PixButtonLink>
         {{/if}}
       </div>
 

orga/app/components/mission/navigation.gjs

@@ -2,19 +2,12 @@ import { LinkTo } from '@ember/routing';
 import { t } from 'ember-intl';
 
 <template>
-  <nav class="panel navbar campaign-list-header__tabs" aria-label={{t "pages.missions.mission.tabs.aria-label"}}>
-    <ul>
-      <li>
-        <LinkTo @route="authenticated.missions.mission.activities" class="navbar-item">
-          {{t "pages.missions.mission.tabs.activities"}}
-        </LinkTo>
-      </li>
-
-      <li>
-        <LinkTo @route="authenticated.missions.mission.results" class="navbar-item">
-          {{t "pages.missions.mission.tabs.results"}}
-        </LinkTo>
-      </li>
-    </ul>
+  <nav class="mission-navigation__tabs" aria-label={{t "pages.missions.mission.tabs.aria-label"}}>
+    <LinkTo @route="authenticated.missions.mission.activities" class="navbar-item">
+      {{t "pages.missions.mission.tabs.activities"}}
+    </LinkTo>
+    <LinkTo @route="authenticated.missions.mission.results" class="navbar-item">
+      {{t "pages.missions.mission.tabs.results"}}
+    </LinkTo>
   </nav>
 </template>

orga/app/styles/app.scss

@@ -33,6 +33,7 @@
 @import 'components/layout/sidebar';
 @import 'components/layout/topbar';
 @import 'components/layout/user-logged-menu';
+@import 'components/mission/navigation';
 @import 'components/mission/result-table';
 @import 'components/organization-learner';
 @import 'components/pagination-control';

orga/app/styles/components/campaign/list-header.scss

@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    
+
     @include device-is('tablet') {
       flex-direction: row;
       margin: 1em 0 2.4em;
@@ -34,7 +34,7 @@
 
     .navbar-item {
       height: 100%;
-    }    
+    }
 
     @include device-is('tablet') {
       ul li {

orga/app/styles/components/mission/navigation.scss

@@ -0,0 +1,25 @@
+.mission-navigation {
+  &__tabs {
+    display: flex;
+    gap: 8px;
+    width: fit-content;
+    margin-bottom: 20px;
+    padding: var(--pix-spacing-2x);
+    background-color: var(--pix-neutral-0);
+    border-radius: 8px;
+
+    .navbar-item {
+      padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
+      font-weight: var(--pix-font-normal);
+      border-bottom: none;
+      border-radius: 8px;
+
+      &.active {
+        color: inherit;
+        font-weight: var(--pix-font-medium);
+        background: var(--pix-orga-50);
+        border-bottom: none;
+      }
+    }
+  }
+}

orga/app/styles/pages/authenticated/mission.scss

@@ -68,6 +68,8 @@
     }
 
     &__documentation-button {
+      display: flex;
+      gap: var(--pix-spacing-4x);
       width: fit-content;
       margin: var(--pix-spacing-4x);
     }
@@ -77,19 +79,16 @@
 .mission-header-objectives {
   @extend %pix-body-l;
 
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: var(--pix-spacing-8x);
   margin-top: var(--pix-spacing-8x);
 
   h2 {
     margin-bottom: var(--pix-spacing-4x);
     text-decoration: underline;
   }
 
-  &__competence {
-    margin-left: 100px;
-  }
-
   &__list {
     margin-top: var(--pix-spacing-2x);
     margin-left: var(--pix-spacing-6x);

orga/translations/en.json

@@ -959,7 +959,7 @@
       "mission": {
         "title": "Mission's information",
         "details": {
-          "button-label": "View the mission documentation",
+          "button-label": "See the educational sheet",
           "competence": {
             "title": "Targeted DigComp competence :"
           },

orga/translations/fr.json

@@ -965,7 +965,7 @@
       "mission": {
         "title": "Détails d'une mission",
         "details": {
-          "button-label": "Voir la fiche mission",
+          "button-label": "Voir la fiche pédagogique",
           "competence": {
             "title": "Compétence du CRCN travaillée :"
           },

orga/translations/nl.json

@@ -957,7 +957,7 @@
       },
       "mission": {
         "details": {
-          "button-label": "Bekijk de functieomschrijving",
+          "button-label": "Bekijk het educatieve blad",
           "competence": {
             "title": "Vaardigheden waaraan is gewerkt :"
           },