diff --git a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.html b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.html
index 608eb3a565e0a6f7a147d309553e070f8aa83d8f..a551cbded801178506d6ae3db4af8dffe26aa462 100644
--- a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.html
+++ b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.html
@@ -12,7 +12,7 @@
<!-- Beneficiary info -->
<section>
- <h3 class="sectionHeader uppercase">Bénéficiaire</h3>
+ <h3>Bénéficiaire</h3>
<div class="content">
<div class="inline">
<app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'person'" />
@@ -32,28 +32,9 @@
</div>
</section>
- <!-- Orientator -->
- <section *ngIf="isOrientator()">
- <h3 class="sectionHeader uppercase">Orienté par</h3>
- <div class="content">
- <div class="inline">
- <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'structureType'" />
- <p><span class="category-name">Nom :</span>{{ orientator.structureName }}</p>
- </div>
- <div *ngIf="orientator.structureMail" class="inline">
- <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'mail'" />
- <p><span class="category-name">Mail :</span>{{ orientator.structureMail }}</p>
- </div>
- <div *ngIf="orientator.structurePhone" class="inline">
- <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'phone'" />
- <p><span class="category-name">Téléphone :</span>{{ orientator.structurePhone }}</p>
- </div>
- </div>
- </section>
-
<!-- Appointment requested -->
<section *ngIf="shouldDisplayAppointmentRecap()">
- <h3 class="sectionHeader uppercase">Demande de rendez-vous auprès de</h3>
+ <h3>Demande de rendez-vous auprès de</h3>
<div class="content">
<div class="inline">
<app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'person'" />
@@ -86,15 +67,14 @@
<!-- Date display -->
<section *ngIf="recap">
- <h3 class="sectionHeader uppercase">Information du rendez-vous</h3>
+ <h3>Information du rendez-vous</h3>
<div class="content">
<div class="inline">
<app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'timer'" />
<p>
<span class="category-name">Le rappel se fera :</span>
- <span class="red bold">{{ recap.day }}</span
- > <span class="red bold month">{{ recap.month }}</span
- > <span>entre</span> <span class="big bold">{{ recap.hours }}</span>
+ <span class="red big">{{ recap.day }} {{ recap.month }}</span
+ > <span>entre</span> <span class="big">{{ recap.hours }}</span>
</p>
</div>
</div>
@@ -102,13 +82,32 @@
<!-- Comment -->
<section *ngIf="comment">
- <h3 class="sectionHeader uppercase">Commentaire</h3>
- <div class="content">{{ comment }}</div>
+ <h3>Commentaire</h3>
+ <div class="content grey451">{{ comment }}</div>
</section>
<!-- Structure list -->
<app-print-structures-grid *ngIf="structuresToPrint" [structures]="structuresToPrint" />
+ <!-- Orientator -->
+ <section *ngIf="isOrientator()">
+ <h3>Orienté par</h3>
+ <div class="content">
+ <div class="inline">
+ <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'structureType'" />
+ <p><span class="category-name">Nom :</span>{{ orientator.structureName }}</p>
+ </div>
+ <div *ngIf="orientator.structureMail" class="inline">
+ <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'mail'" />
+ <p><span class="category-name">Mail :</span>{{ orientator.structureMail }}</p>
+ </div>
+ <div *ngIf="orientator.structurePhone" class="inline">
+ <app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'phone'" />
+ <p><span class="category-name">Téléphone :</span>{{ orientator.structurePhone }}</p>
+ </div>
+ </div>
+ </section>
+
<!-- footer -->
<section *ngIf="recap" class="service-info">
<div>Besoin d'autres aides avec vos outils numériques ?</div>
diff --git a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss
index 6eac918671786d6628faf09a66673df9b32f0dde..cd5585b02263a70467281e7e2cbd6614436b8c90 100644
--- a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss
+++ b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.scss
@@ -5,26 +5,27 @@
.red {
color: $red;
}
+.grey451 {
+ color: $grey-4-5-1;
+}
.recapContainer {
display: flex;
flex-direction: column;
gap: 32px;
- max-width: 600px;
margin-top: 32px;
+ width: 600px;
@media print {
gap: 24px;
margin-top: 24px;
+ width: 682px;
}
.infos {
display: flex;
flex-direction: column;
gap: 16px;
-
- p {
- @include font-regular-12;
- }
+ @include font-regular-14;
h2 {
@include font-bold-18;
@@ -39,41 +40,28 @@
padding: 24px;
border-radius: 8px;
border: 1px solid $grey-6;
- @media print {
- padding: 16px;
- }
- .sectionHeader {
+ h3 {
@include font-bold-18;
- @media print {
- @include font-bold-14;
- }
+ text-transform: uppercase;
}
+
.content {
display: flex;
flex-direction: column;
gap: 8px;
@include font-regular-14;
- @media print {
- @include font-regular-11;
- }
.category-name {
display: inline-block;
+ width: 125px;
+ @include font-bold-14;
color: $grey-4-5-1;
print-color-adjust: exact;
- @include font-bold-14;
- width: 125px;
- @media print {
- @include font-bold-10;
- width: 100px;
- }
}
- @media not print {
- .big {
- @include font-regular-16;
- }
+ .big {
+ @include font-bold-16;
}
}
@@ -98,9 +86,9 @@
@include font-regular-8;
}
.digitalAssistance {
- @include font-regular-24;
+ @include font-regular-18;
@media print {
- @include font-regular-16;
+ @include font-regular-12;
}
.number {
@include font-bold-24;
diff --git a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.ts b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.ts
index ea93a0f17d5ed52b3c427649980bfdedbddc14ca..a1f96dc6567b6825a70a233fa5cc013b25763e93 100644
--- a/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.ts
+++ b/src/app/form/orientation-form-view/global-components/orientation-recap/orientation-recap.component.ts
@@ -93,12 +93,12 @@ export class OrientationRecapComponent implements OnInit {
public getRecapInfo(): string {
switch (this.recapType) {
- case RecapsType.onlineMediation:
- return 'Vous avez effectué une demande de rendez-vous. vous serez contacté(e) par le professionnel pour convenir d’une date.';
- case RecapsType.appointment:
- return 'Votre demande de rendez-vous d’aide numérique a bien été envoyée.<br>Un·e professionnel·le vous rappellera pour fixer une date.';
case RecapsType.structure:
return 'Pour utiliser votre ordinateur ou smartphone, aller sur internet, réaliser une démarche...<br>Vous pouvez trouver de l’aide ou du matériel dans les lieux suivants.<br>Si possible, appelez-les avant d’y aller pour connaître les horaires et les aides proposées.';
+ case RecapsType.appointment:
+ return 'Votre demande de rendez-vous d’aide numérique a bien été envoyée.<br>Un·e professionnel·le vous rappellera pour fixer une date.';
+ case RecapsType.onlineMediation:
+ return 'Vous avez effectué une demande de rendez-vous. vous serez contacté(e) par le professionnel pour convenir d’une date.';
default:
throw new Error(`Not implemented recap type ${this.recapType}`);
}
@@ -106,12 +106,12 @@ export class OrientationRecapComponent implements OnInit {
public getRecapTitle(): string {
switch (this.recapType) {
- case RecapsType.onlineMediation:
- return 'Demander un rendez-vous';
- case RecapsType.appointment:
- return 'Demande de rendez-vous d’aide numérique';
case RecapsType.structure:
return 'Besoin d’aide avec le numérique ?';
+ case RecapsType.appointment:
+ return 'Demande de rendez-vous d’aide numérique';
+ case RecapsType.onlineMediation:
+ return 'Demander un rendez-vous';
default:
throw new Error(`Not implemented recap type ${this.recapType}`);
}
diff --git a/src/app/shared/components/print-header/print-header.component.scss b/src/app/shared/components/print-header/print-header.component.scss
index 3e1f09d188d856d421510d57bf9313ec19f58400..f1759e0fae4dc286fa0a2c7ee02faa8787481f18 100644
--- a/src/app/shared/components/print-header/print-header.component.scss
+++ b/src/app/shared/components/print-header/print-header.component.scss
@@ -3,7 +3,7 @@
@media print {
@page {
- size: 595px 842px;
+ size: A4;
margin: 32px 56px;
}
header,
@@ -15,7 +15,7 @@
.container {
width: 600px;
@media print {
- width: 483px;
+ width: 100%;
}
}
diff --git a/src/app/shared/components/print-structures-grid/print-structures-grid.component.scss b/src/app/shared/components/print-structures-grid/print-structures-grid.component.scss
index ed951579cf739940554aaf7b6dff0d8c7a5781d8..2e710c4fb26b36f1f2316f01e595e75858bfc69c 100644
--- a/src/app/shared/components/print-structures-grid/print-structures-grid.component.scss
+++ b/src/app/shared/components/print-structures-grid/print-structures-grid.component.scss
@@ -38,10 +38,10 @@
display: flex;
flex-direction: column;
gap: 8px;
- @include font-regular-10;
+ @include font-regular-12;
.structureName {
- @include font-bold-12;
+ @include font-bold-15;
display: flex;
align-items: center;
gap: 6px;
@@ -57,9 +57,9 @@
margin: 0;
}
li {
- padding-left: 2px;
+ padding-left: 8px;
list-style-position: inside;
- @include font-regular-9;
+ @include font-regular-12;
}
}
}
diff --git a/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.html b/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.html
index 677d9c203eaf00d68e2004496f3237e150ecc182..fb7d5dc49e3750ef01e439d36187c09fa4bb6388 100644
--- a/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.html
+++ b/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.html
@@ -4,7 +4,7 @@
<div class="infos">
<div class="inline">
<app-svg-icon [iconClass]="'icon-20'" [folder]="'tags'" [icon]="'notification'" />
- <h2>Besoins d'aide avec le numérique ?</h2>
+ <h2>Besoin d'aide avec le numérique ?</h2>
</div>
<p>
Pour utiliser votre ordinateur ou smartphone, aller sur internet, réaliser une démarche...<br />
diff --git a/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.scss b/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.scss
index ceaa28f26a1dc0e9b70c8a606d1dc4c7b6de895c..5fe09120a6847a518002c19f8cea8da0d0d17fa7 100644
--- a/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.scss
+++ b/src/app/structure-list/components/structure-list-search-print/structure-list-search-print.component.scss
@@ -23,7 +23,7 @@
}
p {
- @include font-regular-12;
+ @include font-regular-14;
}
}
}
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index 6bf61fdafb7d932f89003b1d2292323a4caa9b71..ba27944e3fd4660136219fafeb846e10026aaaec 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -1,5 +1,4 @@
$font-size-8: 0.5rem; // 8px
-$font-size-9: 0.563rem; // 9px
$font-size-xxxxsmall: 0.625rem; // 10px
$font-size-xxsmall: 0.75rem; // 12px
$font-size-xmsmall: 0.813rem; // 13px
@@ -137,11 +136,6 @@ $font-size-xcxlarge: 2rem; // 32px
font-weight: normal;
font-size: $font-size-xxsmall;
}
-@mixin font-regular-11 {
- font-style: normal;
- font-weight: normal;
- font-size: $font-size-xxsmall;
-}
@mixin font-bold-10 {
font-style: normal;
font-weight: bold;
@@ -152,11 +146,6 @@ $font-size-xcxlarge: 2rem; // 32px
font-weight: normal;
font-size: $font-size-xxxxsmall;
}
-@mixin font-regular-9 {
- font-style: normal;
- font-weight: normal;
- font-size: $font-size-9;
-}
@mixin font-regular-8 {
font-style: normal;
font-weight: normal;
diff --git a/src/styles.scss b/src/styles.scss
index 2ef08da0358e9cebc66e25351ca4f849cee8a4e0..b79f38fe2b8776d887a5e3c01c575978b586d4e5 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -16,6 +16,9 @@ html {
margin: 0;
padding: 0;
background-color: $grey-9;
+ @media print {
+ background-color: $white;
+ }
}
body {
width: 100%;