css generalized 'tile' (BulkList)

src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.html

@@ -1,12 +1,9 @@
 <ng-container *ngIf="bulk">
+
   <h1>
     <app-text [initial]="bulk.name" (valueChange)="set(bulk, 'name', $event)"></app-text>
   </h1>
 
-  <p>
-    <button (click)="create()">+ Hinzufügen</button>
-  </p>
-
   <table>
     <tr>
       <th>Eigenschaft</th>
@@ -56,4 +53,6 @@
     </ng-container>
   </table>
 
+  <button (click)="create()">+ Hinzufügen</button>
+
 </ng-container>

src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.less

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

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

@@ -1,37 +1,32 @@
-<p>
+<div class="tiles">
-  <button (click)="create()">+ Hinzufügen</button>
+  <div class="tile" *ngFor="let bulk of bulks.sort(Bulk.compareName); trackBy: Bulk.trackBy">
-</p>
+    <div class="tileHead disabledBack" [class.enabledBack]="bulk.enabled">
 
-<table>
+      <div (click)="set(bulk, 'enabled', !bulk.enabled)">
-  <tr>
-    <th>&nbsp;</th>
-    <th>Bezeichnung</th>
-    <th>&nbsp;</th>
-    <th>&nbsp;</th>
-    <th>&nbsp;</th>
-  </tr>
-  <tr *ngFor="let bulk of bulks.sort(Bulk.compareName); trackBy: Bulk.trackBy">
-
-    <td class="boolean" (click)="set(bulk, 'enabled', !bulk.enabled)" [class.true]="bulk.enabled" [class.false]="!bulk.enabled">
         <fa-icon *ngIf="bulk.enabled" [icon]="faCheckCircle"></fa-icon>
         <fa-icon *ngIf="!bulk.enabled" [icon]="faCircle"></fa-icon>
-    </td>
+      </div>
 
-    <td [routerLink]="['/Bulk', {id: bulk.id}]">
+      <div class="flexGrow" [routerLink]="['/Bulk', {id: bulk.id}]">
-      {{bulk.name}}
+        {{ bulk.name }}
-    </td>
+      </div>
 
-    <td class="run" (click)="run(bulk)">
+      <div class="tileHeadRight" (click)="run(bulk)">
         <fa-icon title="Ausführen" [icon]="faPlay"></fa-icon>
-    </td>
+      </div>
 
-    <td class="duplicate" (click)="duplicate(bulk)">
+      <div class="tileHeadRight" (click)="duplicate(bulk)">
         <fa-icon title="Duplizieren" [icon]="faCopy"></fa-icon>
-    </td>
+      </div>
 
-    <td class="delete" (click)="delete(bulk)">
+      <div class="tileHeadDelete" (click)="delete(bulk)">
         <fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
-    </td>
+      </div>
 
-  </tr>
+    </div>
-</table>
+  </div>
+</div>
+
+<div class="config">
+  <button (click)="create()">+ Hinzufügen</button>
+</div>

src/main/angular/src/app/pages/device/editor/device-editor.component.less

@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}

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

@@ -1,12 +1,8 @@
-<div class="config">
-  <button (click)="create()">+ Hinzufügen</button>
-</div>
-
 <ng-container *ngFor="let device of devices; trackBy: Device.trackBy">
   <ng-container [ngSwitch]="device.type">
 
     <div class="device" *ngSwitchCase="'DeviceSwitch'" [ngClass]="getSwitchClassList(device)">
-      <div class="title">
+      <div class="tileHeadTitle">
         <app-text [initial]="device.title" (valueChange)="set(device, 'title', $event)"></app-text>
       </div>
       <div class="edit" [routerLink]="['/Device', {id: device.id}]">
@@ -19,7 +15,7 @@
     </div>
 
     <div class="device" *ngSwitchCase="'DeviceStateScene'" [ngClass]="getStateSceneClassList(device)">
-      <div class="title">
+      <div class="tileHeadTitle">
         <app-text [initial]="device.title" (valueChange)="set(device, 'title', $event)"></app-text>
       </div>
       <div class="edit" [routerLink]="['/Device', {id: device.id}]">
@@ -33,7 +29,7 @@
     </div>
 
     <div class="device" *ngSwitchCase="'DeviceShutter'" [ngClass]="getShutterClassList(device)">
-      <div class="title">
+      <div class="tileHeadTitle">
         <app-text [initial]="device.title" (valueChange)="set(device, 'title', $event)"></app-text>
       </div>
       <div class="edit" [routerLink]="['/Device', {id: device.id}]">
@@ -75,3 +71,7 @@
 
   </ng-container>
 </ng-container>
+
+<div class="config">
+  <button (click)="create()">+ Hinzufügen</button>
+</div>

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

@@ -9,7 +9,7 @@
     margin-right: 5px;
   }
 
