리그관리 레이아웃

src/app/pages/games/component/league-management/league-management.component.html

@@ -1 +1,125 @@
-<p>league-management works!</p>
+<div id="league" class="page-layout simple fullwidth" fxLayout="column">
+  <!-- <div id="orders" class="page-layout carded fullwidth inner-scroll"> -->
+  <!-- HEADER -->
+  <div
+    class="header accent p-24 h-160"
+    fxLayout="row"
+    fxLayoutAlign="start center"
+  >
+    <div fxLayout="column" fxLayoutAlign="center start">
+      <div fxLayout="row" fxLayoutAlign="start center">
+        <mat-icon class="secondary-text s-18">home</mat-icon>
+        <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+        <span class="secondary-text">User Interface</span>
+      </div>
+      <div class="h1 mt-16">리그관리</div>
+    </div>
+  </div>
+  <!-- / HEADER -->
+
+  <!-- CONTENT -->
+  <div class="content p-24">
+    <div class="h1">
+      리그 리스트
+    </div>
+
+    <div
+      class="mb-24"
+      fxLayout="column"
+      fxLayoutAlign="start"
+      fxLayout.gt-md="row"
+    >
+      <div
+        class="mat-elevation-z8 p-24 mr-24"
+        fxFlex="3 0 auto"
+        fxLayout="column"
+      >
+        <mat-table
+          class="league-table"
+          #table
+          [dataSource]="dataSource"
+          matSort
+        >
+          <!-- Position Column -->
+          <ng-container matColumnDef="position">
+            <mat-header-cell *matHeaderCellDef>아이콘</mat-header-cell>
+            <mat-cell *matCellDef="let element">{{
+              element.position
+            }}</mat-cell>
+          </ng-container>
+
+          <!-- Name Column -->
+          <ng-container matColumnDef="name">
+            <mat-header-cell *matHeaderCellDef>리그명</mat-header-cell>
+            <mat-cell *matCellDef="let element">{{ element.name }}</mat-cell>
+          </ng-container>
+
+          <!-- Weight Column -->
+          <ng-container matColumnDef="weight">
+            <mat-header-cell *matHeaderCellDef>추가방식</mat-header-cell>
+            <mat-cell *matCellDef="let element">{{ element.weight }}</mat-cell>
+          </ng-container>
+
+          <!-- Symbol Column -->
+          <ng-container matColumnDef="symbol">
+            <mat-header-cell *matHeaderCellDef>종목</mat-header-cell>
+            <mat-cell *matCellDef="let element">{{ element.symbol }}</mat-cell>
+          </ng-container>
+
+          <!-- Symbol Column -->
+          <ng-container matColumnDef="test">
+            <mat-header-cell *matHeaderCellDef>실행</mat-header-cell>
+            <mat-cell *matCellDef="let element">{{ element.test }}</mat-cell>
+          </ng-container>
+
+          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+          <mat-row
+            *matRowDef="let row; columns: displayedColumns"
+            class="league"
+            matRipple
+          ></mat-row>
+        </mat-table>
+
+        <mat-paginator
+          [pageSizeOptions]="[5, 10, 20]"
+          showFirstLastButtons
+        ></mat-paginator>
+      </div>
+      <div
+        class="mat-card mat-elevation-z4"
+        fxLayout="column"
+        fxLayoutAlign="start"
+        fxFlex="1 0 auto"
+      >
+        <div
+          class="mat-card mat-elevation-z4 p-24 "
+          fxLayout="column"
+          fxLayoutAlign="start"
+          fxFlex="1 0 auto"
+        >
+          <div class="h2 mb-24">Reactive Form Model</div>
+          <pre><code>test</code></pre>
+        </div>
+        <div
+          class="mat-card mat-elevation-z4 p-24 "
+          fxLayout="column"
+          fxLayoutAlign="start"
+          fxFlex="1 0 auto"
+        >
+          <div class="h2 mb-24">Reactive Form Model</div>
+          <pre><code>test</code></pre>
+        </div>
+        <div
+          class="mat-card mat-elevation-z4 p-24 "
+          fxLayout="column"
+          fxLayoutAlign="start"
+          fxFlex="1 0 auto"
+        >
+          <div class="h2 mb-24">Reactive Form Model</div>
+          <pre><code>test</code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- / CONTENT -->
+</div>

src/app/pages/games/component/league-management/league-management.component.scss

