layouts are fixed

src/app/pages/games/game/component/bet-history.component.html

@@ -48,9 +48,7 @@
 
     <!-- CONTENT CARD -->
     <div class="content-card">
-      <app-bet-history-table></app-bet-history-table>
+      <app-bet-history-table class="bet-history-table"></app-bet-history-table>
-      <app-bet-history-table></app-bet-history-table>
-      <app-bet-history-table></app-bet-history-table>
       <mat-paginator
         #paginator
         [pageIndex]="0"

src/app/pages/games/game/component/mini-game-settings.component.scss

@@ -1,20 +1,15 @@
-@import "src/@fuse/scss/fuse";
+@import 'src/@fuse/scss/fuse';
-
-e-commerce-orders {
 
+app-mini-game-settings {
   #orders {
-
     .top-bg {
-
       @include media-breakpoint('xs') {
         height: 224px;
       }
     }
 
     > .center {
-
       > .header {
-
         .search-wrapper {
           width: 100%;
           max-width: 480px;
@@ -63,7 +58,7 @@ e-commerce-orders {
 
   .orders-table {
     flex: 1 1 auto;
-        border-bottom: 1px solid rgba(0, 0, 0, .12);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 
@@ -93,7 +88,7 @@ e-commerce-orders {
       .product-image {
         width: 52px;
         height: 52px;
-                border: 1px solid rgba(0, 0, 0, .12);
+        border: 1px solid rgba(0, 0, 0, 0.12);
       }
     }
 

src/app/pages/games/game/component/mini-game.component.scss

@@ -1,20 +1,15 @@
-@import "src/@fuse/scss/fuse";
+@import 'src/@fuse/scss/fuse';
-
-e-commerce-orders {
 
+app-mini-game {
   #orders {
-
     .top-bg {
-
       @include media-breakpoint('xs') {
         height: 224px;
       }
     }
 
     > .center {
-
       > .header {
-
         .search-wrapper {
           width: 100%;
           max-width: 480px;
@@ -63,7 +58,7 @@ e-commerce-orders {
 
   .orders-table {
     flex: 1 1 auto;
-        border-bottom: 1px solid rgba(0, 0, 0, .12);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 
@@ -93,7 +88,7 @@ e-commerce-orders {
       .product-image {
         width: 52px;
         height: 52px;
-                border: 1px solid rgba(0, 0, 0, .12);
+        border: 1px solid rgba(0, 0, 0, 0.12);
       }
     }
 

src/app/pages/games/game/component/sport-mix.component.scss

@@ -1,20 +1,15 @@
-@import "src/@fuse/scss/fuse";
+@import 'src/@fuse/scss/fuse';
-
-e-commerce-orders {
 
+app-sport-mix {
   #orders {
-
     .top-bg {
-
       @include media-breakpoint('xs') {
         height: 224px;
       }
     }
 
     > .center {
-
       > .header {
-
         .search-wrapper {
           width: 100%;
           max-width: 480px;
@@ -63,7 +58,7 @@ e-commerce-orders {
 
   .orders-table {
     flex: 1 1 auto;
-        border-bottom: 1px solid rgba(0, 0, 0, .12);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 
@@ -93,7 +88,7 @@ e-commerce-orders {
       .product-image {
         width: 52px;
         height: 52px;
-                border: 1px solid rgba(0, 0, 0, .12);
+        border: 1px solid rgba(0, 0, 0, 0.12);
       }
     }
 

src/app/pages/games/game/component/sport-result.component.scss

@@ -1,20 +1,15 @@
-@import "src/@fuse/scss/fuse";
+@import 'src/@fuse/scss/fuse';
-
-e-commerce-orders {
 
+app-sport-result {
   #orders {
-
     .top-bg {
-
       @include media-breakpoint('xs') {
         height: 224px;
       }
     }
 
     > .center {
-
       > .header {
-
         .search-wrapper {
           width: 100%;
           max-width: 480px;
@@ -63,7 +58,7 @@ e-commerce-orders {
 
   .orders-table {
     flex: 1 1 auto;
-        border-bottom: 1px solid rgba(0, 0, 0, .12);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 
@@ -93,7 +88,7 @@ e-commerce-orders {
       .product-image {
         width: 52px;
         height: 52px;
-                border: 1px solid rgba(0, 0, 0, .12);
+        border: 1px solid rgba(0, 0, 0, 0.12);
       }
     }
 

src/app/pages/infos/info/component/free-board.component.html

@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort

src/app/pages/infos/info/component/free-board.component.scss

@@ -1,6 +1,6 @@
 @import 'src/@fuse/scss/fuse';
 
-app-service-center {
+app-free-board {
   #service-center {
     .top-bg {
       @include media-breakpoint('xs') {

src/app/pages/infos/info/component/popup-set.component.html

@@ -46,7 +46,6 @@
 
     <!-- CONTENT CARD -->
     <div class="content-card">
-      <form name="popupSetForm" [formGroup]="mtformgroup" novalidate>
         <mat-table
           class="popup-set-table"
           #table
@@ -239,7 +238,7 @@
           >
           </mat-row>
         </mat-table>
-      </form>
+
       <mat-paginator
         #paginator
         [length]="10"

src/app/pages/infos/info/component/service-center.component.html

@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort

src/app/pages/moneys/money/component/deposit.component.html

@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort

src/app/pages/moneys/money/component/money-log.component.html

@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort

src/app/pages/moneys/money/component/point-log.component.html

@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort

src/app/pages/moneys/money/component/withdrawal.component.html

@@ -49,7 +49,7 @@
     <!-- CONTENT CARD -->
     <div class="content-card">
       <mat-table
-        class="service-center"
+        class="service-center-table"
         #table
         [dataSource]="dataSource"
         matSort

src/app/pages/users/user/component/user-connect/user-connect.component.scss

@@ -0,0 +1,117 @@
+@import 'src/@fuse/scss/fuse';
+
+app-user-connect {
+  #users {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
+    }
+
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .users-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
+    }
+
+    .user {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
+    }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
+}

src/app/pages/users/user/component/user-connect/user-connect.component.ts

@@ -1,4 +1,3 @@
-
 import {
   Component,
   ElementRef,
@@ -31,8 +30,7 @@ export class UserConnectComponent implements OnInit, OnDestroy {
     'registTime',
     'holdMoney',
     'point',
-    'fire',
+    'fire'
-
   ];
 
   @ViewChild(MatPaginator, { static: true })
@@ -50,9 +48,7 @@ export class UserConnectComponent implements OnInit, OnDestroy {
   /**
    * Constructor
    */
-  constructor(
+  constructor(private _formBuilder: FormBuilder) {
-    private _formBuilder: FormBuilder
-  ) {
     // Set the private defaults
     this._unsubscribeAll = new Subject();
   }
@@ -65,7 +61,7 @@ export class UserConnectComponent implements OnInit, OnDestroy {
       //     disabled: true
       //   }, Validators.required
       // ],
-      firstName: ['', Validators.required],
+      firstName: ['', Validators.required]
       // lastName: ['', Validators.required],
       // address: ['', Validators.required],
       // address2: ['', Validators.required],

src/app/pages/users/user/component/user-fees/user-fees.component.scss

@@ -0,0 +1,117 @@
+@import 'src/@fuse/scss/fuse';
+
+app-user-fees {
+  #users {
+    .top-bg {
+      @include media-breakpoint('xs') {
+        height: 224px;
+      }
+    }
+
+    > .center {
+      > .header {
+        .search-wrapper {
+          width: 100%;
+          max-width: 480px;
+          border-radius: 28px;
+          overflow: hidden;
+          @include mat-elevation(1);
+
+          @include media-breakpoint('xs') {
+            width: 100%;
+          }
+
+          .search {
+            width: 100%;
+            height: 48px;
+            line-height: 48px;
+            padding: 0 18px;
+
+            input {
+              width: 100%;
+              height: 48px;
+              min-height: 48px;
+              max-height: 48px;
+              padding: 0 16px;
+              border: none;
+              outline: none;
+            }
+          }
+        }
+
+        @include media-breakpoint('xs') {
+          padding: 8px 0;
+          height: 160px !important;
+          min-height: 160px !important;
+          max-height: 160px !important;
+        }
+      }
+    }
+  }
+
+  .mat-tab-group,
+  .mat-tab-body-wrapper,
+  .tab-content {
+    flex: 1 1 auto;
+    max-width: 100%;
+  }
+
+  .users-table {
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .mat-header-row {
+      min-height: 64px;
+    }
+
+    .user {
+      position: relative;
+      cursor: pointer;
+      height: 84px;
+    }
+
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .mat-column-id {
+      flex: 0 1 84px;
+    }
+
+    .mat-column-image {
+      flex: 0 1 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    .mat-column-buttons {
+      flex: 0 1 80px;
+    }
+
+    .quantity-indicator {
+      display: inline-block;
+      vertical-align: middle;
+      width: 8px;
+      height: 8px;
+      border-radius: 4px;
+      margin-right: 8px;
+
+      & + span {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    .active-icon {
+      border-radius: 50%;
+    }
+  }
+}

src/app/pages/users/user/component/user-fees/user-fees.component.ts

@@ -14,10 +14,11 @@ import { MatSort } from '@angular/material/sort';
 @Component({
   selector: 'app-user-fees',
   templateUrl: './user-fees.component.html',
-  styleUrls: ['./user-fees.component.scss']
+  styleUrls: ['./user-fees.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
 })
 export class UserFeesComponent implements OnInit {
-
   displayedColumns = [
     'id',
     'chargeFees',
@@ -26,7 +27,7 @@ export class UserFeesComponent implements OnInit {
     'rotusBetFees',
     'loserSportFees',
     'loserMiniFees',
-    'calculateMethod',
+    'calculateMethod'
   ];
 
   @ViewChild(MatPaginator, { static: true })
@@ -44,15 +45,12 @@ export class UserFeesComponent implements OnInit {
   /**
    * Constructor
    */
-  constructor(
+  constructor() {
-
-  ) {
     // Set the private defaults
     this._unsubscribeAll = new Subject();
   }
 
-  ngOnInit() {
+  ngOnInit() {}
-  }
 
   ngOnDestroy(): void {
     // Unsubscribe from all subscriptions