[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen

netlars · 27 Dezember 2021, 10:12:17

Hey,
tolles Modul.

Aber bei den Warnmeldungen findet kein Zeilenumbruch am Ende der Box statt. Wenn die Warnmeldung zu lang ist zieht sich der Text über mehrere Slider hinweg.

Ist das schon bekannt?

Mfg

yersinia · 28 Dezember 2021, 15:32:09

Zitat von: netlars am 27 Dezember 2021, 10:12:17Aber bei den Warnmeldungen findet kein Zeilenumbruch am Ende der Box statt. Wenn die Warnmeldung zu lang ist zieht sich der Text über mehrere Slider hinweg.

Das kam mit einem der letzten FTUI3 Updates.

Editier die dwd-warn.css und füge hinter der Zeile 205 eine neue Zeile (in der class .dwd-warn-content-description und vor der })

Code Auswählen

white-space: normal;
hinzu und lade die Seite neu. Dann müssten der Inhalt der Warnung wieder umgebrochen werden.

grossmaggul · 28 Dezember 2021, 15:56:43

Wenn ich mich recht erinnere hatte das setstate aber bereits gefixt, benutzt Du denn auch die letzte Version?

Edit, wusste ich's doch, ich hatte das schonmal gemeldet.
https://forum.fhem.de/index.php/topic,115259.msg1192468.html#msg1192468

Und dazu gab es dann eine Antwort von mr_petz:
https://forum.fhem.de/index.php/topic,115259.msg1192483.html#msg1192483

netlars · 28 Dezember 2021, 16:58:49

Hey vielen Dank euch beiden,

mir war auch so, dass das schon einer gemeldet hat, aber ich habe es in den 128 Seiten nicht mehr gefunden.

Ich habe es in die css eingefügt und werde es testen.

yersinia · 30 Dezember 2021, 17:00:15

Update im ersten Post - hab jetzt

Zitat von: yersinia am 28 Dezember 2021, 15:32:09Editier die dwd-warn.css und füge hinter der Zeile 205 eine neue Zeile (in der class .dwd-warn-content-description und vor der })
Code Auswählen Erweitern
white-space: normal;hinzu und lade die Seite neu. Dann müssten der Inhalt der Warnung wieder umgebrochen werden.

standardmäßig hinzugefügt.

netlars · 30 Dezember 2021, 18:04:12

Super,
funktioniert auf jedenfall damit. Heute wurde die Zeile umgebrochen.
Danke

yersinia · 11 Januar 2022, 10:27:23

Nun hab ich mir endlich mal die Zeit genommen und auf ftui-swiper umgestellt. Es gibt eine HTML-Datei mehr, dafür wird die CSS etwas kleiner. Aktueller Stand im ersten Post angehängt als ZIP-Archiv.
Die beiden Versionen bleiben (erstmal) parallel bestehen - die alte mit eigenem CSS im Ordner without_ftui_swiper und die neue mit ftui-swiper im Ordner with_ftui_swiper.
Die Installation ist ähnlich 'aufwendig'.
Mittelfristig ist die Umstellung auf ftui-swiper die bessere weil flexiblere Lösung imho. Man sieht die Anzahl der Warnungen als dots unter dem Scrollbar, man kann manuell durchscrollen, das Intervall ist auch besser einzustellen - und man kann unkompliziert wesentlich mehr Warnungen darstellen. Auch wenn ich bisher sehr selten mal mehr als fünf Warnungen gesehen habe.
Durch das Durchreichen von Variablen durch die Content-Struktur ist es für den Anwender etwas einfacher.

yersinia · 14 Januar 2022, 09:10:10

Zitat2022-01-14 - picoUpdate: Interval wird durchgereicht und kann direkt beim Aufruf des dwd-warn-contents mitgegeben werden; wenn nur eine Meldung vorhanden ist sollte der horizontale Scrollbalken verschwinden

LuGu · 19 Januar 2022, 22:20:07

Hi yersinia,

Danke für die prima Arbeit. Hat auf Anhieb geklappt.
In die installation instruction hat sich ein kleiner Fehler eingeschlichen. Stört aber die Funktion nicht.

Einmal Anführungszeichen zuviel.

Code Auswählen

dwdinterval="7"">

Gruß LuGu

yersinia · 20 Januar 2022, 07:31:09

Zitat von: LuGu am 19 Januar 2022, 22:20:07Danke für die prima Arbeit. Hat auf Anhieb geklappt.

Vielen Dank für das Feedback.

Zitat von: LuGu am 19 Januar 2022, 22:20:07In die installation instruction hat sich ein kleiner Fehler eingeschlichen. Stört aber die Funktion nicht.
Einmal Anführungszeichen zuviel.
Code Auswählen Erweitern
dwdinterval="7"">

