From 411dc3a8e6eabe4d711132b14db6fbd7945bebed Mon Sep 17 00:00:00 2001
From: Max Ehrlicher-Schmidt <maxes2000@t-online.de>
Date: Tue, 22 Sep 2020 20:18:41 +0200
Subject: [PATCH] Improve table layout

---
 .../pages/tables/bikes/bikes.component.html   | 159 ++++++++++--------
 .../pages/tables/bikes/bikes.component.scss   |  43 ++---
 2 files changed, 109 insertions(+), 93 deletions(-)

diff --git a/src/app/pages/tables/bikes/bikes.component.html b/src/app/pages/tables/bikes/bikes.component.html
index 5c2fc6c..d407035 100644
--- a/src/app/pages/tables/bikes/bikes.component.html
+++ b/src/app/pages/tables/bikes/bikes.component.html
@@ -1,85 +1,96 @@
-<div class="table-control">
-  <button mat-raised-button color="primary">Primary</button>
-  <button mat-raised-button color="accent">Accent</button>
-</div>
-<div id="table-container">
-  <table
-    mat-table
-    [dataSource]="bikes"
-    class="mat-elevation-z8"
-    cdkDropList
-    cdkDropListOrientation="horizontal"
-    (cdkDropListDropped)="drop($event)"
-  >
-    <!--- Note that these columns can be defined in any order.
+<div class="table-page-wrapper">
+  <div class="table-control">
+    <button mat-raised-button color="primary">Primary</button>
+    <button mat-raised-button color="accent">Accent</button>
+  </div>
+  <div class="table-container">
+    <table
+      mat-table
+      [dataSource]="bikes"
+      class="mat-elevation-z8"
+      cdkDropList
+      cdkDropListOrientation="horizontal"
+      (cdkDropListDropped)="drop($event)"
+    >
+      <!--- Note that these columns can be defined in any order.
         The actual rendered columns are set as a property on the row definition" -->
 
-    <!-- Checkbox Column -->
-    <ng-container matColumnDef="select" sticky>
-      <th mat-header-cell *matHeaderCellDef>
-        <mat-checkbox
-          (change)="$event ? masterToggle() : null"
-          [checked]="selection.hasValue() && isAllSelected()"
-          [indeterminate]="selection.hasValue() && !isAllSelected()"
-        >
-        </mat-checkbox>
-      </th>
-      <td mat-cell *matCellDef="let row">
-        <mat-checkbox
-          (click)="$event.stopPropagation()"
-          (change)="$event ? selection.toggle(row) : null"
-          [checked]="selection.isSelected(row)"
-        >
-        </mat-checkbox>
-      </td>
-    </ng-container>
+      <!-- Checkbox Column -->
+      <ng-container matColumnDef="select" sticky>
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox
+            (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+          >
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-checkbox
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+          >
+          </mat-checkbox>
+        </td>
+      </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef>Name</th>
-      <td
-        mat-cell
-        *matCellDef="let element"
-        contenteditable
-        (input)="onTableInput(element)"
-      >
-        {{ element.name }}
-      </td>
-    </ng-container>
+      <!-- Name Column -->
+      <ng-container matColumnDef="name" sticky>
+        <th mat-header-cell *matHeaderCellDef>Name</th>
+        <td
+          mat-cell
+          *matCellDef="let element"
+          contenteditable
+          (input)="onTableInput(element)"
+        >
+          {{ element.name }}
+        </td>
+      </ng-container>
 
-    <!-- ID Column -->
-    <ng-container matColumnDef="id">
-      <th mat-header-cell cdkDrag *matHeaderCellDef>ID</th>
-      <td mat-cell *matCellDef="let element">{{ element.id }}</td>
-    </ng-container>
+      <!-- ID Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell cdkDrag *matHeaderCellDef>ID</th>
+        <td mat-cell *matCellDef="let element">{{ element.id }}</td>
+      </ng-container>
 
-    <!-- FrameNumber Column -->
-    <ng-container matColumnDef="frameNumber">
-      <th mat-header-cell cdkDrag *matHeaderCellDef>Fahrgestellnummer</th>
-      <td mat-cell *matCellDef="let element">
-        <!--<mat-form-field>
+      <!-- FrameNumber Column -->
+      <ng-container matColumnDef="frameNumber">
+        <th mat-header-cell cdkDrag *matHeaderCellDef>Fahrgestellnummer</th>
+        <td mat-cell *matCellDef="let element">
+          <!--<mat-form-field>
         <input matInput color="warn" [value]="element.security.frameNumber"/>
       </mat-form-field>-->
-        {{ element.security.frameNumber }}
-      </td>
-    </ng-container>
+          {{ element.security.frameNumber }}
+        </td>
+      </ng-container>
 
-    <!-- NumberOfChildren Column -->
-    <ng-container matColumnDef="numberOfChildren">
-      <th mat-header-cell cdkDrag *matHeaderCellDef>Anzahl Kinder</th>
-      <td mat-cell *matCellDef="let element">{{ element.numberOfChildren }}</td>
-    </ng-container>
+      <!-- NumberOfChildren Column -->
+      <ng-container matColumnDef="numberOfChildren">
+        <th mat-header-cell cdkDrag *matHeaderCellDef>Anzahl Kinder</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.numberOfChildren }}
+        </td>
+      </ng-container>
 
-    <!-- Buttons Column -->
-    <ng-container matColumnDef="buttons" stickyEnd>
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let element">
-        <mat-icon>more_vert</mat-icon>
-      </td>
-    </ng-container>
+      <!-- Buttons Column -->
+      <ng-container matColumnDef="buttons" stickyEnd>
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let element">
+          <div class="button-wrapper">
+            <button mat-icon-button>
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button mat-icon-button>
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        </td>
+      </ng-container>
 
-    <!-- Table Definition -->
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-  </table>
+      <!-- Table Definition -->
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  </div>
 </div>
diff --git a/src/app/pages/tables/bikes/bikes.component.scss b/src/app/pages/tables/bikes/bikes.component.scss
index 0c8228e..e4dddb5 100644
--- a/src/app/pages/tables/bikes/bikes.component.scss
+++ b/src/app/pages/tables/bikes/bikes.component.scss
@@ -1,24 +1,29 @@
-.table-control {
-  margin: 0.5em;
-}
-#table-container {
-  width: 100%;
-  max-width: 100%;
-  overflow: auto;
-  table {
+.table-page-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .table-control {
+    margin: 0.5em;
+    flex: none;
+  }
+  .table-container {
+    flex: 1;
     width: 100%;
-    th.mat-column-name,
-    td.mat-column-name {
-      padding-left: 8px;
-    }
-
-    .mat-table-sticky:first-child {
-      border-right: 1px solid #ffffff1f;
-      padding-right: 1em;
-    }
+    max-width: 100%;
+    overflow: auto;
+    table {
+      width: 100%;
+      .mat-header-cell,
+      .mat-footer-cell,
+      .mat-cell {
+        min-width: 80px;
+        box-sizing: border-box;
+      }
 
-    .mat-table-sticky:last-child {
-      border-left: 1px solid #ffffff1f;
+      .button-wrapper {
+        display: flex;
+        flex-direction: row;
+      }
     }
   }
 }