리그관리 레이아웃
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({
|
||||
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' }
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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 {}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user