Neuer Style: f18

[rudolfkoenig]

Das Problem wurde vor 10 Tagen bereits beschrieben: https://forum.fhem.de/index.php/topic,82351.msg819353.html#msg819353, meine flapsige Antwort kam sofort: https://forum.fhem.de/index.php/topic,82351.msg819359.html#msg819359. Aber ich meine es ernst, wenn jemand eine Alternative hat, bitte melden. Workaround solange ist Fixed Input zu deaktivieren.

[blecher-at]

Ein paar Anregungen:

Code Auswählen Erweitern

<meta name="viewport" content="width=device-width, user-scalable=0">
funktioniert besser für smartphones. der content hat damit immer denselben skalierungsfaktor und passt auf den screen. sollte man im style-editor anpassen können.

Code Auswählen Erweitern

@media screen and (orientation: portrait) {
   body.small table.block tr td:nth-child(n+3) { width: 0px; display: none; }
-  body.small #content > table { width: 100%; }
+  body.small #content > table { width: 100%; table-layout: fixed; }
+  .SVGplot { width: 100%; overflow-x: scroll }
}

behebt das problem dass tabellen über den viewport hinausragen (width 100% wird ignoriert, horizontaler scroll), und dasselbe für svg plots.

[blecher-at]

mit folgendem code wandert die 2. spalte unterhalb der ersten spalte falls kein platz ist. das ist insbesondere bei den readings/internals praktisch

Code Auswählen Erweitern



@media screen and (orientation: portrait) {
+  body.small #content > table { width: 100%; table-layout: fixed; }
   body.small table.block tr td:nth-child(n+3) { width: 0px; display: none; }
-  body.small #content > table { width: 100%; }
+  body.small table.block tr td:nth-child(2) { }
+  body.small table.block tr td:nth-child(1) { flex-grow: 1; }
+
+  /* flex-collapsing table */
+  body.small table.block table,
+  body.small table.block thead,
+  body.small table.block tbody,
+  body.small table.block th,
+  body.small table.block td {
+       display: block;
+  }
+
+  body.small table.block tr {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  body.small table.block td {
+       word-wrap: break-word;
+       max-width: 100%;
+  }
+
+  .SVGplot { width: 100%; overflow-x: scroll }
+
}


[Markus Bloch]

Hallo Rudi,

ich bekomme bei mir immer wieder folgende Meldung in der JS-Konsole und als Popup:

Code Auswählen Erweitern

f18.js:777 Uncaught TypeError: Cannot read property 'substr' of undefined
    at addCol (f18.js:777)
    at Object.f18_svgSetCols [as f18] (f18.js:792)
    at svg_init_one (svg.js:364)
    at SVGSVGElement.<anonymous> (svg.js:392)
    at Function.each (jquery.min.js:2)
    at m.fn.init.each (jquery.min.js:2)
    at HTMLDocument.<anonymous> (svg.js:390)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)

Kannst Du mir weiterhelfen?

Danke

Gruß
Markus

[rudolfkoenig]

@Markus: deine Farbein im Attribut sind irgendwie kaputtgegangen. Kannst du bitte sie erneut setzen, z.Bsp. eine vordefinierte Farbe auswaehlen. Das wurde schon vor ein paar Tagen gemeldet, wuesste gerne, wie man das hinkriegt, um es zu vermeiden.

@blecher-at: Vielen Dank! Ich habe ein paar Fragen:
- user-scalable=0 verbietet das Vergroessern, das kann aber insb. auf dem kleinen Bildschirm sinnvoll sein. Gibt es einen Grund, es zu untersagen?
- ich sehe zwischen "initial-scale=1.0" und "width:device-width" keinen Unterschied, und das Internet will mir da auch nicht weiterhelfen. Weisst Du mehr?
- die ".SVG einzeln Scrollen" Aenderung habe ich eingecheckt, und auch die Zeile drueber. Weiss aber nicht, wo ich Letzteres testen kann, kannst Du mir einen Tipp geben? 

Werde die anderen Aenderungen auch pruefen/testen, ich komme aber erst spaeter dazu.

[blecher-at]

