diff --git a/src/app/annuaire/filter-modal/filter-modal.component.html b/src/app/annuaire/filter-modal/filter-modal.component.html
index 6c5eb78c372caa3728cb1ec39816a1ae84060a36..47b64bc50664b60a9378e800e93f0ff8da2b6335 100644
--- a/src/app/annuaire/filter-modal/filter-modal.component.html
+++ b/src/app/annuaire/filter-modal/filter-modal.component.html
@@ -1,45 +1,39 @@
-<div *ngIf="modalType" fxLayout="column" fxLayoutAlign="center center" [ngClass]="['modal', 'modal' + getModalType()]">
- <div class="body-wrap" fxLayout="column" fxLayoutAlign="space-between">
- <div class="titleFilter" fxLayout="row" fxLayoutAlign="space-between">
- <span>Filtres</span>
- <div (click)="closeModal()" class="ico-close-details"></div>
- </div>
- <div class="contentModal maxModal max-height" fxLayout="row wrap" fxLayoutAlign="flex-start">
- <ul class="blockLigne">
- <div class="blockFiltre" *ngFor="let filter of filtersTypes">
- <li class="checkbox">
- <div class="checkboxItem categoryCheckBox">
- <div fxLayout="row" fxLayoutAlign="start center" (click)="toggleCheckbox(filter)">
- <label>
- <input
- type="checkbox"
- class="multiCheck"
- [checked]="isFilterChecked(filter)"
- (change)="toggleCheckbox(filter)"
- />
- <span class="customCheck customCheckPrimary"></span>
- </label>
- <div fxLayout="row" fxLayoutAlign="space-between center" class="w-100 clickable">
- <div class="label">{{ filter }}</div>
- </div>
+<div *ngIf="modalType" [ngClass]="['modal', 'modal' + getModalType()]">
+ <div class="contentModal maxModal max-height" fxLayout="row wrap" fxLayoutAlign="flex-start">
+ <ul class="blockLigne">
+ <div class="blockFiltre" *ngFor="let filter of filtersTypes">
+ <li class="checkbox">
+ <div class="checkboxItem categoryCheckBox">
+ <div fxLayout="row" fxLayoutAlign="start center" (click)="toggleCheckbox(filter)">
+ <label>
+ <input
+ type="checkbox"
+ class="multiCheck"
+ [checked]="isFilterChecked(filter)"
+ (change)="toggleCheckbox(filter)"
+ />
+ <span class="customCheck customCheckPrimary"></span>
+ </label>
+ <div fxLayout="row" fxLayoutAlign="space-between center" class="w-100 clickable">
+ <div class="label">{{ filter }}</div>
</div>
</div>
- </li>
- </div>
- </ul>
- </div>
- <div class="footer" fxLayout="row" fxLayoutAlign="center center">
- <div class="half-width">
- <app-button
- [style]="buttonTypeEnum.modalSecondary"
- [text]="'Effacer'"
- (click)="clearFilters()"
- tabindex="0"
- ></app-button>
- </div>
- <div class="half-width">
- <app-button [style]="buttonTypeEnum.modalPrimary" [text]="'Appliquer'" (click)="onSubmitFilters()"></app-button>
+ </div>
+ </li>
</div>
+ </ul>
+ </div>
+ <div class="footer">
+ <div class="half-width">
+ <app-button
+ [style]="buttonTypeEnum.modalSecondary"
+ [text]="'Effacer'"
+ (click)="clearFilters()"
+ tabindex="0"
+ ></app-button>
+ </div>
+ <div class="half-width">
+ <app-button [style]="buttonTypeEnum.modalPrimary" [text]="'Appliquer'" (click)="onSubmitFilters()"></app-button>
</div>
</div>
</div>
diff --git a/src/app/annuaire/filter-modal/filter-modal.component.scss b/src/app/annuaire/filter-modal/filter-modal.component.scss
index d761d2f859ba5594dd9e002bfe0d00f313ed80aa..78db14733e021734729e80b4b4dc7442800b3306 100644
--- a/src/app/annuaire/filter-modal/filter-modal.component.scss
+++ b/src/app/annuaire/filter-modal/filter-modal.component.scss
@@ -11,3 +11,9 @@
a {
@include hyperlink;
}
+
+.footer {
+ display: flex;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem;
+}
diff --git a/src/app/carto/carto.module.ts b/src/app/carto/carto.module.ts
index 06c14cb846d72a8546fdba7f3f9405a44509dec4..964b0511439c86bfe50623c1cf3627cf42d03a43 100644
--- a/src/app/carto/carto.module.ts
+++ b/src/app/carto/carto.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
import { MapModule } from '../map/map.module';
import { SharedModule } from '../shared/shared.module';
import { CardComponent } from '../structure-list/components/card/card.component';
-import { ModalFilterComponent } from '../structure-list/components/modal-filter/modal-filter.component';
+import { MoreFiltersComponent } from '../structure-list/components/more-filters/more-filters.component';
import { StructureListSearchComponent } from '../structure-list/components/structure-list-search/structure-list-search.component';
import { StructureListComponent } from '../structure-list/structure-list.component';
import { CartoComponent } from './carto.component';
@@ -12,10 +12,10 @@ import { CartoComponent } from './carto.component';
declarations: [
CartoComponent,
CardComponent,
- ModalFilterComponent,
+ MoreFiltersComponent,
StructureListComponent,
StructureListSearchComponent,
],
- exports: [CartoComponent, CardComponent, ModalFilterComponent, StructureListComponent, StructureListSearchComponent],
+ exports: [CartoComponent, CardComponent, MoreFiltersComponent, StructureListComponent, StructureListSearchComponent],
})
export class CartoModule {}
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.scss b/src/app/form/orientation-form-view/orientation-form-view.component.scss
index 6d7bb1d4eb8bf4d096c869b6c86993f5fcd4099a..de358c23b16bf7544fac1b169e29d4b791dd3526 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.scss
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.scss
@@ -38,7 +38,6 @@
}
::ng-deep.title {
- margin-bottom: 16px;
.overtitle {
@include lato-regular-18;
color: $grey-3;
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index 4b722ed01a7a9b9da57f146162b640440e2132bf..545a6eafa972bb6f9478fa9aee24afcc24ab26a6 100644
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -284,7 +284,6 @@ button {
max-width: 150px;
color: $grey-8;
border-style: none;
- margin-top: 5px;
background: $grey-1;
text-overflow: ellipsis;
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.html b/src/app/structure-list/components/modal-filter/modal-filter.component.html
deleted file mode 100644
index 33f041ace48db4481b2639a49ad911037274cd6f..0000000000000000000000000000000000000000
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.html
+++ /dev/null
@@ -1,198 +0,0 @@
-<div *ngIf="modalType" fxLayout="column" fxLayoutAlign="center center" [ngClass]="['modal', 'modal' + getModalType()]">
- <div class="body-wrap" fxLayout="column" fxLayoutAlign="space-between">
- <div class="titleFilter" fxLayout="row" fxLayoutAlign="space-between">
- <span>Filtres</span>
- <div (click)="closeModal()" class="ico-close-details"></div>
- </div>
- <!-- Filter with single category -->
- <div class="contentModal max-height" fxLayout="row wrap" fxLayoutAlign="flex-start" *ngIf="categories.length === 1">
- <div class="blockFiltre" *ngFor="let c of categories">
- <ul class="blockLigne">
- <li fxLayout="row" fxLayoutAlign="start center" class="ligneFiltre" *ngFor="let module of c.modules">
- <div class="checkbox">
- <div class="checkboxItem">
- <label fxLayout="row" fxLayoutAlign="start center">
- <input
- type="checkbox"
- [checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
- [value]="module.id"
- (change)="onCheckboxChange($event, c.id, module.name)"
- />
- <span class="customCheck customCheckPrimary"></span>
- <div class="label">{{ module.name }}</div>
- </label>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <!-- "Other filters" backdrop fullwidth modal -->
- <div
- class="contentModal maxModal"
- fxLayout="row wrap"
- fxLayoutAlign="flex-start"
- *ngIf="categories.length > 1 && getModalType() === 'moreFilters'"
- >
- <div
- class="blockLigne"
- (clickOutside)="getModalType() === 'moreFilters' ? closeModal() : ''"
- [ngClass]="{ backDropModal: getModalType() === 'moreFilters' }"
- >
- <div class="headerMoreFilters" *ngIf="getModalType() === 'moreFilters'">
- Plus de filtres
- <div class="iconClose" (click)="closeModal()">
- <app-svg-icon
- [iconClass]="'icon-28'"
- [iconColor]="'grey-1'"
- [icon]="'closeModal'"
- [type]="'ico'"
- ></app-svg-icon>
- </div>
- </div>
- <div class="scroll-container">
- <div class="blockFiltre" *ngFor="let c of categories">
- <p>{{ c.name }}</p>
- <ul class="blockLigne smallList" [ngClass]="{ show: this.toggledCategories.includes(c.id) }">
- <li fxLayout="row" fxLayoutAlign="start center" class="ligneFiltre" *ngFor="let module of c.modules">
- <div class="checkbox">
- <div class="checkboxItem">
- <label fxLayout="row" fxLayoutAlign="start center">
- <input
- type="checkbox"
- [checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
- [value]="module.id"
- (change)="onCheckboxChange($event, c.id, module.name)"
- />
- <span class="customCheck customCheckPrimary"></span>
- <div class="label">{{ module.name }}</div>
- </label>
- </div>
- </div>
- </li>
- <!-- Manual add of access modality -->
- <div *ngIf="c.id === categoryEnum.accessModality">
- <li class="checkbox">
- <div class="checkboxItem">
- <label fxLayout="row" fxLayoutAlign="start center">
- <input
- type="checkbox"
- [checked]="prmChecked"
- [value]="'pmrAccess'"
- (change)="onCheckboxChange($event, c.id, 'PMR')"
- />
- <span class="customCheck customCheckPrimary"></span>
- <div class="label">Accessible PMR</div>
- </label>
- </div>
- </li>
- </div>
- </ul>
- </div>
- </div>
- <div
- class="footer"
- fxLayout="row"
- fxLayoutAlign="center center"
- [ngClass]="{ backDropModalFooter: getModalType() === 'moreFilters' }"
- >
- <div class="half-width">
- <app-button
- [style]="buttonTypeEnum.modalSecondary"
- [text]="'Effacer'"
- (click)="clearFilters()"
- tabindex="0"
- ></app-button>
- </div>
- <div class="half-width">
- <app-button
- [style]="buttonTypeEnum.modalPrimary"
- [text]="'Appliquer'"
- (click)="emitModules(checkedModules)"
- ></app-button>
- </div>
- </div>
- </div>
- </div>
- <!-- Filter with multiple categories -->
- <div
- class="contentModal maxModal max-height"
- fxLayout="row wrap"
- fxLayoutAlign="flex-start"
- *ngIf="categories.length > 1 && getModalType() !== 'moreFilters'"
- >
- <ul class="blockLigne">
- <div class="blockFiltre" *ngFor="let c of categories">
- <li class="checkbox">
- <div class="checkboxItem categoryCheckBox">
- <div fxLayout="row" fxLayoutAlign="start center">
- <label>
- <input
- type="checkbox"
- class="multiCheck"
- [checked]="getCategoryCheckboxStatus(c) === 'checked'"
- (change)="handleCategoryCheckBox($event, c)"
- />
- <span
- class="customCheck customCheckPrimary"
- [ngClass]="{ halfCheck: getCategoryCheckboxStatus(c) === 'halfChecked' }"
- ></span>
- </label>
- <div
- fxLayout="row"
- fxLayoutAlign="space-between center"
- class="w-100 clickable"
- (click)="toggleShowCategory(c.id)"
- >
- <div class="label">{{ c.name }}</div>
- <div class="arrow" [ngClass]="{ toggled: this.toggledCategories.includes(c.id) }"></div>
- </div>
- </div>
- <ul class="blockLigne smallList" [ngClass]="{ show: this.toggledCategories.includes(c.id) }">
- <li fxLayout="row" fxLayoutAlign="start center" class="ligneFiltre" *ngFor="let module of c.modules">
- <div class="checkbox">
- <div class="checkboxItem">
- <label fxLayout="row" fxLayoutAlign="start center">
- <input
- type="checkbox"
- [checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
- [value]="module.id"
- (change)="onCheckboxChange($event, c.id, module.name)"
- />
- <span class="customCheck customCheckPrimary"></span>
- <div class="label">{{ module.name }}</div>
- </label>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </li>
- </div>
- </ul>
- </div>
- <div
- class="footer"
- fxLayout="row"
- fxLayoutAlign="center center"
- [ngClass]="{ backDropModalFooter: getModalType() === 'moreFilters' }"
- *ngIf="getModalType() !== 'moreFilters'"
- >
- <div class="half-width">
- <app-button
- [style]="buttonTypeEnum.modalSecondary"
- [text]="'Effacer'"
- (click)="clearFilters()"
- tabindex="0"
- ></app-button>
- </div>
- <div class="half-width">
- <app-button
- [style]="buttonTypeEnum.modalPrimary"
- [text]="'Appliquer'"
- (click)="emitModules(checkedModules)"
- ></app-button>
- </div>
- </div>
- </div>
-</div>
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
new file mode 100644
index 0000000000000000000000000000000000000000..d8a4e24a985776ce31928e8c37f7b8c9e0741e8d
--- /dev/null
+++ b/src/app/structure-list/components/more-filters/more-filters.component.html
@@ -0,0 +1,187 @@
+<div *ngIf="modalType" [ngClass]="['modal', 'modal' + getModalType()]">
+ <!-- Filter with single category -->
+ <div class="contentModal max-height" fxLayout="row wrap" fxLayoutAlign="flex-start" *ngIf="categories.length === 1">
+ <div class="blockFiltre" *ngFor="let c of categories">
+ <ul class="blockLigne">
+ <li fxLayout="row" fxLayoutAlign="start center" class="ligneFiltre" *ngFor="let module of c.modules">
+ <div class="checkbox">
+ <div class="checkboxItem">
+ <label fxLayout="row" fxLayoutAlign="start center">
+ <input
+ type="checkbox"
+ [checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
+ [value]="module.id"
+ (change)="onCheckboxChange($event, c.id, module.name)"
+ />
+ <span class="customCheck customCheckPrimary"></span>
+ <div class="label">{{ module.name }}</div>
+ </label>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- "Other filters" backdrop fullwidth modal -->
+ <div
+ class="contentModal maxModal"
+ fxLayout="row wrap"
+ fxLayoutAlign="flex-start"
+ *ngIf="categories.length > 1 && getModalType() === 'moreFilters'"
+ >
+ <div
+ class="blockLigne"
+ (clickOutside)="getModalType() === 'moreFilters' ? closeModal() : ''"
+ [ngClass]="{ backDropModal: getModalType() === 'moreFilters' }"
+ >
+ <div class="headerMoreFilters" *ngIf="getModalType() === 'moreFilters'">
+ Plus de filtres
+ <div class="iconClose" (click)="closeModal()">
+ <app-svg-icon
+ [iconClass]="'icon-28'"
+ [iconColor]="'grey-1'"
+ [icon]="'closeModal'"
+ [type]="'ico'"
+ ></app-svg-icon>
+ </div>
+ </div>
+ <div class="scroll-container">
+ <div class="blockFiltre" *ngFor="let c of categories">
+ <p>{{ c.name }}</p>
+ <ul class="blockLigne smallList" [ngClass]="{ show: this.toggledCategories.includes(c.id) }">
+ <li fxLayout="row" fxLayoutAlign="start center" class="ligneFiltre" *ngFor="let module of c.modules">
+ <div class="checkbox">
+ <div class="checkboxItem">
+ <label fxLayout="row" fxLayoutAlign="start center">
+ <input
+ type="checkbox"
+ [checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
+ [value]="module.id"
+ (change)="onCheckboxChange($event, c.id, module.name)"
+ />
+ <span class="customCheck customCheckPrimary"></span>
+ <div class="label">{{ module.name }}</div>
+ </label>
+ </div>
+ </div>
+ </li>
+ <!-- Manual add of access modality -->
+ <div *ngIf="c.id === categoryEnum.accessModality">
+ <li class="checkbox">
+ <div class="checkboxItem">
+ <label fxLayout="row" fxLayoutAlign="start center">
+ <input
+ type="checkbox"
+ [checked]="prmChecked"
+ [value]="'pmrAccess'"
+ (change)="onCheckboxChange($event, c.id, 'PMR')"
+ />
+ <span class="customCheck customCheckPrimary"></span>
+ <div class="label">Accessible PMR</div>
+ </label>
+ </div>
+ </li>
+ </div>
+ </ul>
+ </div>
+ </div>
+ <div class="footer" [ngClass]="{ backDropModalFooter: getModalType() === 'moreFilters' }">
+ <div class="half-width">
+ <app-button
+ [style]="buttonTypeEnum.modalSecondary"
+ [text]="'Effacer'"
+ (click)="clearFilters()"
+ tabindex="0"
+ ></app-button>
+ </div>
+ <div class="half-width">
+ <app-button
+ [style]="buttonTypeEnum.modalPrimary"
+ [text]="'Appliquer'"
+ (click)="emitModules(checkedModules)"
+ ></app-button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Filter with multiple categories -->
+ <div
+ class="contentModal maxModal max-height"
+ fxLayout="row wrap"
+ fxLayoutAlign="flex-start"
+ *ngIf="categories.length > 1 && getModalType() !== 'moreFilters'"
+ >
+ <ul class="blockLigne">
+ <div class="blockFiltre" *ngFor="let c of categories">
+ <li class="checkbox">
+ <div class="checkboxItem categoryCheckBox">
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <label>
+ <input
+ type="checkbox"
+ class="multiCheck"
+ [checked]="getCategoryCheckboxStatus(c) === 'checked'"
+ (change)="handleCategoryCheckBox($event, c)"
+ />
+ <span
+ class="customCheck customCheckPrimary"
+ [ngClass]="{ halfCheck: getCategoryCheckboxStatus(c) === 'halfChecked' }"
+ ></span>
+ </label>
+ <div
+ fxLayout="row"
+ fxLayoutAlign="space-between center"
+ class="w-100 clickable"
+ (click)="toggleShowCategory(c.id)"
+ >
+ <div class="label">{{ c.name }}</div>
+ <div class="arrow" [ngClass]="{ toggled: this.toggledCategories.includes(c.id) }"></div>
+ </div>
+ </div>
+ <ul class="blockLigne smallList" [ngClass]="{ show: this.toggledCategories.includes(c.id) }">
+ <li fxLayout="row" fxLayoutAlign="start center" class="ligneFiltre" *ngFor="let module of c.modules">
+ <div class="checkbox">
+ <div class="checkboxItem">
+ <label fxLayout="row" fxLayoutAlign="start center">
+ <input
+ type="checkbox"
+ [checked]="searchService.getIndex(checkedModules, module.id, c.id) > -1"
+ [value]="module.id"
+ (change)="onCheckboxChange($event, c.id, module.name)"
+ />
+ <span class="customCheck customCheckPrimary"></span>
+ <div class="label">{{ module.name }}</div>
+ </label>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </li>
+ </div>
+ </ul>
+ </div>
+ <div
+ class="footer"
+ fxLayout="row"
+ fxLayoutAlign="center center"
+ [ngClass]="{ backDropModalFooter: getModalType() === 'moreFilters' }"
+ *ngIf="getModalType() !== 'moreFilters'"
+ >
+ <div class="half-width">
+ <app-button
+ [style]="buttonTypeEnum.modalSecondary"
+ [text]="'Effacer'"
+ (click)="clearFilters()"
+ tabindex="0"
+ ></app-button>
+ </div>
+ <div class="half-width">
+ <app-button
+ [style]="buttonTypeEnum.modalPrimary"
+ [text]="'Appliquer'"
+ (click)="emitModules(checkedModules)"
+ ></app-button>
+ </div>
+ </div>
+</div>
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.scss b/src/app/structure-list/components/more-filters/more-filters.component.scss
similarity index 91%
rename from src/app/structure-list/components/modal-filter/modal-filter.component.scss
rename to src/app/structure-list/components/more-filters/more-filters.component.scss
index e5b85bef872c93d1dd10547486afaa38637b19ba..7a70fcbb9a59a6782d7e37ba65331dc0875cd1ab 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.scss
+++ b/src/app/structure-list/components/more-filters/more-filters.component.scss
@@ -5,6 +5,7 @@
@import '../../../../assets/scss/shapes';
@import '../../../../assets/scss/hyperlink';
@import '../../../../assets/scss/z-index';
+@import '../../../../assets/scss/search';
.modalaccompaniment {
left: 220px;
@@ -17,19 +18,29 @@
@media #{$large-desktop} {
left: 443px;
}
+ @media #{$desktop} {
+ left: 31%;
+ }
}
.modalpublic {
left: 220px;
@media #{$large-desktop} {
left: 645px;
}
+ @media #{$desktop} {
+ left: 44%;
+ }
}
.modalequipments {
left: 220px;
@media #{$large-desktop} {
left: 733px;
}
+ @media #{$desktop} {
+ left: 52%;
+ }
}
+
.categoryCheckBox {
ul {
display: none;
@@ -62,11 +73,7 @@
border-radius: 8px;
// overflow: hidden;
}
- .backDropModal {
- background: white;
- width: 360px;
- min-height: 40vh;
- }
+
.backDropModalFooter {
background: white;
width: 360px;
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.spec.ts b/src/app/structure-list/components/more-filters/more-filters.component.spec.ts
similarity index 92%
rename from src/app/structure-list/components/modal-filter/modal-filter.component.spec.ts
rename to src/app/structure-list/components/more-filters/more-filters.component.spec.ts
index 08583519907633fe953eb0ef7551c451e787c89d..7a74a451456214fec16002d1c85ba3fd60dcca99 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.spec.ts
+++ b/src/app/structure-list/components/more-filters/more-filters.component.spec.ts
@@ -5,21 +5,21 @@ import { TypeModal } from '../../enum/typeModal.enum';
import { Category } from '../../models/category.model';
import { Module } from '../../models/module.model';
-import { ModalFilterComponent } from './modal-filter.component';
+import { MoreFiltersComponent } from './more-filters.component';
-describe('ModalFilterComponent', () => {
- let component: ModalFilterComponent;
- let fixture: ComponentFixture<ModalFilterComponent>;
+describe('MoreFiltersComponent', () => {
+ let component: MoreFiltersComponent;
+ let fixture: ComponentFixture<MoreFiltersComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ModalFilterComponent],
+ declarations: [MoreFiltersComponent],
imports: [HttpClientTestingModule, ReactiveFormsModule],
}).compileComponents();
});
beforeEach(() => {
- fixture = TestBed.createComponent(ModalFilterComponent);
+ fixture = TestBed.createComponent(MoreFiltersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.ts b/src/app/structure-list/components/more-filters/more-filters.component.ts
similarity index 95%
rename from src/app/structure-list/components/modal-filter/modal-filter.component.ts
rename to src/app/structure-list/components/more-filters/more-filters.component.ts
index ee37df3d2e7281f2b9216ef61b85533360cc3697..8722cfb39a6e6fe95f7e134b83edaf1404b073d3 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.ts
+++ b/src/app/structure-list/components/more-filters/more-filters.component.ts
@@ -7,11 +7,11 @@ import { Module } from '../../models/module.model';
import { SearchService } from '../../services/search.service';
@Component({
- selector: 'app-modal-filter',
- templateUrl: './modal-filter.component.html',
- styleUrls: ['./modal-filter.component.scss'],
+ selector: 'app-more-filters',
+ templateUrl: './more-filters.component.html',
+ styleUrls: ['./more-filters.component.scss'],
})
-export class ModalFilterComponent implements OnInit, OnChanges {
+export class MoreFiltersComponent implements OnInit, OnChanges {
constructor(public searchService: SearchService) {}
@Input() public modalType: TypeModal;
diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.html b/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
index 73b7060bc8bb7a64efa27d420147c03a24a0b682..60a5e062765d7c777ce5b911e01d276601eeff0f 100644
--- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
+++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.html
@@ -1,158 +1,137 @@
<div class="block">
<div class="content">
- <form
- class="inputSearch"
- [formGroup]="searchForm"
- fxLayout="row"
- fxLayoutGap="4px"
- fxLayoutAlign=" center"
- (ngSubmit)="applyFilter(searchForm.value.searchTerm)"
- >
- <div fxLayout="row" fxLayoutAlign="space-between center" class="container">
- <input type="text" formControlName="searchTerm" placeholder="Rechercher une association, une commune..." />
- <button
- *ngIf="this.searchForm.get('searchTerm').value?.length > 0"
- (click)="clearInput()"
- class="icon close"
- type="button"
- >
- <div class="ico-close-search"></div>
- </button>
- <span *ngIf="this.searchForm.get('searchTerm').value?.length > 0" class="separation"></span>
- <app-button [style]="buttonTypeEnum.searchIcon" [iconBtn]="'search'" [type]="'submit'"></app-button>
- </div>
+ <form class="inputSearch" [formGroup]="searchForm" (ngSubmit)="applyFilter(searchForm.value.searchTerm)">
+ <input type="text" formControlName="searchTerm" placeholder="Rechercher une association, une commune..." />
+ <button
+ *ngIf="this.searchForm.get('searchTerm').value?.length > 0"
+ (click)="clearInput()"
+ class="icon close"
+ type="button"
+ >
+ <div class="ico-close-search"></div>
+ </button>
+ <span *ngIf="this.searchForm.get('searchTerm').value?.length > 0" class="separation"></span>
+ <app-button [style]="buttonTypeEnum.searchIcon" [iconBtn]="'search'" [type]="'submit'"></app-button>
</form>
- <div (clickOutside)="closeModal()" class="btn-container">
- <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="4px">
- <button
- class="btn-filter isntPhoneContent"
- type="button"
- fxLayout="row"
- [ngClass]="{
- selected: modalTypeOpened === TypeModal.accompaniment,
- containCheckedFilters: numberAccompanimentChecked
- }"
- fxLayoutAlign="space-between center"
- (click)="openModal(TypeModal.accompaniment)"
- >
- <span>Démarches en ligne</span>
- <div class="arrow"></div>
- </button>
- <button
- class="btn-filter isntPhoneContent"
- type="button"
- fxLayout="row"
- [ngClass]="{
- selected: modalTypeOpened === TypeModal.training,
- containCheckedFilters: numberTrainingChecked
- }"
- fxLayoutAlign="space-between center"
- (click)="openModal(TypeModal.training)"
- >
- <span>Compétences numériques</span>
- <div class="arrow"></div>
- </button>
- <button
- class="btn-filter isntPhoneContent"
- type="button"
- fxLayout="row"
- [ngClass]="{
- selected: modalTypeOpened === TypeModal.public,
- containCheckedFilters: numberPublicChecked
- }"
- fxLayoutAlign="space-between center"
- (click)="openModal(TypeModal.public)"
- >
- <span>Public</span>
- <div class="arrow"></div>
- </button>
- <button
- class="btn-filter isntPhoneContent"
- type="button"
- fxLayout="row"
- [ngClass]="{
- selected: modalTypeOpened === TypeModal.equipments,
- containCheckedFilters: numberEquipmentChecked
- }"
- fxLayoutAlign="space-between center"
- (click)="openModal(TypeModal.equipments)"
- >
- <span>Matériel et wifi</span>
- <div class="arrow"></div>
- </button>
- <div
- class="checkboxButton"
- [ngClass]="{
- checked: searchService.getIndex(checkedModulesFilter, 'passNumerique', 'labelsQualifications') > -1
- }"
- >
- <label fxLayout="row" fxLayoutAlign="center center">
- <input
- type="checkbox"
- value="passNumerique"
- [checked]="searchService.getIndex(checkedModulesFilter, 'passNumerique', 'labelsQualifications') > -1"
- (change)="externalCheckboxCheck($event, 'labelsQualifications', 'Pass numérique')"
- />
- <div class="label pass">Pass numérique</div>
- </label>
- </div>
- <div
- class="checkboxButton"
- [ngClass]="{
- checked:
+ <div (clickOutside)="closeModal()" class="btnSection">
+ <button
+ class="btn-filter isntPhoneContent"
+ type="button"
+ [ngClass]="{
+ selected: modalTypeOpened === TypeModal.accompaniment,
+ containCheckedFilters: numberAccompanimentChecked
+ }"
+ (click)="openModal(TypeModal.accompaniment)"
+ >
+ <span>Démarches en ligne</span>
+ <div class="arrow"></div>
+ </button>
+ <button
+ class="btn-filter isntPhoneContent"
+ type="button"
+ [ngClass]="{
+ selected: modalTypeOpened === TypeModal.training,
+ containCheckedFilters: numberTrainingChecked
+ }"
+ (click)="openModal(TypeModal.training)"
+ >
+ <span>Compétences numériques</span>
+ <div class="arrow"></div>
+ </button>
+ <button
+ class="btn-filter isntPhoneContent"
+ type="button"
+ [ngClass]="{
+ selected: modalTypeOpened === TypeModal.public,
+ containCheckedFilters: numberPublicChecked
+ }"
+ (click)="openModal(TypeModal.public)"
+ >
+ <span>Public</span>
+ <div class="arrow"></div>
+ </button>
+ <button
+ class="btn-filter isntPhoneContent"
+ type="button"
+ [ngClass]="{
+ selected: modalTypeOpened === TypeModal.equipments,
+ containCheckedFilters: numberEquipmentChecked
+ }"
+ (click)="openModal(TypeModal.equipments)"
+ >
+ <span>Matériel et wifi</span>
+ <div class="arrow"></div>
+ </button>
+ <div
+ class="checkboxButton"
+ [ngClass]="{
+ checked: searchService.getIndex(checkedModulesFilter, 'passNumerique', 'labelsQualifications') > -1
+ }"
+ >
+ <label fxLayoutAlign="center center">
+ <input
+ type="checkbox"
+ value="passNumerique"
+ [checked]="searchService.getIndex(checkedModulesFilter, 'passNumerique', 'labelsQualifications') > -1"
+ (change)="externalCheckboxCheck($event, 'labelsQualifications', 'Pass numérique')"
+ />
+ <div class="label pass">Pass numérique</div>
+ </label>
+ </div>
+ <div
+ class="checkboxButton"
+ [ngClass]="{
+ checked:
+ searchService.getIndex(checkedModulesFilter, 'conseillerNumFranceServices', 'labelsQualifications') > -1
+ }"
+ >
+ <label fxLayoutAlign="center center">
+ <input
+ type="checkbox"
+ value="conseillerNumFranceServices"
+ [checked]="
searchService.getIndex(checkedModulesFilter, 'conseillerNumFranceServices', 'labelsQualifications') > -1
- }"
- >
- <label fxLayout="row" fxLayoutAlign="center center">
- <input
- type="checkbox"
- value="conseillerNumFranceServices"
- [checked]="
- searchService.getIndex(checkedModulesFilter, 'conseillerNumFranceServices', 'labelsQualifications') > -1
- "
- (change)="externalCheckboxCheck($event, 'labelsQualifications', 'Conseillers numériques')"
- />
- <div class="label pass">Conseillers numériques</div>
- </label>
- </div>
- <div
- class="checkboxButton isntPhoneContent"
- [ngClass]="{
- checked: searchService.getIndex(checkedModulesFilter, 'accesLibre', 'accessModality') > -1
- }"
- >
- <label fxLayout="row" fxLayoutAlign="center center">
- <input
- type="checkbox"
- value="accesLibre"
- [checked]="searchService.getIndex(checkedModulesFilter, 'accesLibre', 'accessModality') > -1"
- (change)="externalCheckboxCheck($event, 'accessModality', 'Accès libre')"
- />
- <div class="label pass">Accès libre</div>
- </label>
- </div>
- <app-button
- class="isntPhoneContent last-button"
- [style]="buttonTypeEnum.TertiaryRounded"
- [text]="'Plus de filtres'"
- fxLayout="row"
- fxLayoutAlign="space-between center"
- (action)="openModal(TypeModal.moreFilters)"
- ></app-button>
- <div *ngIf="modalTypeOpened">
- <app-modal-filter
- [modalType]="modalTypeOpened"
- [categories]="getModalCategory()"
- [modules]="checkedModulesFilter"
- (searchEvent)="fetchResults($event)"
- (closeEvent)="closeModal()"
- ></app-modal-filter>
- </div>
+ "
+ (change)="externalCheckboxCheck($event, 'labelsQualifications', 'Conseillers numériques')"
+ />
+ <div class="label pass">Conseillers numériques</div>
+ </label>
+ </div>
+ <div
+ class="checkboxButton isntPhoneContent"
+ [ngClass]="{
+ checked: searchService.getIndex(checkedModulesFilter, 'accesLibre', 'accessModality') > -1
+ }"
+ >
+ <label fxLayoutAlign="center center">
+ <input
+ type="checkbox"
+ value="accesLibre"
+ [checked]="searchService.getIndex(checkedModulesFilter, 'accesLibre', 'accessModality') > -1"
+ (change)="externalCheckboxCheck($event, 'accessModality', 'Accès libre')"
+ />
+ <div class="label pass">Accès libre</div>
+ </label>
+ </div>
+ <app-button
+ class="last-button"
+ [style]="buttonTypeEnum.TertiaryRounded"
+ [text]="'Plus de filtres'"
+ (action)="openModal(TypeModal.moreFilters)"
+ ></app-button>
+ <div *ngIf="modalTypeOpened">
+ <app-more-filters
+ [modalType]="modalTypeOpened"
+ [categories]="getModalCategory()"
+ [modules]="checkedModulesFilter"
+ (searchEvent)="fetchResults($event)"
+ (closeEvent)="closeModal()"
+ ></app-more-filters>
</div>
</div>
</div>
- <div *ngIf="checkedModulesFilter.length" fxLayout="row wrap" fxLayoutGap="4px" class="filterTags isntPhoneContent">
+ <div *ngIf="checkedModulesFilter.length" fxLayout="row wrap" class="filterTags isntPhoneContent">
<div class="title">Filtres :</div>
<app-button
*ngFor="let filter of checkedModulesFilter"
diff --git a/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss b/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
index 0e3d1c5ef80d1c1d5179d6b4da266779bdb8dfa1..220a19b797407657c5e98a4d91ac868285306bfb 100644
--- a/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
+++ b/src/app/structure-list/components/structure-list-search/structure-list-search.component.scss
@@ -66,7 +66,3 @@
}
}
}
-
-.last-button {
- margin-left: auto;
-}
diff --git a/src/assets/scss/_inputs.scss b/src/assets/scss/_inputs.scss
index cf2ea2226430b7b8b3bbbd8a289f7b37bbeedb75..7571fb349e133831e2b88cd3adee63e2ce39120b 100644
--- a/src/assets/scss/_inputs.scss
+++ b/src/assets/scss/_inputs.scss
@@ -5,7 +5,6 @@
@mixin input-search {
width: 100%;
border: none;
- padding-left: 10px;
text-overflow: ellipsis;
background-color: $grey-8;
color: $grey-3;
diff --git a/src/assets/scss/_search.scss b/src/assets/scss/_search.scss
index fb105fa70869ba85852aed78c00c702ac6808790..53ae72cca0ec9b4a4e5361ba5d0d3e2bee927cea 100644
--- a/src/assets/scss/_search.scss
+++ b/src/assets/scss/_search.scss
@@ -17,20 +17,23 @@
display: flex;
align-items: center;
margin-bottom: 0.5rem;
+ gap: 0.25rem;
input {
@include lato-regular-13;
@include input-search;
margin-top: unset;
}
.inputSearch {
- padding: 6px 10px 6px 6px;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 6px 10px 6px 16px;
width: 200px;
min-width: 200px;
background-color: $grey-8;
color: $grey-3;
height: 36px;
border-radius: 50px;
- margin-right: 0.25rem;
@media #{$large-desktop} {
min-width: 250px;
}
@@ -55,17 +58,16 @@
padding-top: 1rem;
}
}
-.btn-container {
- width: 100%;
- display: flex;
-}
+
.btnSection {
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
width: 100%;
justify-content: flex-start !important;
- @media #{$large-tablet} {
- display: contents !important;
- }
button {
+ display: flex;
+ align-items: center;
background: $white;
height: 36px;
border: 1px solid $grey-4;
@@ -170,7 +172,6 @@ a {
}
.phoneSection {
- margin: 9px 0px 18px 0px;
display: none;
.btnSection {
padding: 0;
@@ -185,9 +186,12 @@ a {
}
}
.filterTags {
+ flex-direction: row;
+ flex-wrap: wrap;
+ display: flex;
+ gap: 0.25rem;
margin-top: 0.5rem;
.title {
- margin-top: 5px;
color: $grey-3;
}
.reset-icon {
@@ -195,3 +199,8 @@ a {
cursor: pointer;
}
}
+
+.footer {
+ display: flex;
+ gap: 0.5rem;
+}
diff --git a/src/styles.scss b/src/styles.scss
index 3c489efa724c512c0d0a1152febb5c8ddd148bf9..1a606593a7a4018d650cab12ad8b7d3cbaccfd1d 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -389,7 +389,8 @@ button {
}
.blockFiltre {
width: auto;
- margin: 25px 20px;
+ margin: 25px 0px;
+ padding-inline: 1rem;
margin-bottom: calc(25px - 1rem);
min-width: 200px;
@@ -445,7 +446,6 @@ button {
}
.half-width {
width: 50%;
- padding: 0 4px;
}
}
}