CSS Klasse mkTitle in FHEMWEB

Begonnen von Loredo, 31 März 2019, 15:56:29

Vorheriges Thema - Nächstes Thema

Loredo

Hi,


kennt sich jemand besonders gut in FHEMWEB bzw. dem HTML/CSS Aufbau darin aus?
Ich habe nun 98_Installer glaube ich soweit auf die selbe HTML Struktur umgestellt, wie sie auch in der Device Detailansicht verwendet wird.
Trotzdem werden allerdings die Tabellen Überschriften, die ich mit der Klasse 'mkTitle' versehen habe, nicht wie sonst in der Detailansicht dargestellt.


Spielt da noch etwas JavaScript Magie eine Rolle oder wieso funktioniert das nicht? Stehe ein wenig auf dem Schlauch :-/
Hat meine Arbeit dir geholfen? ⟹ https://paypal.me/pools/c/8gDLrIWrG9

Maintainer:
FHEM-Docker Image, https://github.com/fhem, Astro(Co-Maintainer), ENIGMA2, GEOFANCY, GUEST, HP1000, Installer, LaMetric2, MSG, msgConfig, npmjs, PET, PHTV, Pushover, RESIDENTS, ROOMMATE, search, THINKINGCLEANER

rudolfkoenig

f18.js "kennt" diverse Ueberschriftarten, und fuegt fuer diese Elemente die Klasse col_header (und pin, usw) hinzu.
In der Raumuebersicht wird nach devType gesucht, in der Detailansicht nach div.makeTable > span, im Menu nach div#menu > div:first, usw.

Das angehaengte Screenshot schaut fuer mich weder wie eine Detailseite, noch wie ein Raumuebersicht aus
=> keine Garantie, dass bei etwaigen Umbauten keine Probleme entstehen.

Loredo

Hm, so wie du das beschreibst, sollte das dann doch auch bereits greifen?


So sieht der generierte HTML Code an dieser Stelle aus:



<div class="makeTable wide"><span class="mkTitle">Module Information</span>



Dies entspricht genau dem code, wie er auch in anderen Ansichten verwendet wird.
Auch wenn ich den gesamten Body Text vergleiche, erkenne ich keinen Unterschied mehr, trotzdem scheint f18.js dann hier nicht zu wirken.


Es gibt sicher einen Grund, weshalb die CSS Klasse nicht direkt angegeben ist, sondern mit f18.js hinzugefügt wird, daher würde ich das auch gerne so machen. Weiß aber immer noch nicht wie :-(
Hat meine Arbeit dir geholfen? ⟹ https://paypal.me/pools/c/8gDLrIWrG9

Maintainer:
FHEM-Docker Image, https://github.com/fhem, Astro(Co-Maintainer), ENIGMA2, GEOFANCY, GUEST, HP1000, Installer, LaMetric2, MSG, msgConfig, npmjs, PET, PHTV, Pushover, RESIDENTS, ROOMMATE, search, THINKINGCLEANER

rudolfkoenig

ZitatHm, so wie du das beschreibst, sollte das dann doch auch bereits greifen?
Haengt davon ab, wann/wie die neuen Daten angezeigt werden.
f18.js untersucht die Seite in $(document).ready(), wenn die Daten spaeter eingefuegt werden, dann wird nichts mehr geaendert.

ZitatEs gibt sicher einen Grund, weshalb die CSS Klasse nicht direkt angegeben ist, sondern mit f18.js hinzugefügt wird
Diese Klasse kam mit f18, und ich wollte wg. f18 FHEMWEB.pm so wenig wie moeglich modifizieren.



Loredo

Zitat von: rudolfkoenig am 01 April 2019, 11:26:54
Haengt davon ab, wann/wie die neuen Daten angezeigt werden.
f18.js untersucht die Seite in $(document).ready(), wenn die Daten spaeter eingefuegt werden, dann wird nichts mehr geaendert.


Hm, dann sollte es ja zumindest funktionieren, wenn ich die URL direkt mittels "?cmd=get..." aufrufe. Da wird ja die komplette Seite generiert und f18.js sollte dann eigentlich hergehen und loslegen. Dass das im Popup dann nicht ginge, kann ich verstehen.


Gibt es für mich einen Weg, dass ich die JavaScript Routine selbst aus dem "get ..." Ergebnis heraus trigger?
Hat meine Arbeit dir geholfen? ⟹ https://paypal.me/pools/c/8gDLrIWrG9

Maintainer:
FHEM-Docker Image, https://github.com/fhem, Astro(Co-Maintainer), ENIGMA2, GEOFANCY, GUEST, HP1000, Installer, LaMetric2, MSG, msgConfig, npmjs, PET, PHTV, Pushover, RESIDENTS, ROOMMATE, search, THINKINGCLEANER

Loredo

Also wenn ich jetzt in f18.js beiliegende Zeile ändere, dann wird zumindest auf komplett neu generierten Seiten das CSS korrekt umgeschrieben.
Allerdings, wie du richtig vorausgesagt hast, nicht, wenn der Content nachträglich geladen wird wie beispielsweise über ein Popup oder als Ergebnis aus einem Kommando in der Kommandozeile.


Wenn ich jetzt einfach die Änderungen, die f18.js sonst vornimmt, direkt im Quellcode bei mir einfüge, dann gilt das natürlich aber für alle Styles und beispielsweise wird der "alte" FHEM Style dann entsprechend zerstört, weil dort die Menüzeile hervorgehoben wird, obwohl es sonst nirgends der Fall ist.


Was wäre denn der beste Weg das HTML, as als Ergebnis von einem get/set Befehl zurück kommt, so zu formatieren, dass es dem aktuell genutzten Stylesheet entspricht und bei dem die Frontend-Autoren möglichst nichts/wenig ändern müssten?
Hat meine Arbeit dir geholfen? ⟹ https://paypal.me/pools/c/8gDLrIWrG9

Maintainer:
FHEM-Docker Image, https://github.com/fhem, Astro(Co-Maintainer), ENIGMA2, GEOFANCY, GUEST, HP1000, Installer, LaMetric2, MSG, msgConfig, npmjs, PET, PHTV, Pushover, RESIDENTS, ROOMMATE, search, THINKINGCLEANER

rudolfkoenig

ZitatWas wäre denn der beste Weg das HTML, as als Ergebnis von einem get/set Befehl zurück kommt, so zu formatieren, dass es dem aktuell genutzten Stylesheet entspricht und bei dem die Frontend-Autoren möglichst nichts/wenig ändern müssten?
Gute Frage.
Es ist bisher schlicht nicht vorgesehen, dass get/set eine selbstgebaute "Raumuebersicht" oder "Detailansicht" zurueckliefert.
Ist auch fraglich, ob f18 auf solche Seiten drag & co anwenden soll bzw. kann.
Ich habe aber kein Problem, dein Patch anzuwenden, wenn es Dir hilft.