ja, mit user-scalable=0 verbiete ich zooming. Das ist eines der Grundprinzipien von responsive design: der Inhalt passt sich dem Bildschirm an, nicht umgekehrt (durch zoom oder scroll).
Natürlich muss ich dann als Designer dafür Sorge tragen dass alles auf den Bildschirm passt - deswegen die anderen Regeln (Tabellen die umbrechen, Details die ausgeblendet werden etc.)

- initial-scale ist insbesondere bei umschalten zwischen landscape und portrait-mode relevant. damit hat ein Pixel ungeachtet der rotation immer dieselbe größe. ich habe aber keine mobilen regeln für landscape mode in f18 gefunden, deswegen mal offen gelassen.
- ohne meta-tag ist css:100% auf einem mobilen Browser abhängig vom seiteninhalt uu. mehr/weniger als die Bildschirmbreite (es wird fit to screen gemacht.) durch width:device-width verhält ein mobiler browser sich wie ein desktop browser: 100% im CSS ist damit immer die Bildschirmbreite. dadurch lässt sich dann gemeinsam mit media-queries ein konsistentes design umsetzen.

[rudolfkoenig]

Wir versuchen den Inhalt dem Bilschirm anzupassen, aber ich will fuer Leute mit schlechter Sicht/ueber 50 (geschaetzt 80% der FHEM-Anwender) das zoomen nicht verbieten. Es sei denn, es sprechen gewichtige Argumente dafuer.

Ich habe jetzt width:device-width bei mobilen Geraeten zusaetzlich hinzugefuegt, initial-scale=1.0 habe ich gelassen.

Beim "2. Spalte wandert" Patch bin ich unsicher, und bitte um die Meinung anderer, siehe die angehaengten Screenshots.

[Amenophis86]

Beim "2. Spalte wandert" Patch bin ich unsicher, und bitte um die Meinung anderer, siehe die angehaengten Screenshots.

Mag es lieber sortiert, wie auf dem "alt" Bild.

[blecher-at]

Mir ist noch aufgefallen: der mobile style wird von 2 attributen beeinflusst:
- css klasse "small" am body (gesetzt beim laden durch js, aber nicht durch resize)
- media orientation query

das führt zu fehlern wenn man z.b. am desktop das fenster verkleinert (text überlappt sich selbst)
konsistenter wäre es sowieso, den javascript "small" zu entfernen, und nur media queries zu verwenden:

Code Auswählen Erweitern


-@media screen and (orientation: portrait) {
+@media screen and (max-width: 480px), screen and (max-height: 480px), screen and (orientation: portrait) {

bei den darunterliegenden regeln dann die einschränkung auf "body.small" entfernen.

[DarkT]

Beim "2. Spalte wandert" Patch bin ich unsicher, und bitte um die Meinung anderer, siehe die angehaengten Screenshots.

Mir gefällt das "Alte" besser

[tomspatz]

Beim "2. Spalte wandert" Patch bin ich unsicher, und bitte um die Meinung anderer, siehe die angehaengten Screenshots.

auch ich würde die alte Variante bevorzugen.

LG
Tom

[ToM_ToM]

Beim "2. Spalte wandert" Patch bin ich unsicher, und bitte um die Meinung anderer, siehe die angehaengten Screenshots.

Ich finde das Alte auch besser. 

[gloob]

Dickes Lob für den neue Style, gefällt mir echt gut und lässt sich super auf dem iPhone bedienen.

Gibt es allerdings eine Möglichkeit SVGs auf die Displaybreite vom mobile Gerät zu skalieren

[rudolfkoenig]

@gloob: sicher, mit CSS, am einfachsten im Select style, f18, Additional CSS.

@ToM_Tom, @tomsspatz, @DarkT, @Amenophis86: bin nicht sicher, ob es euch bewusst ist, dass in der alten Version der Inhalt nicht ganz auf dem Bildschirm passt, und man rechts scrollen kann/muss.

@blecher-at: habs versucht f18style.css nach deiner Anleitung umzubauen, aber damit sind die Spalten 3+ auch in landscape  weg. Vielleicht habe ich die Anleitung schlecht umgesetzt, kannst du bitte einen konkreten Patch schicken.Ich wuerde die Klasse small auf body aber weiterhin behalten.

[gloob]

Der Abstand zwischen einer Readingsgroup und einer anderen Gruppe passt scheinbar nicht richtig.

Ich hoffe man erkennt was ich meine.