Neuer Style: f18

[mumpitzstuff]

Nachdem ich mall testweise den Style von dark auf den neuen f18 geändert habe, sieht alles irgendwie hässlich aus.
Alles was ich bisher gemacht habe, ist das ich die Farbe der Links auf grau umgestellt habe. Am meisten stören mich 2 Dinge:

1.) Bei allen Links wird die Schrift größer dargestellt als der Rest. (rot markiert)
2.) Bei einigen Dingen gabs im alten darkmode Buttons, die aber jetzt verschwunden sind. Ich muss jetzt schlicht erahnen wohin ich klicken muss bzw. Kann, außer ich ändere die Farbe der Links (gelb markiert)

Kann ich beides irgendwie ändern?

[rudolfkoenig]

1. Es tut mir leid, dass Grossbuchstaben groesser sind als Kleinbuchstaben, vermutlich existieren Fonts, die dieses grundlegende Problem beheben. Einen anderen Font kann man z.Bsp. ueber "Additional CSS" aktivieren.
2. Wenn man die Linkfarbe auf die Textfarbe setzt, dann kann man Links schlecht vom Text unterscheiden. Man kann aber Links auch anderweitig dekorieren, mit eigenen CSS.

[mumpitzstuff]

1.) Das Großbuchstaben größer sind ist klar, aber darüber hinaus sind auch die Kleinbuchstaben der Links größer als die Kleinbuchstaben von nicht Links bzw. Großbuchstaben von Links größer als Großbuchstaben von nicht Links (sieht man in dem Bild eigentlich). Ich würde schätzen das Links eine etwa 2px größere Schrift verwenden. Ich konnte im CSS aber nicht ausmachen woran das liegen könnte.

Okay ich habs anscheinend gefunden:

Code Auswählen Erweitern

body.touch a { font-size: 20px; }
body.touch #menu { font-size: 20px; } /* for the menuTree icon */

Wenn man das in 16px ändert, dann sieht das Gesamtbild gleich um einiges besser aus.

[rudolfkoenig]

darüber hinaus sind auch die Kleinbuchstaben der Links größer als die Kleinbuchstaben von nicht Links

Danke fuer die Praezisierung, wenn man die rote Markierung auf dem Screenshot gnoriert, dann sieht man das auch.

Die Vergroesserung der Links ist fuer Geraete mit Touchscreen Absicht, um die Bedienung zu erleichtern.

[mumpitzstuff]

Ich habe jetzt die folgenden Zeilen aus dem darkmode Style in die additional CSS Sektion des f18 Styles übernommen und jetzt ist das für meine Zwecke im Bereich des Brauchbaren:

Code Auswählen Erweitern

