💄 certif: update table css and add padding on mobile view

1024pix · Dec 4, 2024 · 8575741 · 8575741
1 parent ce7eeae
commit 8575741
Show file tree

Hide file tree

Showing 17 changed files with 221 additions and 232 deletions.
diff --git a/certif/app/components/add-student-list.hbs b/certif/app/components/add-student-list.hbs
@@ -1,6 +1,6 @@
 {{#if @studentList}}
 
-  <div class="add-student-list">
+  <PixBlock class="add-student-list">
     <div class="add-student-list__filters">
       <span>{{t "pages.sco.enrol-candidates-in-session.list.table.filter.title"}}</span>
       <PixMultiSelect
@@ -22,7 +22,7 @@
       <table>
         <thead>
           <tr>
-            <th>
+            <th class="table__column--checkbox">
               <PixCheckbox
                 @screenReaderOnly={{true}}
                 @class="add-student-list__checker"
@@ -34,9 +34,9 @@
                 <:label>{{t "pages.candidates.add.actions.select-all.label"}}</:label>
               </PixCheckbox>
             </th>
-            <th>{{t "pages.sco.enrol-candidates-in-session.list.table.division"}}</th>
-            <th>{{t "pages.sco.enrol-candidates-in-session.list.table.last-name"}}</th>
-            <th>{{t "pages.sco.enrol-candidates-in-session.list.table.first-name"}}</th>
+            <th class="table__column--medium">{{t "pages.sco.enrol-candidates-in-session.list.table.division"}}</th>
+            <th class="table__column--medium">{{t "pages.sco.enrol-candidates-in-session.list.table.last-name"}}</th>
+            <th class="table__column--medium">{{t "pages.sco.enrol-candidates-in-session.list.table.first-name"}}</th>
             <th class="add-student-list__column-birthdate">
               {{t "pages.sco.enrol-candidates-in-session.list.table.birthdate"}}
             </th>
@@ -46,7 +46,7 @@
           {{#each @studentList as |student|}}
             {{#if student.isEnrolled}}
               <tr class="add-student-list__row add-student-list__row--disabled">
-                <td class="add-student-list__column-checkbox">
+                <td>
                   <PixCheckbox @screenReaderOnly={{true}} @class="add-student-list__checker" @checked={{true}} disabled>
                     <:label>
                       {{t
@@ -60,11 +60,11 @@
                 <td>{{student.division}}</td>
                 <td>{{student.lastName}}</td>
                 <td>{{student.firstName}}</td>
-                <td class="add-student-list__column-birthdate">{{dayjs-format student.birthdate "DD/MM/YYYY"}}</td>
+                <td>{{dayjs-format student.birthdate "DD/MM/YYYY"}}</td>
               </tr>
             {{else}}
               <tr class="add-student-list__row" {{on "click" (fn this.toggleItem student)}}>
-                <td class="add-student-list__column-checkbox">
+                <td>
                   <PixCheckbox @screenReaderOnly={{true}} @checked={{student.isSelected}}>
                     <:label>
                       {{t
@@ -85,47 +85,47 @@
         </tbody>
       </table>
     </div>
+  </PixBlock>
 
-    <PixPagination @pagination={{@studentList.meta}} />
+  <PixPagination @pagination={{@studentList.meta}} />
 
-    {{#if this.showStickyBar}}
-      <div class="add-student-list__bottom-action-bar">
+  {{#if this.showStickyBar}}
+    <div class="add-student-list__bottom-action-bar">
 
-        <div class="bottom-action-bar__informations">
-          <p class="bottom-action-bar__informations--candidates-selected">
-            {{#if this.numberOfStudentsSelected}}
-              {{this.numberOfStudentsSelected}}
-              {{t "pages.sco.enrol-candidates-in-session.list.action-bar.candidate-selected"}}
-            {{else}}
-              {{t "pages.sco.enrol-candidates-in-session.list.action-bar.no-candidate-selected"}}
-            {{/if}}
-          </p>
-          <span class="bottom-action-bar__seperator"></span>
-          <p class="bottom-action-bar__informations--candidates-already-added">
-            {{this.numberOfStudentsAlreadyCandidate}}
-            {{t "pages.sco.enrol-candidates-in-session.list.action-bar.candidate-already-enrolled"}}
-          </p>
-        </div>
+      <div class="bottom-action-bar__information">
+        <p class="bottom-action-bar__information--candidates-selected">
+          {{#if this.numberOfStudentsSelected}}
+            {{this.numberOfStudentsSelected}}
+            {{t "pages.sco.enrol-candidates-in-session.list.action-bar.candidate-selected"}}
+          {{else}}
+            {{t "pages.sco.enrol-candidates-in-session.list.action-bar.no-candidate-selected"}}
+          {{/if}}
+        </p>
+        <span class="bottom-action-bar__separator"></span>
+        <p class="bottom-action-bar__information--candidates-already-added">
+          {{this.numberOfStudentsAlreadyCandidate}}
+          {{t "pages.sco.enrol-candidates-in-session.list.action-bar.candidate-already-enrolled"}}
+        </p>
+      </div>
 
-        <div class="bottom-action-bar__actions">
-          <PixButtonLink
-            @variant="secondary"
-            @isBorderVisible={{true}}
-            @route="authenticated.sessions.details.certification-candidates"
-            @model={{@session.id}}
-          >
-            {{t "common.actions.cancel"}}
-          </PixButtonLink>
-          <PixButton
-            @triggerAction={{this.enrolStudents}}
-            type="button"
-            @isDisabled={{this.shouldDisableAddButton}}
-            class="bottom-action-bar__actions--add-button"
-          >
-            Inscrire
-          </PixButton>
-        </div>
+      <div class="bottom-action-bar__actions">
+        <PixButtonLink
+          @variant="secondary"
+          @isBorderVisible={{true}}
+          @route="authenticated.sessions.details.certification-candidates"
+          @model={{@session.id}}
+        >
+          {{t "common.actions.cancel"}}
+        </PixButtonLink>
+        <PixButton
+          @triggerAction={{this.enrolStudents}}
+          type="button"
+          @isDisabled={{this.shouldDisableAddButton}}
+          class="bottom-action-bar__actions--add-button"
+        >
+          Inscrire
+        </PixButton>
       </div>
-    {{/if}}
-  </div>
+    </div>
+  {{/if}}
 {{/if}}
diff --git a/certif/app/components/layout/banners.gjs b/certif/app/components/layout/banners.gjs
@@ -42,6 +42,7 @@ export default class Banners extends Component {
         @actionLabel={{t 'pages.sco.banner.url-label'}}
         @actionUrl={{ACTION_URL_FOR_INFORMATION_BANNER}}
         @canCloseBanner='true'
+        class='banners'
       >
         {{t 'pages.sco.banner.information'}}
       </PixBannerAlert>
@@ -52,6 +53,7 @@ export default class Banners extends Component {
         @type='information'
         @canCloseBanner='true'
         @onCloseBannerTriggerAction={{this.closeLocaleNotSupportedBanner}}
+        class='banners'
       >
         {{t 'banners.language-availability.message'}}
       </PixBannerAlert>

diff --git a/certif/app/components/members-list.hbs b/certif/app/components/members-list.hbs
@@ -1,6 +1,6 @@
 <div role="tabpanel">
   <div class="panel">
-    <div class="table content-text content-text--small">
+    <div class="table content-text--small">
       <table>
         <thead>
           <tr>

diff --git a/certif/app/components/sessions/session-details/enrolled-candidates/index.gjs b/certif/app/components/sessions/session-details/enrolled-candidates/index.gjs
@@ -347,7 +347,7 @@ export default class EnrolledCandidates extends Component {
           </PixButton>
         {{/if}}
       </div>
-      <div class='table content-text content-text--small certification-candidates-table'>
+      <div class='table content-text--small certification-candidates-table'>
         {{#if (or @certificationCandidates this.candidatesInStaging)}}
           <table>
             <caption class='screen-reader-only'>

diff --git a/certif/app/components/sessions/session-list.gjs b/certif/app/components/sessions/session-list.gjs
@@ -1,3 +1,4 @@
+import PixBlock from '@1024pix/pix-ui/components/pix-block';
 import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
@@ -78,65 +79,63 @@ export default class SessionList extends Component {
   }
 
   <template>
-    <div class='table--with-row-clickable session-summary-list' role='tabpanel'>
-      <div class='panel'>
-        <div class='table content-text content-text--small'>
-          <table>
-            <thead>
-              <tr>
-                <th class='table__column table__column--small' scope='col'>
-                  {{t 'common.forms.session-labels.session-number'}}
-                </th>
-                <th class='table__column table__column--small' scope='col'>
-                  {{t 'common.forms.session-labels.center-name'}}
-                </th>
-                <th class='table__column table__column--small' scope='col'>
-                  {{t 'common.forms.session-labels.room'}}
-                </th>
-                <th class='table__column table__column--small' scope='col'>
-                  {{t 'common.forms.session-labels.date'}}
-                </th>
-                <th class='table__column table__column--small' scope='col'>
-                  {{t 'common.forms.session-labels.time'}}
-                </th>
-                <th class='table__column table__column--small' scope='col'>
-                  {{t 'common.forms.session-labels.invigilator'}}
-                </th>
-                <th class='table__column table__column' scope='col'>
-                  {{t 'pages.sessions.list.table.header.enrolled-candidates'}}
-                </th>
-                <th class='table__column table__column' scope='col'>
-                  {{t 'pages.sessions.list.table.header.effective-candidates'}}
-                </th>
-                <th class='table__column table__column--small' scope='col'>
-                  {{t 'common.forms.session-labels.status'}}
-                </th>
-                <th class='table__column table__column--small' scope='col'>
-                  <span class='screen-reader-only'>
-                    {{t 'pages.sessions.list.table.header.actions'}}
-                  </span>
-                </th>
-              </tr>
-            </thead>
+    <PixBlock class='table--with-row-clickable' role='tabpanel'>
+      <div class='table content-text--small'>
+        <table>
+          <thead>
+            <tr>
+              <th class='table__column--small' scope='col'>
+                {{t 'common.forms.session-labels.session-number'}}
+              </th>
+              <th class='table__column--medium' scope='col'>
+                {{t 'common.forms.session-labels.center-name'}}
+              </th>
+              <th class='table__column--small' scope='col'>
+                {{t 'common.forms.session-labels.room'}}
+              </th>
+              <th class='table__column--small' scope='col'>
+                {{t 'common.forms.session-labels.date'}}
+              </th>
+              <th class='table__column--small' scope='col'>
+                {{t 'common.forms.session-labels.time'}}
+              </th>
+              <th class='table__column--small' scope='col'>
+                {{t 'common.forms.session-labels.invigilator'}}
+              </th>
+              <th class='table__column--small' scope='col'>
+                {{t 'pages.sessions.list.table.header.enrolled-candidates'}}
+              </th>
+              <th class='table__column--medium' scope='col'>
+                {{t 'pages.sessions.list.table.header.effective-candidates'}}
+              </th>
+              <th class='table__column--medium' scope='col'>
+                {{t 'common.forms.session-labels.status'}}
+              </th>
+              <th class='table__column--small' scope='col'>
+                <span class='screen-reader-only'>
+                  {{t 'pages.sessions.list.table.header.actions'}}
+                </span>
+              </th>
+            </tr>
+          </thead>
 
-            <tbody>
-              {{#each @sessionSummaries as |sessionSummary|}}
-                <SessionListRow
-                  @sessionSummary={{sessionSummary}}
-                  @goToSessionDetails={{@goToSessionDetails}}
-                  @openSessionDeletionConfirmModal={{this.openSessionDeletionConfirmModal}}
-                />
-              {{/each}}
-            </tbody>
-          </table>
-          {{#if (eq @sessionSummaries.length 0)}}
-            <div class='table__empty content-text'>
-              {{t 'pages.sessions.list.table.empty'}}
-            </div>
-          {{/if}}
-        </div>
+          <tbody>
+            {{#each @sessionSummaries as |sessionSummary|}}
+              <SessionListRow
+                @sessionSummary={{sessionSummary}}
+                @goToSessionDetails={{@goToSessionDetails}}
+                @openSessionDeletionConfirmModal={{this.openSessionDeletionConfirmModal}}
+              />
+            {{/each}}
+          </tbody>
+        </table>
+        {{#if (eq @sessionSummaries.length 0)}}
+          <div class='table__empty content-text'>
+            {{t 'pages.sessions.list.table.empty'}}
+          </div>
+        {{/if}}
       </div>
-    </div>
+    </PixBlock>
 
     <PixPagination @pagination={{@sessionSummaries.meta}} @locale={{this.currentLocale}} />
 

diff --git a/certif/app/components/team/invitations-list.hbs b/certif/app/components/team/invitations-list.hbs
@@ -1,4 +1,4 @@
-<div class="panel table content-text content-text--small">
+<div class="panel table content-text--small">
   <table>
     <thead>
       <tr>

diff --git a/certif/app/styles/app.scss b/certif/app/styles/app.scss
@@ -36,6 +36,7 @@ $navbar-height: 60px;
 @import 'components/issue-report-modal';
 @import 'components/layout/footer';
 @import 'components/layout/sidebar';
+@import 'components/layout/banners';
 @import 'components/login-form';
 @import 'components/login-or-register';
 @import 'components/finalize';
@@ -84,3 +85,9 @@ input:invalid {
 * {
   box-sizing: border-box;
 }
+
+@include device-is('mobile') {
+  .hide-on-mobile {
+    display: none;
+  }
+}