Neuer Style: flex. Flexibel für alle Geräte

[rudolfkoenig]

Und bitte verstehe meine Kritik nicht falsch, aber ich denke rein über CSS und JS wird FHEM nie wirklich schön werden. Es müsste an der Basis (FHEMWEB) geschraubt werden.

Seit wann untersagt FHEMWEB ein eigenstaendiges Layout aus dem jsonlist Output aufzubauen?

[xanker]

Sieht nicht schlecht aus, wenn auch nicht wirklich modern. Aber das ist wohl eher FHEMWEB geschuldet.
...

• neu (und schöner) gestylte Bedienelemente wie Dropdowns, Radiobuttons, Selects und Inputs (checkbox hast Du ja schon überarbeitet)
• moderner gestylte Widgets,
• vielleicht eine Überarbeitung (oder neue Version) von FHEMWEB (z.B. FHEMWEBNG) um die Tabellenlayouts los zu werden? (ich weiß, das ist nicht Deine Baustelle)

"Modern" war auch nicht zwingend mein Ziel, dafür gibt es andere Frontends. Ich wollte einen Style erstellen, welcher sowohl am PC als auch Mobil gut zu bedienen ist, ohne Einschränkungen (wie webcmds auszublenden). Die Widgets werde ich früher oder später aber noch anpassen, allerdings sehe ich hier keine Priorität, der Style ist immerhin noch in der Entwicklung.

Ich finde:

• die Icons zu klein,
• es unschön dass man keinen Raum (z.B. Event monitor) mehr mit "Rechtsklick->Link in neuem Tab öffnen" in einem neuen Tab öffnen kann, da die Links nun über onclick gesteuert werden - zum konfigurieren brauche ich meist mehrere offene FHEM-Tabs,
• es nicht schön dass in table.wide die td nun untereinander (block) statt nebeneinander (table-cell) angezeigt werden

Wie schon in anderen Posts geschrieben, für die Icon-Größe muss ich noch eine "schöne" Lösung finden. Der Punkt mit den Links ist mir bisher noch gar nicht aufgefallen, das lag an dem Suffix "touchpad", dadurch hat FHEMWEB alle Links zu "onclicks" gemacht, ich habe den Style nun umbenannt. Vielen Dank für den Hinweis!
Zu den Tabellen: das komplette Layout ist mit Flex-Container gestaltet, somit ist eine Tabelle ohnehin keine Tabelle mehr. Es ist alles auf block gesetzt, da sich hierdurch alle Elemente gleich verhalten, denn die Eigenschaften von einem block können durchaus sehr verschieden zu table-cells, table-rows etc. sein. Zudem sollen sich die einzelnen Elemente bei kleineren Displays auch halbwegs sinnvoll anordnen, ohne dass horizontales Scrollen nötig ist, und das geht nun mal nur wenn sie auch untereinander sind. Allerdings kann dies (aktuell) noch unschöne Effekte auf HTML Output von irgendwelchen Modulen haben. Aber bisher gab es keine weiteren Meldungen, evtl. kannst du ja einen Screenshot liefern was "nicht schön" bei dir ist.

Ich möchte Deine Arbeit absolut nicht schlecht machen, aber wirklich schön und modern finde ich diesen Style auch nicht.
...
Und bitte verstehe meine Kritik nicht falsch, aber ich denke rein über CSS und JS wird FHEM nie wirklich schön werden. Es müsste an der Basis (FHEMWEB) geschraubt werden.

Das habe ich auch nicht so aufgefasst  aber um es nochmal zu betonen: Es war nicht mein Ziel fancy Effekte oder sowas zu implementieren, sondern eine sinnvolle Ausrichtung (aller) Elemente bei allen Display-Größen, und dabei sollte es auch halbwegs "schick" aussehen. Und zudem sind Geschmäcker ja bekanntlich unterschiedlich

in der Detailansicht fehlt hinter get, set und attr der Name des Devices (.downText).

Das ist beabsichtigt, im Header steht der Device Name, da muss kein zusätzlicher Platz für redundante Information verschwendet werden.