body.touch a { font-size: 16px; }
body.touch #menu { font-size: 16px; } /* for the menuTree icon */
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}
input[type="submit"] { background-color: #353535; border-style:outset; border-width:2px }

Die ersten beiden Zeilen sorgen dafür, das alle Links die selbe Größe wie der Rest der Texte hat. Dadurch wird das Durcheinander von großen und kleinen Schriften auf dem Bildschirm reduziert.
Zeile 3 sorgt dafür das die Zellen innerhalb von Tabellen Ränder bekommen und die Inhalte nicht an den Rändern kleben (z.B. bei ReadinsgGroups oder DOIF uiTables).
Zeile 4 umgibt alle submit Buttons mit einem Rahmen, so das diese einfacher auf dem Bildschirm als solche zu erkennen sind (attr, get, set usw.).

[mumpitzstuff]

Beim Umschalten zwischen verschiedenen Räumen, insbesondere zu solchen mit vielen Geräten wie z.B. Everything, erscheint die Seite zuerst ziemlich hässlich in grüner Farbe (1-5s je nach Raum) und erscheint danach erst richtig (Firefox unter Windows). Hat dafür jemand eine Erklärung?

[rudolfkoenig]

Die durchsichtige Variante ist so lange sichtbar, bis das JavaScript seine Arbeit gemacht hat und die Farben gesetzt hat.
Das JavaScript rennt los, falls vom Browser "document loaded" signalisiert bekommt.
Entweder ist der Rechner langsam, der Browser ruft das Programm verspaetet auf oder irgendeine Datei braucht lange zum laden.
Ich vermute Letzteres, und das koennte man in der JavaScript-Console/Netzwerk Tab lokalisieren.

[mumpitzstuff]

Okay guter Hinweis. Schau ich mir mal genauer an. Ich habe die Uhr im Verdacht, nur die hatte ich vorher im Darkmode auch am laufen und da gibt es den Effekt nicht. Das tritt direkt nur bei f18 auf und ist sofort weg wenn ich den auf den darkmode style umschalte. Rechner ist übrigens ein Ryzen 3600 und der Server ein potentes i5 Notebook, welche beide am Gigabit Ethernet hängen. Daran kann es definitiv nicht liegen.

[rudolfkoenig]

Darkmode kommt fuers Styling ohne javascript aus, dafuer sind alle Einstellungen statisch.

[mumpitzstuff]

Hat leider etwas gedauert...

Code Auswählen Erweitern

GEThttp://192.168.178.112:8083/fhem?room=all
[HTTP/1.1 200 OK 486ms]

GEThttps://darksky.net/widget/default/48.8264,9.0658/uk12/de.js?width=100%&height=420&title=Ditzingen&textColor=333333&bgColor=FFFFFF&transparency=false&skyColor=undefined&fontFamily=Default&customFont=&units=uk&htColor=333333&ltColor=C7C7C7&displaySum=yes&displayHeader=yes
[HTTP/2 200 OK 433ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/style.css?v=1592434437
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery-ui.min.css
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery.min.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery-ui.min.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/fhemweb.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/f18.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/codemirror/fhem_codemirror.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/doif.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/fhemweb_readingsGroup.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/svg.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/dashboard.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/alarm.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/dashboard_style.css
[HTTP/1.1 200 OK 0ms]

Layout-Darstellung wurde erzwungen, bevor die Seite vollständig geladen war. Falls Stylesheet noch nicht geladen sind, kann dies zu einem kurzzeitigen Darstellung des Inhalts ohne Formatierung führen. jquery.min.js:4:29775

Ich sehe bei jedem Reload folgenden Warnhinweis in der Firefox Console, was genau meinem beobachteten Verhalten entspricht. Im Edge Browser passiert genau das selbe, es ist also nicht Browserabhängig.

[rudolfkoenig]

GEThttps://darksky.net/widget...
[HTTP/2 200 OK 433ms]

=> das hat knapp eine halbe Sekunde gedauert.

[mumpitzstuff]

Ja das ist richtig. Das ist aber in jedem Raum so, jeweils mehr oder weniger lang. Wenn ich das Problem richtig verstanden habe, versucht der Browser die Seite zu früh anzuzeigen, obwohl noch nicht alles komplett geladen wurde. Mit anderen Worten die Anzeige sollte nicht bereits starten, wenn in diesem Fall das iframe noch nicht geladen ist (was wie gesagt nur in diesem speziellen Raum der Fall ist).

Code Auswählen Erweitern

GEThttp://192.168.178.112:8083/fhem?room=RESIDENTS
[HTTP/1.1 200 OK 16ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/dashboard.js
[HTTP/1.1 200 OK 45ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/svg.js
[HTTP/1.1 200 OK 41ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/fhemweb_readingsGroup.js
[HTTP/1.1 200 OK 77ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/doif.js
[HTTP/1.1 200 OK 70ms]

GEThttp://192.168.178.112:8083/fhem/codemirror/fhem_codemirror.js
[HTTP/1.1 200 OK 28ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/f18.js
[HTTP/1.1 200 OK 21ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/fhemweb.js
[HTTP/1.1 200 OK 44ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery-ui.min.js
[HTTP/1.1 200 OK 40ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery.min.js
[HTTP/1.1 200 OK 27ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery-ui.min.css
[HTTP/1.1 200 OK 29ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/style.css?v=1592696383
[HTTP/1.1 200 OK 15ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/dashboard_style.css
[HTTP/1.1 200 OK 4ms]

Layout-Darstellung wurde erzwungen, bevor die Seite vollständig geladen war. Falls Stylesheet noch nicht geladen sind, kann dies zu einem kurzzeitigen Darstellung des Inhalts ohne Formatierung führen. jquery.min.js:4:29775
GEThttp://192.168.178.112:8083/fhem/pgm2/svg.js
[HTTP/1.1 200 OK 6ms]

GEThttp://192.168.178.112:8083/fhem/images/default/icoEverything.png
[HTTP/1.1 200 OK 56ms]

GEThttp://192.168.178.112:8083/fhem/images/default/icoSYSTEM.png
[HTTP/1.1 200 OK 56ms]

GEThttp://192.168.178.112:8083/fhem/images/default/fhemicon.png
[HTTP/1.1 200 OK 2ms]

Die Warnung erscheint immer direkt nachdem dashboard_style.css geladen wurde. Das kann aber auch Zufall sein.

[Porsti]

Hallo,

habe das erste mal mit einem Hintergrundbild gespielt und dabei ist mir aufgefallen das man in einem Raum mit vielen Geräten an das Ende des Hintergrundbildes scrollen kann.
Könnte mal einstellen das man das Bild wiederholen lässt oder einfach auf "fix" setzten kann?

Danke für diesen Style!!!!

Gruß
Porsti

[rudolfkoenig]

Könnte mal einstellen das man das Bild wiederholen lässt oder einfach auf "fix" setzten kann?

Bestimmt, mit irgendeine CSS Anweisung.
Womoeglich hilft auch "Fixed input and menu" (ungetestet).

[rudolfkoenig]

Wenn ich das Problem richtig verstanden habe, versucht der Browser die Seite zu früh anzuzeigen, obwohl noch nicht alles komplett geladen wurde.

Das ist normal, da es den Eindruck erweckt, dass der Browser schneller ist, und desegen machen das alle.
Man kann es nur verhindern, indem man die Anzeige erst versteckt, und es per JavaScript sichtbar macht.
Damit will ich aber nicht anfangen, da nicht alle Styles javascript verwenden, und eine Weile nichts zu sehen ist auch nicht ideal.

Die Warnung ist (wenn ich es richtig verstehe) fuer dieses Problem (falsche Farben) irrelevant.