[Gepardec/mega#749] adapt loading and card for bills

Gepardec · Jun 3, 2024 · 0d9c63c · 0d9c63c
1 parent f970e33
commit 0d9c63c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/src/app/domains/monthly-report/feature-monthly-report/bills/bills.component.html b/src/app/domains/monthly-report/feature-monthly-report/bills/bills.component.html
@@ -1,4 +1,4 @@
-<mat-card appearance="raised" class="fill-parent">
+<mat-card appearance="raised" class="fill-parent bills-card">
   <mat-card-header>
     <mat-card-title>
       <ngx-skeleton-loader *ngIf="!billInfo else title"
@@ -52,7 +52,10 @@
       </div>
     </ng-container>
 
-    <div *ngIf=" billInfo && billInfo.employeeHasCreditCard" class="credit-card-warning">
+    <ng-container *ngIf="!billInfo && billInfo?.employeeHasCreditCard">
+      <ngx-skeleton-loader [theme]="{ height: '46px' }"></ngx-skeleton-loader>
+    </ng-container>
+    <div *ngIf=" billInfo && billInfo?.employeeHasCreditCard" class="credit-card-warning">
       <app-credit-card-warning></app-credit-card-warning>
     </div>
   </mat-card-content>

diff --git a/src/app/domains/monthly-report/feature-monthly-report/bills/bills.component.scss b/src/app/domains/monthly-report/feature-monthly-report/bills/bills.component.scss
@@ -1,14 +1,9 @@
 @import 'styles/colors';
 
-.mat-card {
-  width: 100%;
-  border-radius: 0;
-
-  .mat-card-header {
-    background-color: #f0f0f0;
-    width: 100%;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+.bills-card {
+  mat-card-content{
+    /* override default material padding */
+    padding-bottom: 0;
   }
 }
 
@@ -43,7 +38,6 @@
   padding-right: 16px;
 }
 
-
 .mat-column-icon {
   flex: 0 0 5%;
   justify-content: right;
@@ -57,5 +51,22 @@
 .credit-card-warning {
   display: flex;
   justify-content: flex-start;
-  margin-top: 8px;
+}
+
+@media screen and (min-width: 1664px){
+  .credit-card-warning {
+    margin-top: 30px;
+  }
+}
+
+@media (min-width: 1264px) and (max-width: 1664px) {
+  .credit-card-warning{
+    margin-top: 10px;
+  }
+}
+
+@media screen and (max-width: 1264px){
+  .credit-card-warning{
+    margin-top: 25px;
+  }
 }