[Maui]

Dann ist es wohl ein iOS/Apple Problem. Unter Android und Windows (Surface) funktioniert das einwandfrei.

Edit: liegt/lag tatsächlich an iOS (siehe https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/). Habe das nun hinzugefügt, jetzt sollte sich das Scrollen wie gewünscht verhalten.

Genau das meine ich. Auf der Seite funktioniert es auch. Leider scrollt flex mit neuestem Update noch nicht smooth.

Gruß
Maui

[xanker]

Genau das meine ich. Auf der Seite funktioniert es auch. Leider scrollt flex mit neuestem Update noch nicht smooth.

hmm, komisch. hast du auch den Style nochmal ausgewählt? Ich musste ihn von "flextouchpad" in "flex" umbenennen.




Ich habe die Icons nun alles um 35% vergrößert und alle Icons haben nun wieder die gleiche Größe. Eine Rückmeldung ob die Größe ausreichend ist (oder nicht), wäre super 

[Maui]

hmm, komisch. hast du auch den Style nochmal ausgewählt? Ich musste ihn von "flextouchpad" in "flex" umbenennen.

My fault. Hatte ich zwar gelesen aber nicht geändert. 
Jetzt flutscht es.

[xanker]

My fault. Hatte ich zwar gelesen aber nicht geändert. 
Jetzt flutscht es.

Nur weil man es liest, heißt das noch lange nicht, dass es auch im Kopf angekommen ist, das Problem kenne ich zu gut 
Aber sehr schön, dass es jetzt funktioniert

[urmel86]

Hallo xanker,

spitzen Style, gefällt mir sehr gut. Hab meine Seiten bisher nur überflogen, es sieht aber fast alles gut aus.
Ein Problem habe ich mit meinen RGB Leuchten, in FHEMWEB steuer ich die über HSV Schieber. Am Desktop wenn ausreichend Platz da ist sehe ich allerdings nur einen von drei Schiebern. Wenn der Platz weniger wird tauchen die anderen beiden darunter auch auf. Hab zwei Bilder angehängt um es zu verdeutlichen. In der Detailansicht des Devices sieht es genauso aus.

Gruß Marco

[xanker]

spitzen Style, gefällt mir sehr gut.

Vielen Dank, freut mich wenn auch andere daran ihre Freude haben

Ein Problem habe ich mit meinen RGB Leuchten, in FHEMWEB steuer ich die über HSV Schieber. Am Desktop wenn ausreichend Platz da ist sehe ich allerdings nur einen von drei Schiebern. Wenn der Platz weniger wird tauchen die anderen beiden darunter auch auf. Hab zwei Bilder angehängt um es zu verdeutlichen. In der Detailansicht des Devices sieht es genauso aus.

Sehr komisch, ich verwende auch mehrere Slider und die werden alle korrekt dargestellt (siehe Screenshots im ersten Post). Kannst du mal bitte den Inhalt vom webCmd Attribut posten? Ich verwende z.B. "pct:hue:sat:ct 490:ct 380:ct 160"

Grüße
Sebastian

[urmel86]

Auf deinem Screenshot sehe ich dass die Slider bei dir in einer Reihe angeordnet sind. Ich hab es so eingerichtet:

webCmd rgb:rgb ff0000:rgb FFFF00:rgb 00ff00:rgb 0000ff::on:off
widgetOverride rgb:colorpicker,HSV,0,1,359

damit wurden die drei Slider untereinander angezeigt. wenn ich es richtig erkenne sind sie in deinem Style auch da, nur die Zeile ist nicht hoch genug und schneidet die unteren beiden Slider ab.

[xanker]

Auf deinem Screenshot sehe ich dass die Slider bei dir in einer Reihe angeordnet sind. Ich hab es so eingerichtet:

webCmd rgb:rgb ff0000:rgb FFFF00:rgb 00ff00:rgb 0000ff::on:off
widgetOverride rgb:colorpicker,HSV,0,1,359

