diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index 8db71778cd2627ee8691f6325efd44662bf13364..36f1991cc6743d09234b8e933c694daa61a783e9 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -1,9 +1,17 @@
+@import '../../assets/scss/layout';
+@import '../../assets/scss/breakpoint';
.form {
position: fixed;
background: white;
- width: 50vw;
- height: 100vh;
- top: 0;
+ width: 100vw;
+ height: calc(100vh - #{$header-height} - #{$footer-height});
+ top: #{$header-height};
z-index: 9999;
overflow: auto;
}
+
+@media #{$large-phone} {
+ .form {
+ height: calc(100vh - #{$header-height});
+ }
+}
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index 72c0a8883947d16daee3d9f45385a061d9741ad2..c632133f4ee1c12714462311df4ec70638a26c30 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -1,115 +1,118 @@
-<div class="header">
- <span class="title">Acteurs de la médiation numérique</span>
-</div>
-<div class="content" fxLayout="column">
- <div class="searchSection">
- <form
- [formGroup]="searchForm"
- fxLayout="row"
- fxLayoutGap="16px"
- fxLayoutAlign=" center"
- (ngSubmit)="applyFilter(searchForm.value.searchTerm)"
- >
- <div class="inputSection" fxLayout="row" fxLayoutAlign="space-between center">
- <input type="text" formControlName="searchTerm" placeholder="Rechercher une commune, une association..." />
- <button (click)="clearInput()" class="icon close" type="button"><div class="ico-close-search"></div></button>
- <span class="separator"></span>
- <button (click)="locateMe()" class="icon pin" type="button"><div class="ico-pin-search"></div></button>
- </div>
- <app-button
- class="isntPhoneContent"
- [style]="'buttonWithHash'"
- [text]="'Rechercher'"
- [type]="'submit'"
- ></app-button>
- </form>
+<div class="block">
+ <div class="header">
+ <span class="title">Acteurs de la médiation numérique</span>
</div>
- <div (clickOutside)="closeModal()">
- <div class="btnSection isntPhoneContent" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
- <button
- class="btn-filter"
- 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"
- type="button"
- fxLayout="row"
- [ngClass]="{
- selected: modalTypeOpened === TypeModal.training,
- containCheckedFilters: numberTrainingChecked
- }"
- fxLayoutAlign="space-between center"
- (click)="openModal(TypeModal.training)"
- >
- <span>Ateliers</span>
- <div class="arrow"></div>
- </button>
- <button
- class="btn-filter"
- type="button"
+ <div class="content" fxLayout="column">
+ <div class="searchSection">
+ <form
+ [formGroup]="searchForm"
fxLayout="row"
- [ngClass]="{
- selected: modalTypeOpened === TypeModal.moreFilters,
- containCheckedFilters: numberMoreFiltersChecked
- }"
- fxLayoutAlign="space-between center"
- (click)="openModal(TypeModal.moreFilters)"
+ fxLayoutGap="16px"
+ fxLayoutAlign=" center"
+ (ngSubmit)="applyFilter(searchForm.value.searchTerm)"
>
- <span>Plus de critères</span>
- <div class="arrow"></div>
- </button>
+ <div class="inputSection" fxLayout="row" fxLayoutAlign="space-between center">
+ <input type="text" formControlName="searchTerm" placeholder="Rechercher une commune, une association..." />
+ <button (click)="clearInput()" class="icon close" type="button"><div class="ico-close-search"></div></button>
+ <span class="separator"></span>
+ <button (click)="locateMe()" class="icon pin" type="button"><div class="ico-pin-search"></div></button>
+ </div>
+ <app-button
+ class="isntPhoneContent"
+ [style]="'buttonWithHash'"
+ [text]="'Rechercher'"
+ [type]="'submit'"
+ ></app-button>
+ </form>
</div>
- <div *ngIf="modalTypeOpened">
- <app-modal-filter
- [modalType]="modalTypeOpened"
- [categories]="categories"
- [modules]="checkedModulesFilter"
- (searchEvent)="fetchResults($event)"
- (closeEvent)="closeModal()"
- ></app-modal-filter>
+ <div (clickOutside)="closeModal()">
+ <div class="btnSection isntPhoneContent" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
+ <button
+ class="btn-filter"
+ 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"
+ type="button"
+ fxLayout="row"
+ [ngClass]="{
+ selected: modalTypeOpened === TypeModal.training,
+ containCheckedFilters: numberTrainingChecked
+ }"
+ fxLayoutAlign="space-between center"
+ (click)="openModal(TypeModal.training)"
+ >
+ <span>Ateliers</span>
+ <div class="arrow"></div>
+ </button>
+ <button
+ class="btn-filter"
+ type="button"
+ fxLayout="row"
+ [ngClass]="{
+ selected: modalTypeOpened === TypeModal.moreFilters,
+ containCheckedFilters: numberMoreFiltersChecked
+ }"
+ fxLayoutAlign="space-between center"
+ (click)="openModal(TypeModal.moreFilters)"
+ >
+ <span>Plus de critères</span>
+ <div class="arrow"></div>
+ </button>
+ </div>
+ <div *ngIf="modalTypeOpened">
+ <app-modal-filter
+ [modalType]="modalTypeOpened"
+ [categories]="categories"
+ [modules]="checkedModulesFilter"
+ (searchEvent)="fetchResults($event)"
+ (closeEvent)="closeModal()"
+ ></app-modal-filter>
+ </div>
</div>
</div>
-</div>
-<div class="phoneSection">
- <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
- <app-button
- [style]="'buttonPhone'"
- [extraClass]="numberAccompanimentChecked ? 'containCheckedFilters' : ''"
- [text]="'Filtres'"
- (action)="openModal(TypeModal.accompaniment)"
- ></app-button>
- <a (click)="openConfirmationModal()" tabindex="0">Ajouter une structure</a>
+ <div class="phoneSection">
+ <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
+ <app-button
+ [style]="'buttonPhone'"
+ [extraClass]="numberAccompanimentChecked ? 'containCheckedFilters' : ''"
+ [text]="'Filtres'"
+ (action)="openModal(TypeModal.accompaniment)"
+ ></app-button>
+ <a (click)="toogleAddStructure()" tabindex="0">Ajouter une structure</a>
+ </div>
</div>
-</div>
-<div class="footerSearchSection isntPhoneContent" fxLayout="row" fxLayoutAlign="space-between center">
- <div class="checkbox">
- <div class="checkboxItem">
- <label>
- <input
- type="checkbox"
- value="passNumerique"
- [checked]="searchService.getIndex(checkedModulesFilter, 'passNumerique', 'labelsQualifications') > -1"
- (change)="numericPassCheck($event, 'labelsQualifications')"
- />
- <span class="customCheck"></span>
- <div class="label">Pass numérique</div>
- </label>
+ <div class="footerSearchSection isntPhoneContent" fxLayout="row" fxLayoutAlign="space-between center">
+ <div class="checkbox">
+ <div class="checkboxItem">
+ <label>
+ <input
+ type="checkbox"
+ value="passNumerique"
+ [checked]="searchService.getIndex(checkedModulesFilter, 'passNumerique', 'labelsQualifications') > -1"
+ (change)="numericPassCheck($event, 'labelsQualifications')"
+ />
+ <span class="customCheck"></span>
+ <div class="label">Pass numérique</div>
+ </label>
+ </div>
</div>
+ <a (click)="toogleAddStructure()" tabindex="0">Ajouter une structure</a>
</div>
- <a (click)="openConfirmationModal()" tabindex="0">Ajouter une structure</a>
</div>
-<app-modal
- [openned]="isConfirmationModalOpen"
- [content]="confirmationModalContent"
- (closed)="closeConfirmationModal()"
-></app-modal>
+
+<app-structureForm
+ *ngIf="addStructureFormModal"
+ (closeEvent)="toogleAddStructure($event)"
+ (clickOutside)="toogleAddStructure()"
+></app-structureForm>
diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss
index 8359c4bddafb73541a85738c0b36a4685145aedb..2ac3acd6553a74c787800a2351d9e8d06902b765 100644
--- a/src/app/structure-list/components/search/search.component.scss
+++ b/src/app/structure-list/components/search/search.component.scss
@@ -4,6 +4,9 @@
@import '../../../../assets/scss/hyperlink';
@import '../../../../assets/scss/breakpoint';
+.block {
+ padding: 0 25px;
+}
.header {
.title {
@include cn-bold-20;
diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts
index d54028a50845dbe74dc8431d7e48c2c49d023d7c..2ca752340865769cdfe173523e21b19544ec7a6d 100644
--- a/src/app/structure-list/components/search/search.component.ts
+++ b/src/app/structure-list/components/search/search.component.ts
@@ -24,6 +24,9 @@ export class SearchComponent implements OnInit {
@Output() searchEvent = new EventEmitter();
+ // Show/hide form createStructure
+ public addStructureFormModal = false;
+
// Form search input
public searchForm: FormGroup;
// Modal variable
@@ -35,12 +38,6 @@ export class SearchComponent implements OnInit {
public numberTrainingChecked = 0;
public numberAccompanimentChecked = 0;
public numberMoreFiltersChecked = 0;
-
- // Modal confirmation variable
- public isConfirmationModalOpen = false;
- public confirmationModalContent =
- 'Afin d’ajouter votre structure,vous allez être redirigé vers le formulaire Grand Lyon à remplir.';
-
ngOnInit(): void {
// Will store the different categories
this.categories = [];
@@ -204,10 +201,8 @@ export class SearchComponent implements OnInit {
);
}
}
- public openConfirmationModal(): void {
- this.isConfirmationModalOpen = true;
- }
- public closeConfirmationModal(): void {
- this.isConfirmationModalOpen = false;
+
+ public toogleAddStructure(): void {
+ this.addStructureFormModal = !this.addStructureFormModal;
}
}
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index a4d7320ed0c1ee10516512502ddf3c53371c360e..95ade9fb3e9be97e74eb7e08b637e78e198ec1e4 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -1,4 +1,4 @@
-<div class="topBlock hide-on-print">
+<div class="hide-on-print">
<app-structure-list-search (searchEvent)="fetchResults($event)"></app-structure-list-search>
</div>
<div class="nbStructuresLabel hide-on-print">
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 6af9e153e647e422abebf4e0fb13416b61842904..1817ffba9980908d95a4864559669e85be195863 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -16,9 +16,6 @@
overflow-y: auto;
padding: 0 25px;
}
-.topBlock {
- padding: 0 25px;
-}
@media print {
.listCard {