From 073c42002ad04f052baba565e75491c102291032 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= <git@patrick-hassel.de>
Date: Wed, 11 Sep 2024 14:04:27 +0200
Subject: [PATCH] css generalized 'tile' (BulkList)

---
 .../bulk/editor/bulk-editor.component.html    |  7 +-
 .../bulk/editor/bulk-editor.component.less    |  3 +
 .../pages/bulk/list/bulk-list.component.html  | 67 +++++++++----------
 .../editor/device-editor.component.less       |  3 +
 .../device/list/device-list.component.html    | 14 ++--
 .../device/list/device-list.component.less    |  2 +-
 .../editor/schedule-editor.component.html     | 10 +--
 .../list/schedule-list.component.html         | 10 +--
 .../list/schedule-list.component.less         |  8 ---
 src/main/angular/src/styles.less              |  6 +-
 src/main/angular/src/tile.less                | 20 ++++--
 11 files changed, 78 insertions(+), 72 deletions(-)

diff --git a/src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.html b/src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.html
index 518b221..21640fb 100644
--- a/src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.html
+++ b/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>
diff --git a/src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.less b/src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.less
index e69de29..1922e7f 100644
--- a/src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.less
+++ b/src/main/angular/src/app/pages/bulk/editor/bulk-editor.component.less
@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}
diff --git a/src/main/angular/src/app/pages/bulk/list/bulk-list.component.html b/src/main/angular/src/app/pages/bulk/list/bulk-list.component.html
index d762c07..f48758c 100644
--- a/src/main/angular/src/app/pages/bulk/list/bulk-list.component.html
+++ b/src/main/angular/src/app/pages/bulk/list/bulk-list.component.html
@@ -1,37 +1,32 @@
-<p>
+<div class="tiles">
+  <div class="tile" *ngFor="let bulk of bulks.sort(Bulk.compareName); trackBy: Bulk.trackBy">
+    <div class="tileHead disabledBack" [class.enabledBack]="bulk.enabled">
+
+      <div (click)="set(bulk, 'enabled', !bulk.enabled)">
+        <fa-icon *ngIf="bulk.enabled" [icon]="faCheckCircle"></fa-icon>
+        <fa-icon *ngIf="!bulk.enabled" [icon]="faCircle"></fa-icon>
+      </div>
+
+      <div class="flexGrow" [routerLink]="['/Bulk', {id: bulk.id}]">
+        {{ bulk.name }}
+      </div>
+
+      <div class="tileHeadRight" (click)="run(bulk)">
+        <fa-icon title="Ausführen" [icon]="faPlay"></fa-icon>
+      </div>
+
+      <div class="tileHeadRight" (click)="duplicate(bulk)">
+        <fa-icon title="Duplizieren" [icon]="faCopy"></fa-icon>
+      </div>
+
+      <div class="tileHeadDelete" (click)="delete(bulk)">
+        <fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<div class="config">
   <button (click)="create()">+ Hinzufügen</button>
-</p>
-
-<table>
-  <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>
-
-    <td [routerLink]="['/Bulk', {id: bulk.id}]">
-      {{bulk.name}}
-    </td>
-
-    <td class="run" (click)="run(bulk)">
-      <fa-icon title="Ausführen" [icon]="faPlay"></fa-icon>
-    </td>
-
-    <td class="duplicate" (click)="duplicate(bulk)">
-      <fa-icon title="Duplizieren" [icon]="faCopy"></fa-icon>
-    </td>
-
-    <td class="delete" (click)="delete(bulk)">
-      <fa-icon title="Löschen" [icon]="faTimes"></fa-icon>
-    </td>
-
-  </tr>
-</table>
+</div>
diff --git a/src/main/angular/src/app/pages/device/editor/device-editor.component.less b/src/main/angular/src/app/pages/device/editor/device-editor.component.less
index e69de29..1922e7f 100644
--- a/src/main/angular/src/app/pages/device/editor/device-editor.component.less
+++ b/src/main/angular/src/app/pages/device/editor/device-editor.component.less
@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}
diff --git a/src/main/angular/src/app/pages/device/list/device-list.component.html b/src/main/angular/src/app/pages/device/list/device-list.component.html
index f2cb6a3..51fc937 100644
--- a/src/main/angular/src/app/pages/device/list/device-list.component.html
+++ b/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>
diff --git a/src/main/angular/src/app/pages/device/list/device-list.component.less b/src/main/angular/src/app/pages/device/list/device-list.component.less
index 0142b11..3914e6b 100644
--- a/src/main/angular/src/app/pages/device/list/device-list.component.less
+++ b/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;
   }
diff --git a/src/main/angular/src/app/pages/schedule/editor/schedule-editor.component.html b/src/main/angular/src/app/pages/schedule/editor/schedule-editor.component.html
index dd14887..0d0a181 100644
--- a/src/main/angular/src/app/pages/schedule/editor/schedule-editor.component.html
+++ b/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>
diff --git a/src/main/angular/src/app/pages/schedule/list/schedule-list.component.html b/src/main/angular/src/app/pages/schedule/list/schedule-list.component.html
index eee7eba..6657aa2 100644
--- a/src/main/angular/src/app/pages/schedule/list/schedule-list.component.html
+++ b/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>
diff --git a/src/main/angular/src/app/pages/schedule/list/schedule-list.component.less b/src/main/angular/src/app/pages/schedule/list/schedule-list.component.less
index e14ceef..de23d22 100644
--- a/src/main/angular/src/app/pages/schedule/list/schedule-list.component.less
+++ b/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%;
diff --git a/src/main/angular/src/styles.less b/src/main/angular/src/styles.less
index 1c78d52..e1f15f9 100644
--- a/src/main/angular/src/styles.less
+++ b/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 {
diff --git a/src/main/angular/src/tile.less b/src/main/angular/src/tile.less
index fa7817d..6b854f1 100644
--- a/src/main/angular/src/tile.less
+++ b/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%;
   }
 
 }