MOBILE-2768 policy: Fix table width

main
Dani Palou 2024-03-20 09:27:55 +01:00
parent 03df67b739
commit 5d96c5a339
4 changed files with 30 additions and 29 deletions

View File

@ -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">

View File

@ -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;
}

View File

@ -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>

View File

@ -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;