fLotte-meets-HWR-DB
/
frontend
mirror of https://github.com/fLotte-meets-HWR-DB/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve table layout

Browse Source
pull/1/head
Max Ehrlicher-Schmidt 4 years ago
parent 790ce54cef
commit 411dc3a8e6
2 changed files with 109 additions and 93 deletions
Show Stats Download Patch File Download Diff File

159
src/app/pages/tables/bikes/bikes.component.html
Unescape Escape View File

@ -1,85 +1,96 @@
<div class="table-control"> <div class="table-page-wrapper">
<button mat-raised-button color="primary">Primary</button> <div class="table-control">
<button mat-raised-button color="accent">Accent</button> <button mat-raised-button color="primary">Primary</button>
</div> <button mat-raised-button color="accent">Accent</button>
<div id="table-container"> </div>
<table <div class="table-container">
mat-table <table
[dataSource]="bikes" mat-table
class="mat-elevation-z8" [dataSource]="bikes"
cdkDropList class="mat-elevation-z8"
cdkDropListOrientation="horizontal" cdkDropList
(cdkDropListDropped)="drop($event)" cdkDropListOrientation="horizontal"
> (cdkDropListDropped)="drop($event)"
<!--- Note that these columns can be defined in any order. >
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" --> The actual rendered columns are set as a property on the row definition" -->
<!-- Checkbox Column --> <!-- Checkbox Column -->
<ng-container matColumnDef="select" sticky> <ng-container matColumnDef="select" sticky>
<th mat-header-cell *matHeaderCellDef> <th mat-header-cell *matHeaderCellDef>
<mat-checkbox <mat-checkbox
(change)="$event ? masterToggle() : null" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()" [checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()"
> >
</mat-checkbox> </mat-checkbox>
</th> </th>
<td mat-cell *matCellDef="let row"> <td mat-cell *matCellDef="let row">
<mat-checkbox <mat-checkbox
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)" [checked]="selection.isSelected(row)"
> >
</mat-checkbox> </mat-checkbox>
</td> </td>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="name"> <ng-container matColumnDef="name" sticky>
<th mat-header-cell *matHeaderCellDef>Name</th> <th mat-header-cell *matHeaderCellDef>Name</th>
<td <td
mat-cell mat-cell
*matCellDef="let element" *matCellDef="let element"
contenteditable contenteditable
(input)="onTableInput(element)" (input)="onTableInput(element)"
> >
{{ element.name }} {{ element.name }}
</td> </td>
</ng-container> </ng-container>
<!-- ID Column --> <!-- ID Column -->
<ng-container matColumnDef="id"> <ng-container matColumnDef="id">
<th mat-header-cell cdkDrag *matHeaderCellDef>ID</th> <th mat-header-cell cdkDrag *matHeaderCellDef>ID</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td> <td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container> </ng-container>
<!-- FrameNumber Column --> <!-- FrameNumber Column -->
<ng-container matColumnDef="frameNumber"> <ng-container matColumnDef="frameNumber">
<th mat-header-cell cdkDrag *matHeaderCellDef>Fahrgestellnummer</th> <th mat-header-cell cdkDrag *matHeaderCellDef>Fahrgestellnummer</th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<!--<mat-form-field> <!--<mat-form-field>
<input matInput color="warn" [value]="element.security.frameNumber"/> <input matInput color="warn" [value]="element.security.frameNumber"/>
</mat-form-field>--> </mat-form-field>-->
{{ element.security.frameNumber }} {{ element.security.frameNumber }}
</td> </td>
</ng-container> </ng-container>
<!-- NumberOfChildren Column --> <!-- NumberOfChildren Column -->
<ng-container matColumnDef="numberOfChildren"> <ng-container matColumnDef="numberOfChildren">
<th mat-header-cell cdkDrag *matHeaderCellDef>Anzahl Kinder</th> <th mat-header-cell cdkDrag *matHeaderCellDef>Anzahl Kinder</th>
<td mat-cell *matCellDef="let element">{{ element.numberOfChildren }}</td> <td mat-cell *matCellDef="let element">
</ng-container> {{ element.numberOfChildren }}
</td>
</ng-container>
<!-- Buttons Column --> <!-- Buttons Column -->
<ng-container matColumnDef="buttons" stickyEnd> <ng-container matColumnDef="buttons" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element"> <td mat-cell *matCellDef="let element">
<mat-icon>more_vert</mat-icon> <div class="button-wrapper">
</td> <button mat-icon-button>
</ng-container> <mat-icon>edit</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>delete</mat-icon>
</button>
</div>
</td>
</ng-container>
<!-- Table Definition --> <!-- Table Definition -->
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table> </table>
</div>
</div> </div>

43
src/app/pages/tables/bikes/bikes.component.scss
Unescape Escape View File

@ -1,24 +1,29 @@
.table-control { .table-page-wrapper {
margin: 0.5em; display: flex;
} flex-direction: column;
#table-container { height: 100%;
width: 100%; .table-control {
max-width: 100%; margin: 0.5em;
overflow: auto; flex: none;
table { }
.table-container {
flex: 1;
width: 100%; width: 100%;
th.mat-column-name, max-width: 100%;
td.mat-column-name { overflow: auto;
padding-left: 8px; table {
} width: 100%;
.mat-header-cell,
.mat-table-sticky:first-child { .mat-footer-cell,
border-right: 1px solid #ffffff1f; .mat-cell {
padding-right: 1em; min-width: 80px;
} box-sizing: border-box;
}
.mat-table-sticky:last-child { .button-wrapper {
border-left: 1px solid #ffffff1f; display: flex;
flex-direction: row;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save