From b1d5f63175665fe5c0bb35c4bd8434d8e04f5820 Mon Sep 17 00:00:00 2001
From: Pierre Ecarlat <pecarlat@grandlyon.com>
Date: Tue, 14 May 2024 14:05:04 +0000
Subject: [PATCH] bug(print): Make printed pages compatible to printCreator
(and others)
---
.../orientation-recap.component.html | 53 +++++++++----------
.../orientation-recap.component.scss | 42 ++++++---------
.../orientation-recap.component.ts | 16 +++---
.../print-header/print-header.component.scss | 4 +-
.../print-structures-grid.component.scss | 8 +--
...structure-list-search-print.component.html | 2 +-
...structure-list-search-print.component.scss | 2 +-
src/assets/scss/_typography.scss | 11 ----
src/styles.scss | 3 ++
9 files changed, 60 insertions(+), 81 deletions(-)
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 608eb3a56..a551cbded 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 6eac91867..cd5585b02 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 ea93a0f17..a1f96dc65 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 3e1f09d18..f1759e0fa 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 ed951579c..2e710c4fb 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 677d9c203..fb7d5dc49 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 ceaa28f26..5fe09120a 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 6bf61fdaf..ba27944e3 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 2ef08da03..b79f38fe2 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%;
--
GitLab