From 838e2a16faf8090e40f4cca52902f8c7351b5067 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= Date: Thu, 15 Aug 2024 08:25:34 +0200 Subject: [PATCH] schedule-list responsive --- .../list/schedule-list.component.html | 79 ++++++----- .../list/schedule-list.component.less | 133 ++++++++++++++++-- .../angular/src/environments/environment.ts | 2 +- src/main/angular/src/styles.less | 3 + 4 files changed, 171 insertions(+), 46 deletions(-) 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 fafb7df..0df5a4a 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 @@ -2,48 +2,53 @@

- - - - - - - - - - - +
+
+
-
+
-
+
+ + +
- - - +
+ {{ schedule.title }} +
- - - +
+ +
- + - - - +
+
+ Nächste Ausführung: +
+
+ {{ schedule.next?.nextFuzzyTimestamp.dayName }}: {{ schedule.next?.nextFuzzyTimestamp.timeString }} + - - - +
+
+ {{ schedule.next?.bulk?.name }} +
+
- +
+
+ Zuletzt: +
+
+ {{ schedule.last?.lastFuzzyTimestamp.dayName }}: {{ schedule.last?.lastFuzzyTimestamp.timeString }} + - - - +
+
+ {{ schedule.last?.bulk?.name }} +
+
- -
 BezeichnungNächsteEigenschaftMassenausführungLetzte 
- - - - {{schedule.title}} - {{schedule.next?.nextFuzzyTimestamp.dayName}}{{schedule.next?.nextFuzzyTimestamp.timeString}}{{schedule.next?.property?.title}} =  - - - {{schedule.next?.bulk?.name}} - {{schedule.last?.lastFuzzyTimestamp.dayName}}{{schedule.last?.lastFuzzyTimestamp.timeString}} - -
+ + + 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 36a87cf..546f786 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,11 +1,128 @@ -select { - background-color: transparent; - border-width: 0; - width: 100%; - outline: none; - font-family: monospace; +.schedules { + font-size: 4vw; + padding: 0.25em; + + .scheduleBox { + + .schedule { + margin: 0.25em; + border: 0.1em solid gray; + border-radius: 0.2em; + background-color: #FFF0F0; + + .header { + border-bottom: 0.1em solid gray; + + .enabled { + float: left; + padding: 0.5em; + } + + .title { + float: left; + padding: 0.5em; + font-weight: bold; + } + + .delete { + float: right; + padding: 0.5em; + } + + } + + .timestampBoxNext { + clear: left; + float: left; + width: 100%; + height: 4em; + border-bottom: 0.1em solid lightgray; + + div { + float: left; + padding: 0.1em; + height: 2em; + } + + .timestampTitle { + // - + } + + .timestampTimestamp { + float: right; + text-align: right; + } + + .timestampBulk { + clear: both; + float: right; + width: 100%; + text-align: right; + } + + .timestampBulkEmpty { + clear: both; + float: right; + width: 100%; + text-align: right; + color: gray; + } + + } + + .timestampBoxLast { + clear: left; + float: left; + width: 100%; + color: gray; + font-size: 80%; + + div { + float: left; + padding: 0.1em; + height: 2em; + } + + .timestampTitle { + width: 4em; + } + + .timestampTimestamp { + text-align: right; + } + + .timestampBulk { + float: right; + text-align: right; + } + + .timestampBulkEmpty { + float: right; + text-align: right; + color: gray; + } + + } + + } + + .scheduleEnabled { + background-color: #F0FFF0; + } + + } + } -th { - background-color: lightblue; +@media (min-width: 1001px) { + + .schedules { + font-size: 16px; + + .scheduleBox { + float: left; + width: 33.33%; + } + } + } diff --git a/src/main/angular/src/environments/environment.ts b/src/main/angular/src/environments/environment.ts index eb18ddd..5e41d22 100644 --- a/src/main/angular/src/environments/environment.ts +++ b/src/main/angular/src/environments/environment.ts @@ -4,7 +4,7 @@ import {getBaseUrl} from "./UrlHelper"; -const PROD: boolean = false; +const PROD: boolean = true; export const environment = { production: false, diff --git a/src/main/angular/src/styles.less b/src/main/angular/src/styles.less index 7ec0458..a5dcad5 100644 --- a/src/main/angular/src/styles.less +++ b/src/main/angular/src/styles.less @@ -9,7 +9,10 @@ a { } div { + box-sizing: border-box; overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } img {