Commit 454e8b82 authored by Léonard Treille's avatar Léonard Treille
Browse files

Update prochainpassage style

parent 20834bf1
......@@ -68,23 +68,28 @@
</ng-template>
<ng-template #withOccupancy let-obj="obj" let-logo="logo">
<div class="layout align-center full-width list-item">
<div [ngStyle]="{'background-color':'#'+obj.ligne?.color}" *ngIf="logo">
<app-logo-ligne [ligne]="obj.ligne" [height]="73" width="56"></app-logo-ligne>
<div class="list-item-wrapper dark-overlay-12">
<div class="layout align-center full-width list-item">
<div [ngStyle]="{'background-color':'#'+obj.ligne?.color}" *ngIf="logo">
<app-logo-ligne [ligne]="obj.ligne" [height]="73" width="56"></app-logo-ligne>
</div>
<div class="flex layout align-center">
<mat-icon class="small-icon" *ngIf="logo && obj.ligne.mode === 'TRAM'">tram</mat-icon>
<mat-icon class="small-icon" *ngIf="logo && obj.ligne.mode === 'BUS'">directions_bus</mat-icon>
<span class="flex">
<span class="ellipsis item-name">{{ obj.name }}</span>
</span>
</div>
<ng-container *ngTemplateOutlet="times; context: { obj: obj }"></ng-container>
</div>
<div class="flex layout align-center">
<mat-icon class="small-icon" *ngIf="logo && obj.ligne.mode === 'TRAM'">tram</mat-icon>
<mat-icon class="small-icon" *ngIf="logo && obj.ligne.mode === 'BUS'">directions_bus</mat-icon>
<span class="flex">
<span class="ellipsis item-name">{{ obj.name }}</span>
</span>
<button class="chart-wrapper" mat-ripple (click)="openChartDialog(obj)">
<span class="secondary-text">Fréquentation en temps normal</span>
<app-chart type="vertical-bar" [dataset]="obj | occupancyDataset | async" [tooltipDisabled]="true"></app-chart>
</button>
<div class="layout content-center">
<button mat-button color="primary">Contribuer</button>
</div>
<ng-container *ngTemplateOutlet="times; context: { obj: obj }"></ng-container>
</div>
<button class="chart-wrapper" mat-ripple (click)="openChartDialog(obj)">
<span class="secondary-text">Fréquentation en temps normal</span>
<app-chart type="vertical-bar" [dataset]="obj | occupancyDataset | async" [tooltipDisabled]="true"></app-chart>
</button>
</ng-template>
<ng-template #unavailableLabel>
......
......@@ -141,6 +141,12 @@ app-realtime-icon {
transform: translateY(-100%);
}
.list-item-wrapper {
margin: $spacing;
border-radius: $shape-radius / 2;
padding-bottom: $spacing * 2;
}
.list-item {
height: 64px;
padding: 0 0 0 $spacing * 2;
......@@ -148,8 +154,10 @@ app-realtime-icon {
}
.chart-wrapper {
width: calc(100% - #{$spacing * 2});
padding: $spacing $spacing;
margin: $spacing * 2;
margin: $spacing;
margin-bottom: $spacing * 2;
box-sizing: border-box;
background: transparent;
border: none;
......@@ -161,16 +169,12 @@ app-realtime-icon {
span {
display: block;
margin-bottom: $spacing / 2;
text-align: left;
}
&:focus {
outline: none;
}
&:hover,
&:focus {
border: 1px solid red;
}
}
app-chart {
......
......@@ -36,7 +36,7 @@
<div class="accordion-deco" [ngStyle]="{ 'background': '#' + ligne?.color }"></div>
<mat-accordion class="m-theme m-list important no-background no-padding stops">
<mat-expansion-panel *ngFor="let arret of ligneArrets | filter:'name':filtreArrets; let isFirst = first; let isLast = last;"
class="content-no-spacing dark-overlay-8" #panel="matExpansionPanel">
class="content-no-spacing dark-overlay-2" #panel="matExpansionPanel">
<mat-expansion-panel-header class="with-separator" collapsedHeight="48px" expandedHeight="48px">
<div class="accordion-header-deco" [class.visible]="!panel.expanded" [class.first]="isFirst" [class.last]="isLast"
[ngStyle]="{ 'background': '#' + ligne?.color }" [class.after-black]="ligne?.textColor === '000000'"></div>
......
Markdown is supported
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