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

Begonnen von xanker, 24 Juni 2019, 20:28:37

Vorheriges Thema - Nächstes Thema

CoolTux

Hallo Xanker,

Dein neuer FHEMWEB Styl wird heute Abend Thema im Monatsrückblick sein. Eventuell magst ja dabei sein und sogar etwas dazu sagen.
https://forum.fhem.de/index.php/topic,101580.0.html


Grüße
Du musst nicht wissen wie es geht! Du musst nur wissen wo es steht, wie es geht.
Support me to buy new test hardware for development: https://www.paypal.com/paypalme/MOldenburg
My FHEM Git: https://git.cooltux.net/FHEM/
Das TuxNet Wiki:
https://www.cooltux.net

xanker

Zitat von: binford6000 am 01 Juli 2019, 11:54:30
Was mir so auffällt:

  • Die Symbole sind viel kleiner
  • Die RC vom SONOSPLAYER wird neben Slebigen angeziegt: TOP! Leider nur viel zu klein und damit unbedienbar
  • Die Symbole vom WeatherasHTML sind viel zu klein
  • Der QR-Code vom Gäste-WLAN ist auch viel zu klein
Hey Sebastian, ich habe nochmal eine neue Version hochgeladen. Nun sollten die Icons nicht mehr zu klein sein, zudem sollten die Tabellen, welche innerhalb einer Tabelle sind jetzt "schöner" angezeigt werden. Ich freue mich über dein Feedback :)

Zitat von: CoolTux am 01 Juli 2019, 12:41:45
Dein neuer FHEMWEB Styl wird heute Abend Thema im Monatsrückblick sein. Eventuell magst ja dabei sein und sogar etwas dazu sagen.
https://forum.fhem.de/index.php/topic,101580.0.html
Oh, das freut mich, ich wäre sehr gerne dabei, aber ich habe heute Abend leider keine Zeit. Wann anders wäre ich dazu aber gerne bereit!
Danke an der Stelle auch an Maui für den Vorschlag :)

Grüße
Sebastian
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

binford6000

Zitat von: xanker am 01 Juli 2019, 13:41:04
Hey Sebastian, ich habe nochmal eine neue Version hochgeladen. Nun sollten die Icons nicht mehr zu klein sein, zudem sollten die Tabellen, welche innerhalb einer Tabelle sind jetzt "schöner" angezeigt werden. Ich freue mich über dein Feedback :)

Klaro, hier mein Feedback:

  • Die Symbole sind immer noch klein
  • Die RC vom SONOSPLAYER wird neben Selbigen angeziegt: TOP! Du hast es aber zu gut gemeint mit der Größe  ;D
  • Die Symbole vom WeatherasHTML sind korrekt, allerdings wird alles untereinander angezeigt
  • Der QR-Code vom Gäste-WLAN ist korrekt skaliert

Details siehe Screenshot...
VG Sebastian

carlos

Habe gerade gemerkt, dass beim HMCCU device die icons sehr groß sind.

Gruß
Carlos
FHEM svn auf Intel NUC mit proxmox,1 UDOO, 3 Raspberry Pi, signalduino, nanoCUL, div. Homematic Komponenten, toom Baumarkt Funksteckdosen, einige sonoffs, hue, shelly

Maui

Was mir noch aufgefallen ist, bei devices mit einem setList on,off wird das on und das off in einer eigenen Zeile dargestellt. Sieht nicht so gewollt aus?!
Vor allem wird das auch in dem Raum so angezeigt und nicht nur in den Details.

Gruß
Maui

xanker

#50
Zitat von: binford6000 am 01 Juli 2019, 14:28:10

  • Die Symbole sind immer noch klein
  • Die RC vom SONOSPLAYER wird neben Selbigen angeziegt: TOP! Du hast es aber zu gut gemeint mit der Größe  ;D
  • Die Symbole vom WeatherasHTML sind korrekt, allerdings wird alles untereinander angezeigt
  • Der QR-Code vom Gäste-WLAN ist korrekt skaliert
Zitat von: carlos am 01 Juli 2019, 17:17:06
Habe gerade gemerkt, dass beim HMCCU device die icons sehr groß sind.
Hups, da habe ich nun für die anderen Icons keine Größen-Limitierung mehr gesetzt, und die unskalierten SVGs haben wohl alle ein riesiges Ausmaß. Habe nochmal eine Version hochgeladen welche die Icon-Größe limitiert auf 150% der "normalen" Icon-Größe. Das Weather-HTML wird jetzt auch richtig angezeigt. Wenn die Breite nicht ausreicht, wird es horizontal scrollbar.