Oh, gutes Auge. Danke, hab es korrigiert.

yersinia · 01 Februar 2022, 09:15:07

Update:

Zitat2022-02-01 - das Event-Handling wenn sich die Anzahl der Warnungen geändert hat gefiel mir nicht. Mit diesem Update wird die "Keine Warnungen"-Benachrichtigung als erste Slide definiert - somit ist die swiper-Funktione immer geladen. Weiterhin scheint [hidden] nicht richtig zu funktionieren - dies wird durch [style] ersetzt. Der Srollbar ist immer etwas länger als Elemente vorhanden sind. Dies liegt an der letzten Slide, welche 15px breiter ist als angezeigt wird (dies ist durchaus sinnvoll wenn es eine der Slides davor ist) - dies wird ebenso über [style] gehandelt (analog zum Update vom 2022-01-14). So ganz zufrieden bin ich damit aber noch nicht. Ich teste dies weiterhin parallel. Weiterhin hat die Beschreibung einen Abstand zur Überschrift von 2px bekommen - es wirkt dann nicht so drangeklatscht. In einer bestehenden Installation müssen nur dwd-warn.css (beide Versionen) und dwd-warn_content.html (Version mit Swiper-Funktion) ersetzt werden.

netlars · 02 Februar 2022, 20:33:23

Hey,
super vielen Dank für deine Verbesserunge.
Ich habe bei mir noch vom Layout geändert, dass der Conten 5px Abstand zum linken Rand hat. Buchstaben kleben bei mir sonst am linken Rand, das ist Optisch nicht so schön.
Ebenfalls wollte ich es für den rechten Rand realisieren, aber das wollte nicht so recht.
Ist das bei dir / euch auch so, dass die Buchstaben an den Rändern kleben?

Mfg

yersinia · 03 Februar 2022, 07:30:24

Danke für dein Feedback.

Zitat von: netlars am 02 Februar 2022, 20:33:23Ich habe bei mir noch vom Layout geändert, dass der Conten 5px Abstand zum linken Rand hat. Buchstaben kleben bei mir sonst am linken Rand, das ist Optisch nicht so schön.

Rein aus Neugier - wie hast du das getan?

Zitat von: netlars am 02 Februar 2022, 20:33:23Ebenfalls wollte ich es für den rechten Rand realisieren, aber das wollte nicht so recht.

Wenn du es für den linken Rand geschafft hast, warum nicht für rechts?

Such im dwd-warn.css nach diesem Eintrag (sollte Zeile 145 sein):

Code Auswählen

.dwd-warn-content-header,
.dwd-warn-content-description,
.dwd-warn-content-footer {

und ersetze dort die Padding-Definition

Code Auswählen

padding: 0;
in Zeile 151 durch

Code Auswählen

padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 5px;

dies fügt dem header, der description und dem footer links und rechts einen Innenabstand von 5px hinzu.

Möchtest du dies nur für die description, ergänze in (der originalen) Zeile 161 in der class

Code Auswählen

.dwd-warn-content-description {
die padding-Werte für rechts und links (unter der originalen Zeile 163):

Code Auswählen

padding-right: 5px;
padding-left: 5px;

Zitat von: netlars am 02 Februar 2022, 20:33:23Ist das bei dir / euch auch so, dass die Buchstaben an den Rändern kleben?

Das ist eigtl gewollt um den schon geringen Platz nicht zu verschwenden - das Dreieck hat eine Höhe von 100px und dem soll die Texthöhe in etwa folgen. Ich hatte bisher kaum Probleme damit, stimme aber zu, dass die Platzverhältnisse und damit das Textlayout suboptimal sind.

netlars · 03 Februar 2022, 07:36:17

Vielen Dank, ich werde es ausprobieren.
Die 5px rechts und links ist optisch besser, sonst sehen die Buchstaben teilweise abgeschnitten aus.

ich habe unter content-description
padding: 5px 0 5px 0 hinzugefügt gehabt, das links hatte er genommen, das rechte nicht.
Einzeln hätte ich es probieren können, aber nicht daran gedacht.

Ich teste deinen Vorschlag heute Abend mal.

yersinia · 03 Februar 2022, 07:51:13

Zitat von: netlars am 03 Februar 2022, 07:36:17padding: 5px 0 5px 0 hinzugefügt gehabt, das links hatte er genommen, das rechte nicht.

Allerdings:

ZitatVier Werte
Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben, rechts, unten, links.
Code Auswählen Erweitern
padding: 1em 3px 30px 5px; /* oben 1em */ /* rechts 3px */ /* unten 30px */ /* links 5px */

(https://developer.mozilla.org/de/docs/Web/CSS/padding)
also:

Code Auswählen

padding: 0 5px 0 5px; /* top right bottom left */