Skip to content
Snippets Groups Projects
Commit adf84316 authored by Hugo SUBTIL's avatar Hugo SUBTIL
Browse files

feat(orientation): print orientation design

parent cada5534
No related branches found
No related tags found
4 merge requests!418V2.1.0,!400V2.0,!388Resolve "Affichage des accès sur fiche orientation",!230V2.0
Hide whitespace changes
Inline Side-by-side
src/app/shared/components/structure-detail-print/structure-detail-print.component.html
+ 43
− 35
View file @ adf84316
......@@ -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&nbsp;:&nbsp;</p>
<p *ngFor="let sub of tclStop.subLines" class="line">{{ sub }}</p>
</div>
<div class="flex">
<p *ngIf="tclStop.tramLines.length" class="bold">Tram&nbsp;:&nbsp;</p>
<p *ngFor="let tram of tclStop.tramLines" class="line">{{ tram }}</p>
</div>
<div class="flex">
<p *ngIf="tclStop.busLines.length" class="bold">Bus&nbsp;:&nbsp;</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">
......
src/app/shared/components/structure-detail-print/structure-detail-print.component.scss
+ 33
− 15
View file @ adf84316
......@@ -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;
}
src/app/shared/components/svg-icon/svg-icon.component.scss
+ 19
− 38
View file @ adf84316
......@@ -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;
......
src/styles.scss
+ 14
− 0
View file @ adf84316
......@@ -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 {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment