FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: andreas_r am 02 Februar 2017, 10:16:01

Titel: mobile Seite und Standardseite in einem
Beitrag von: andreas_r am 02 Februar 2017, 10:16:01
Hallo zusammen,

ich habe mir lange Gedanken gemacht, wie man sinnvollerweise eine Variante von FTUI betreiben könnte, die mobil (also auf dem Handy) und am Ipad oder auch PC verwendet werden kann. Dabei ist mir das Framework Masonry aufgefallen.
http://masonry.desandro.com/ (http://masonry.desandro.com/)
Auf der Seite könnt ihr Euch ein Bild machen, wie das im Prinzip aussieht.

Der Vorteil von diesem Framework ist, dass die einzelnen Bestandteile der Seite immer auf die aktuelle Bildschirmgröße automatisch verschiebt. Es funktioniert also so ähnlich wie das Gridster Framework, aber die einzelnen Grids verschieben sich so, dass es immer optimal auf das jeweilige Device passt.

Ich habe Euch hier mal einige Screenshot gepostet und falls Interesse besteht, würde ich auch noch Beispielcode reinstellen.

Viele Grüße,
Andreas
Titel: Antw:mobile Seite und Standardseite in einem
Beitrag von: harald654 am 06 Februar 2017, 19:43:52
sieht gut aus,
ich würde mich über ein Beispielcode freuen :)

Gruß,
H.
Titel: Antw:mobile Seite und Standardseite in einem
Beitrag von: andreas_r am 06 Februar 2017, 21:11:40
Hallo Harald,

im Anhang findest Du ein Beispiel, so ähnlich wie die kurze Seite in meinem Beispiel. Sollte funktionieren, wenn Du die Dateien in Deinen tablet Ordner mit integrierst.

Viele Grüße,
Andreas
Titel: Antw:mobile Seite und Standardseite in einem
Beitrag von: harald654 am 09 Februar 2017, 01:46:24
Danke :)
Titel: Antw:mobile Seite und Standardseite in einem
Beitrag von: steffen83 am 09 Februar 2017, 11:45:00
Hallo Andreas,

ich habe es mal getestet aber bei mir verschiebt sich nichts dadurch.
Gruß
Steffen

Korrektur: Hatte die Einstellung auf "Desktop-Version anfordern" gehabt. Läuft.
Titel: Antw:mobile Seite und Standardseite in einem
Beitrag von: setstate am 09 Februar 2017, 12:07:46
Wie sieht das allgemeine Interesse aus? Sollte man Masonry anstatt Gridster im Project benutzen? Oder beides inkludieren und in der Doku beschreiben? Oder beschreiben, wie man sich das optimal installiert?
Welches Basis Layout Framework man benutzt, ist ja frei. Man kann auch Bootstrap problemlos verlinken und dessen Gridsystem nutzen.
Titel: Antw:mobile Seite und Standardseite in einem
Beitrag von: n4rrOx am 10 Februar 2017, 12:53:37
@setstate

Framework 7  ;D ;D
https://framework7.io/examples/tab-bar/ (https://framework7.io/examples/tab-bar/)
Titel: Antw:mobile Seite und Standardseite in einem
Beitrag von: setstate am 10 Februar 2017, 12:57:06
Hatte ich das nicht gestern erst angesprochen  :D
Titel: Antw:mobile Seite und Standardseite in einem
Beitrag von: Rudy am 10 Februar 2017, 16:08:05
Gridster zu ersetzen halte ich für schwierig, weil offensichtlich die Meisten (zumindest deuten die hier veröffentlichen Code-Beispiele daraufhin) das hier einsetzen. Das dürfte deutlich größere Umbaurarbeiten als jetzt mit der 2.5er Version bedeuten  ;).

Auf der anderen Seite fände ich es interessant, wenn man problemlos sein eigenes Wunschframework einsetzen könnte. Ich persönlich fände z.B. Foundation (http://foundation.zurb.com/) interessant. Zu viele integrierte Frameworks würde aber den Wartungsaufwand wieder deutlich erhöhen. Daher folgende Idee: Es werden out of the box einige wenige Gestaltungskonzepte mitgeliefert und in der neu entstehenden Doku (klasse Projekt übrigens) erläutert. Und sofern einige Nutzer weitere Frameworks erfolgreich eingesetzt haben können sie das Vorgehen für interessierte als "Anhang" zur Doku im Wiki vorstellen.

Ich Problem mit der aktuellen FTUI-Version und dem Einsatz eines externen Framework sehe ich noch in der fhem-tablet-ui.css. Darin sind neben den für die Wigdets wichtigen Angaben auch die die gesamte Farbdarstellung und alle bisherigen Layout-Klassen (Gridster, Flexbox, ...) enthalten. Besser wäre hier vielleicht eine Trennung in mehrere css-Dateien. Dann bräuchte man bspw. je nach Bedarf nur Gridster- oder Flexbox-Klassen einbinden. Außerdem würden aktuell vorhandenen Layout-Klassen nicht mit denen neuer externer Frameworks kollidieren. Würde ich z.B. das gesamte Layout mit besagtem Foundation machen wollen und das dortige Flexbox-Konzept einbinden wollen, so würde dies mit den schon vorhandenen Klassen kollidieren. Und die fhem-tablet-ui.css einfach nicht einzubinden würde seit Version 2.5, zumindest sofern ich das verstanden habe, nicht mehr funktionieren, da dies dann automatisch passieren würde.
Titel: Antw:mobile Seite und Standardseite in einem
Beitrag von: setstate am 10 Februar 2017, 16:15:51
Guter Punkt Rudy,

Ich behalte das im Hinterkopf bei meinen stetigen Umbauten und werde das sukzessive trennen.