diff --git a/src/app/shared/components/collapse/collapse-header/collapse-header.component.scss b/src/app/shared/components/collapse/collapse-header/collapse-header.component.scss index c3ead4b41b8965f42cf3b85de37b182e1d594a37..db098d19a9e208a266741171085dbbe001bbc114 100644 --- a/src/app/shared/components/collapse/collapse-header/collapse-header.component.scss +++ b/src/app/shared/components/collapse/collapse-header/collapse-header.component.scss @@ -3,12 +3,14 @@ .collapse-header { cursor: pointer; width: 100%; - border: 0px solid transparent; + border: 0 solid transparent; + align-items: center; display: flex; justify-content: space-between; background-color: $white; padding: 0; text-align: left; + min-height: 40px; // SIZES &.small { @@ -28,7 +30,7 @@ } &:focus-visible { - outline-offset: 0px; + outline-offset: 0; outline: 2px solid $blue-focus; } } diff --git a/src/app/shared/components/collapse/collapse-header/collapse-header.component.ts b/src/app/shared/components/collapse/collapse-header/collapse-header.component.ts index 591b5f17ee9a6d3b9e9c9deeb8fca64650e6661d..b5950d53b98761b052c5b5c5e9f3de4528ca0e8a 100644 --- a/src/app/shared/components/collapse/collapse-header/collapse-header.component.ts +++ b/src/app/shared/components/collapse/collapse-header/collapse-header.component.ts @@ -19,3 +19,4 @@ export class CollapseHeaderComponent { expanded = false; size: 'small' | 'medium' = 'small'; } + diff --git a/src/app/structure-list/components/more-filters/more-filters.component.html b/src/app/structure-list/components/more-filters/more-filters.component.html index 4581cdb77b374393546b22b9f12401d92800c6ea..b1d890873a2b9ae770f57ca1e716d4aca551f4c3 100644 --- a/src/app/structure-list/components/more-filters/more-filters.component.html +++ b/src/app/structure-list/components/more-filters/more-filters.component.html @@ -20,7 +20,7 @@ [label]="module.name" [for]="module.id" [checked]="searchService.getIndex(checkedModules, module.id, categories[0].id) > -1" - [size]="'medium'" + [size]="'small'" (action)="onCheckboxChange($event, categories[0].id, module.id, module.name)" /> </div> @@ -28,15 +28,17 @@ <div *ngIf="categories.length > 1" class="modalContent multipleCollapse"> <app-collapse *ngFor="let c of categories"> <app-collapse-header> + <div class="collapseHeader"> <app-checkbox - [size]="'medium'" + [size]="'small'" [id]="c.id" [checked]="getCategoryCheckboxStatus(c) === 'checked'" [indeterminate]="getCategoryCheckboxStatus(c) === 'halfChecked'" (action)="handleCategoryCheckBox($event, c); $event.stopPropagation()" - /> - <span [attr.aria-label]="">{{ c.name }}</span> + [ngStyle]="{'padding': '4px 4px'}" + ></app-checkbox> + <span [attr.aria-label]="" id="categoryName">{{ c.name }}</span> <!-- label only for screen reader to avoid selecting all the elements when clicking the label --> <label class="visually-hidden" for="{{ c.id }}">{{ c.name }}. Cocher pour tout sélectionner</label> </div> @@ -62,7 +64,7 @@ [ariaLabel]="'Effacer et fermer'" (action)="clearFilters()" /> - <app-button [variant]="'primary'" [label]="'Appliquer'" (action)="emitModules(checkedModules)" /> + <app-button [variant]="'primary'" [label]="'Appliquer'" (action)="emitModules(checkedModules)"/> </div> </div> </div> diff --git a/src/app/structure-list/components/more-filters/more-filters.component.scss b/src/app/structure-list/components/more-filters/more-filters.component.scss index 89510d6c3036f201a6ff8fd098ebfcaa49ebfb53..3cbfff626d1e5b8fc18441f81652a7a5db7fa905 100644 --- a/src/app/structure-list/components/more-filters/more-filters.component.scss +++ b/src/app/structure-list/components/more-filters/more-filters.component.scss @@ -11,7 +11,7 @@ z-index: $modal-z-index; margin-top: 132px; .filterModalContainer { - box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35); + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.35); background-color: $white; border-radius: 8px; } @@ -46,7 +46,7 @@ .moreFiltersHeader { display: flex; align-items: center; - padding: 16px 16px 0px 40px; + padding: 16px 16px 0 40px; h3 { @include font-bold-18; width: 100%; @@ -76,6 +76,11 @@ align-items: center; gap: 8px; padding: 4px 8px; + + #categoryName { + padding: 0 0; + } + } .collapseContent { display: flex; @@ -84,6 +89,7 @@ padding-block: 16px; padding-left: 24px; border-top: 1px solid $grey-4; + } } } @@ -94,3 +100,4 @@ padding-block: 16px; } } +