-  .title {
+  .tileHeadTitle {
     float: left;
     font-weight: bold;
   }

src/main/angular/src/app/pages/schedule/editor/schedule-editor.component.html

@@ -13,7 +13,7 @@
           <fa-icon *ngIf="entry.enabled" [icon]="faCheckCircle"></fa-icon>
           <fa-icon *ngIf="!entry.enabled" [icon]="faCircle"></fa-icon>
         </div>
-        <div class="title">
+        <div class="tileHeadTitle">
           <select [ngModel]="entry.bulk?.id" (ngModelChange)="entryService.set(entry, 'bulk', $event)">
             <option [ngValue]="null">-</option>
             <option [ngValue]="bulk.id" *ngFor="let bulk of bulks.sort(Bulk.compareName)">{{ bulk.name }}</option>
@@ -61,7 +61,7 @@
       </div>
 
       <div class="tileBodyFlex" *ngIf="entry.type === 'TIME'">
-        <div class="flexFull time">
+        <div class="flexGrow time">
           <button class="buttonPlus" (click)="dayMinuteAdd(entry, +60)">+</button>
           <button class="buttonMinus" (click)="dayMinuteAdd(entry, -60)">-</button>
           <input type="time" [ngModel]="entry.time" (ngModelChange)="timeFromString(entry, $event)">
@@ -71,7 +71,7 @@
       </div>
 
       <div class="tileBodyFlex" *ngIf="entry.type === 'SUNRISE' || entry.type === 'SUNSET'">
-        <div class="flexFull sun">
+        <div class="flexGrow sun">
           <div *ngFor="let zenith of getZenithEntries(entry.type); trackBy: trackByZenith">
             <app-bool [label]="zenith.title" [value]="entry.zenith === zenith.value" (onChange)="entryService.set(entry, 'zenith', zenith.value)"></app-bool>
           </div>
@@ -101,13 +101,13 @@
       </div>
 
       <div class="tileBodyFlex">
-        <div class="flexFull timestamp" [class.skipFont]="entry.skip" *ngIf="entry.executable">
+        <div class="flexGrow timestamp" [class.skipFont]="entry.skip" *ngIf="entry.executable">
           {{ timeService.relativeDate(entry.nextFuzzyTimestamp) }}
           <span [class.fuzzyFont]="entry.fuzzySeconds" *ngIf="entry.fuzzySeconds">
             (eig: {{ entry.nextClearTimestamp.date | date:'HH:mm' }})
           </span>
         </div>
-        <div class="flexFull inactive" *ngIf="entry.todo">
+        <div class="flexGrow inactive" *ngIf="entry.todo">
           {{ entry.todo }}
         </div>
       </div>

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

@@ -9,15 +9,15 @@
         <fa-icon *ngIf="!schedule.enabled" [icon]="faCircle"></fa-icon>
       </div>
 
-      <div class="title" [routerLink]="['/Schedule', {id: schedule.id}]">
+      <div class="tileHeadTitle" [routerLink]="['/Schedule', {id: schedule.id}]">
         {{ schedule.title }}
       </div>
 
-      <div class="skip" (click)="skip(schedule.next)" *ngIf="schedule.next">
+      <div class="tileHeadRight" (click)="skip(schedule.next)" *ngIf="schedule.next">
         <img class="icon" src="assets/skip.svg" [alt]="'Über.'">{{ schedule.next?.skip }}
       </div>
 
-      <div class="delete" (click)="delete(schedule)">
+      <div class="tileHeadRight" (click)="delete(schedule)">
         <fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
       </div>
 
@@ -48,4 +48,6 @@
 
 </div>
 
-<button (click)="create()">+ Hinzufügen</button>
+<div class="config">
+  <button (click)="create()">+ Hinzufügen</button>
+</div>

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

@@ -1,13 +1,5 @@
 @import "../../../../config";
 
-.skip {
-  float: right !important;
-}
-
-.delete {
-  float: right !important;
-}
-
 .last {
   color: gray;
   font-size: 60%;

src/main/angular/src/styles.less

@@ -151,7 +151,11 @@ table.vertical {
 
 .config {
   clear: both;
-  margin-bottom: 5px;
+  margin: 0 @margin @margin;
+
+  @media (min-width: 1001px) {
+    width: 400px;
+  }
 }
 
 .buttonPlus {

src/main/angular/src/tile.less

@@ -23,10 +23,19 @@
         padding: @padding;
       }
 
-      .title {
+      .tileHeadTitle {
         flex-grow: 1;
       }
 
+      .tileHeadRight {
+        float: right;
+      }
+
+      .tileHeadDelete {
+        float: right;
+        color: darkred;
+      }
+
     }
 
     .tileBody {
@@ -46,6 +55,10 @@
 
   }
 
+  .flexGrow {
+    flex-grow: 1;
+  }
+
   .flexHalf {
     width: 50%;
   }
@@ -59,11 +72,6 @@
   .flexIconInput {
     float: left;
     width: calc(100% - 1.5em);
-    text-align: center;
-  }
-
-  .flexFull {
-    width: 100%;
   }
 
 }