@@ -0,0 +1,140 @@
+@import 'src/@fuse/scss/fuse';
+
+app-league-management {
+  #league {
+    .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;
+        }
+      }
+    }
+  }
+
+  .league-table {
+    color: black;
+    flex: 1 1 auto;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.301);
+    overflow: auto;
+    // -webkit-overflow-scrolling: touch;
+
+    .league {
+      position: relative;
+      cursor: pointer;
+      // height: 84px;
+    }
+    .mat-cell {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    //First column and header
+    // .mat-header-cell:first-child,
+    // .mat-cell:first-child {
+    //   flex: 10%;
+    // }
+    // //Second column and header
+    // .mat-header-cell:nth-child(2),
+    // .mat-cell:nth-child(2) {
+    //   flex: 30%;
+    // }
+    // .mat-header-cell:nth-child(3),
+    // .mat-cell:nth-child(2) {
+    //   flex: 20%;
+    // }
+    // .mat-header-cell:nth-child(4),
+    // .mat-cell:nth-child(2) {
+    //   flex: 15%;
+    // }
+    // //Last column and header
+    // .mat-header-cell:last-child,
+    // .mat-cell:last-child {
+    //   flex: 15%;
+    // }
+
+    .mat-column-position {
+      max-width: 10%;
+      // justify-content: start;
+    }
+    .mat-column-name {
+      max-width: 50%;
+    }
+    .mat-column-weight {
+      max-width: 15%;
+    }
+    .mat-column-symbol {
+      max-width: 10%;
+    }
+    .mat-column-test {
+      max-width: 15%;
+      // justify-content: flex-end;
+    }
+    .mat-column-image {
+      flex: 1 0 84px;
+
+      .product-image {
+        width: 52px;
+        height: 52px;
+        border: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    }
+    .mat-column-buttons {
+      flex: 0 0 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/games/component/league-management/league-management.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LeagueManagementComponent } from './league-management.component';
-
-describe('LeagueManagementComponent', () => {
-  let component: LeagueManagementComponent;
-  let fixture: ComponentFixture<LeagueManagementComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ LeagueManagementComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LeagueManagementComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/pages/games/component/league-management/league-management.component.ts

@@ -1,15 +1,98 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+
+import { fuseAnimations } from 'src/@fuse/animations';
 
 @Component({
   selector: 'app-league-management',
   templateUrl: './league-management.component.html',
-  styleUrls: ['./league-management.component.scss']
+  styleUrls: ['./league-management.component.scss'],
+  animations: fuseAnimations,
+  encapsulation: ViewEncapsulation.None
 })
 export class LeagueManagementComponent implements OnInit {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'test'];
+  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
-  constructor() { }
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+
+  constructor() {}
 
   ngOnInit() {
+    this.dataSource.paginator = this.paginator;
   }
-
 }
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+  test: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', test: 'test' },
+  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', test: 'test' },
+  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', test: 'test' },
+  {
+    position: 4,
+    name: 'Beryllium',
+    weight: 9.0122,
+    symbol: 'Be',
+    test: 'test'
+  },
+  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', test: 'test' },
+  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', test: 'test' },
+  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', test: 'test' },
+  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', test: 'test' },
+  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', test: 'test' },
+  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', test: 'test' },
+  { position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na', test: 'test' },
+  {
+    position: 12,
+    name: 'Magnesium',
+    weight: 24.305,
+    symbol: 'Mg',
+    test: 'test'
+  },
+  {
+    position: 13,
+    name: 'Aluminum',
+    weight: 26.9815,
+    symbol: 'Al',
+    test: 'test'
+  },
+  {
+    position: 14,
+    name: 'Silicon',
+    weight: 28.0855,
+    symbol: 'Si',
+    test: 'test'
+  },
+  {
+    position: 15,
+    name: 'Phosphorus',
+    weight: 30.9738,
+    symbol: 'P',
+    test: 'test'
+  },
+  { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S', test: 'test' },
+  {
+    position: 17,
+    name: 'Chlorine',
+    weight: 35.453,
+    symbol: 'Cl',
+    test: 'test'
+  },
+  { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar', test: 'test' },
+  {
+    position: 19,
+    name: 'Potassium',
+    weight: 39.0983,
+    symbol: 'K',
+    test: 'test'
+  },
+  { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca', test: 'test' }
+];

src/app/pages/games/games.module.ts

@@ -3,10 +3,6 @@ import { FuseSharedModule } from 'src/@fuse/shared.module';
 import { GamesRoutingModule } from './games-routing.module';
 
 @NgModule({
-
+  imports: [FuseSharedModule, GamesRoutingModule]
-  imports: [
-    FuseSharedModule,
-    GamesRoutingModule
-  ],
 })
-export class GamesModule { }
+export class GamesModule {}