css generalized 'tile' (ChannelList)

src/main/angular/src/app/pages/channel/list/channel-list.component.html

@@ -1,24 +1,24 @@
-<table>
-  <tr>
-    <th>Titel</th>
-    <th>Typ</th>
-    <th colspan="3">Adresse</th>
-    <th>DPT</th>
-    <th colspan="2">Wert</th>
-  </tr>
-  <tr *ngFor="let channel of channels">
-    <td>{{channel.title}}</td>
-    <td>{{channel.type}}</td>
+<div class="tiles">
+  <div class="tile" *ngFor="let channel of channels">
+    <div>
+      {{ channel.title }}
+    </div>
+    <div class="left">
+      {{ channel.type }}
+    </div>
     <ng-container *ngIf="channel.type === 'KnxGroup'">
-      <td class="first number">{{asKnxGroup(channel).addresMain}}&nbsp;/&nbsp;</td>
-      <td class="middle number">{{asKnxGroup(channel).addresMid}}&nbsp;/&nbsp;</td>
-      <td class="last number">{{asKnxGroup(channel).addresSub}}</td>
-      <td class="number">{{asKnxGroup(channel).dpt}}</td>
+      <div class="left">
+        {{ asKnxGroup(channel).addresMain }}&nbsp;/&nbsp;{{ asKnxGroup(channel).addresMid }}&nbsp;/&nbsp;{{ asKnxGroup(channel).addresSub }}
+      </div>
+      <div class="right">
+        DPT {{ asKnxGroup(channel).dpt }}
+      </div>
     </ng-container>
-    <ng-container *ngIf="channel.type === 'Logic'">
-      <td colspan="4">{{asLogic(channel).operator}}</td>
-    </ng-container>
-    <td class="number">{{channel.value}}</td>
-    <td>{{channel.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</td>
-  </tr>
-</table>
+    <div class="timestamp">
+      {{ channel.timestamp | date:'yyyy-MM-dd HH:mm:ss' || '-' }}
+    </div>
+    <div class="value">
+      {{ channel.value || '-' }}
+    </div>
+  </div>
+</div>

src/main/angular/src/app/pages/channel/list/channel-list.component.less

@@ -1,3 +1,23 @@
-table {
-  width: 100%;
+@import "../../../../config";
+
+div {
+  padding: @padding;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}
+
+.timestamp {
+  clear: left;
+  float: left;
+}
+
+.value {
+  clear: right;
+  float: right;
 }