diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 803b77c89f8eee0d9008b9e636c17caa9fec3a71..29e32a153bb71497f6fc87bdc4f1d46be4da47eb 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -4,7 +4,7 @@
.app-container {
height: 100%;
- display: flex;
+ display: block;
flex-direction: column;
overflow-y: auto;
}
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index 4e663e36bc53ff079846c81e0c1050323a068151..b04879372c33a128e2cfc2480f7b522bcbb04175 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -1,5 +1,5 @@
-<div class="footer" fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="center">
- <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap.lt-sm="10px">
+<div class="footer" fxLayout="row" fxLayoutAlign="center">
+ <div fxLayout="row">
<a class="clickable text-align-center" routerLink="/legal-notice" i18n>Mentions légales</a>
<!-- <a class="clickable text-align-center" routerLink="/sitemap" i18n>Plan du site</a> -->
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 9398ecc033252e7f2061ec146926f8019a3e89b0..4c3179c71c7478231a7fb44c973d546e698536c6 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -53,12 +53,6 @@
align-items: center;
}
-@media screen {
- div {
- flex-direction: row !important;
- }
-}
-
@media print {
div {
display: none !important;
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index 52be626370cf202a6e380b7ca10dbaf58d2d1e65..82bdfafba43c0b89380cb1a19ee1f36c53120def 100644
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -26,9 +26,10 @@
}
}
.content-container {
- height: 100%;
+ height: calc(100vh - #{$header-height} - #{$footer-height});
@media #{$tablet} {
padding: 0;
+ height: 100%;
}
}
.btnSwitch {
diff --git a/src/app/shared/service/print.service.ts b/src/app/shared/service/print.service.ts
index 101126c77ca3d0d2f6f9e5dabdebf87692a7f30a..f34fa8c2941862aed41f53c4568c522258033b9a 100644
--- a/src/app/shared/service/print.service.ts
+++ b/src/app/shared/service/print.service.ts
@@ -29,6 +29,6 @@ export class PrintService {
window.print();
this.isPrinting = false;
this.router.navigate([{ outlets: { print: null } }]);
- });
+ }, 1500);
}
}
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index 72c0a8883947d16daee3d9f45385a061d9741ad2..fe3bc0e488aa489017e3bab7d9d413ee4c77cae0 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -88,7 +88,7 @@
[text]="'Filtres'"
(action)="openModal(TypeModal.accompaniment)"
></app-button>
- <a (click)="openConfirmationModal()" tabindex="0">Ajouter une structure</a>
+ <a (click)="openConfirmationModal()" class="primary right" tabindex="0">Ajouter une structure</a>
</div>
</div>
<div class="footerSearchSection isntPhoneContent" fxLayout="row" fxLayoutAlign="space-between center">
@@ -106,7 +106,7 @@
</label>
</div>
</div>
- <a (click)="openConfirmationModal()" tabindex="0">Ajouter une structure</a>
+ <a (click)="openConfirmationModal()" class="primary right" tabindex="0">Ajouter une structure</a>
</div>
<app-modal
[openned]="isConfirmationModalOpen"
diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss
index 8359c4bddafb73541a85738c0b36a4685145aedb..5afee7a7da5b5e1862c94f1a26536e86a810bf42 100644
--- a/src/app/structure-list/components/search/search.component.scss
+++ b/src/app/structure-list/components/search/search.component.scss
@@ -119,11 +119,7 @@
}
}
}
-a {
- @include hyperlink;
- width: 100%;
- text-align: right;
-}
+
.phoneSection {
margin: 9px 0px 18px 0px;
display: none;
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 8d375d069c14dfc5a9b10194fc7fbe7c78ad4d59..0d2659880097ca8719e2c596d41b26ef84d33bac 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -8,17 +8,6 @@
></app-structureForm>
<div class="structrue-details-container" *ngIf="structure && !isLoading">
<!-- Header info -->
- <div fxLayout="row" fxLayoutAlign="center center" *ngIf="!isClaimed">
- <button (click)="claimStructure()">Revendiquer</button>
- </div>
- <div fxLayout="row" fxLayoutAlign="center center">
- <button
- *ngIf="profileService.isLinkedToStructure(structure._id) || profileService.isAdmin()"
- (click)="editStructure()"
- >
- Modifier la structure
- </button>
- </div>
<div fxLayout="row" fxLayoutAlign="end center">
<div (click)="close()" class="ico-close-details"></div>
</div>
@@ -50,7 +39,7 @@
></app-button>
</div>
</div>
- <div fxLayout="row" fxLayout.lt-sm="column">
+ <div fxLayout="row" class="mobile-column">
<div fxLayout="column" fxFlex="50%">
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
<app-structure-opening-status
@@ -67,6 +56,7 @@
<app-svg-icon [type]="'ico'" [icon]="'web'"></app-svg-icon>
<a
target="_blank"
+ class="custom-link"
rel="noopener noreferrer"
[href]="structure.website.includes('http') ? structure.website : 'http://' + structure.website"
>{{ structure.website | url }}</a
@@ -92,6 +82,77 @@
</div>
</div>
</div>
+ <div fxLayout="row" fxLayoutAlign="center center">
+ <a *ngIf="!isClaimed" (click)="claimStructure()" class="primary" tabindex="0">Revendiquer cette structure</a>
+ <a
+ *ngIf="profileService.isLinkedToStructure(structure._id) || profileService.isAdmin()"
+ (click)="editStructure()"
+ class="primary"
+ tabindex="0"
+ >
+ Modifier cette structure
+ </a>
+ </div>
+ <div>
+ {{ structure.description }}
+ </div>
+ <div class="info">
+ {{ structure.lockdownActivity }}
+ </div>
+ </div>
+ </div>
+ <!-- Accueil -->
+ <div
+ *ngIf="structure.accessModality.length > 0 || structure.hours.hasData()"
+ fxLayout="column"
+ class="structure-details-block"
+ fxLayoutAlign="baseline baseline"
+ fxLayoutGap="20px"
+ >
+ <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
+ <app-svg-icon [type]="'ico'" [icon]="'accueil'" [iconClass]="'icon-32'"></app-svg-icon>
+ <h2>Accueil</h2>
+ </div>
+ <!-- Openning Hours -->
+ <div fxLayout="row" class="w-100 mobile-column">
+ <div *ngIf="structure.hours.hasData()" fxFlex="50%">
+ <h3 class="subtitle">Horaires d’ouverture au public</h3>
+ <div fxLayout="column">
+ <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
+ <div *ngIf="day.value.open">
+ <h4>{{ day.key | day }}</h4>
+ <div class="openning-time" fxLayout="row" fxLayoutAlign="none flex-end">
+ <div *ngFor="let timeRange of day.value.time; let isFirst = first">
+ <p *ngIf="isFirst">de {{ timeRange.formatOpenningDate() }} Ã {{ timeRange.formatClosingDate() }}</p>
+ <p *ngIf="!isFirst && timeRange.openning">
+ et de {{ timeRange.formatOpenningDate() }} Ã {{ timeRange.formatClosingDate() }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- accessModality -->
+ <div *ngIf="structure.accessModality.length > 0" fxFlex="50%">
+ <h3 class="subtitle">Accès</h3>
+ <div fxLayout="column" fxLayoutGap="10px">
+ <div fxLayout="column" fxLayoutGap="8px">
+ <div
+ fxLayout="row"
+ fxLayoutAlign="none flex-end"
+ fxLayoutGap="8px"
+ *ngFor="let acces of structure.accessModality"
+ >
+ <p class="no-margin">{{ getAccessLabel(acces) }}</p>
+ </div>
+ <p class="no-margin">Accessibles aux personnes à mobilité réduite</p>
+ </div>
+ <div *ngFor="let public of structure.publics" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
+ <p class="no-margin">{{ getPublicLabel(public) }}</p>
+ </div>
+ </div>
+ </div>
</div>
</div>
<!-- Démarches en ligne -->
@@ -119,7 +180,7 @@
</p>
</div>
</div>
- <!-- Services -->
+ <!-- Ateliers -->
<div
*ngIf="isBaseSkills() || isAccessRights()"
fxLayout="column"
@@ -131,7 +192,8 @@
<app-svg-icon [type]="'ico'" [icon]="'services'" [iconClass]="'icon-32'"></app-svg-icon>
<h2>Ateliers</h2>
</div>
- <div fxLayout="row" class="w-100" fxLayout.lt-sm="column">
+ <span class="bold-info">L'accès à ces ateliers peut être payant</span>
+ <div fxLayout="row" class="w-100 mobile-column">
<div fxFlex="50%" *ngIf="isBaseSkills()">
<h3 class="subtitle">Compétences de base</h3>
<p *ngFor="let skill of baseSkills">{{ skill.text }}</p>
@@ -142,53 +204,6 @@
</div>
</div>
</div>
- <!-- Accueil -->
- <div
- *ngIf="structure.accessModality.length > 0 || structure.hours.hasData()"
- fxLayout="column"
- class="structure-details-block"
- fxLayoutAlign="baseline baseline"
- fxLayoutGap="20px"
- >
- <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
- <app-svg-icon [type]="'ico'" [icon]="'accueil'" [iconClass]="'icon-32'"></app-svg-icon>
- <h2>Accueil</h2>
- </div>
- <!-- Openning Hours -->
- <div fxLayout="row" class="w-100" fxLayout.lt-sm="column">
- <div *ngIf="structure.hours.hasData()" fxFlex="50%">
- <h3 class="subtitle">Horaires d’ouverture au public</h3>
- <div fxLayout="column">
- <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
- <div *ngIf="day.value.open">
- <h4>{{ day.key | day }}</h4>
- <div class="openning-time" fxLayout="row" fxLayoutAlign="none flex-end">
- <div *ngFor="let timeRange of day.value.time; let isFirst = first">
- <p *ngIf="isFirst">de {{ timeRange.formatOpenningDate() }} Ã {{ timeRange.formatClosingDate() }}</p>
- <p *ngIf="!isFirst && timeRange.openning">
- et de {{ timeRange.formatOpenningDate() }} Ã {{ timeRange.formatClosingDate() }}
- </p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- accessModality -->
- <div *ngIf="structure.accessModality.length > 0" fxFlex="50%">
- <h3 class="subtitle">Accès</h3>
- <div
- *ngFor="let acces of structure.accessModality"
- fxLayout="row"
- fxLayoutAlign="none flex-end"
- fxLayoutGap="8px"
- >
- <app-svg-icon [type]="'ico'" [icon]="getAccessIcon(acces)"></app-svg-icon>
- <p>{{ getAccessLabel(acces) }}</p>
- </div>
- </div>
- </div>
- </div>
<!-- Equipements -->
<div
*ngIf="structure.hasEquipments()"
@@ -200,13 +215,8 @@
<app-svg-icon [type]="'ico'" [icon]="'equipement'" [iconClass]="'icon-32'"></app-svg-icon>
<h2>Équipements</h2>
</div>
- <div
- fxLayout="row"
- fxLayoutAlign="none flex-end"
- fxLayoutGap="13px"
- *ngFor="let equipement of structure.equipmentsAndServices"
- >
- <p>
+ <div fxLayout="column">
+ <p *ngFor="let equipement of structure.equipmentsAndServices" class="no-margin-bottom">
{{ getEquipmentsLabel(equipement) }}
<span *ngIf="equipement == 'ordinateurs' && structure.nbComputers"> : {{ structure.nbComputers }}</span>
<span *ngIf="equipement == 'tablettes' && structure.nbTablets"> : {{ structure.nbTablets }}</span>
@@ -259,7 +269,6 @@
</p>
<p *ngFor="let bus of tclStop.busLines">
<app-svg-icon [type]="'tcl'" [icon]="bus" [iconClass]="'icon-75'"></app-svg-icon>
- <!-- {{ bus }} -->
</p>
</div>
</div>
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index d0cb40f0ba6da221ccd7642c236ada9d1c1650d2..d8ea58095fe9cb0a3d540a8df867ecea8a8cc989 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/src/app/structure-list/components/structure-details/structure-details.component.scss
@@ -5,6 +5,10 @@
@import '../../../../assets/scss/layout';
@import '../../../../assets/scss/breakpoint';
+a {
+ padding: unset;
+}
+
.structrue-details-container {
border-right: solid 1px $grey-4;
background-color: $white;
@@ -36,6 +40,8 @@
.subtitle {
text-transform: uppercase;
@include cn-bold-16;
+ margin-bottom: 10px;
+ color: $grey-3;
}
}
@@ -49,8 +55,7 @@
.openning-time {
p {
- margin-left: 0;
- margin-right: 5px;
+ margin: 0 5px 12px 0;
}
}
.typeInformationHeader {
@@ -74,10 +79,21 @@ h4 {
text-transform: uppercase;
}
p,
-a {
+.custom-link {
@include cn-regular-16;
margin-top: 9px;
margin-bottom: 9px;
+ &.no-margin {
+ margin-top: unset;
+ margin-bottom: unset;
+ }
+ &.no-margin-bottom {
+ margin-bottom: unset;
+ }
+}
+
+.bold-info {
+ @include cn-bold-16;
}
@media print {
@@ -99,3 +115,7 @@ a {
display: none !important;
}
}
+
+.info {
+ color: $ram-hover-principal;
+}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index 71619679ee561c260bbb728c11b6b4191946cddb..747ca0402f88d59d7bf864b1f150f2c39b04572c 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/src/app/structure-list/components/structure-details/structure-details.component.ts
@@ -15,6 +15,7 @@ import { TclStopPoint } from '../../../models/tclStopPoint.model';
import { ProfileService } from '../../../profile/services/profile.service';
import { User } from '../../../models/user.model';
import { AuthService } from '../../../services/auth.service';
+import { PublicCategorie } from '../../enum/public.enum';
@Component({
selector: 'app-structure-details',
templateUrl: './structure-details.component.html',
@@ -130,20 +131,6 @@ export class StructureDetailsComponent implements OnInit {
this.displayForm();
this.ngOnInit();
}
- public getAccessIcon(accessModality: AccessModality): string {
- switch (accessModality) {
- case AccessModality.free:
- return 'group';
- case AccessModality.meeting:
- return 'calendar';
- case AccessModality.meetingOnly:
- return 'calendar';
- case AccessModality.numeric:
- return 'tel';
- default:
- return null;
- }
- }
public getAccessLabel(accessModality: AccessModality): string {
switch (accessModality) {
@@ -160,6 +147,21 @@ export class StructureDetailsComponent implements OnInit {
}
}
+ public getPublicLabel(tagetPublic: PublicCategorie): string {
+ switch (tagetPublic) {
+ case PublicCategorie.young:
+ return 'Jeunes (16 - 25 ans)';
+ case PublicCategorie.adult:
+ return 'Adultes (25 - 65 ans)';
+ case PublicCategorie.elderly:
+ return 'Séniors (+ de 65 ans)';
+ case PublicCategorie.all:
+ return 'Tout public';
+ default:
+ return null;
+ }
+ }
+
public setServiceCategories(): void {
this.baseSkills = this.structure.baseSkills.map((skill) =>
_.find(this.baseSkillssReferentiel.modules, { id: skill })
diff --git a/src/app/structure-list/enum/public.enum.ts b/src/app/structure-list/enum/public.enum.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1f837130376982ac9fb26266d8218d0aa63dfa66
--- /dev/null
+++ b/src/app/structure-list/enum/public.enum.ts
@@ -0,0 +1,6 @@
+export enum PublicCategorie {
+ young = 'jeunes1625Ans',
+ adult = 'adultes',
+ elderly = 'seniorsPlusDe65Ans',
+ all = 'toutPublic',
+}
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 2e5b3fbe2838fc61c7800875b4d226b44632f925..ad8ba7e920341154095335aa68e22ac098f9e0f2 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -16,6 +16,7 @@ $blue: #348899;
$blue-hover: #117083;
$blue-active: #8cb6be;
$red-metro: #d50000;
+$red-info: #a00000;
/* APP COLORS */
$primary-color: $red-metro;
$secondary-color: $blue;
@@ -23,3 +24,5 @@ $default-link-color: $grey-2;
$button-secondary: $blue;
$app-background: $grey-6;
$modal-background: rgba($grey-1, 0.75);
+$app-background: $grey-6;
+$ram-hover-principal: $red-info;
diff --git a/src/styles.scss b/src/styles.scss
index 1773ee54cf9ba8e8bb68207ec02196d7a1b57db6..5f20d287c24f9336b232103318a1aef9d7b90471 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -5,6 +5,7 @@
@import 'assets/scss/breakpoint';
@import 'assets/scss/icons';
@import 'assets/scss/inputs';
+@import 'assets/scss/hyperlink';
@import '../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css';
html {
@@ -35,6 +36,13 @@ a {
&:hover {
text-decoration: underline;
}
+ &.primary {
+ @include hyperlink;
+ width: 100%;
+ }
+ &.right {
+ text-align: right;
+ }
}
.clickable {
@@ -141,6 +149,14 @@ a {
width: 100%;
}
+.mobile-column {
+ @media #{$large-phone} {
+ flex-direction: column;
+ }
+}
+
+// PRINT
+
@media print {
body,
html,