diff --git a/src/app/shared/components/structure-detail-print/structure-detail-print.component.html b/src/app/shared/components/structure-detail-print/structure-detail-print.component.html
index e240471c18ab38a644b050e3587b4fa3aa8d3992..d5b08144cd8a32e7099efe191b2d67e01c8f3e60 100644
--- a/src/app/shared/components/structure-detail-print/structure-detail-print.component.html
+++ b/src/app/shared/components/structure-detail-print/structure-detail-print.component.html
@@ -8,11 +8,17 @@
<div class="mobile-column">
<div fxLayout="column" fxFlex="100%">
<div *ngIf="structure.address" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
- <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon>
+ <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'" [iconClass]="'icon-22'"></app-svg-icon>
<p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p>
</div>
- <div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
- <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'"></app-svg-icon>
+ <div
+ *ngIf="structure.contactPhone"
+ fxLayout="row"
+ fxLayoutAlign="none center"
+ [iconClass]="'icon-22'"
+ fxLayoutGap="13px"
+ >
+ <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'" [iconClass]="'icon-22'"></app-svg-icon>
<p>{{ structure.contactPhone | phone }}</p>
</div>
<div
@@ -21,7 +27,12 @@
fxLayoutAlign="none center"
fxLayoutGap="13px"
>
- <app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'" [title]="'Email'"></app-svg-icon>
+ <app-svg-icon
+ [type]="'ico'"
+ [iconClass]="'grey-1 icon-22'"
+ [icon]="'email'"
+ [title]="'Email'"
+ ></app-svg-icon>
<p>{{ structure.contactMail }}</p>
</div>
</div>
@@ -31,50 +42,47 @@
<!-- Accueil -->
<div
*ngIf="tclStopPoints || structure.hours.hasData() || structure.remoteAccompaniment"
- fxLayout="column"
- class="structure-details-block"
- fxLayoutAlign="baseline baseline"
- fxLayoutGap="20px"
+ class="structure-details-block flex column"
>
<!-- Opening Hours -->
- <div fxLayout="row" class="w-100 mobile-column">
- <div *ngIf="structure.hours.hasData()" fxFlex="60%">
- <h3 class="subtitle">Horaires</h3>
- <div fxLayout="column">
- <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
- <div *ngIf="day.value.open" fxLayout="row" fxLayoutAlign="none baseline">
- <h4 fxFlex="30%">{{ day.key | day }}</h4>
- <div class="opening-time w100" fxLayout="column" fxLayoutAlign="none baseline">
- <div *ngFor="let timeRange of day.value.time">
- <p *ngIf="timeRange.opening">
- de {{ timeRange.formatOpeningDate() }} Ã {{ timeRange.formatClosingDate() }}
- </p>
- </div>
+ <div class="w-100 mobile-column flex row mb20">
+ <div *ngIf="structure.hours.hasData()" class="timeContainer">
+ <h3 class="subtitle">HORAIRES</h3>
+ <div *ngFor="let day of structure.hours | keyvalue: keepOriginalOrder">
+ <div *ngIf="day.value.open" class="mb4">
+ <h4>{{ day.key | day }}</h4>
+ <div class="opening-time w100">
+ <div *ngFor="let timeRange of day.value.time">
+ <p *ngIf="timeRange.opening">{{ timeRange.opening }} - {{ timeRange.closing }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- accessModality -->
- <div *ngIf="tclStopPoints.length > 0" fxFlex="40%">
- <h3 class="subtitle">Accès</h3>
- <div fxLayout="column">
- <div *ngFor="let tclStop of tclStopPoints | slice: 0:3">
- <div fxLayout="row wrap" fxLayoutGap="5px" class="tclStop">
- <p>{{ tclStop.name }}:</p>
- <p *ngIf="tclStop.subLines.length > 0">Métro</p>
- <p *ngFor="let sub of tclStop.subLines">{{ sub }}</p>
- <p *ngIf="tclStop.tramLines.length > 0">Tram</p>
- <p *ngFor="let tram of tclStop.tramLines">{{ tram }}</p>
- <p *ngIf="tclStop.busLines.length > 0">Bus</p>
- <p *ngFor="let bus of tclStop.busLines">{{ bus }}</p>
+ <div *ngIf="tclStopPoints.length">
+ <h3 class="subtitle">ACCÈS</h3>
+ <div class="flex column container">
+ <div *ngFor="let tclStop of tclStopPoints | slice: 0:3" class="flex column tclStop">
+ <p>{{ tclStop.name }}</p>
+ <div class="flex">
+ <p *ngIf="tclStop.subLines.length" class="bold">Métro : </p>
+ <p *ngFor="let sub of tclStop.subLines" class="line">{{ sub }}</p>
+ </div>
+ <div class="flex">
+ <p *ngIf="tclStop.tramLines.length" class="bold">Tram : </p>
+ <p *ngFor="let tram of tclStop.tramLines" class="line">{{ tram }}</p>
+ </div>
+ <div class="flex">
+ <p *ngIf="tclStop.busLines.length" class="bold">Bus : </p>
+ <p *ngFor="let bus of tclStop.busLines" class="line">{{ bus }}</p>
</div>
</div>
</div>
</div>
</div>
- <div *ngIf="structure.exceptionalClosures" class="bold-info">
- <h3 class="subtitle">Précisions sur les horaires</h3>
+ <div *ngIf="structure.exceptionalClosures" class="mb20">
+ <h3 class="subtitle">PRÉCISIONS SUR LES HORAIRES</h3>
<p>{{ structure.exceptionalClosures }}</p>
</div>
<div *ngIf="structure.remoteAccompaniment" class="bold-info">
diff --git a/src/app/shared/components/structure-detail-print/structure-detail-print.component.scss b/src/app/shared/components/structure-detail-print/structure-detail-print.component.scss
index 0802858248e7dde8d690d2fafbf2d848ca596b0f..803cfe07f3889f1ebd5645b93bb6f66efca512fc 100644
--- a/src/app/shared/components/structure-detail-print/structure-detail-print.component.scss
+++ b/src/app/shared/components/structure-detail-print/structure-detail-print.component.scss
@@ -12,19 +12,17 @@ h2 {
}
h3 {
margin: 0 0 8px 0;
- @include lato-regular-16;
+ @include lato-regular-14;
}
h4 {
- margin-left: 0;
- margin-bottom: 0;
- margin-top: 4px;
+ margin: 0;
@include lato-regular-14;
color: $grey-2;
text-transform: capitalize;
}
p,
.custom-link {
- @include lato-regular-16;
+ @include lato-regular-14;
margin-top: 9px;
margin-bottom: 9px;
&.no-margin {
@@ -56,12 +54,10 @@ a {
}
}
-.structure-details-container > .structure-details-block {
- .subtitle {
- @include lato-bold-16;
- margin-bottom: 10px;
- color: $grey-3;
- }
+.subtitle {
+ @include lato-bold-14;
+ margin-bottom: 8px;
+ color: $grey-3;
}
.structure-details-container > .structure-details-block ~ .structure-details-block {
@@ -82,7 +78,7 @@ a {
}
.bold-info {
- @include lato-bold-16;
+ @include lato-bold-14;
}
@media print {
@@ -103,6 +99,9 @@ a {
}
.mobile-column {
+ p {
+ margin: 0;
+ }
@media #{$tablet} {
flex-direction: row;
}
@@ -122,7 +121,26 @@ a {
flex-direction: column;
}
}
-.tclStop p {
- margin-top: 0;
- margin-bottom: 0.2rem;
+
+.tclStop {
+ margin-bottom: 4px;
+ .line:not(:empty):not(:last-child):after {
+ content: ',\00a0';
+ }
+ p {
+ margin-top: 0;
+ }
+}
+
+.timeContainer {
+ flex: 1;
+ box-sizing: border-box;
+ max-width: 50%;
+}
+.mb4 {
+ margin-bottom: 4px;
+}
+
+.mb20 {
+ margin-bottom: 20px;
}
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.scss b/src/app/shared/components/svg-icon/svg-icon.component.scss
index 5630b1b400d76c7ab725362408ece7a0c9c22f50..ded8d76a148b01c5b677fed23a35acc96d09fd01 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -5,6 +5,20 @@
align-items: center;
}
+$sizes: (
+ 16: 16px,
+ 22: 22px,
+ 26: 26px,
+ 28: 28px,
+ 30: 30px,
+ 32: 32px,
+ 40: 40px,
+ 52: 52px,
+ 75: 75px,
+ 80: 80px,
+ 112: 112px,
+);
+
.icon {
display: inline-block;
height: 2em;
@@ -13,44 +27,11 @@
width: unset;
height: unset;
}
- &.icon-16 {
- height: 16px;
- width: 16px;
- }
- &.icon-26 {
- height: 26px;
- width: 26px;
- }
- &.icon-28 {
- width: 28px;
- height: 28px;
- }
- &.icon-30 {
- width: 30px;
- height: 30px;
- }
- &.icon-32 {
- width: 32px;
- height: 32px;
- }
- &.icon-52 {
- width: 52px;
- height: 52px;
- }
- &.icon-40 {
- width: 40px;
- height: 40px;
- }
- &.icon-75 {
- width: 4.688em;
- }
- &.icon-80 {
- height: 80px;
- width: 80px;
- }
- &.icon-112 {
- height: 112px;
- width: 112px;
+ @each $sizename, $size in $sizes {
+ &.icon-#{$sizename} {
+ height: $size;
+ width: $size;
+ }
}
&.validation {
height: 36px;
diff --git a/src/styles.scss b/src/styles.scss
index ebb342d254e16078ea5d61801a25649257eb4f55..a5947bffdc852ad5313cec294b863c9cea6e7e8b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -294,6 +294,20 @@ button {
}
}
+.flex {
+ &.row {
+ flex-direction: row;
+ }
+ &.row-wrap {
+ flex-flow: row wrap;
+ }
+ &.column {
+ flex-direction: column;
+ }
+ box-sizing: border-box;
+ display: flex;
+}
+
// PRINT
@media print {