[BUGFIX] Ajouter une bordure de fond sur le page de résultat individu…

…el dans PixOrga (PIX-3522) #10623
1024pix · Nov 25, 2024 · 705dbf3 · 705dbf3
2 parents 9955f78 + 46f4aa8
commit 705dbf3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 47 deletions.
diff --git a/orga/app/components/campaign/analysis/recommendations.gjs b/orga/app/components/campaign/analysis/recommendations.gjs
@@ -1,3 +1,4 @@
+import PixBlock from '@1024pix/pix-ui/components/pix-block';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { htmlSafe } from '@ember/template';
@@ -62,50 +63,49 @@ export default class Recommendations extends Component {
         {{this.description}}
       </p>
 
-      <table
-        class="panel panel--light-shadow content-text content-text--small campaign-details-analysis__table"
-        aria-label={{t "pages.campaign-review.table.analysis.title"}}
-      >
-        <caption class="screen-reader-only">{{t "pages.campaign-review.table.analysis.caption"}}</caption>
-        <thead>
-          <tr>
-            <TableHeader @size="wide">{{t
-                "pages.campaign-review.table.analysis.column.subjects"
-                count=this.sortedRecommendations.length
-              }}
-            </TableHeader>
-            <TableHeaderSort
-              @size="small"
-              @align="center"
-              @order={{this.order}}
-              @onSort={{this.sortRecommendationOrder}}
-              @isDisabled={{not @displayAnalysis}}
-              @ariaLabelDefaultSort={{t "pages.campaign-review.table.analysis.column.relevance.ariaLabelDefaultSort"}}
-              @ariaLabelSortUp={{t "pages.campaign-review.table.analysis.column.relevance.ariaLabelSortUp"}}
-              @ariaLabelSortDown={{t "pages.campaign-review.table.analysis.column.relevance.ariaLabelSortDown"}}
-            >
-              {{t "pages.campaign-review.table.analysis.column.relevance.label"}}
-            </TableHeaderSort>
-            <TableHeader
-              @size="small"
-              @align="center"
-              aria-label="{{t 'pages.campaign-review.table.analysis.column.tutorial-count.aria-label'}}"
-            />
-            <TableHeader @size="small" />
-          </tr>
-        </thead>
+      <PixBlock>
+        <table aria-label={{t "pages.campaign-review.table.analysis.title"}}>
+          <caption class="screen-reader-only">{{t "pages.campaign-review.table.analysis.caption"}}</caption>
+          <thead>
+            <tr>
+              <TableHeader @size="wide">{{t
+                  "pages.campaign-review.table.analysis.column.subjects"
+                  count=this.sortedRecommendations.length
+                }}
+              </TableHeader>
+              <TableHeaderSort
+                @size="small"
+                @align="center"
+                @order={{this.order}}
+                @onSort={{this.sortRecommendationOrder}}
+                @isDisabled={{not @displayAnalysis}}
+                @ariaLabelDefaultSort={{t "pages.campaign-review.table.analysis.column.relevance.ariaLabelDefaultSort"}}
+                @ariaLabelSortUp={{t "pages.campaign-review.table.analysis.column.relevance.ariaLabelSortUp"}}
+                @ariaLabelSortDown={{t "pages.campaign-review.table.analysis.column.relevance.ariaLabelSortDown"}}
+              >
+                {{t "pages.campaign-review.table.analysis.column.relevance.label"}}
+              </TableHeaderSort>
+              <TableHeader
+                @size="small"
+                @align="center"
+                aria-label="{{t 'pages.campaign-review.table.analysis.column.tutorial-count.aria-label'}}"
+              />
+              <TableHeader @size="small" />
+            </tr>
+          </thead>
 
-        {{#if @displayAnalysis}}
-          <tbody>
-            {{#each this.sortedRecommendations as |tubeRecommendation|}}
-              <TubeRecommendationRow @tubeRecommendation={{tubeRecommendation}} />
-            {{/each}}
-          </tbody>
-        {{/if}}
-      </table>
-      {{#unless @displayAnalysis}}
-        <div class="table__empty content-text">{{t "pages.campaign-review.table.empty"}}</div>
-      {{/unless}}
+          {{#if @displayAnalysis}}
+            <tbody>
+              {{#each this.sortedRecommendations as |tubeRecommendation|}}
+                <TubeRecommendationRow @tubeRecommendation={{tubeRecommendation}} />
+              {{/each}}
+            </tbody>
+          {{/if}}
+        </table>
+        {{#unless @displayAnalysis}}
+          <div class="table__empty content-text">{{t "pages.campaign-review.table.empty"}}</div>
+        {{/unless}}
+      </PixBlock>
     </section>
   </template>
 }
diff --git a/orga/app/styles/components/campaign/analysis/recommendations.scss b/orga/app/styles/components/campaign/analysis/recommendations.scss
@@ -13,10 +13,6 @@
     font-family: $font-roboto;
     line-height: 1.375rem;
   }
-
-  &__table {
-    margin-bottom: 20px;
-  }
 }
 
 .campaign-details-analysis-section {