damit wurden die drei Slider untereinander angezeigt. wenn ich es richtig erkenne sind sie in deinem Style auch da, nur die Zeile ist nicht hoch genug und schneidet die unteren beiden Slider ab.

Hmm ok, das Problem ist widgetOverride, dadurch werden alle drei Slider in einer Zelle angezeigt zudem sind noch <br> Tags (also Zeilenumbrüche) zwischen den Slidern. So einen Fall habe ich noch nicht abgefangen, da sonst immer nur ein Command/Widget in einer Zelle ist. Ich schaue male wie ich das Problem lösen kann.

[xanker]

Auf deinem Screenshot sehe ich dass die Slider bei dir in einer Reihe angeordnet sind. Ich hab es so eingerichtet:

webCmd rgb:rgb ff0000:rgb FFFF00:rgb 00ff00:rgb 0000ff::on:off
widgetOverride rgb:colorpicker,HSV,0,1,359

damit wurden die drei Slider untereinander angezeigt. wenn ich es richtig erkenne sind sie in deinem Style auch da, nur die Zeile ist nicht hoch genug und schneidet die unteren beiden Slider ab.

So, der HSV slider wird nun korrekt angezeigt. Ich würde aber empfehlen, sofern das Modul das her gibt, die webCmds getrennt zu definieren (also hue, sat, pct) anstatt den RGB colorpicker zu einem HSV slider zu machen. Problem ist, wie gesagt, dass drei Slider in einer Zelle sind, somit funktioniert das flex-Verhalten nicht. Ich könnte das zwar hacky über Javascript ändern, halte ich aber für quatsch. Es ist jetzt so implementiert, dass die drei Slider nebeneinander angezeigt werden, sofern genug Platz ist, und ansonsten untereinander.

[urmel86]

So, der HSV slider wird nun korrekt angezeigt. Ich würde aber empfehlen, sofern das Modul das her gibt, die webCmds getrennt zu definieren (also hue, sat, pct) anstatt den RGB colorpicker zu einem HSV slider zu machen. Problem ist, wie gesagt, dass drei Slider in einer Zelle sind, somit funktioniert das flex-Verhalten nicht. Ich könnte das zwar hacky über Javascript ändern, halte ich aber für quatsch. Es ist jetzt so implementiert, dass die drei Slider nebeneinander angezeigt werden, sofern genug Platz ist, und ansonsten untereinander.

Das pass für mich so, vielen Dank für's schnelle Update! Die webCmds getrennt zu definieren werde ich auch noch mal testen.

Gruß Marco

[Maui]

Mir ist noch was aufgefallen. Beim Wechsel auf Querformat kommt man nicht mehr ans Ende des Menüs. Siehe Screenshot.
Wechsel ich dann zurück, so stellt er das Menü auch nur noch auf der halben Höhe dar (alte Höhe beim Querformat)

Gruß
Maui

[xanker]

Mir ist noch was aufgefallen. Beim Wechsel auf Querformat kommt man nicht mehr ans Ende des Menüs. Siehe Screenshot.
Wechsel ich dann zurück, so stellt er das Menü auch nur noch auf der halben Höhe dar (alte Höhe beim Querformat)

Das werde ich mir mal anschauen, andy19850 hat das auch schon angemerkt. Das ist wohl auch wieder ein spezifisches Safari/iOS Problem, ich kann mir auf Anhieb allerdings nicht erklären woran das liegen könnte.

[xanker]

Mir ist noch was aufgefallen. Beim Wechsel auf Querformat kommt man nicht mehr ans Ende des Menüs. Siehe Screenshot.
Wechsel ich dann zurück, so stellt er das Menü auch nur noch auf der halben Höhe dar (alte Höhe beim Querformat)

Ich habe eine Lösung für ein ähnliches Problem gefunden (https://stackoverflow.com/questions/23893973/webkit-overflow-scrolling-touch-orientation-change-issue). Ich habe das mal eingebaut, weiß aber nicht ob es das Problem löst. Der Hauptcontent lässt sich bei einem Wechseln noch problemlos scrollen? Und wie ist es wenn du im Landscape die Seite öffnest und dann auf Portrait wechselst?