diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 22f5aeb0ff7922810678c2c6f4ad8f3a49578842..9b962fa1485707b3a6bb9a57cc8013dbb1810047 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,5 +1,3 @@
<div class="content-container">
- <div class="section-container">
- <app-structure-list></app-structure-list>
- </div>
+ <app-structure-list></app-structure-list>
</div>
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index 490d59af86742b34d403015a62d1424ba17c5ccc..7afed396afbe175a73d02d3c91b0ac2171431563 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -1,25 +1,27 @@
<span class="nbStructuresLabel">{{ structures.length }} structures</span>
-<div class="structure" fxLayout="column" *ngFor="let structure of structures">
- <span class="nomStructure">{{ structure.nom }}</span>
+<div class="listStructure">
+ <div class="structure" fxLayout="column" *ngFor="let structure of structures">
+ <span class="nomStructure">{{ structure.nom }}</span>
- <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center">
- <span class="typeStructure">{{ structure.typeDeStructure }}</span>
- <span class="distanceStructure">├─┤ 63 m</span>
- </div>
- <br />
- <div class="statusStructure" fxLayout="row" fxLayoutAlign="start center">
- <div *ngIf="structure.isOpen; else closed">
- <span class="ico-dot-available"></span>
- <span>Ouvert actuellement</span>
+ <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center">
+ <span class="typeStructure">{{ structure.typeDeStructure }}</span>
+ <span class="distanceStructure">├─┤ 63 m</span>
+ </div>
+ <br />
+ <div class="statusStructure" fxLayout="row" fxLayoutAlign="start center">
+ <div *ngIf="structure.isOpen; else closed">
+ <span class="ico-dot-available"></span>
+ <span>Ouvert actuellement</span>
+ </div>
+ <ng-template #closed>
+ <span class="ico-dot-unavailable"></span>
+ <span *ngIf="structure.openedOn.day; else noTime">
+ Fermé - Ouvre {{ structure.openedOn.day }} à {{ structure.openedOn.schedule }}</span
+ >
+ </ng-template>
+ <ng-template #noTime>
+ <span> Fermé - Aucun horaire disponible</span>
+ </ng-template>
</div>
- <ng-template #closed>
- <span class="ico-dot-unavailable"></span>
- <span *ngIf="structure.openedOn.day; else noTime">
- Fermé - Ouvre {{ structure.openedOn.day }} à {{ structure.openedOn.schedule }}</span
- >
- </ng-template>
- <ng-template #noTime>
- <span> Fermé - Aucun horaire disponible</span>
- </ng-template>
</div>
</div>
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index df0c51915943ddbf45d64ad991d6c66aa0d15e67..730c6b49d97a865a8306f3202eafd209866a262a 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -10,32 +10,36 @@
<button type="button" (click)="applyFilter()">Rechercher</button>
</div>
- <div class="btnSection">
- <div class="phoneSection" fxLayout="row" fxLayoutAlign="center center">
- <button
- type="button"
- [className]="modalTypeOpened === modalType[0] ? 'selected' : ''"
- (click)="openModal(this.modalType[0])"
- >
- <span class="btnText">Accompagnement</span>
- <div class="arrow"></div>
- </button>
- <button
- type="button"
- [className]="modalTypeOpened === modalType[1] ? 'selected' : ''"
- (click)="openModal(this.modalType[1])"
- >
- <span class="btnText">Formations</span>
- <div class="arrow"></div>
- </button>
- <button
- type="button"
- [className]="modalTypeOpened === modalType[2] ? 'selected' : ''"
- (click)="openModal(this.modalType[2])"
- >
- <span class="btnText">Plus de filtres</span>
- <div class="arrow"></div>
- </button>
+ <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
+ <div
+ class="button"
+ [ngClass]="{ selected: modalTypeOpened === modalType[0] }"
+ (click)="openModal(this.modalType[0])"
+ fxLayout="row"
+ fxLayoutAlign="space-between center"
+ >
+ <span class="btnText">Accompagnement</span>
+ <div class="arrow"></div>
+ </div>
+ <div
+ class="button"
+ [ngClass]="{ selected: modalTypeOpened === modalType[1] }"
+ (click)="openModal(this.modalType[1])"
+ fxLayout="row"
+ fxLayoutAlign="space-between center"
+ >
+ <span class="btnText">Formations</span>
+ <div class="arrow"></div>
+ </div>
+ <div
+ class="button"
+ [ngClass]="{ selected: modalTypeOpened === modalType[2] }"
+ (click)="openModal(this.modalType[2])"
+ fxLayout="row"
+ fxLayoutAlign="space-between center"
+ >
+ <span class="btnText">Plus de filtres</span>
+ <div class="arrow"></div>
</div>
</div>
<div
@@ -76,7 +80,7 @@
</div>
</div>
</div>
-<div class="footer" fxLayout="row" fxLayoutAlign="space-between center">
+<div class="footerSearchSection" fxLayout="row" fxLayoutAlign="space-between center">
<div class="checkbox">
<div class="checkboxItem">
<label>
diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss
index 4a8926c2f99d28e58d6084a61427b8e84d434567..b6196462fbd5253931d9ff27267297561495266f 100644
--- a/src/app/structure-list/components/search/search.component.scss
+++ b/src/app/structure-list/components/search/search.component.scss
@@ -21,7 +21,7 @@
}
input {
width: 100%;
- background-color: $grey-4;
+ background-color: $grey-5;
border: none;
@include cn-regular-14;
display: flex;
@@ -45,11 +45,10 @@
}
}
.btnSection {
- padding: 16px 0 16px 0;
- .phoneSection {
- display: none;
- }
- button {
+ padding: 16px 0 8px 0;
+ .button {
+ height: 40px;
+ width: 190px;
outline: none;
border: 1px solid $grey;
border-radius: 33px;
@@ -89,27 +88,29 @@
}
}
}
-.modalaccueil {
- margin-left: 100px;
+.modalformations {
+ margin-left: 206px;
}
.modalplusFiltres {
- margin-left: 196px;
+ margin-left: 412px;
}
.modal {
- max-height: 654px;
- max-width: 754px;
+ -moz-box-shadow: -5px 5px 10px 0px $grey;
+ box-shadow: -5px 5px 10px 0px $grey;
+ max-height: 648px;
+ width: 754px;
background: $white;
border: 1px solid $grey;
box-sizing: border-box;
z-index: 1;
position: absolute;
- margin-top: 80px;
+ margin-top: 96px;
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
- background: $grey-4;
+ background: $grey-5;
}
::-webkit-scrollbar-thumb {
background: $grey;
@@ -159,7 +160,6 @@
@include cn-bold-14;
display: flex;
align-items: center;
- text-decoration-line: underline;
}
height: 32px;
button {
@@ -203,7 +203,6 @@
.label {
padding-left: 8px;
@include cn-regular-14;
- padding: 0 16px 0 16px;
}
.customCheck {
display: inline-grid;
@@ -217,7 +216,7 @@
top: 0;
left: 0;
&:hover {
- background-color: $grey-4;
+ background-color: $grey-5;
}
&:after {
content: '';
@@ -237,3 +236,12 @@
}
}
}
+.footerSearchSection {
+ margin-bottom: 30px;
+ margin-right: 20px;
+
+ a {
+ @include cn-bold-14;
+ font-weight: bold;
+ }
+}
diff --git a/src/app/structure-list/components/search/search.component.ts b/src/app/structure-list/components/search/search.component.ts
index 259d6e208dd05fa6bab94103dcb6446db975a0a5..8ce4762640b74dbee99d915aa0098a4acb260349 100644
--- a/src/app/structure-list/components/search/search.component.ts
+++ b/src/app/structure-list/components/search/search.component.ts
@@ -18,7 +18,7 @@ export class SearchComponent implements OnInit {
searchTerm: string = '';
// Button variable
- modalType: string[] = ['services', 'modalite', 'plusFiltres'];
+ modalType: string[] = ['accompagnement', 'formations', 'plusFiltres'];
// Modal variable
categories: Category[];
@@ -77,8 +77,6 @@ export class SearchComponent implements OnInit {
// Management of the checkbox event (Check / Uncheck)
public onCheckboxChange(event, categ: string): void {
const checkValue: number = parseInt(event.target.value);
- console.log(checkValue);
-
if (event.target.checked) {
this.checkedModules.push(new Module(checkValue, categ));
} else {
@@ -117,6 +115,7 @@ export class SearchComponent implements OnInit {
.replace(/[\s-]/g, ' ')
.replace('?', '');
}
+
// Fake service api
private mockService(module: Category[], titre: string, categ: any, nbCateg: number): void {
let m = new Category();
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index d9375a3869c8e8a4e8ed658e81cc9c7184a0e65c..84d1d39ee95843f3b73b43b9a2da00d5a47a6cd8 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/src/app/structure-list/structure-list.component.html
@@ -1,5 +1,7 @@
<div class="container">
- <app-structure-list-search (searchEvent)="fetchResults($event)"></app-structure-list-search>
- <div class="divider"></div>
- <app-structure-list-card [filter]="currentFilter"></app-structure-list-card>
+ <div class="content">
+ <app-structure-list-search (searchEvent)="fetchResults($event)"></app-structure-list-search>
+ <div class="divider"></div>
+ <app-structure-list-card [filter]="currentFilter"></app-structure-list-card>
+ </div>
</div>
diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss
index 2d506b58df5f9e05bb03f988a1fbd0a0d6e7a058..fa639184dab946bd41f9f1edc12c7316af5f25bc 100644
--- a/src/app/structure-list/structure-list.component.scss
+++ b/src/app/structure-list/structure-list.component.scss
@@ -7,5 +7,8 @@
}
//En attendant de l'intégrer avec la map
.container {
- width: 320px;
+ width: 640px;
+ .content {
+ padding: 0 20px 0 20px;
+ }
}
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 2a650bee2f202420f6ebb2e48e827011fe669de3..319c1008e5eabeb80fb3863499523b450c8861d9 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -7,6 +7,7 @@ $grey-1: #333333;
$grey-2: #eeeeee;
$grey-3: #c3c3c3;
$grey-4: #f2ecf2;
+$grey-5: #f2f2f2;
/* YELLOW */
$yellow: #f2cb04;
$yellow-light: #fff8d6;
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index d21536e48e55c3a5a706c2b292336252ccbd842d..0fd92b3fcd00781c6a73390b0286a8c9d4db89f6 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -1,4 +1,4 @@
-$text-font: 'Courier New', 'Helvetica', sans-serif;
+$text-font: 'Trebuchet MS';
$footer-text-font: 'Arial', 'Helvetica', sans-serif;
$title-font: 'Courier New', 'Helvetica', sans-serif;