Skip to content

Commit 8575741

Browse files
AndreiaPenaAndreiaPena
committed
💄 certif: update table css and add padding on mobile view
1 parent ce7eeae commit 8575741

File tree

17 files changed

+221
-232
lines changed

17 files changed

+221
-232
lines changed

‎certif/app/components/add-student-list.hbs

+46-46
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{#if @studentList}}
22

3-
<div class="add-student-list">
3+
<PixBlock class="add-student-list">
44
<div class="add-student-list__filters">
55
<span>{{t "pages.sco.enrol-candidates-in-session.list.table.filter.title"}}</span>
66
<PixMultiSelect
@@ -22,7 +22,7 @@
2222
<table>
2323
<thead>
2424
<tr>
25-
<th>
25+
<th class="table__column--checkbox">
2626
<PixCheckbox
2727
@screenReaderOnly={{true}}
2828
@class="add-student-list__checker"
@@ -34,9 +34,9 @@
3434
<:label>{{t "pages.candidates.add.actions.select-all.label"}}</:label>
3535
</PixCheckbox>
3636
</th>
37-
<th>{{t "pages.sco.enrol-candidates-in-session.list.table.division"}}</th>
38-
<th>{{t "pages.sco.enrol-candidates-in-session.list.table.last-name"}}</th>
39-
<th>{{t "pages.sco.enrol-candidates-in-session.list.table.first-name"}}</th>
37+
<th class="table__column--medium">{{t "pages.sco.enrol-candidates-in-session.list.table.division"}}</th>
38+
<th class="table__column--medium">{{t "pages.sco.enrol-candidates-in-session.list.table.last-name"}}</th>
39+
<th class="table__column--medium">{{t "pages.sco.enrol-candidates-in-session.list.table.first-name"}}</th>
4040
<th class="add-student-list__column-birthdate">
4141
{{t "pages.sco.enrol-candidates-in-session.list.table.birthdate"}}
4242
</th>
@@ -46,7 +46,7 @@
4646
{{#each @studentList as |student|}}
4747
{{#if student.isEnrolled}}
4848
<tr class="add-student-list__row add-student-list__row--disabled">
49-
<td class="add-student-list__column-checkbox">
49+
<td>
5050
<PixCheckbox @screenReaderOnly={{true}} @class="add-student-list__checker" @checked={{true}} disabled>
5151
<:label>
5252
{{t
@@ -60,11 +60,11 @@
6060
<td>{{student.division}}</td>
6161
<td>{{student.lastName}}</td>
6262
<td>{{student.firstName}}</td>
63-
<td class="add-student-list__column-birthdate">{{dayjs-format student.birthdate "DD/MM/YYYY"}}</td>
63+
<td>{{dayjs-format student.birthdate "DD/MM/YYYY"}}</td>
6464
</tr>
6565
{{else}}
6666
<tr class="add-student-list__row" {{on "click" (fn this.toggleItem student)}}>
67-
<td class="add-student-list__column-checkbox">
67+
<td>
6868
<PixCheckbox @screenReaderOnly={{true}} @checked={{student.isSelected}}>
6969
<:label>
7070
{{t
@@ -85,47 +85,47 @@
8585
</tbody>
8686
</table>
8787
</div>
88+
</PixBlock>
8889

89-
<PixPagination @pagination={{@studentList.meta}} />
90+
<PixPagination @pagination={{@studentList.meta}} />
9091

91-
{{#if this.showStickyBar}}
92-
<div class="add-student-list__bottom-action-bar">
92+
{{#if this.showStickyBar}}
93+
<div class="add-student-list__bottom-action-bar">
9394

94-
<div class="bottom-action-bar__informations">
95-
<p class="bottom-action-bar__informations--candidates-selected">
96-
{{#if this.numberOfStudentsSelected}}
97-
{{this.numberOfStudentsSelected}}
98-
{{t "pages.sco.enrol-candidates-in-session.list.action-bar.candidate-selected"}}
99-
{{else}}
100-
{{t "pages.sco.enrol-candidates-in-session.list.action-bar.no-candidate-selected"}}
101-
{{/if}}
102-
</p>
103-
<span class="bottom-action-bar__seperator"></span>
104-
<p class="bottom-action-bar__informations--candidates-already-added">
105-
{{this.numberOfStudentsAlreadyCandidate}}
106-
{{t "pages.sco.enrol-candidates-in-session.list.action-bar.candidate-already-enrolled"}}
107-
</p>
108-
</div>
95+
<div class="bottom-action-bar__information">
96+
<p class="bottom-action-bar__information--candidates-selected">
97+
{{#if this.numberOfStudentsSelected}}
98+
{{this.numberOfStudentsSelected}}
99+
{{t "pages.sco.enrol-candidates-in-session.list.action-bar.candidate-selected"}}
100+
{{else}}
101+
{{t "pages.sco.enrol-candidates-in-session.list.action-bar.no-candidate-selected"}}
102+
{{/if}}
103+
</p>
104+
<span class="bottom-action-bar__separator"></span>
105+
<p class="bottom-action-bar__information--candidates-already-added">
106+
{{this.numberOfStudentsAlreadyCandidate}}
107+
{{t "pages.sco.enrol-candidates-in-session.list.action-bar.candidate-already-enrolled"}}
108+
</p>
109+
</div>
109110

110-
<div class="bottom-action-bar__actions">
111-
<PixButtonLink
112-
@variant="secondary"
113-
@isBorderVisible={{true}}
114-
@route="authenticated.sessions.details.certification-candidates"
115-
@model={{@session.id}}
116-
>
117-
{{t "common.actions.cancel"}}
118-
</PixButtonLink>
119-
<PixButton
120-
@triggerAction={{this.enrolStudents}}
121-
type="button"
122-
@isDisabled={{this.shouldDisableAddButton}}
123-
class="bottom-action-bar__actions--add-button"
124-
>
125-
Inscrire
126-
</PixButton>
127-
</div>
111+
<div class="bottom-action-bar__actions">
112+
<PixButtonLink
113+
@variant="secondary"
114+
@isBorderVisible={{true}}
115+
@route="authenticated.sessions.details.certification-candidates"
116+
@model={{@session.id}}
117+
>
118+
{{t "common.actions.cancel"}}
119+
</PixButtonLink>
120+
<PixButton
121+
@triggerAction={{this.enrolStudents}}
122+
type="button"
123+
@isDisabled={{this.shouldDisableAddButton}}
124+
class="bottom-action-bar__actions--add-button"
125+
>
126+
Inscrire
127+
</PixButton>
128128
</div>
129-
{{/if}}
130-
</div>
129+
</div>
130+
{{/if}}
131131
{{/if}}

‎certif/app/components/layout/banners.gjs

+2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export default class Banners extends Component {
4242
@actionLabel={{t 'pages.sco.banner.url-label'}}
4343
@actionUrl={{ACTION_URL_FOR_INFORMATION_BANNER}}
4444
@canCloseBanner='true'
45+
class='banners'
4546
>
4647
{{t 'pages.sco.banner.information'}}
4748
</PixBannerAlert>
@@ -52,6 +53,7 @@ export default class Banners extends Component {
5253
@type='information'
5354
@canCloseBanner='true'
5455
@onCloseBannerTriggerAction={{this.closeLocaleNotSupportedBanner}}
56+
class='banners'
5557
>
5658
{{t 'banners.language-availability.message'}}
5759
</PixBannerAlert>

‎certif/app/components/members-list.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div role="tabpanel">
22
<div class="panel">
3-
<div class="table content-text content-text--small">
3+
<div class="table content-text--small">
44
<table>
55
<thead>
66
<tr>

‎certif/app/components/sessions/session-details/enrolled-candidates/index.gjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,7 @@ export default class EnrolledCandidates extends Component {
347347
</PixButton>
348348
{{/if}}
349349
</div>
350-
<div class='table content-text content-text--small certification-candidates-table'>
350+
<div class='table content-text--small certification-candidates-table'>
351351
{{#if (or @certificationCandidates this.candidatesInStaging)}}
352352
<table>
353353
<caption class='screen-reader-only'>

‎certif/app/components/sessions/session-list.gjs

+56-57
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import PixBlock from '@1024pix/pix-ui/components/pix-block';
12
import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
23
import { action } from '@ember/object';
34
import { service } from '@ember/service';
@@ -78,65 +79,63 @@ export default class SessionList extends Component {
7879
}
7980

8081
<template>
81-
<div class='table--with-row-clickable session-summary-list' role='tabpanel'>
82-
<div class='panel'>
83-
<div class='table content-text content-text--small'>
84-
<table>
85-
<thead>
86-
<tr>
87-
<th class='table__column table__column--small' scope='col'>
88-
{{t 'common.forms.session-labels.session-number'}}
89-
</th>
90-
<th class='table__column table__column--small' scope='col'>
91-
{{t 'common.forms.session-labels.center-name'}}
92-
</th>
93-
<th class='table__column table__column--small' scope='col'>
94-
{{t 'common.forms.session-labels.room'}}
95-
</th>
96-
<th class='table__column table__column--small' scope='col'>
97-
{{t 'common.forms.session-labels.date'}}
98-
</th>
99-
<th class='table__column table__column--small' scope='col'>
100-
{{t 'common.forms.session-labels.time'}}
101-
</th>
102-
<th class='table__column table__column--small' scope='col'>
103-
{{t 'common.forms.session-labels.invigilator'}}
104-
</th>
105-
<th class='table__column table__column' scope='col'>
106-
{{t 'pages.sessions.list.table.header.enrolled-candidates'}}
107-
</th>
108-
<th class='table__column table__column' scope='col'>
109-
{{t 'pages.sessions.list.table.header.effective-candidates'}}
110-
</th>
111-
<th class='table__column table__column--small' scope='col'>
112-
{{t 'common.forms.session-labels.status'}}
113-
</th>
114-
<th class='table__column table__column--small' scope='col'>
115-
<span class='screen-reader-only'>
116-
{{t 'pages.sessions.list.table.header.actions'}}
117-
</span>
118-
</th>
119-
</tr>
120-
</thead>
82+
<PixBlock class='table--with-row-clickable' role='tabpanel'>
83+
<div class='table content-text--small'>
84+
<table>
85+
<thead>
86+
<tr>
87+
<th class='table__column--small' scope='col'>
88+
{{t 'common.forms.session-labels.session-number'}}
89+
</th>
90+
<th class='table__column--medium' scope='col'>
91+
{{t 'common.forms.session-labels.center-name'}}
92+
</th>
93+
<th class='table__column--small' scope='col'>
94+
{{t 'common.forms.session-labels.room'}}
95+
</th>
96+
<th class='table__column--small' scope='col'>
97+
{{t 'common.forms.session-labels.date'}}
98+
</th>
99+
<th class='table__column--small' scope='col'>
100+
{{t 'common.forms.session-labels.time'}}
101+
</th>
102+
<th class='table__column--small' scope='col'>
103+
{{t 'common.forms.session-labels.invigilator'}}
104+
</th>
105+
<th class='table__column--small' scope='col'>
106+
{{t 'pages.sessions.list.table.header.enrolled-candidates'}}
107+
</th>
108+
<th class='table__column--medium' scope='col'>
109+
{{t 'pages.sessions.list.table.header.effective-candidates'}}
110+
</th>
111+
<th class='table__column--medium' scope='col'>
112+
{{t 'common.forms.session-labels.status'}}
113+
</th>
114+
<th class='table__column--small' scope='col'>
115+
<span class='screen-reader-only'>
116+
{{t 'pages.sessions.list.table.header.actions'}}
117+
</span>
118+
</th>
119+
</tr>
120+
</thead>
121121

122-
<tbody>
123-
{{#each @sessionSummaries as |sessionSummary|}}
124-
<SessionListRow
125-
@sessionSummary={{sessionSummary}}
126-
@goToSessionDetails={{@goToSessionDetails}}
127-
@openSessionDeletionConfirmModal={{this.openSessionDeletionConfirmModal}}
128-
/>
129-
{{/each}}
130-
</tbody>
131-
</table>
132-
{{#if (eq @sessionSummaries.length 0)}}
133-
<div class='table__empty content-text'>
134-
{{t 'pages.sessions.list.table.empty'}}
135-
</div>
136-
{{/if}}
137-
</div>
122+
<tbody>
123+
{{#each @sessionSummaries as |sessionSummary|}}
124+
<SessionListRow
125+
@sessionSummary={{sessionSummary}}
126+
@goToSessionDetails={{@goToSessionDetails}}
127+
@openSessionDeletionConfirmModal={{this.openSessionDeletionConfirmModal}}
128+
/>
129+
{{/each}}
130+
</tbody>
131+
</table>
132+
{{#if (eq @sessionSummaries.length 0)}}
133+
<div class='table__empty content-text'>
134+
{{t 'pages.sessions.list.table.empty'}}
135+
</div>
136+
{{/if}}
138137
</div>
139-
</div>
138+
</PixBlock>
140139

141140
<PixPagination @pagination={{@sessionSummaries.meta}} @locale={{this.currentLocale}} />
142141

‎certif/app/components/team/invitations-list.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="panel table content-text content-text--small">
1+
<div class="panel table content-text--small">
22
<table>
33
<thead>
44
<tr>

‎certif/app/styles/app.scss

+7
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ $navbar-height: 60px;
3636
@import 'components/issue-report-modal';
3737
@import 'components/layout/footer';
3838
@import 'components/layout/sidebar';
39+
@import 'components/layout/banners';
3940
@import 'components/login-form';
4041
@import 'components/login-or-register';
4142
@import 'components/finalize';
@@ -84,3 +85,9 @@ input:invalid {
8485
* {
8586
box-sizing: border-box;
8687
}
88+
89+
@include device-is('mobile') {
90+
.hide-on-mobile {
91+
display: none;
92+
}
93+
}

0 commit comments

Comments
 (0)