Zitat von: Maui am 01 Juli 2019, 18:48:22
Was mir noch aufgefallen ist, bei devices mit einem setList on,off wird das on und das off in einer eigenen Zeile dargestellt. Sieht nicht so gewollt aus?!
Ja, das ist noch eine Notlösung. Problem: Ich will, dass sobald eine gewisse Breite unterschritten wird, die Webcmd in die zweite Reihe kommen, damit der Status von allen Devices immer rechtsbündig in der ersten Reihe ist. Es gibt für die flex-Container zwar den CSS Befehl "break-after" bzw. "break-before" (https://www.w3.org/TR/css-flexbox-1/#pagination), diese werden aber noch von keinem Browser unterstützt. Daher habe ich es bisher so gemacht, dass dann das erste Webcmd eine Breite von 100% bekommt, dadurch wird auch ein Zeilenumbruch forciert, mit dem Nachteil, dass dann natürlich die zweite Zeile voll eingenommen wird. Ich habe bisher leider noch keine bessere Lösung gefunden. Edit: Problem gelöst
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Maui

Sehr gut. Danke. Funktioniert.

Was mir grad noch auffällt (schwer zu beschreiben):
Beim scrollen zieht flex auf dem Handy (iOS) nicht nach. Also wenn ich scrolle, dann bewegt er sich nur so lange wie ich aktiv scrolle. Bei f18 zb da zieht er nach bis ich stoppe.
So ist ein schnelles scrollen möglich.
Auch hier im Forum geht das, ich glaube auch das es üblich ist.

Gruß
Maui

binford6000

Zitat von: Maui am 01 Juli 2019, 22:30:15
Sehr gut. Danke. Funktioniert.

Was mir grad noch auffällt (schwer zu beschreiben):
Beim scrollen zieht flex auf dem Handy (iOS) nicht nach. Also wenn ich scrolle, dann bewegt er sich nur so lange wie ich aktiv scrolle. Bei f18 zb da zieht er nach bis ich stoppe.
So ist ein schnelles scrollen möglich.
Auch hier im Forum geht das, ich glaube auch das es üblich ist.

Gruß
Maui

Den Effekt habe ich auch bemerkt   :o
VG Sebastian

xanker

Zitat von: Maui am 01 Juli 2019, 22:30:15
Beim scrollen zieht flex auf dem Handy (iOS) nicht nach. Also wenn ich scrolle, dann bewegt er sich nur so lange wie ich aktiv scrolle. Bei f18 zb da zieht er nach bis ich stoppe. So ist ein schnelles scrollen möglich.
Zitat von: binford6000 am 01 Juli 2019, 22:38:50
Den Effekt habe ich auch bemerkt   :o
Also ich kann mir erklären warum das so ist: Es ist nicht die ganze Weboberfläche scrollbar, sondern nur das <div> welches den Haupt-Content enthält. Ich habe dies so implementiert, weil sonst die Scrollbar unterhalb bzw. neben der Commandbar sichtbar wäre. Ich verstehe allerdings nicht, warum Safari bei scrollbaren <div> nicht das "normale" Scrollverhalten implementiert hat, denn mit allen anderen Browsern (Chrome,Firefox,IE) funktioniert das einwandfrei. Ich würde das ungern abändern, aber ich schaue mal ob ich eine Lösung finde.

Es gibt übrigens ein neues Update und ab jetzt per Repository (siehe 1. Post).
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Maui

Auch mit Firefox habe ich den gleichen Effekt.

xanker

#55
Zitat von: Maui am 02 Juli 2019, 13:03:42
Auch mit Firefox habe ich den gleichen Effekt.
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.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

andy19850

Gelungene Arbeit!
Sind die Icons (devstate) kleiner als im Standard oder habe ich eine Einstellung übersehen? Die cmd Icons sind "normal".

Bei meinem iPhone überlebt das Menü einen Wechsel Landscape/Protrait nicht. Drehe ich in den Landscape Modus wird das Menü richtigerweise abgeschnitten. Eine Drehung zurück, bleibt es abgeschnitten bis ich Safari hart beende.

xanker

#57
Zitat von: andy19850 am 02 Juli 2019, 14:07:28
Gelungene Arbeit!
Vielen Dank  :)

Zitat von: andy19850 am 02 Juli 2019, 14:07:28
Sind die Icons (devstate) kleiner als im Standard oder habe ich eine Einstellung übersehen? Die cmd Icons sind "normal".
Ja, die sind kleiner. Ich habe bisher noch keine perfekte Lösung gefunden. Zum einen will ich die Icons nicht zu groß haben (auf jeden Fall nicht so groß wie beim Standard Style, da die mMn viel zu groß sind), auf der anderen Seite müssen sie natürlich groß genug sein um sie "sicher" anklicken zu können. Aktuell sind Device-Icon und Devstate-Icon gleich "klein" alle anderen sind 50% größer. Ich hätte gerne eine konstante Höhe von allen Zeilen, aber es sollte durch die Icons nicht zu viel "Spielraum" entstehen. Ich werde wohl eine Einstellung hinzufügen um die Icon-Größe selbst zu bestimmen. Für andere Vorschläge bin ich aber offen! Aktuell gibt es ja schon die Möglichkeit die komplette Seite zu skalieren.

Zitat von: andy19850 am 02 Juli 2019, 14:07:28
Bei meinem iPhone überlebt das Menü einen Wechsel Landscape/Protrait nicht. Drehe ich in den Landscape Modus wird das Menü richtigerweise abgeschnitten. Eine Drehung zurück, bleibt es abgeschnitten bis ich Safari hart beende.
Interessant, das höre ich jetzt zum ersten Mal. Was meinst du mit "abgeschnitten"? Könntest du vielleicht ein Screenshot machen? Ich habe kein Apple Gerät zum Testen. Kann der Effekt von anderen iPhone Nutzern bestätigt werden?
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

DeeSPe

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

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

Ich möchte Deine Arbeit absolut nicht schlecht machen, aber wirklich schön und modern finde ich diesen Style auch nicht.
Was m.E. für schön und modern fehlt sind:

  • 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)

Das wären dann erst einmal meine Anregungen.
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.

Gruß
Dan
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Als kleine Unterstützung für meine Programmierungen könnt ihr mir gerne einen Kaffee spendieren: https://buymeacoff.ee/DeeSPe

DeeSPe

Ach ja noch was:
in der Detailansicht fehlt hinter get, set und attr der Name des Devices (.downText).

Gruß
Dan
MAINTAINER: 22_HOMEMODE, 98_Hyperion, 98_FileLogConvert, 98_serviced

Als kleine Unterstützung für meine Programmierungen könnt ihr mir gerne einen Kaffee spendieren: https://buymeacoff.ee/DeeSPe