MOBILE-2768 policy: Fix table width
parent
03df67b739
commit
5d96c5a339
|
@ -28,26 +28,28 @@
|
|||
</ion-card>
|
||||
</div>
|
||||
|
||||
<table *ngIf="isTablet && policies.length" class="core-table x-scrollable core-policy-tablet-container">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ 'core.policy.policydocname' | translate }}</th>
|
||||
<th>{{ 'core.policy.policydocrevision' | translate }}</th>
|
||||
<th>{{ 'core.policy.response' | translate }}</th>
|
||||
<th>{{ 'core.policy.responseon' | translate }}</th>
|
||||
<ng-container *ngIf="hasOnBehalf">
|
||||
<th>{{ 'core.policy.responseby' | translate }}</th>
|
||||
<th>{{ 'core.policy.acceptancenote' | translate }}</th>
|
||||
<div class="x-scrollable core-policy-tablet-container">
|
||||
<table *ngIf="isTablet && policies.length" class="core-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ 'core.policy.policydocname' | translate }}</th>
|
||||
<th>{{ 'core.policy.policydocrevision' | translate }}</th>
|
||||
<th>{{ 'core.policy.response' | translate }}</th>
|
||||
<th>{{ 'core.policy.responseon' | translate }}</th>
|
||||
<ng-container *ngIf="hasOnBehalf">
|
||||
<th>{{ 'core.policy.responseby' | translate }}</th>
|
||||
<th>{{ 'core.policy.acceptancenote' | translate }}</th>
|
||||
</ng-container>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="auto-striped">
|
||||
<ng-container *ngFor="let policy of policies">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="policyTabletTemplate; context: {policy: policy, isPreviousVersion: false, hidden: false}" />
|
||||
</ng-container>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="auto-striped">
|
||||
<ng-container *ngFor="let policy of policies">
|
||||
<ng-container
|
||||
*ngTemplateOutlet="policyTabletTemplate; context: {policy: policy, isPreviousVersion: false, hidden: false}" />
|
||||
</ng-container>
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isTablet && policies.length" class="core-policy-mobile-container">
|
||||
<ng-container *ngFor="let policy of policies">
|
||||
|
|
|
@ -75,7 +75,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
table.core-policy-tablet-container {
|
||||
.core-policy-tablet-container table {
|
||||
th {
|
||||
&:first-child {
|
||||
@include padding-horizontal(24px, 0px);
|
||||
|
@ -83,7 +83,6 @@
|
|||
}
|
||||
|
||||
th, td {
|
||||
min-width: 200px;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
|
|
|
@ -21,8 +21,8 @@
|
|||
</ion-card>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!isCardLayout">
|
||||
<table class="core-table x-scrollable">
|
||||
<div *ngIf="!isCardLayout" class="x-scrollable">
|
||||
<table class="core-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th *ngFor="let header of state.report.data.headers">
|
||||
|
@ -40,7 +40,7 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
|
|
|
@ -2031,6 +2031,11 @@ ion-datetime-button p {
|
|||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.x-scrollable {
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Table App styles
|
||||
table.core-table {
|
||||
border-collapse: collapse;
|
||||
|
@ -2039,11 +2044,6 @@ table.core-table {
|
|||
margin: 1em auto;
|
||||
color: var(--text-color);
|
||||
|
||||
&.x-scrollable {
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
thead th {
|
||||
vertical-align: bottom;
|
||||
font-weight: bold;
|
||||
|
|
Loading…
Reference in New Issue