리그관리 레이아웃
This commit is contained in:
byung eun park
parent
1f828b5f95
commit
c1008d044c
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -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({
|
@Component({
|
||||||
selector: 'app-league-management',
|
selector: 'app-league-management',
|
||||||
templateUrl: './league-management.component.html',
|
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 {
|
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() {
|
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' }
|
||||||
|
];
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,6 @@ import { FuseSharedModule } from 'src/@fuse/shared.module';
|
||||||
import { GamesRoutingModule } from './games-routing.module';
|
import { GamesRoutingModule } from './games-routing.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
imports: [FuseSharedModule, GamesRoutingModule]
|
||||||
imports: [
|
|
||||||
FuseSharedModule,
|
|
||||||
GamesRoutingModule
|
|
||||||
],
|
|
||||||
})
|
})
|
||||||
export class GamesModule { }
|
export class GamesModule {}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user